/**
 * BENJI — Design System & Stylesheet
 * "O Observatório das Maravilhas com Alma de Atelier Tátil"
 * 
 * Features:
 * - Bespoke typography: Fredoka (friendly headers), Lexend (high readability reading)
 * - Soft 2.5D / Claymorphic elevation & warmth
 * - Full High Contrast & Reduced Motion accessibility modes
 * - Right-to-Left (RTL) Arabic typography support
 * - Mobile-first responsive layouts with comfortable touch targets (min 44px)
 */

/* ================= CSS VARIABLES & DESIGN TOKENS ================= */
:root {
  --font-display: 'Fredoka', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Lexend', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-arabic: 'Noto Sans Arabic', 'Lexend', sans-serif;
  --font-japanese: 'Noto Sans JP', 'Lexend', sans-serif;

  /* iOS Safe Area Insets */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);

  /* 3. Paleta e Sistema Cromático (Bases) */
  --bg-canvas: #FFF8EC;           /* Marfim quente */
  --bg-canvas-subtle: #FAF2E3;
  --bg-sand: #F2E3CC;             /* Areia clara */
  --bg-sky: #EAF5FB;              /* Azul muito claro */
  --bg-surface: #FFFFFF;          /* Cartão de jogo puro */
  --bg-surface-warm: #FFFDF9;     /* Papel de livro de aventura */

  /* Texto Principal e de Apoio */
  --color-text-main: #18364B;     /* Azul-marinho principal (> 11:1 contraste) */
  --color-text-muted: #3D5A6E;    /* Azul ardósia suave (> 5.5:1 contraste) */
  --color-text-subtle: #637F94;   /* Apoio discreto (> 4.5:1 contraste) */

  /* Cores Principais */
  --color-primary: #1675A5;       /* Azul Oceano */
  --color-primary-dark: #0E5377;
  --color-primary-light: #E0F0F8;
  --color-turquoise: #22A8AD;
  --color-nature: #438B59;        /* Verde Natureza */
  --color-nature-light: #E5F3EB;

  /* Cores de Acento */
  --color-accent: #F5C451;        /* Amarelo Dourado */
  --color-accent-dark: #C9961E;
  --color-accent-light: #FEF6E0;
  --accent-coral: #ED7865;        /* Coral Aventura */
  --accent-coral-soft: #FCECE9;
  --accent-orange: #E99842;       /* Laranja Aventura */

  /* Cores de Apoio */
  --support-wood: #8B6248;        /* Castanho Madeira */
  --support-twilight: #334F78;    /* Azul Crepúsculo */
  --support-twilight-light: #EDF3F9;

  /* Semânticas de Estado */
  --color-success: #438B59;       /* Verde Natureza Acerto */
  --color-success-light: #E5F3EB;
  --color-danger: #ED7865;        /* Coral Encorajamento */
  --color-danger-light: #FCECE9;

  /* Bordas e Materiais */
  --color-border: #E5D6C1;        /* Areia suave */
  --border-tactile: #D5C2A5;      /* Relevo táctil */
  --border-depth: #BFA786;        /* Linha de profundidade 3D */

  /* Raios de Canto Arredondados com Volume */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Dual-Depth Tactile Shadows & Storybook Materials */
  --shadow-sm: 0 2px 0 var(--border-depth), 0 3px 8px rgba(24, 54, 75, 0.05);
  --shadow-md: 0 4px 0 var(--border-depth), 0 8px 20px -2px rgba(24, 54, 75, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --shadow-lg: 0 6px 0 var(--border-depth), 0 16px 36px -4px rgba(24, 54, 75, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --shadow-tactile-press: 0 1px 0 var(--border-depth), 0 2px 4px rgba(24, 54, 75, 0.08), inset 0 1px 2px rgba(0, 0, 0, 0.06);

  /* Card Sheens & Storybook Finishes */
  --texture-card-bg: linear-gradient(180deg, #FFFFFF 0%, #FAF4E8 100%);
  --texture-card-border: 1.5px solid var(--border-tactile);
  --texture-card-shadow: 0 4px 0 var(--border-depth), 0 8px 24px -4px rgba(24, 54, 75, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --texture-card-hover: 0 6px 0 var(--border-depth), 0 18px 38px -6px rgba(22, 117, 165, 0.16), inset 0 1px 0 #FFFFFF;

  --transition-normal: 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.16s ease-out;
}

/* ================= HIGH CONTRAST MODE ================= */
body.high-contrast {
  --color-primary: #0A4363;
  --color-primary-dark: #052639;
  --color-primary-light: #CCE8F6;
  --color-accent: #8A5F00;
  --bg-canvas: #FFFFFF;
  --bg-surface: #FFFFFF;
  --bg-surface-warm: #FFFFFF;
  --color-text-main: #000000;
  --color-text-muted: #111111;
  --color-border: #000000;
  --border-tactile: #000000;
  --border-depth: #000000;
}

/* ================= REDUCED MOTION MODE ================= */
body.reduced-motion *,
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ================= BASE RESET & ACCESSIBILITY ================= */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
  overflow-x: clip;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-canvas);
  background-image: 
    radial-gradient(circle at 12% 10%, rgba(245, 196, 81, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 88% 18%, rgba(22, 117, 165, 0.07) 0%, transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(67, 139, 89, 0.05) 0%, transparent 50%),
    linear-gradient(180deg, #FFF8EC 0%, #FAF2E3 50%, #F5ECDA 100%);
  background-attachment: fixed;
  color: var(--color-text-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  position: relative;
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
}

.skip-link {
  position: absolute;
  top: -120px;
  left: 10px;
  background: var(--color-primary-dark);
  color: #FFFFFF;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  z-index: 9999;
  text-decoration: none;
  font-weight: 600;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 10px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.container {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ================= HEADER & APP BAR (SLICK TEXTURED DOCK) ================= */
.app-header {
  background: rgba(255, 248, 236, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 2px solid var(--border-tactile);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 4px 18px -2px rgba(24, 54, 75, 0.07);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.brand-group {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.brand-logo {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.logo-text {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--support-twilight) 55%, var(--accent-orange) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 1px rgba(245, 196, 81, 0.3));
}

.logo-subtext {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.brand-motto {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  display: flex;
  gap: 5px;
}

.motto-dynamic {
  font-weight: 700;
  color: var(--color-primary-dark);
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Pills & Buttons with Tactile 3D Depth */
.btn, .btn-pill, .select-pill, .btn-icon {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--border-tactile);
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF4E8 100%);
  color: var(--color-text-main);
  border-radius: var(--radius-full);
  padding: 8px 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  box-shadow: 0 3px 0 var(--border-depth), 0 4px 10px rgba(24, 54, 75, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.btn:hover, .btn-pill:hover, .btn-icon:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  box-shadow: 0 5px 0 var(--border-depth), 0 8px 16px rgba(22, 117, 165, 0.15), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.btn:active, .btn-pill:active, .btn-icon:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--border-depth), 0 2px 4px rgba(24, 54, 75, 0.08), inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

.btn:focus-visible, .btn-pill:focus-visible, .select-pill:focus-visible, .btn-icon:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.btn-primary {
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #FFFFFF;
  border-color: var(--color-primary-dark);
  box-shadow: 0 4px 0 #0C4360, 0 6px 14px rgba(22, 117, 165, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  font-weight: 700;
}

.btn-primary:hover {
  background: linear-gradient(180deg, #1C82B5 0%, var(--color-primary-dark) 100%);
  border-color: #0A3952;
  box-shadow: 0 5px 0 #0A3952, 0 8px 18px rgba(22, 117, 165, 0.35);
}

.btn-primary:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #0A3952, 0 2px 4px rgba(22, 117, 165, 0.2);
}

.btn-outline {
  background: #FFFFFF;
  border: 2px solid var(--color-primary);
  color: var(--color-primary-dark);
  font-weight: 700;
}

.btn-outline:hover {
  background: var(--color-primary-light);
}

.btn-outline-danger {
  border: 2px solid var(--color-danger);
  color: var(--color-danger);
  background: #FFFFFF;
}

.btn-outline-danger:hover {
  background: var(--color-danger-light);
}

.btn-passport {
  background: linear-gradient(180deg, #334F78 0%, #203554 100%);
  color: #FFFFFF;
  border-color: #18283E;
  box-shadow: 0 3px 0 #121F30, 0 4px 10px rgba(51, 79, 120, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  font-weight: 700;
}

.btn-passport:hover {
  background: linear-gradient(180deg, #3D5E8F 0%, #253D61 100%);
  border-color: #121F30;
  box-shadow: 0 5px 0 #121F30, 0 8px 16px rgba(51, 79, 120, 0.3);
}

.btn-passport:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #121F30, 0 2px 4px rgba(51, 79, 120, 0.2);
}

.btn-age {
  background: linear-gradient(180deg, #FFFDF7 0%, var(--color-accent-light) 100%);
  border-color: var(--color-accent);
  color: #7A5300;
  box-shadow: 0 3px 0 #C9961E, 0 4px 8px rgba(245, 196, 81, 0.2);
  font-weight: 700;
}

.btn-age:hover {
  border-color: var(--color-accent-dark);
  box-shadow: 0 5px 0 #A87A14, 0 6px 12px rgba(245, 196, 81, 0.3);
}

.accessibility-group {
  display: flex;
  gap: 4px;
  background: rgba(242, 227, 204, 0.6);
  padding: 4px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-tactile);
}

.btn-icon {
  padding: 6px 12px;
  min-height: 38px;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  font-size: 1.15rem;
  border-radius: var(--radius-full);
}

.btn-icon:hover {
  background: #FFFFFF;
  border-color: var(--border-tactile);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn-icon.active {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

/* ================= 9 THEMES BAR ================= */
.themes-nav-bar {
  background: rgba(255, 248, 236, 0.95);
  border-bottom: 2px solid var(--border-tactile);
  padding: 10px 0;
  overflow-x: auto;
}

.themes-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 4px 6px 6px 6px;
}

.theme-nav-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border-tactile);
  background: var(--bg-surface-warm);
  color: var(--color-text-main);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  min-height: 44px;
  box-shadow: 0 3px 0 var(--border-depth), 0 3px 6px rgba(24, 54, 75, 0.04);
  transition: all var(--transition-fast);
  position: relative;
}

.theme-nav-btn:hover {
  background: #FFFFFF;
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 5px 0 var(--border-depth), 0 6px 12px rgba(22, 117, 165, 0.15);
}

.theme-nav-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--border-depth), 0 2px 4px rgba(24, 54, 75, 0.08);
}

.theme-nav-btn.active {
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-color: var(--color-primary-dark);
  color: #FFFFFF;
  box-shadow: 0 3px 0 #0C4360, 0 6px 14px rgba(22, 117, 165, 0.3);
}

.theme-nav-btn.featured-theme {
  background: linear-gradient(180deg, #FFF9EA 0%, var(--color-accent-light) 100%);
  border-color: var(--color-accent);
  color: #7A5300;
}

.theme-nav-btn.featured-theme.active {
  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  border-color: var(--color-accent-dark);
  color: #4A3200;
  box-shadow: 0 3px 0 #8A5F00, 0 6px 14px rgba(245, 196, 81, 0.35);
}

.sparkle-badge {
  background: var(--accent-coral);
  color: #FFFFFF;
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-left: 2px;
}

/* ================= 3 ARTICULATED TABS ================= */
.components-tabs-bar {
  background: rgba(242, 227, 204, 0.35);
  border-bottom: 2px solid var(--border-tactile);
  padding: 10px 0 8px 0;
}

.tabs-inner {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.tab-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  border-radius: var(--radius-full);
  border: 2px solid var(--border-tactile);
  background: #FFFFFF;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text-muted);
  cursor: pointer;
  min-height: 48px;
  box-shadow: 0 3px 0 var(--border-depth), 0 4px 8px rgba(24, 54, 75, 0.05);
  transition: all var(--transition-fast);
}

.tab-nav-btn:hover {
  color: var(--color-primary-dark);
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 5px 0 var(--border-depth), 0 8px 14px rgba(22, 117, 165, 0.15);
}

.tab-nav-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--border-depth), 0 2px 4px rgba(24, 54, 75, 0.08);
}

.tab-nav-btn.active {
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-color: var(--color-primary-dark);
  color: #FFFFFF;
  box-shadow: 0 3px 0 #0C4360, 0 6px 14px rgba(22, 117, 165, 0.3);
}

/* ================= MAIN CONTENT VIEWS ================= */
.main-content-container {
  padding-top: 18px;
  padding-bottom: 120px; /* Space for Benji dock */
}

.section-banner {
  background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}

.section-banner h2 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-text-main);
  margin-bottom: 6px;
}

.section-banner p {
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

.section-subtitle {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  margin: 32px 0 16px 0;
  color: var(--color-text-main);
}

/* ================= GEOGRAPHY & INTERACTIVE MAP ================= */
.interactive-map-wrapper {
  background: #FFFFFF;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-md);
  margin-bottom: 28px;
}

.world-map-svg-container {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
}

.world-map-svg-container.view-all .country-shape {
  cursor: zoom-in;
}

.world-map-svg-container.view-zoomed .country-shape {
  cursor: pointer;
}

.world-map-svg {
  width: 100%;
  height: 100%;
  display: block;
  transition: all 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

/* SVG Leader lines overlay */
.map-leader-lines-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.pin-leader-line {
  stroke: #2563EB;
  stroke-width: 0.32;
  stroke-dasharray: 0.8, 0.8;
  stroke-linecap: round;
  opacity: 0.85;
  transition: all var(--transition-normal);
}

.pin-anchor-circle {
  fill: #2563EB;
  stroke: #FFFFFF;
  stroke-width: 0.28;
  transition: all var(--transition-normal);
  filter: drop-shadow(0 0 1px rgba(37, 99, 235, 0.5));
}

.pin-leader-group.highlighted .pin-leader-line {
  stroke: #D97706;
  stroke-width: 0.65;
  stroke-dasharray: none;
  opacity: 1;
}

.pin-leader-group.highlighted .pin-anchor-circle {
  fill: #F59E0B;
  stroke: #78350F;
  stroke-width: 0.35;
  r: 1.4;
}

.map-pins-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
}

.map-pin {
  position: absolute;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-primary);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
  transition: all var(--transition-normal);
  user-select: none;
}

.map-pin.auto-adjusted {
  background: rgba(255, 255, 255, 0.98);
}

.map-pin.has-leader {
  border-color: #2563EB;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.22);
}

.map-pin.highlighted,
.map-pin:hover,
.map-pin:focus {
  transform: translate(-50%, -50%) scale(1.15);
  border-color: var(--color-accent-dark);
  background: var(--color-accent-light);
  box-shadow: 0 6px 16px rgba(217, 119, 6, 0.35);
  z-index: 25;
}

.pin-flag {
  font-size: 1.2rem;
  line-height: 1;
}

/* Floating Zoom Reset Button */
.zoom-reset-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  color: var(--color-primary-dark);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.88rem;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
  cursor: pointer;
  transition: all var(--transition-normal);
  animation: pulseZoomResetBtn 3s infinite ease-in-out;
}

@keyframes pulseZoomResetBtn {
  0%, 100% {
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
  }
  50% {
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
    border-color: #1D4ED8;
  }
}

.zoom-reset-btn:hover {
  background: var(--color-primary);
  color: #FFFFFF;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 22px rgba(37, 99, 235, 0.5);
}

.zoom-reset-icon {
  font-size: 1.15rem;
}

.zoom-reset-badge {
  background: #EFF6FF;
  color: #1D4ED8;
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.zoom-reset-btn:hover .zoom-reset-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

/* Hint pill in world view */
.map-zoom-hint-pill {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  color: #1E293B;
  border: 1px solid #CBD5E1;
  border-radius: var(--radius-full);
  padding: 5px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.discovery-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

/* Card Image Illustration Box */
.card-image-box {
  width: calc(100% + 40px);
  margin: -20px -20px 14px -20px;
  height: 140px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  position: relative;
  background: #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-image-box svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.discovery-card:hover .card-image-box svg,
.timeline-card:hover .card-image-box svg,
.science-question-card:hover .card-image-box svg,
.scientist-card:hover .card-image-box svg,
.art-card:hover .card-image-box svg,
.composer-card:hover .card-image-box svg,
.animal-card:hover .card-image-box svg,
.legend-card:hover .card-image-box svg,
.lang-card:hover .card-image-box svg {
  transform: scale(1.06);
}

.timeline-card .card-image-box {
  margin: -20px -20px 14px -20px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Discovery Cards with Tactile Texture & Depth */
.discovery-card {
  background: var(--texture-card-bg);
  border: var(--texture-card-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--texture-card-shadow);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
  overflow: hidden;
  position: relative;
}

.discovery-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--texture-card-hover);
  border-color: var(--color-primary);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.card-flag {
  font-size: 2.2rem;
}

.card-header h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
}

.card-sub {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.card-badge-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.pill-tag {
  background: var(--color-bg-surface);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 500;
}

.card-curiosity {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text-main);
  background: var(--bg-canvas-subtle);
  border: 1.5px solid var(--border-tactile);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}

/* ================= LANGUAGES MODULE ================= */
.languages-module-view {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ================= LEVEL 1: MENU LÍNGUAS & DISTRIBUIÇÃO DE ESCOLHA ================= */
.lang-menu-view {
  display: flex;
  flex-direction: column;
  gap: 26px;
  animation: fadeIn 0.3s ease;
}

/* 4-Base-Language Interactive Selector Bar (PT, EN, ES, FR) — Discreet & Compact */
.lang-base-selector-bar {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 999px;
  padding: 5px 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  align-self: flex-end;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
}

.base-selector-info {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.base-selector-title-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.base-selector-icon {
  font-size: 0.9rem;
  opacity: 0.8;
}

.base-selector-title {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748B;
}

.base-selector-badge,
.base-selector-sub {
  display: none !important;
}

.base-selector-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.base-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #CBD5E1;
  background: rgba(248, 250, 252, 0.9);
  color: #475569;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
  transition: all 0.15s ease;
}

.base-lang-btn:hover {
  transform: translateY(-1px);
  border-color: #94A3B8;
  background: #FFFFFF;
  color: #0F172A;
}

.base-lang-btn.active {
  background: #0369A1;
  color: #FFFFFF;
  border-color: #075985;
  box-shadow: 0 1px 4px rgba(3, 105, 161, 0.22);
}

.base-lang-flag {
  font-size: 0.92rem;
  line-height: 1;
}

.base-lang-check {
  font-size: 0.68rem;
  font-weight: 900;
  opacity: 0.9;
}

@media (max-width: 768px) {
  .lang-base-selector-bar {
    padding: 5px 10px;
    border-radius: 14px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    align-self: center;
    margin-left: 0;
    width: 100%;
    box-sizing: border-box;
    gap: 6px;
  }
  .base-selector-info {
    flex: 0 0 auto;
    width: auto;
  }
  .base-selector-title {
    font-size: 0.74rem;
  }
  .base-selector-pills {
    justify-content: center;
    width: auto;
    gap: 4px;
  }
  .base-lang-btn {
    flex: 0 1 auto;
    justify-content: center;
    min-width: 0;
    padding: 4px 8px;
    font-size: 0.74rem;
    box-sizing: border-box;
  }
}

.lang-menu-hero {
  background: linear-gradient(135deg, #0C4360 0%, #1675A5 60%, #1A446C 100%);
  border: 2.5px solid var(--border-tactile);
  border-radius: var(--radius-xl);
  padding: 34px 40px;
  box-shadow: 0 8px 0 var(--border-depth), 0 20px 45px -10px rgba(24, 54, 75, 0.16);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  position: relative;
  overflow: hidden;
  color: #FFFFFF;
}

.lang-menu-hero::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.lang-menu-hero-left {
  position: relative;
  z-index: 1;
}

.lang-menu-hero-left h2 {
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 900;
  color: #FFFFFF;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.lang-menu-hero-left p {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.95);
  max-width: 680px;
  line-height: 1.55;
  margin-bottom: 16px;
}

.lang-menu-hero .badge-feature,
.lang-menu-hero .badge-active-lang {
  background: rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(6px);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.85rem;
}

.lang-menu-hero .stat-pill {
  background: rgba(255, 255, 255, 0.18);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
  backdrop-filter: blur(6px);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.85rem;
}

.lang-menu-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lang-filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #FFFFFF;
  border: 2px solid var(--border-tactile);
  border-radius: 22px;
  padding: 14px 20px;
  box-shadow: 0 4px 0 var(--border-depth);
}

.lang-region-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lang-region-tab {
  background: #F8FAFC;
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-text-main);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lang-region-tab:hover {
  transform: translateY(-2px);
  background: #FEF08A;
  border-color: #F59E0B;
}

.lang-region-tab.active {
  background: linear-gradient(180deg, #38BDF8 0%, #0284C7 100%);
  color: #FFFFFF;
  border-color: #0369A1;
  box-shadow: 0 3px 0 #075985;
}

.lang-search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #F1F5F9;
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-full);
  padding: 8px 18px;
  min-width: 260px;
  transition: all 0.2s ease;
}

.lang-search-box:focus-within {
  border-color: var(--color-primary);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

.lang-search-box input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.92rem;
  width: 100%;
  color: var(--color-text-main);
  font-family: inherit;
}

.lang-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.lang-choice-card {
  background: #FFFFFF;
  border: 2.5px solid var(--border-tactile);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 6px 0 var(--border-depth), 0 12px 24px rgba(24, 54, 75, 0.06);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
}

.lang-choice-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 0 var(--border-depth), 0 24px 36px rgba(24, 54, 75, 0.12);
  border-color: var(--color-primary);
}

.lang-choice-card-media {
  position: relative;
  height: 240px;
  overflow: hidden;
  background: #E2E8F0;
}

.lang-choice-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.lang-choice-card:hover .lang-choice-card-media img {
  transform: scale(1.06);
}

.lang-choice-flag-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border: 1.5px solid var(--border-tactile);
  border-radius: var(--radius-full);
  padding: 4px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1.25rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.lang-choice-country-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(15, 23, 42, 0.82);
  color: #FFFFFF;
  backdrop-filter: blur(8px);
  border-radius: var(--radius-full);
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.lang-choice-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
}

.lang-choice-card-titles {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.lang-choice-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--color-primary-dark);
}

.lang-choice-native {
  font-size: 0.86rem;
  font-weight: 700;
  color: #0284C7;
  background: #E0F2FE;
  padding: 2px 8px;
  border-radius: 8px;
}

.lang-choice-landmark {
  font-size: 0.84rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.35;
}

.lang-choice-desc {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lang-choice-greeting-preview {
  background: #FEF9C3;
  border: 1.5px dashed #F59E0B;
  border-radius: 12px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.84rem;
  color: #78350F;
  margin-top: 2px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
}

.lang-choice-greeting-preview:hover {
  background: #FEF08A;
  border-color: #D97706;
  border-style: solid;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}

.lang-choice-greeting-preview:active,
.lang-choice-greeting-preview.is-playing {
  transform: scale(0.97);
  background: #FDE047;
  border-color: #B45309;
  border-style: solid;
}

.btn-card-audio {
  background: #FFFFFF;
  border: 1px solid #F59E0B;
  border-radius: var(--radius-full);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: transform 0.15s ease, background-color 0.15s ease;
  font-size: 0.85rem;
}

.lang-choice-greeting-preview:hover .btn-card-audio {
  transform: scale(1.15);
  background: #FDE047;
}

.lang-choice-greeting-preview.is-playing .btn-card-audio {
  background: #F59E0B;
  color: #FFFFFF;
  transform: scale(1.22);
}

.lang-choice-action-btn {
  margin-top: auto;
  width: 100%;
  padding: 10px 16px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 800;
  border-radius: 14px;
  background: linear-gradient(180deg, #FEF08A 0%, #F59E0B 100%);
  color: #451A03;
  border: 2px solid #D97706;
  box-shadow: 0 3px 0 #92400E;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lang-choice-card:hover .lang-choice-action-btn {
  background: linear-gradient(180deg, #FDE047 0%, #D97706 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 0 #78350F;
}

/* ================= LEVEL 2: PÁGINA DA LÍNGUA ESPECÍFICA ================= */
.lang-page-view {
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: fadeIn 0.3s ease;
}

.lang-page-top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 18px;
  background: #FFFFFF;
  border: 2px solid var(--border-tactile);
  border-radius: 16px;
  box-shadow: 0 2px 0 var(--border-depth);
}

.lang-nav-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-back-to-menu {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #F1F5F9;
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-full);
  padding: 8px 18px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 0 var(--border-depth);
}

.btn-back-to-menu:hover {
  background: #E2E8F0;
  transform: translateX(-3px);
  border-color: #0284C7;
}

.btn-back-hub-subtle {
  background: #FFFFFF;
  color: var(--color-text-muted);
}

.btn-back-hub-subtle:hover {
  background: #F8FAFC;
  color: var(--color-primary-dark);
}

.lang-page-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.lang-page-breadcrumb strong {
  color: var(--color-primary-dark);
}

.lang-page-quick-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lang-page-quick-switcher label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.lang-page-quick-switcher select {
  padding: 6px 14px;
  border: 2px solid var(--border-tactile);
  border-radius: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.88rem;
  background: #FFFFFF;
  outline: none;
  cursor: pointer;
  color: var(--color-primary-dark);
}

/* ================= LANGUAGES MODULE BANNER & COCKPIT ================= */
.lang-hero-banner {
  background: linear-gradient(135deg, #FFFDF9 0%, #F0F9FF 50%, #FEF9C3 100%);
  color: var(--color-text-main);
  border-radius: var(--radius-xl);
  border: 2.5px solid var(--border-tactile);
  padding: 32px 36px;
  box-shadow: 0 8px 0 var(--border-depth), 0 20px 45px -10px rgba(24, 54, 75, 0.12);
  position: relative;
  overflow: hidden;
  margin-bottom: 28px;
}

.lang-hero-banner::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 480px;
  height: 280px;
  background: radial-gradient(circle at top right, rgba(56, 189, 248, 0.12) 0%, rgba(245, 196, 81, 0.12) 50%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}

.lang-banner-top {
  position: relative;
  z-index: 1;
  margin-bottom: 24px;
}

.lang-badge-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.badge-feature {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, #FEF08A 0%, #F59E0B 100%);
  color: #451A03;
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  border: 1px solid #CA8A04;
  box-shadow: 0 2px 0 #92400E, 0 3px 8px rgba(245, 158, 11, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-active-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  border: 1.5px solid #93C5FD;
  color: var(--color-primary-dark);
  font-size: 0.92rem;
  font-weight: 700;
  padding: 5px 16px;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 0 #BFDBFE;
}

.badge-active-lang strong {
  color: var(--color-primary);
}

.badge-native {
  color: #0284C7;
  font-weight: 600;
  margin-left: 4px;
}

.lang-hero-text h2 {
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 900;
  color: var(--color-primary-dark);
  margin-bottom: 8px;
  letter-spacing: -0.3px;
}

.lang-hero-text p {
  color: var(--color-text-muted);
  font-size: 1.08rem;
  line-height: 1.5;
  max-width: 860px;
  margin-bottom: 16px;
}

.lang-stats-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  border: 1.5px solid var(--border-tactile);
  color: var(--color-primary-dark);
  border-radius: var(--radius-full);
  padding: 6px 16px;
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: 0 2px 0 var(--border-depth);
}

.stat-icon {
  font-size: 1rem;
}

/* ================= LANGUAGE SELECTOR COCKPIT ================= */
.lang-selector-cockpit {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.97);
  border: 2px solid #E2E8F0;
  border-radius: 24px;
  padding: 24px 26px;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.12), 0 20px 40px rgba(0, 0, 0, 0.15);
  color: var(--color-text-main);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cockpit-title-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 2px solid #F1F5F9;
}

.cockpit-title-icon {
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #EFF6FF;
  border: 1.5px solid #BFDBFE;
  border-radius: 12px;
  box-shadow: 0 2px 0 #93C5FD;
}

.cockpit-title-text h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  margin-bottom: 2px;
}

.cockpit-title-text p {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* Language Selection Groups */
.lang-selection-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 18px;
  padding: 16px 18px;
}

.featured-group {
  background: linear-gradient(180deg, #FFFDF5 0%, #FEF9E7 100%);
  border: 2px solid #FDE68A;
  box-shadow: 0 3px 0 #F59E0B, 0 8px 18px rgba(245, 158, 11, 0.08);
}

.others-group {
  background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
  border: 2px solid #E2E8F0;
  box-shadow: 0 3px 0 #CBD5E1;
}

.group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.group-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.group-badge {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 800;
  color: #78350F;
  letter-spacing: 0.2px;
}

.others-group .group-badge {
  color: #1E293B;
}

.group-hint {
  font-size: 0.84rem;
  color: #92400E;
  font-weight: 500;
}

.others-group .group-hint {
  color: #64748B;
}

.group-count {
  font-size: 0.8rem;
  font-weight: 700;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  color: var(--color-text-muted);
  padding: 2px 10px;
  border-radius: var(--radius-full);
}

/* Row 1: Featured Languages Grid / Flex */
.lang-grid-featured {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Row 2: All Other Languages Grid / Flex */
.lang-grid-others {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px;
}

/* Language Buttons */
.lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  border: 2px solid #CBD5E1;
  background: #FFFFFF;
  color: var(--color-text-main);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 3px 0 #94A3B8, 0 2px 4px rgba(15, 23, 42, 0.05);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.2s ease;
  user-select: none;
}

.lang-pill-featured {
  padding: 10px 18px;
  font-size: 0.98rem;
  border-width: 2.5px;
  background: #FFFFFF;
}

.lang-pill:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  box-shadow: 0 5px 0 #0284C7, 0 6px 12px rgba(2, 132, 199, 0.18);
  color: var(--color-primary-dark);
}

.lang-pill:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #0284C7;
}

.lang-pill.active {
  background: linear-gradient(180deg, #FFFBEB 0%, #FEF08A 30%, #F59E0B 100%) !important;
  border-color: #B45309 !important;
  color: #451A03 !important;
  box-shadow: 0 4px 0 #78350F, 0 8px 18px rgba(245, 158, 11, 0.4) !important;
  transform: translateY(-1px);
}

.lang-flag {
  font-size: 1.35rem;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

.lang-name-block {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}

.lang-name {
  font-weight: 800;
}

.lang-native-sub {
  font-size: 0.74rem;
  font-weight: 600;
  opacity: 0.75;
}

.lang-selected-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #451A03;
  color: #FEF08A;
  font-size: 0.72rem;
  font-weight: 900;
  margin-left: 2px;
}

/* Config & Themes Bar */
.lang-config-bar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 6px;
  border-top: 1.5px solid #F1F5F9;
}

.config-row-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.config-control-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.control-label {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--color-text-main);
  margin-bottom: 4px;
  display: block;
}

.btn-group-toggle {
  display: inline-flex;
  background: #E2E8F0;
  padding: 4px;
  border-radius: var(--radius-full);
}

.toggle-btn {
  background: transparent;
  border: none;
  color: #475569;
  padding: 6px 14px;
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.toggle-btn.active {
  background: #FFFFFF;
  color: var(--color-primary-dark);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.1);
}

.btn-voice-speed {
  background: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  color: var(--color-text-main);
  border-radius: var(--radius-full);
  padding: 6px 14px;
  font-weight: 700;
  font-size: 0.88rem;
  box-shadow: 0 2px 0 #94A3B8;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-voice-speed:hover {
  background: var(--bg-sky);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.theme-filter-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.category-filter-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 2px 10px;
}

.cat-pill {
  background: #FFFFFF;
  color: var(--color-text-main);
  border: 2px solid var(--border-tactile);
  padding: 8px 18px;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 3px 0 var(--border-depth), 0 4px 10px rgba(24, 54, 75, 0.05);
  transition: all var(--transition-fast);
}

.cat-count-badge {
  background: #F1F5F9;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid #CBD5E1;
  transition: all var(--transition-fast);
}

.cat-pill:hover {
  background: var(--bg-sky);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 5px 0 var(--border-depth), 0 8px 16px rgba(22, 117, 165, 0.12);
}

.cat-pill.active {
  background: linear-gradient(180deg, #F59E0B 0%, #D97706 100%);
  border-color: #B45309;
  color: #FFFFFF;
  box-shadow: 0 4px 0 #92400E, 0 6px 14px rgba(245, 158, 11, 0.35);
  transform: translateY(-2px);
}

.cat-pill.active .cat-count-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.4);
}

.lang-pill-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

/* Pixar 3D Benji Country Showcase Card */
/* ================= GRAND PIXAR CULTURAL SHOWCASE BANNER ================= */
.lang-country-showcase-card {
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: 36px;
  background: radial-gradient(circle at 10% 20%, rgba(254, 243, 199, 0.45) 0%, #FFFFFF 40%, rgba(240, 249, 255, 0.5) 100%);
  border: 2.5px solid var(--border-tactile);
  border-radius: 28px;
  padding: 32px;
  margin-bottom: 30px;
  box-shadow: 0 10px 0 var(--border-depth), 0 24px 50px rgba(24, 54, 75, 0.08);
  align-items: start;
  position: relative;
  overflow: hidden;
}

@media (min-width: 1360px) {
  .lang-country-showcase-card {
    grid-template-columns: 500px 1fr;
    gap: 40px;
    padding: 36px;
  }
}

@media (max-width: 1024px) {
  .lang-country-showcase-card {
    grid-template-columns: 360px 1fr;
    gap: 24px;
    padding: 24px;
  }
}

@media (max-width: 768px) {
  .lang-country-showcase-card {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
  }
}

/* Left Stage: Mascot Character Portrait Frame & Audio Button */
.showcase-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: start;
  width: 420px;
  max-width: 100%;
  flex-shrink: 0;
}

@media (min-width: 1360px) {
  .showcase-visual {
    width: 460px;
  }
}

@media (max-width: 1024px) {
  .showcase-visual {
    width: 360px;
  }
}

@media (max-width: 768px) {
  .showcase-visual {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
  }
}

.showcase-img-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  border-radius: 28px;
  overflow: hidden;
  border: 2.5px solid var(--border-tactile);
  box-shadow: 0 12px 32px rgba(24, 54, 75, 0.16);
  background: radial-gradient(circle at center, #1E293B 0%, #0F172A 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.showcase-mascot-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.showcase-img-frame:hover .showcase-mascot-img {
  transform: scale(1.035);
}

/* Landmark Multi-Photo Travel Carousel in Language Showcase */
.showcase-landmarks-carousel {
  margin: 6px 0 2px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.landmarks-carousel-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: #1E293B;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.landmarks-thumbnails-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 8px 2px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}

.landmarks-thumbnails-row::-webkit-scrollbar {
  height: 6px;
}

.landmarks-thumbnails-row::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
}

.landmarks-thumbnails-row::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}

.landmark-thumb-btn {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 78px;
  background: #FFFFFF;
  border: 2px solid #E2E8F0;
  border-radius: 12px;
  padding: 4px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.landmark-thumb-btn img {
  width: 100%;
  height: 50px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  pointer-events: none;
}

.landmark-thumb-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #475569;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  display: block;
}

.landmark-thumb-btn:hover {
  transform: translateY(-2px);
  border-color: #38BDF8;
  box-shadow: 0 4px 10px rgba(56, 189, 248, 0.2);
}

.landmark-thumb-btn.active {
  border-color: #0284C7;
  background: #F0F9FF;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.25), 0 4px 10px rgba(2, 132, 199, 0.15);
}

.landmark-thumb-btn.active .landmark-thumb-label {
  color: #0284C7;
  font-weight: 800;
}

/* Tactile Country & Region Info Badge Placed Cleanly BELOW the photograph */
.showcase-country-tag-below {
  background: #FFFFFF;
  border: 2px solid var(--border-tactile);
  border-radius: 20px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 0 var(--border-depth), 0 8px 18px rgba(24, 54, 75, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.showcase-country-tag-below:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--border-depth), 0 12px 22px rgba(24, 54, 75, 0.12);
}

.country-tag-flag-col {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.showcase-country-tag-below .country-tag-flag {
  font-size: 2.6rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.country-tag-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.country-tag-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--color-primary-dark);
  letter-spacing: -0.2px;
  line-height: 1.2;
}

.country-tag-region {
  font-size: 0.86rem;
  font-weight: 700;
  color: #0284C7;
  letter-spacing: 0.3px;
}

.country-tag-landmark {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  line-height: 1.3;
  margin-top: 1px;
}

/* Large Tactile Audio Button */
.showcase-audio-btn-large {
  width: 100%;
  background: linear-gradient(180deg, #38BDF8 0%, #0284C7 100%);
  border: 2px solid #0369A1;
  border-radius: 18px;
  padding: 12px 18px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  box-shadow: 0 4px 0 #075985, 0 8px 18px rgba(2, 132, 199, 0.3);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
  text-align: left;
}

.showcase-audio-btn-large:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #075985, 0 12px 24px rgba(2, 132, 199, 0.4);
  background: linear-gradient(180deg, #0EA5E9 0%, #0369A1 100%);
}

.showcase-audio-btn-large:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #075985;
}

.showcase-audio-btn-large .audio-pulse-icon {
  font-size: 1.6rem;
  line-height: 1;
}

.audio-btn-labels {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.audio-subtext {
  font-size: 0.74rem;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #E0F2FE;
}

.audio-maintext {
  font-size: 1.05rem;
  font-family: var(--font-display);
  color: #FFFFFF;
  font-weight: 800;
}

/* Right Stage: Rich Narrative & Cultural Highlights */
.showcase-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.showcase-hero-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.showcase-tag-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.showcase-tag-pill {
  background: #EFF6FF;
  border: 1.5px solid #BFDBFE;
  color: #1D4ED8;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 0 #DBEAFE;
}

.showcase-tag-accent {
  background: #FEF3C7;
  border: 1.5px solid #FDE68A;
  color: #92400E;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 0 #FCD34D;
}

.showcase-main-title {
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 900;
  color: var(--color-text-main);
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

.lang-title-primary {
  color: var(--color-text-main);
}

.lang-title-native {
  font-size: 1.5rem;
  color: #0284C7;
  font-weight: 700;
}

.showcase-lead-desc {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}

/* 2-Card Discovery Matrix */
.showcase-matrix-deck {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 768px) {
  .showcase-matrix-deck {
    grid-template-columns: 1fr;
  }
}

.discovery-deck-card {
  background: #FFFFFF;
  border: 2px solid var(--border-tactile);
  border-radius: 20px;
  padding: 18px 20px;
  box-shadow: 0 4px 0 var(--border-depth), 0 8px 18px rgba(24, 54, 75, 0.05);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.deck-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.deck-icon {
  font-size: 1.4rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F0F9FF;
  border: 1.5px solid #BAE6FD;
  border-radius: 12px;
  flex-shrink: 0;
}

.cult-deck-card .deck-icon {
  background: #FEF3C7;
  border-color: #FDE68A;
}

.deck-titles {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.deck-eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--color-text-muted);
  letter-spacing: 0.5px;
}

.deck-titles h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--color-text-main);
}

.deck-desc {
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--color-text-main);
  margin: 0;
  flex-grow: 1;
}

.deck-feature-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 0.9rem;
  color: var(--color-text-main);
}

.deck-feature-pill .feature-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* Historical & Literary Significance Strip */
.showcase-signif-strip {
  background: linear-gradient(135deg, #FFFDF7 0%, #FEF9C3 100%);
  border: 2px solid #FCD34D;
  border-radius: 20px;
  padding: 16px 20px;
  box-shadow: 0 4px 0 #F59E0B, 0 8px 18px rgba(245, 158, 11, 0.12);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.signif-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #B45309;
  letter-spacing: 0.5px;
}

.signif-icon {
  font-size: 1.15rem;
}

.signif-text {
  font-size: 0.95rem;
  line-height: 1.55;
  color: #451A03;
  margin: 0;
  font-weight: 500;
}

/* Benji's Personal Traveler Note */
.showcase-benji-quote {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  border: 2px solid #93C5FD;
  border-radius: 20px;
  padding: 16px 20px;
  box-shadow: 0 4px 0 #3B82F6, 0 8px 18px rgba(59, 130, 246, 0.14);
  display: flex;
  align-items: center;
  gap: 16px;
}

.quote-avatar-bubble {
  font-size: 1.9rem;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: #FFFFFF;
  border: 2px solid #93C5FD;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(59, 130, 246, 0.25);
}

.quote-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.quote-label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  font-weight: 800;
  color: #1E40AF;
  letter-spacing: 0.5px;
}

.quote-text {
  font-size: 0.96rem;
  line-height: 1.5;
  color: #1E3A8A;
  font-weight: 600;
  font-style: italic;
  margin: 0;
}

/* ================= GEOGRAPHIC ATLAS: COUNTRY MAP & PIXAR WORLD MAP ================= */
.lang-geographic-atlas-card {
  background: radial-gradient(circle at 10% 20%, rgba(224, 242, 254, 0.45) 0%, #FFFFFF 40%, rgba(254, 243, 199, 0.4) 100%);
  border: 2.5px solid var(--border-tactile);
  border-radius: 28px;
  padding: 28px 32px;
  margin-bottom: 30px;
  box-shadow: 0 8px 0 var(--border-depth), 0 20px 40px rgba(24, 54, 75, 0.06);
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px) {
  .lang-geographic-atlas-card {
    padding: 20px;
  }
}

.atlas-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 14px;
}

.atlas-title-block {
  display: flex;
  align-items: center;
  gap: 14px;
}

.atlas-icon {
  font-size: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  background: #EFF6FF;
  border: 2px solid #BAE6FD;
  border-radius: 16px;
  box-shadow: 0 3px 0 #93C5FD;
  flex-shrink: 0;
}

.atlas-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--color-primary-dark);
  margin: 0 0 4px;
  letter-spacing: -0.2px;
}

.atlas-subtitle {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.4;
}

.atlas-badge-highlight {
  display: inline-flex;
  align-items: center;
  background: #FEF3C7;
  border: 1.5px solid #F59E0B;
  color: #92400E;
  font-size: 0.92rem;
  font-weight: 800;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 0 #D97706;
}

.lang-maps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

@media (max-width: 1024px) {
  .lang-maps-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.map-box-card {
  background: #FFFFFF;
  border: 2px solid #E2E8F0;
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 4px 14px rgba(24, 54, 75, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  min-height: 520px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.map-box-card:hover {
  box-shadow: 0 8px 24px rgba(24, 54, 75, 0.09);
}

.map-box-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1.5px solid #F1F5F9;
}

.map-box-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.map-box-title-wrap {
  min-width: 0;
}

.map-box-header h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-box-sub {
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748B;
  display: block;
}

/* Country Map Viewport (High-Res 1024x1024) */
.country-map-viewport {
  height: 340px;
  background: radial-gradient(circle at center, #F0F9FF 0%, #E0F2FE 100%);
  border-radius: 18px;
  border: 1.5px solid #BAE6FD;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.04);
}

@media (max-width: 640px) {
  .country-map-viewport {
    height: 280px;
  }
}

.lang-country-svg {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.country-map-viewport:hover .lang-country-svg {
  transform: scale(1.03);
}

/* Nautical Sea / Boundary Text */
.nautical-sea-label {
  font-family: var(--font-body, 'Lexend'), sans-serif;
  font-size: 15px;
  font-weight: 800;
  fill: #0284C7;
  letter-spacing: 1.5px;
  opacity: 0.82;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.8));
}

/* Glowing Beacon Pulse */
.beacon-pulse {
  animation: beaconPulseAnim 2s infinite ease-out;
  transform-origin: center;
}

@keyframes beaconPulseAnim {
  0% {
    r: 8px;
    opacity: 0.75;
  }
  100% {
    r: 26px;
    opacity: 0;
  }
}

.country-capital-marker {
  cursor: default;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Compass Rose */
.compass-rose {
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
}

.country-map-landmark-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 5;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border: 1.5px solid #BAE6FD;
  border-radius: 9999px;
  padding: 5px 14px;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 24px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Country Metadata Structured Grid */
.country-card-footer {
  padding-top: 10px;
  border-top: 1.5px solid #F1F5F9;
}

.country-meta-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.meta-label {
  font-weight: 800;
  color: var(--color-primary-dark);
  font-size: 0.8rem;
  white-space: nowrap;
}

.meta-val {
  color: var(--color-text);
  text-align: right;
  line-height: 1.35;
}

.meta-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.76rem;
  font-weight: 800;
  background: #F1F5F9;
  border: 1px solid #CBD5E1;
  color: #334155;
  white-space: nowrap;
}

.meta-chip.primary-chip {
  background: #FEF3C7;
  border-color: #F59E0B;
  color: #92400E;
}

/* Pixar World Map Viewport */
.world-pixar-viewport {
  height: 340px;
  border-radius: 18px;
  border: 1.5px solid #BAE6FD;
  overflow: hidden;
  background: #BAE6FD;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.06);
}

@media (max-width: 640px) {
  .world-pixar-viewport {
    height: 280px;
  }
}

.world-pixar-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.lang-country-spoken {
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.65));
}

.lang-country-spoken:hover,
.lang-country-spoken.country-highlighted {
  fill: #EF4444 !important;
  stroke: #991B1B !important;
  stroke-width: 2.5px !important;
  filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.9)) !important;
}

.lang-country-primary {
  animation: pixarGoldPulse 3s infinite ease-in-out;
}

@keyframes pixarGoldPulse {
  0%, 100% {
    filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.65));
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.95));
  }
}

.world-spoken-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.spoken-legend-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.spoken-legend-label {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--color-primary-dark);
}

.spoken-legend-hint {
  font-size: 0.74rem;
  font-weight: 600;
  color: #64748B;
  font-style: italic;
}

.spoken-pills-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 120px;
  overflow-y: auto;
  padding: 2px;
}

.spoken-country-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FEF3C7;
  border: 1.5px solid #F59E0B;
  border-radius: var(--radius-full);
  padding: 5px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #92400E;
  box-shadow: 0 2px 0 #D97706;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  user-select: none;
}

.spoken-country-pill:hover,
.spoken-country-pill.pill-hovered {
  transform: translateY(-2px);
  background: #FDE68A;
  box-shadow: 0 4px 0 #D97706;
  border-color: #B45309;
}

.spoken-country-pill.primary-pill {
  background: #F59E0B;
  color: #FFFFFF;
  border-color: #B45309;
  box-shadow: 0 2px 0 #78350F;
}

.spoken-country-pill.primary-pill:hover,
.spoken-country-pill.primary-pill.pill-hovered {
  background: #D97706;
  box-shadow: 0 4px 0 #78350F;
}

.spoken-country-pill .pill-flag {
  font-size: 1.15rem;
  line-height: 1;
}

.spoken-country-pill .pill-crown {
  font-size: 0.72rem;
  background: rgba(255, 255, 255, 0.3);
  padding: 1px 6px;
  border-radius: var(--radius-full);
  margin-left: 2px;
}

.map-fallback-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
}

.fallback-flag {
  font-size: 3.5rem;
}

.fallback-text {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--color-primary-dark);
}

.lang-native-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-left: 4px;
}

.lang-native-sub {
  font-size: 0.72rem;
  opacity: 0.85;
  margin-left: 4px;
  font-weight: 600;
}

.lang-count-badge {
  background: #EBF8FF;
  color: #0369A1;
  border: 1px solid #BAE6FD;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.lang-selector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

/* Language View Mode Tabs (Explore vs Practice) */
.lang-view-navigation {
  margin: 24px 0 18px 0;
  display: flex;
  justify-content: center;
}

.lang-view-tabs {
  display: inline-flex;
  background: #FFFFFF;
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-full);
  padding: 4px;
  gap: 6px;
  box-shadow: 0 3px 0 var(--border-depth);
}

.lang-view-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  padding: 10px 20px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.lang-view-tab.active {
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(14, 165, 233, 0.35);
}

.score-badge {
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FDE68A;
  font-size: 0.75rem;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  margin-left: 4px;
}

/* Interactive Practice / Quiz View */
.lang-practice-view {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.practice-side-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.practice-main-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.practice-benji-card {
  background: #FFFFFF;
  border: 2.5px solid var(--border-tactile);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 0 5px 0 var(--border-depth), 0 12px 24px rgba(24, 54, 75, 0.07);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  transition: all 0.25s ease;
}

.practice-benji-card[data-benji-reaction="thinking"] {
  border-color: #BAE6FD;
  box-shadow: 0 5px 0 #7DD3FC, 0 12px 24px rgba(2, 132, 199, 0.08);
}

.practice-benji-card[data-benji-reaction="happy"] {
  background: linear-gradient(180deg, #FFFFFF 0%, #F0FDF4 100%);
  border-color: #22C55E;
  box-shadow: 0 5px 0 #16A34A, 0 12px 28px rgba(22, 163, 74, 0.16);
}

.practice-benji-card[data-benji-reaction="try-again"] {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFBEB 100%);
  border-color: #F59E0B;
  box-shadow: 0 5px 0 #D97706, 0 12px 28px rgba(245, 158, 11, 0.16);
}

.practice-benji-photo-wrap {
  width: 100%;
  max-width: 210px;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  border: 2px solid #E2E8F0;
  background: #FDF8F0;
  box-shadow: inset 0 2px 6px rgba(15, 23, 42, 0.06);
}

.practice-benji-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.practice-benji-card[data-benji-reaction="happy"] .practice-benji-img,
.practice-benji-card[data-benji-reaction="try-again"] .practice-benji-img {
  transform: scale(1.03);
}

.practice-benji-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
}

.practice-benji-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 900;
  padding: 4px 12px;
  border-radius: 999px;
  background: #E0F2FE;
  color: #0369A1;
  border: 1.5px solid #7DD3FC;
}

.practice-benji-card[data-benji-reaction="happy"] .practice-benji-badge {
  background: #DCFCE7;
  color: #15803D;
  border-color: #86EFAC;
}

.practice-benji-card[data-benji-reaction="try-again"] .practice-benji-badge {
  background: #FEF3C7;
  color: #92400E;
  border-color: #FCD34D;
}

.practice-benji-text {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.38;
  color: #475569;
}

.practice-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}

.practice-badge {
  font-size: 0.78rem;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #0369A1;
  background: #E0F2FE;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  display: inline-block;
  margin-bottom: 4px;
}

.practice-title-group h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--color-text-main);
}

.practice-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.practice-stats .stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 800;
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border: 2px solid #F59E0B;
  color: #78350F;
  box-shadow: 0 3px 0 #D97706;
}

.practice-stats .stat-pill .stat-icon {
  color: #D97706;
  font-size: 1.02rem;
}

.practice-stats .stat-pill strong {
  color: #92400E;
  font-size: 1.05rem;
  font-weight: 900;
  margin-left: 2px;
}

.practice-stats .stat-pill:nth-child(2) {
  background: linear-gradient(135deg, #FFEDD5 0%, #FED7AA 100%);
  border-color: #F97316;
  color: #7C2D12;
  box-shadow: 0 3px 0 #EA580C;
}

.practice-stats .stat-pill:nth-child(2) strong {
  color: #9A3412;
}

.practice-card {
  background: #FFFFFF;
  border: 2.5px solid var(--border-tactile);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: 0 6px 0 var(--border-depth), 0 16px 32px rgba(24, 54, 75, 0.08);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.practice-speaker-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.practice-expression-box {
  background: radial-gradient(circle at center, #FFFFFF 0%, #F8FAFC 100%);
  border: 2px dashed #CBD5E1;
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
}

.practice-script {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-weight: 800;
  color: var(--color-primary-dark);
  margin-bottom: 6px;
  overflow-wrap: break-word;
  word-wrap: break-word;
  line-height: 1.32;
}

.practice-script.practice-long {
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  line-height: 1.36;
}

.practice-script.rtl {
  direction: rtl;
  font-family: var(--font-arabic), "Noto Sans Arabic", "Geeza Pro", "Arial", sans-serif;
  letter-spacing: 0 !important;
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  line-height: 1.55;
  unicode-bidi: plaintext;
  padding: 4px 0;
}

.practice-script.rtl.practice-long {
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  line-height: 1.6;
}

.practice-translit {
  font-size: 1.02rem;
  color: var(--color-text-muted);
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.practice-prompt {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text-main);
  margin: 0;
}

.practice-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 640px) {
  .practice-options-grid {
    grid-template-columns: 1fr;
  }
}

.practice-option-btn {
  background: #FFFFFF;
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-main);
  box-shadow: 0 3px 0 var(--border-depth);
  transition: all var(--transition-fast);
  text-align: left;
  min-height: 58px;
  height: 100%;
  box-sizing: border-box;
}

.practice-option-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  box-shadow: 0 5px 0 var(--border-depth);
  background: #F0F9FF;
}

.practice-option-btn.correct {
  background: #DCFCE7 !important;
  border-color: #16A34A !important;
  color: #14532D !important;
  box-shadow: 0 3px 0 #15803D !important;
}

.practice-option-btn.incorrect {
  background: #FEE2E2 !important;
  border-color: #DC2626 !important;
  color: #7F1D1D !important;
  box-shadow: 0 3px 0 #B91C1C !important;
}

.practice-feedback {
  border-radius: var(--radius-md);
  padding: 12px 18px;
  font-size: 0.95rem;
  line-height: 1.45;
}

.practice-feedback.success {
  background: #F0FDF4;
  border: 1.5px solid #86EFAC;
  color: #166534;
}

.practice-feedback.error {
  background: #FFFBEB;
  border: 1.5px solid #FCD34D;
  color: #92400E;
}

.practice-actions {
  display: flex;
  justify-content: flex-end;
}

.quote-icon-bubble {
  font-size: 1.3rem;
  flex-shrink: 0;
}

.quote-text {
  font-size: 0.92rem;
  color: var(--color-text-main);
  margin: 0;
  line-height: 1.45;
}

.lang-current-target-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-surface-warm);
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-lg);
  padding: 18px 24px;
  flex-wrap: wrap;
  gap: 14px;
  box-shadow: 0 3px 0 var(--border-depth);
}

.target-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.target-flag {
  font-size: 2.6rem;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.12));
}

.target-info h3 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--color-text-main);
}

.status-indicator.validated {
  background: #E5F3EB;
  color: #1E4F2F;
  font-weight: 800;
  font-size: 0.88rem;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1.5px solid #C6E6D3;
  box-shadow: 0 2px 0 #92CCA8;
}

/* Language Word Cards */
/* ================= DISNEY/PIXAR THEMATIC SHELF & WORD CARDS ================= */
.lang-shelf-banner {
  background: linear-gradient(135deg, #FFFFFF 0%, #F0F9FF 50%, #FEF9C3 100%);
  border: 2.5px solid #BAE6FD;
  border-radius: var(--radius-xl);
  padding: 20px 26px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-shadow: 0 6px 0 #93C5FD, 0 12px 24px rgba(14, 165, 233, 0.08);
}

@media (max-width: 768px) {
  .lang-shelf-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

.shelf-banner-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.shelf-banner-icon {
  font-size: 2.8rem;
  line-height: 1;
  background: #FFFFFF;
  border: 2px solid #BAE6FD;
  border-radius: 20px;
  padding: 12px;
  box-shadow: 0 4px 0 #93C5FD, 0 6px 14px rgba(14, 165, 233, 0.12);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.shelf-banner-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.shelf-banner-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.shelf-banner-badge {
  background: #0284C7;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.76rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-full);
}

.shelf-banner-count {
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FDE68A;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.78rem;
  padding: 2px 9px;
  border-radius: var(--radius-full);
}

.shelf-banner-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.3px;
}

.shelf-banner-desc {
  margin: 0;
  font-size: 0.92rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.shelf-banner-benji-tip {
  background: #FFFFFF;
  border: 2px solid #FDE68A;
  border-radius: 18px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 3px 0 #F59E0B;
  flex-shrink: 0;
  max-width: 320px;
}

.shelf-banner-benji-tip .tip-icon {
  font-size: 1.4rem;
  line-height: 1;
}

.shelf-banner-benji-tip .tip-text {
  font-size: 0.85rem;
  font-weight: 700;
  color: #78350F;
  line-height: 1.35;
}

/* Language Word Cards Grid */
.lang-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.lang-card {
  background: #FFFFFF;
  border: 2.5px solid #E2E8F0;
  border-radius: 24px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 6px 0 #CBD5E1, 0 10px 22px rgba(24, 54, 75, 0.06);
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.lang-card:hover {
  transform: translateY(-5px);
  border-color: #0284C7;
  box-shadow: 0 10px 0 #0369A1, 0 18px 32px rgba(2, 132, 199, 0.16);
}

.lang-card .card-image-box {
  width: calc(100% + 44px);
  margin: -22px -22px 14px -22px;
  height: 180px;
  border-radius: 21px 21px 0 0;
  overflow: hidden;
  position: relative;
  background: #F8FAFC;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lang-card .card-image-box svg,
.lang-card .card-image-box img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: 8px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.lang-card:hover .card-image-box svg,
.lang-card:hover .card-image-box img {
  transform: scale(1.05);
}

.lang-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.meaning-badge {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  color: #78350F;
  border: 1.5px solid #FDE68A;
  border-radius: 14px;
  padding: 5px 12px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 0 #F59E0B;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  line-height: 1.3;
}

.meaning-badge.meaning-long {
  font-size: 0.88rem;
  padding: 4px 10px;
}

.meaning-badge .meaning-text {
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: normal;
}

.badge-emoji {
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
}

.category-tag {
  font-size: 0.72rem;
  text-transform: uppercase;
  font-weight: 800;
  color: #1D4ED8;
  background: #EFF6FF;
  border: 1.5px solid #BFDBFE;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  letter-spacing: 0.3px;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
}

.lang-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Original Script Typography - Auto-Scaling & Anti-Deformation */
.script-original {
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: 800;
  color: #0F172A;
  margin: 4px 0 6px 0;
  line-height: 1.32;
  letter-spacing: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

/* Multi-Word Expressions and Phrases */
.lang-card.phrase-long .script-original {
  font-size: clamp(1.15rem, 2.1vw, 1.45rem);
  line-height: 1.35;
}

.lang-card.phrase-extra-long .script-original {
  font-size: clamp(1.02rem, 1.7vw, 1.25rem);
  line-height: 1.38;
}

/* Arabic RTL Script - Ligature Integrity & Diacritic Clearance */
.script-original.rtl {
  font-family: var(--font-arabic), "Noto Sans Arabic", "Geeza Pro", "Arial", sans-serif;
  direction: rtl;
  text-align: right;
  letter-spacing: 0 !important; /* CRITICAL: Never alter letter spacing in Arabic */
  font-size: clamp(1.45rem, 2.8vw, 2.05rem);
  line-height: 1.6;
  unicode-bidi: plaintext;
  padding: 4px 0;
}

.lang-card.phrase-long .script-original.rtl {
  font-size: clamp(1.22rem, 2.3vw, 1.55rem);
  line-height: 1.6;
}

.lang-card.phrase-extra-long .script-original.rtl {
  font-size: clamp(1.08rem, 1.9vw, 1.32rem);
  line-height: 1.65;
}

/* Transliteration Guide */
.script-translit {
  font-size: 0.92rem;
  font-weight: 700;
  color: #0284C7;
  background: #F0F9FF;
  border: 1px dashed #BAE6FD;
  padding: 4px 10px;
  border-radius: 8px;
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 10px;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: normal;
  line-height: 1.35;
}

.script-translit.translit-long {
  font-size: 0.84rem;
  line-height: 1.35;
  padding: 3px 8px;
}

.lang-card-context {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin-bottom: 10px;
  line-height: 1.45;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.lang-card-note {
  font-size: 0.84rem;
  background: linear-gradient(180deg, #FFFDF7 0%, #FEF3C7 100%);
  border: 1.5px solid #FDE68A;
  border-left: 4px solid #F59E0B;
  padding: 8px 12px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 14px;
  color: #7A5300;
  line-height: 1.45;
  font-weight: 600;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Candy Tactile Audio Action Buttons */
.lang-card-footer {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.btn-listen-audio {
  flex: 1;
  background: linear-gradient(180deg, #38BDF8 0%, #0284C7 100%);
  color: #FFFFFF;
  border: 2px solid #0369A1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.98rem;
  border-radius: 16px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 0 #075985, 0 6px 14px rgba(2, 132, 199, 0.25);
  transition: all var(--transition-fast);
}

.btn-listen-audio .audio-btn-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.btn-listen-audio:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #075985, 0 8px 18px rgba(2, 132, 199, 0.35);
  background: linear-gradient(180deg, #60A5FA 0%, #0369A1 100%);
}

.btn-listen-audio:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #075985;
}

.btn-listen-audio.playing {
  background: linear-gradient(180deg, #FDE047 0%, #EAB308 100%) !important;
  color: #713F12 !important;
  border-color: #CA8A04 !important;
  box-shadow: 0 4px 0 #A16207 !important;
  animation: candyBounce 0.8s infinite alternate ease-in-out;
}

.btn-repeat-audio {
  background: linear-gradient(180deg, #FFFFFF 0%, #F0FDF4 100%);
  border: 2px solid #86EFAC;
  border-radius: 16px;
  padding: 11px 15px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.92rem;
  color: #15803D;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 0 #4ADE80;
  transition: all var(--transition-fast);
}

.btn-repeat-audio .slow-btn-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.btn-repeat-audio:hover {
  background: #DCFCE7;
  border-color: #4ADE80;
  color: #166534;
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #22C55E;
}

.btn-repeat-audio:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #4ADE80;
}

@keyframes candyBounce {
  0% { transform: scale(1); }
  100% { transform: scale(1.04); }
}

/* ================= HORIZONTAL TIMELINE (HISTORY) ================= */
.epochs-bar {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  margin-bottom: 24px;
  padding-bottom: 4px;
}

.epoch-chip {
  background: #FFFFFF;
  border: 2px solid var(--border-tactile);
  padding: 8px 18px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  box-shadow: 0 2px 0 var(--border-depth);
  transition: all var(--transition-fast);
}

.epoch-chip:hover {
  border-color: var(--color-primary);
  background: var(--bg-sky);
}

.epoch-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--color-primary-dark);
}

.epoch-range {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.horizontal-timeline-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  padding-bottom: 24px;
  scrollbar-width: thin;
}

.timeline-card {
  min-width: 320px;
  max-width: 340px;
  background: var(--bg-surface-warm);
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-xl);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 0 var(--border-depth), 0 10px 24px rgba(24, 54, 75, 0.06);
  position: relative;
  transition: all var(--transition-fast);
}

.timeline-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary);
  box-shadow: 0 6px 0 var(--border-depth), 0 16px 32px rgba(22, 117, 165, 0.15);
}

.timeline-epoch-badge {
  position: absolute;
  top: -12px;
  left: 20px;
  background: linear-gradient(180deg, var(--accent-orange) 0%, #C4792C 100%);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.75rem;
  padding: 3px 12px;
  border-radius: var(--radius-full);
  border: 1px solid #B26A23;
  box-shadow: 0 2px 0 #8F5215;
}

.timeline-card-header h3 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--color-text-main);
  margin-top: 6px;
}

.cognomen {
  display: block;
  font-style: italic;
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: 0.95rem;
}

.reign-years {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  display: block;
  margin-bottom: 12px;
}

.source-rigor-box {
  background: var(--bg-canvas-subtle);
  border: 1.5px solid var(--border-tactile);
  border-radius: var(--radius-md);
  padding: 12px;
  margin: 12px 0;
}

.source-type-tag {
  display: block;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--color-text-main);
}

.source-note {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.45;
  display: block;
}

/* ================= SCIENCE SANDBOX ================= */
.science-sandbox-box {
  background: var(--bg-surface-warm);
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-xl);
  padding: 28px;
  margin-bottom: 28px;
  box-shadow: 0 6px 0 var(--border-depth), 0 16px 32px rgba(24, 54, 75, 0.08);
}

.sandbox-controls {
  margin: 18px 0;
}

.benji-slider {
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: #E2E8F0;
  outline: none;
  cursor: pointer;
  accent-color: var(--color-primary);
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-top: 8px;
}

.sandbox-sky-preview {
  height: 160px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-tactile);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.5s ease;
  overflow: hidden;
  box-shadow: 0 4px 0 var(--border-depth);
}

.sun-orb {
  position: absolute;
  top: 20px;
  right: 40px;
  font-size: 2.8rem;
  filter: drop-shadow(0 0 14px #F5C451);
}

.sky-readout {
  background: rgba(24, 54, 75, 0.75);
  color: #FFFFFF;
  padding: 8px 20px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.95rem;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.science-questions-grid, .art-gallery-grid, .composers-grid, .animals-grid, .football-rules-grid, .authors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
  margin-bottom: 28px;
}

.science-question-card, .scientist-card, .art-card, .composer-card, .animal-card, .rule-card, .legend-card, .author-card {
  background: #FFFFFF;
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 3px 0 var(--border-depth), 0 6px 14px rgba(24, 54, 75, 0.05);
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
}

.science-question-card:hover, .science-question-card:focus,
.scientist-card:hover, .scientist-card:focus,
.art-card:hover, .art-card:focus,
.composer-card:hover, .composer-card:focus,
.animal-card:hover, .animal-card:focus,
.rule-card:hover, .rule-card:focus,
.legend-card:hover, .legend-card:focus,
.author-card:hover, .author-card:focus {
  transform: translateY(-4px);
  box-shadow: 0 6px 0 var(--border-depth), 0 16px 32px rgba(22, 117, 165, 0.14);
  border-color: var(--color-primary);
  outline: none;
}

.science-card-header, .art-card-header, .animal-header, .rule-header, .author-header, .composer-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.science-card-header h3, .animal-header h3, .rule-header h3, .author-header h3, .composer-header h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-text-main);
}

.art-frame-preview {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--support-twilight) 100%);
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-tactile);
  padding: 26px;
  text-align: center;
  color: #FFFFFF;
  margin-bottom: 16px;
  box-shadow: 0 4px 0 var(--border-depth), 0 8px 18px rgba(24, 54, 75, 0.12);
}

.art-placeholder-canvas .art-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 8px;
}

.art-title-overlay {
  font-weight: 600;
  font-size: 1.05rem;
}

.observation-box {
  background: var(--color-accent-light);
  border-left: 4px solid var(--color-accent);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin-top: 12px;
  font-size: 0.9rem;
}

.animal-specs {
  background: #F8FAFC;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  font-size: 0.88rem;
  line-height: 1.6;
}

.visual-hint-diagram {
  background: #EFF6FF;
  border: 1px dashed var(--color-primary);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 12px;
  font-weight: 600;
  color: #1E40AF;
  font-size: 0.9rem;
}

.author-quote {
  font-style: italic;
  color: var(--color-text-muted);
  border-left: 3px solid var(--color-primary);
  padding-left: 12px;
  margin-top: 12px;
  font-size: 0.92rem;
}

/* ================= QUIZ ENGINE (IMMERSIVE FULL-STAGE WINDOW) ================= */
.quiz-setup-view, .quiz-summary-view {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
}

.quiz-active-view {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  animation: fadeIn 0.3s ease;
}

.length-cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.length-card {
  background: var(--bg-surface-warm);
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-xl);
  padding: 26px 20px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--border-depth), 0 8px 18px rgba(24, 54, 75, 0.05);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.length-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-4px);
  box-shadow: 0 7px 0 var(--border-depth), 0 14px 28px rgba(22, 117, 165, 0.16);
  background: #FFFFFF;
}

.length-card:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--border-depth);
}

.length-card .length-icon {
  font-size: 2.6rem;
  margin-bottom: 10px;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.quiz-top-bar {
  margin-bottom: 20px;
}

.quiz-progress-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1rem;
  color: var(--color-text-main);
  margin-bottom: 10px;
  gap: 12px;
  flex-wrap: wrap;
}

.quiz-step-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text-main);
}

.quiz-step-icon {
  font-size: 1.3rem;
}

.quiz-theme-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface-warm);
  border: 1.5px solid var(--border-tactile);
  color: var(--color-primary-dark);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.92rem;
  padding: 5px 16px;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 0 var(--border-depth);
}

.quiz-progress-track {
  width: 100%;
  height: 14px;
  background: var(--bg-sand);
  border: 1.5px solid var(--border-tactile);
  border-radius: var(--radius-full);
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(24, 54, 75, 0.1);
}

.quiz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-nature) 100%);
  border-radius: var(--radius-full);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* ================= QUIZ FULL-WINDOW STAGE ================= */
.quiz-question-window {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 32px;
  background: var(--bg-surface-warm);
  border: 2.5px solid var(--border-tactile);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: 0 8px 0 var(--border-depth), 0 24px 50px -10px rgba(24, 54, 75, 0.16);
  position: relative;
  align-items: start;
}

/* Left Column: 3D Illustration Stage - Solid, Anchored, Never Deforms */
.quiz-stage-media {
  position: sticky;
  top: 24px;
  align-self: start;
  width: 100%;
  height: 480px;
  max-height: calc(100vh - 120px);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: radial-gradient(circle at center, #FFFFFF 0%, #F5E8D3 100%);
  border: 2.5px solid var(--border-tactile);
  box-shadow: 0 6px 0 var(--border-depth), 0 16px 36px rgba(24, 54, 75, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.quiz-stage-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
}

.quiz-question-window:hover .quiz-stage-img {
  transform: scale(1.025);
}

.quiz-media-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.45) 0%, transparent 35%, transparent 60%, rgba(15, 23, 42, 0.75) 100%);
}

.quiz-media-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border: 1.5px solid var(--border-tactile);
  border-radius: var(--radius-full);
  padding: 6px 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--color-primary-dark);
  box-shadow: 0 4px 10px rgba(24, 54, 75, 0.2);
}

.quiz-media-caption {
  align-self: stretch;
  background: rgba(24, 54, 75, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.caption-tag {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--accent-gold);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.caption-sub {
  font-size: 0.88rem;
  font-weight: 600;
  color: #FFFFFF;
}

/* Right Column: High-Craft Lettering, Question Prompt, Audio & Options */
.quiz-stage-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
}

.quiz-objective-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #FFFDF7 0%, #FEF3C7 100%);
  border: 1.5px solid #F5C451;
  color: #7A5300;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.88rem;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 0 #D9A028;
  margin-bottom: 14px;
  width: fit-content;
}

.quiz-prompt {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--color-text-main);
  margin-bottom: 22px;
  line-height: 1.35;
  letter-spacing: -0.3px;
}

.quiz-audio-prompt-box {
  margin-bottom: 20px;
}

.play-prompt-audio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
}

.quiz-options-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.quiz-option-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-tactile);
  background: #FFFFFF;
  font-family: var(--font-body);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--color-text-main);
  cursor: pointer;
  text-align: left;
  min-height: 56px;
  box-shadow: 0 3px 0 var(--border-depth), 0 3px 6px rgba(24, 54, 75, 0.04);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.quiz-option-btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  background: var(--bg-sky);
  color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 5px 0 var(--border-depth), 0 8px 16px rgba(22, 117, 165, 0.16);
}

.quiz-option-btn:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--border-depth);
}

.opt-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--bg-canvas-subtle);
  border: 1.5px solid var(--border-tactile);
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--color-text-main);
  flex-shrink: 0;
}

.quiz-option-btn.correct {
  border-color: var(--color-nature);
  background: var(--color-nature-light);
  color: #164E2E;
  box-shadow: 0 3px 0 #2A6E43;
}

.quiz-option-btn.correct .opt-letter {
  background: var(--color-nature);
  border-color: #2A6E43;
  color: #FFFFFF;
}

.quiz-option-btn.incorrect {
  border-color: var(--accent-coral);
  background: var(--accent-coral-soft);
  color: #7D2112;
  box-shadow: 0 3px 0 #B5422F;
}

.quiz-option-btn.incorrect .opt-letter {
  background: var(--accent-coral);
  border-color: #B5422F;
  color: #FFFFFF;
}

/* Responsive adjustments for Quiz Full-Window Stage */
@media (max-width: 1024px) {
  .quiz-question-window {
    grid-template-columns: 320px 1fr;
    gap: 24px;
    padding: 22px;
    align-items: start;
  }
  .quiz-stage-media {
    height: 420px;
    max-height: 420px;
  }
  .quiz-prompt {
    font-size: 1.48rem;
  }
}

@media (max-width: 768px) {
  .quiz-question-window {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 18px;
    align-items: stretch;
  }
  .quiz-stage-media {
    position: relative;
    top: auto;
    height: 260px;
    min-height: 260px;
    max-height: 260px;
  }
  .quiz-prompt {
    font-size: 1.35rem;
  }
  .quiz-options-grid {
    gap: 10px;
  }
  .quiz-option-btn {
    padding: 13px 16px;
    font-size: 0.98rem;
  }
}

/* Feedback panel */
.feedback-panel {
  border-radius: var(--radius-xl);
  padding: 24px 26px;
  margin-top: 22px;
  border: 2px solid;
  box-shadow: 0 4px 0 var(--border-depth), 0 8px 20px rgba(24, 54, 75, 0.08);
  animation: fadeIn 0.3s ease;
}

.feedback-panel.feedback-correct {
  background: #EAF7EE;
  border-color: var(--color-nature);
  color: #164E2E;
}

.feedback-panel.feedback-encouragement {
  background: #FDF2F0;
  border-color: var(--accent-coral);
  color: #7D2112;
}

.feedback-badge {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 10px;
}

.feedback-correct .feedback-badge {
  color: var(--color-nature);
}
.feedback-encouragement .feedback-badge {
  color: var(--accent-coral);
}

/* Feedback Indication of the Answer Given */
.feedback-answer-indication {
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.feedback-correct .feedback-answer-indication {
  border-left: 5px solid var(--color-nature);
}

.feedback-encouragement .feedback-answer-indication {
  border-left: 5px solid var(--accent-coral);
}

.indication-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-text-main);
}

.indication-icon {
  font-size: 1.3rem;
  line-height: 1;
  flex-shrink: 0;
}

.indication-text {
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--color-text-main);
  margin: 0;
}

.correct-answer-callout {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #F0FDF4;
  border: 1.5px solid #86EFAC;
  color: #166534;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  margin-top: 4px;
}

.correct-answer-callout .callout-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.feedback-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* Quiz Summary */
.summary-hero-card {
  background: var(--bg-surface-warm);
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-xl);
  padding: 44px 36px;
  text-align: center;
  box-shadow: var(--shadow-tactile-lg);
  position: relative;
  overflow: hidden;
}

.summary-trophy {
  font-size: 4.5rem;
  margin-bottom: 14px;
  filter: drop-shadow(0 6px 16px rgba(245, 196, 81, 0.35));
}

.summary-hero-card h2 {
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 800;
  color: var(--color-text-main);
  margin-bottom: 10px;
}

.summary-subtitle {
  font-size: 1.15rem;
  color: var(--color-text-muted);
}

.summary-encouragement-quote {
  background: linear-gradient(180deg, #FFFDF7 0%, #FEF3C7 100%);
  border: 1.5px solid #F5C451;
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin: 28px 0;
  box-shadow: 0 3px 0 #D9A028, 0 6px 14px rgba(245, 196, 81, 0.15);
  font-style: italic;
  color: #7A5300;
}

.summary-encouragement-quote p {
  font-size: 1.05rem;
  line-height: 1.55;
  margin-bottom: 6px;
}

.summary-encouragement-quote span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: #5C3E00;
}

.summary-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ================= GAMES ARENA ================= */
.games-suite-view {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
}

.games-nav-bar {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  margin-bottom: 22px;
  padding-bottom: 6px;
}

.game-nav-btn {
  padding: 10px 20px;
  border-radius: var(--radius-full);
  border: 2px solid var(--border-tactile);
  background: #FFFFFF;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--color-text-main);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 0 var(--border-depth);
  transition: all var(--transition-fast);
}

.game-nav-btn:hover {
  border-color: var(--color-primary);
  background: var(--bg-sky);
  color: var(--color-primary-dark);
  transform: translateY(-1px);
}

.game-nav-btn.active {
  background: linear-gradient(180deg, var(--accent-gold) 0%, #D9A028 100%);
  border-color: #B8851B;
  color: #5C3E00;
  box-shadow: 0 3px 0 #946911;
}

.game-card-arena {
  background: var(--bg-surface-warm);
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-xl);
  padding: 36px 32px;
  box-shadow: 0 6px 0 var(--border-depth), 0 16px 32px rgba(24, 54, 75, 0.08);
}

.audio-listen-center {
  text-align: center;
  padding: 24px 0;
}

.pulse-listen-btn {
  font-size: 1.15rem;
  padding: 14px 32px;
}

.listen-hint {
  display: block;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-top: 10px;
}

.options-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.choice-lang-btn {
  font-size: 1.1rem;
  padding: 16px;
  text-align: center;
  justify-content: center;
}

.game-feedback-box {
  margin-top: 24px;
  padding: 20px;
  border-radius: var(--radius-md);
  animation: fadeIn 0.3s ease;
}

.hidden {
  display: none !important;
}

/* Pairs game */
.pairs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin: 24px 0;
}

.pair-card {
  aspect-ratio: 1.4 / 1;
  background: #FFFFFF;
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-text-main);
  box-shadow: 0 3px 0 var(--border-depth);
  transition: all var(--transition-fast);
}

.pair-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 var(--border-depth);
  border-color: var(--color-primary);
}

.pair-card.selected {
  border-color: var(--color-primary-dark);
  background: linear-gradient(180deg, #FFFFFF 0%, #EAF5FB 100%);
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 4px 0 var(--color-primary-dark);
}

.pair-card.matched {
  border-color: #357046;
  background: #E5F3EB;
  color: #1E4F2F;
  box-shadow: 0 2px 0 #2F603D;
  cursor: default;
  transform: none;
}

/* Count Benji */
.count-choices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 14px;
  margin: 22px 0;
}

.count-box-btn {
  background: #FFFFFF;
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-md);
  padding: 18px 14px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--border-depth);
  transition: all var(--transition-fast);
}

.count-box-btn:hover {
  border-color: var(--color-primary);
  background: var(--bg-sky);
  transform: translateY(-2px);
  box-shadow: 0 5px 0 var(--border-depth);
}

.count-box-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--border-depth);
}

.count-digit {
  display: block;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--color-primary-dark);
}

/* Map challenge mini */
.mini-map-container {
  position: relative;
  aspect-ratio: 2 / 1;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-tactile);
  box-shadow: 0 4px 0 var(--border-depth);
  overflow: hidden;
  margin: 20px 0;
}

.mini-map-svg {
  width: 100%;
  height: 100%;
}

.mini-pins-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mini-map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  background: #FFFFFF;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-full);
  font-size: 1.4rem;
  padding: 4px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s;
}

.mini-map-pin:hover {
  transform: translate(-50%, -50%) scale(1.3);
}

/* ================= BENJI CHARACTER COMPANION DOCK ================= */
.benji-floating-dock {
  position: fixed;
  bottom: 24px;
  right: 28px;
  z-index: 500;
  pointer-events: none;
}

.benji-character-wrapper {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  pointer-events: auto;
}

.benji-avatar-frame {
  cursor: pointer;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  padding: 3px;
  background: radial-gradient(circle at center, #FFFDF8 0%, #F5E8D3 100%);
  border: 3px solid var(--border-tactile);
  box-shadow: 
    0 4px 0 var(--border-depth),
    0 12px 28px rgba(24, 54, 75, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.35s ease, border-color 0.35s ease;
  flex-shrink: 0;
  user-select: none;
}

.benji-avatar-frame:hover {
  transform: scale(1.1) translateY(-6px) rotate(2deg);
  border-color: var(--color-primary);
  box-shadow: 
    0 8px 0 var(--border-depth),
    0 18px 36px rgba(22, 117, 165, 0.35);
}

.benji-avatar-frame:active {
  transform: scale(0.96) translateY(2px);
  box-shadow: 0 2px 0 var(--border-depth);
}

.benji-dock-mascot-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  display: block;
  pointer-events: none;
  transition: transform 0.4s ease;
}

.benji-avatar-frame:hover .benji-dock-mascot-img {
  transform: scale(1.06);
}

.benji-svg-fallback {
  width: 100%;
  height: 100%;
}

/* Slick Companion Dialogue Card (Repositioned naturally to fit screen) */
.benji-companion-card,
.benji-bubble {
  position: absolute;
  bottom: 135px;
  right: 10px;
  width: 340px;
  max-width: calc(100vw - 48px);
  background: var(--bg-surface-warm);
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  box-shadow: 
    0 4px 0 var(--border-depth),
    0 16px 36px -6px rgba(24, 54, 75, 0.22);
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--color-text-main);
  animation: popCompanionCard 0.32s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: auto;
}

@keyframes popCompanionCard {
  from { opacity: 0; transform: scale(0.85) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.benji-companion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--border-tactile);
}

.benji-companion-badge {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--color-primary-dark);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-sky);
  padding: 3px 12px;
  border-radius: var(--radius-full);
  border: 1px solid #BEE3F8;
  box-shadow: 0 1px 2px rgba(24, 54, 75, 0.05);
}

.benji-companion-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.benji-btn-speak {
  background: #FFFFFF;
  border: 1.5px solid var(--border-tactile);
  color: var(--color-primary-dark);
  border-radius: var(--radius-full);
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 0 var(--border-depth);
  transition: all var(--transition-fast);
}

.benji-btn-speak:hover {
  background: var(--color-primary);
  color: #FFFFFF;
  border-color: var(--color-primary-dark);
  box-shadow: 0 2px 0 #0C4360;
  transform: translateY(-1px);
}

.benji-btn-speak:active {
  transform: translateY(1px);
  box-shadow: none;
}

.benji-btn-speak.is-playing {
  background: linear-gradient(180deg, #F59E0B 0%, #D97706 100%) !important;
  color: #FFFFFF !important;
  border-color: #B45309 !important;
  box-shadow: 0 2px 0 #78350F, 0 0 12px rgba(245, 158, 11, 0.6) !important;
  animation: pulse-audio 1.3s infinite ease-in-out;
}

.benji-btn-dismiss {
  background: var(--bg-canvas-subtle);
  border: 1.5px solid var(--border-tactile);
  color: var(--color-text-muted);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--border-depth);
  transition: all var(--transition-fast);
}

.benji-btn-dismiss:hover {
  background: var(--bg-sand);
  color: var(--color-text-main);
  transform: scale(1.08);
}

.benji-bubble-content {
  font-weight: 500;
  color: var(--color-text-main);
}

.benji-bubble-tail {
  position: absolute;
  bottom: -11px;
  right: 48px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 11px solid var(--border-tactile);
}

.benji-bubble-tail::after {
  content: '';
  position: absolute;
  top: -13px;
  left: -8px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 9px solid var(--bg-surface-warm);
}

/* ================= UNIVERSAL MODALS (TACTILE STORYBOOK EMBOSS) ================= */
.benji-modal-backdrop {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(24, 54, 75, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 24px 16px;
  animation: modalFadeIn 0.22s ease-out;
}

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

.benji-modal,
.benji-modal-container {
  background: var(--bg-surface-warm);
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-xl);
  max-width: 660px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 
    0 8px 0 var(--border-depth),
    0 25px 60px -10px rgba(24, 54, 75, 0.35);
  display: flex;
  flex-direction: column;
  position: relative;
  animation: modalPopUp 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalPopUp {
  from { opacity: 0; transform: scale(0.92) translateY(14px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header, .passport-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 26px;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-sand) 100%);
  border-bottom: 2px solid var(--border-tactile);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.modal-title-group h2, .modal-header h2, .passport-header h2 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--color-text-main);
  margin: 0;
}

.modal-subtitle, .modal-sub {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  font-weight: 600;
  display: block;
  margin-top: 3px;
}

.modal-close-btn {
  background: #FFFFFF;
  border: 1.5px solid var(--border-tactile);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
  box-shadow: 0 2px 0 var(--border-depth);
}

.modal-close-btn:hover {
  background: var(--bg-sky);
  color: var(--color-primary-dark);
  border-color: var(--color-primary);
  transform: scale(1.08) translateY(-1px);
}

.modal-close-btn:active {
  transform: translateY(1px);
  box-shadow: none;
}

.modal-body, .passport-body, .modal-content-scroll {
  padding: 26px;
  overflow-y: auto;
}

.modal-hero-image-box {
  width: 100%;
  height: 180px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 20px;
  background: linear-gradient(135deg, var(--bg-sky) 0%, #BAE6FD 100%);
  border: 2px solid var(--border-tactile);
  box-shadow: 0 4px 0 var(--border-depth), 0 8px 18px rgba(24, 54, 75, 0.08);
}

.modal-hero-image-box svg {
  width: 100%;
  height: 100%;
  display: block;
}

.detail-badge-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.detail-badge {
  background: #FFFFFF;
  border: 1.5px solid var(--border-tactile);
  border-radius: var(--radius-full);
  padding: 6px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-main);
  box-shadow: 0 2px 0 var(--border-depth);
}

.detail-highlight-box {
  background: linear-gradient(180deg, #FFFDF7 0%, #FEF3C7 100%);
  border: 1.5px solid #F5C451;
  border-radius: var(--radius-md);
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: 0 3px 0 #D9A028, 0 6px 14px rgba(245, 196, 81, 0.15);
}

.detail-highlight-box h4 {
  color: #7A5300;
  margin-bottom: 6px;
  font-size: 1rem;
  font-weight: 800;
}

.detail-highlight-box p {
  color: #5C3E00;
  font-size: 0.94rem;
  line-height: 1.55;
  margin: 0;
  white-space: pre-line;
}

.detail-clues-box {
  background: linear-gradient(180deg, #FFFFFF 0%, #EAF5FB 100%);
  border: 1.5px solid #BEE3F8;
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: 0 3px 0 #90CDF4, 0 6px 14px rgba(22, 117, 165, 0.1);
}

.detail-clues-box h4 {
  color: var(--color-primary-dark);
  margin-bottom: 8px;
  font-size: 1rem;
  font-weight: 800;
}

.detail-clues-box ul {
  padding-left: 20px;
  margin: 0;
}

.detail-clues-box li {
  color: var(--color-text-main);
  font-size: 0.92rem;
  line-height: 1.5;
  margin-bottom: 6px;
}

.modal-footer, .passport-footer {
  padding: 18px 26px;
  background: var(--bg-sand);
  border-top: 1.5px solid var(--border-tactile);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* Passport specific */
.passport-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.passport-stat-card {
  background: #FFFFFF;
  border: 1.5px solid var(--border-tactile);
  border-radius: var(--radius-md);
  padding: 16px 12px;
  text-align: center;
  box-shadow: 0 3px 0 var(--border-depth);
}

.stat-number {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 800;
  display: block;
  color: var(--color-primary-dark);
}

.stat-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.passport-badge-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #FFFFFF;
  border: 1.5px solid var(--border-tactile);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 12px;
  box-shadow: 0 3px 0 var(--border-depth);
}

.passport-badge-icon {
  font-size: 2.3rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
}

.passport-privacy-box {
  display: flex;
  gap: 14px;
  background: var(--bg-sky);
  border: 1.5px solid #BEE3F8;
  border-radius: var(--radius-md);
  padding: 16px;
  margin-top: 22px;
  box-shadow: 0 2px 0 #90CDF4;
  font-size: 0.88rem;
  color: var(--color-text-main);
  line-height: 1.5;
}

/* ================= ONBOARDING MODAL ================= */
.onboarding-modal {
  max-width: 720px;
}

.onboarding-hero {
  display: flex;
  align-items: center;
  gap: 22px;
  background: linear-gradient(135deg, var(--bg-sky) 0%, #BAE6FD 100%);
  padding: 26px 28px;
  border-bottom: 2px solid var(--border-tactile);
}

.onboarding-avatar-box {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 4px solid #FFFFFF;
  box-shadow: 0 6px 18px rgba(24, 54, 75, 0.16);
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.onboarding-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.onboarding-hero-text h2 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  margin-bottom: 6px;
  line-height: 1.25;
}

.onboarding-hero-text p {
  color: var(--color-text-main);
  font-size: 0.98rem;
  line-height: 1.5;
}

.onboarding-section {
  margin-bottom: 24px;
}

.onboarding-section .control-label {
  color: var(--color-text-main);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.lang-choices-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.age-choices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.onboarding-age-card {
  background: #FFFFFF;
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-lg);
  padding: 18px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--border-depth);
  transition: all var(--transition-fast);
}

.onboarding-age-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 5px 0 var(--border-depth);
}

.onboarding-age-card:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--border-depth);
}

.onboarding-age-card.active {
  border-color: var(--color-primary-dark);
  background: linear-gradient(180deg, #FFFDF7 0%, #EAF5FB 100%);
  box-shadow: 0 3px 0 #0C4360;
}

.age-bracket-tag {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  display: block;
  color: var(--color-primary-dark);
  margin-bottom: 4px;
}

.age-bracket-desc {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.age-security-note {
  display: block;
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

/* ================= RESPONSIVE ADJUSTMENTS ================= */
@media (max-width: 768px) {
  .header-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  .header-controls {
    width: auto;
  }
  .benji-floating-dock {
    bottom: 12px;
    right: 12px;
  }
  .benji-companion-card,
  .benji-bubble {
    width: 280px;
    bottom: 95px;
    right: 0px;
    font-size: 0.82rem;
    padding: 10px 14px;
  }
  .passport-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ================= ACCURATE MAPS & PORTUGAL GEOGRAPHIC EXTENSIONS ================= */

/* Navigation View Switcher (Planisfério / Portugal / Exercícios) */
.geo-subnav-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
  background: var(--bg-surface-warm);
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-tactile);
  box-shadow: 0 3px 0 var(--border-depth), 0 6px 14px rgba(24, 54, 75, 0.05);
}

.geo-subnav-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.geo-subnav-btn:hover {
  color: var(--color-primary-dark);
  background: var(--bg-sky);
  border-color: #BEE3F8;
  transform: translateY(-1px);
}

.geo-subnav-btn.active {
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #FFFFFF;
  border-color: var(--color-primary-dark);
  box-shadow: 0 3px 0 #0C4360, 0 4px 10px rgba(22, 117, 165, 0.25);
}

.geo-subnav-btn.active:active {
  transform: translateY(2px);
  box-shadow: none;
}

/* Continent Filter Chips on World Map */
.continent-filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.continent-chip {
  padding: 8px 16px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border-tactile);
  background: #FFFFFF;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-text-main);
  cursor: pointer;
  box-shadow: 0 2px 0 var(--border-depth);
  transition: all var(--transition-fast);
}

.continent-chip:hover {
  border-color: var(--color-primary);
  background: var(--bg-sky);
  color: var(--color-primary-dark);
  transform: translateY(-1px);
}

.continent-chip.active {
  background: linear-gradient(180deg, var(--color-nature) 0%, #357046 100%);
  color: #FFFFFF;
  border-color: #2F603D;
  box-shadow: 0 2px 0 #20452B, 0 3px 8px rgba(67, 139, 89, 0.3);
}

/* Robinson Projection Accurate World Map Styling */
.country-shape {
  stroke: #94A3B8;
  stroke-width: 0.5;
  transition: all 0.2s ease;
  cursor: pointer;
}

.country-shape.continent-europe { fill: #FEF08A; }
.country-shape.continent-africa { fill: #FED7AA; }
.country-shape.continent-asia { fill: #DDD6FE; }
.country-shape.continent-north_america { fill: #BBF7D0; }
.country-shape.continent-south_america { fill: #A7F3D0; }
.country-shape.continent-oceania { fill: #FECDD3; }
.country-shape.continent-antarctica { fill: #F1F5F9; }
.country-shape.continent-other { fill: #E2E8F0; }

.country-shape:hover, .country-shape:focus {
  fill: #FDE047 !important;
  stroke: #B45309;
  stroke-width: 1.5;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
  outline: none;
}

.country-shape.dimmed-country {
  opacity: 0.16;
  filter: grayscale(40%);
}

.country-shape.dimmed-country:hover {
  fill: inherit !important;
  stroke: #94A3B8;
  stroke-width: 0.5;
  filter: none;
  cursor: default;
}

.country-shape.highlighted-country {
  fill: #F59E0B !important;
  stroke: #78350F;
  stroke-width: 2.2;
  filter: drop-shadow(0 0 10px #F59E0B);
}

.ocean-label-text {
  fill: #1675A5;
  font-size: 26px;
  font-weight: 700;
  font-family: var(--font-heading);
  letter-spacing: 2px;
  opacity: 0.65;
  pointer-events: none;
  user-select: none;
}

/* ================= PORTUGAL DETAILED MAP STYLES ================= */
.portugal-map-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.portugal-controls-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg-surface-warm);
  padding: 14px 20px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-tactile);
  box-shadow: 0 3px 0 var(--border-depth);
}

.layer-toggles-group {
  display: flex;
  gap: 8px;
}

.layer-toggle-btn {
  padding: 8px 16px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border-tactile);
  background: #FFFFFF;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-text-main);
  cursor: pointer;
  box-shadow: 0 2px 0 var(--border-depth);
  transition: all var(--transition-fast);
}

.layer-toggle-btn:hover {
  border-color: var(--color-primary);
  background: var(--bg-sky);
  color: var(--color-primary-dark);
}

.layer-toggle-btn.active {
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #FFFFFF;
  border-color: var(--color-primary-dark);
  box-shadow: 0 2px 0 #0C4360;
}

.portugal-map-svg-wrapper {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  background: linear-gradient(135deg, var(--bg-sky) 0%, #BAE6FD 100%);
  border-radius: var(--radius-xl);
  border: 3px solid var(--border-tactile);
  box-shadow: 0 8px 0 var(--border-depth), 0 16px 36px rgba(24, 54, 75, 0.12);
  overflow: hidden;
}

.portugal-map-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Spain Iberian Context */
.spain-context-shape {
  fill: #F1F5F9;
  stroke: #CBD5E1;
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

.spain-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  fill: #94A3B8;
  letter-spacing: 2px;
}

.portugal-ocean {
  fill: #E0F2FE;
}

.portugal-mainland-shape {
  fill: #FEF9C3;
  stroke: #D97706;
  stroke-width: 2.5;
  stroke-linejoin: round;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.12));
  transition: all 0.3s;
}

.portugal-mainland-shape:hover {
  fill: #FEF08A;
}

.portugal-river-path {
  fill: none;
  stroke: #0284C7;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  cursor: pointer;
  transition: all 0.25s;
}

.portugal-river-path:hover {
  stroke: #0369A1;
  stroke-width: 8;
  filter: drop-shadow(0 0 8px #38BDF8);
}

.portugal-river-path.highlighted-river {
  stroke: #0284C7;
  stroke-width: 9;
  filter: drop-shadow(0 0 12px #0284C7);
  stroke-dasharray: 12 6;
  animation: riverFlow 1s linear infinite;
}

@keyframes riverFlow {
  from { stroke-dashoffset: 36; }
  to { stroke-dashoffset: 0; }
}

.portugal-river-path.faint-river {
  stroke: #BAE6FD;
  stroke-width: 2.5;
  opacity: 0.45;
}

.portugal-city-group {
  cursor: pointer;
  transition: transform 0.2s;
}

.portugal-city-group:hover, .portugal-city-group:focus {
  transform: scale(1.25);
  outline: none;
}

.portugal-city-circle {
  fill: #EA580C;
  stroke: #FFFFFF;
  stroke-width: 2;
  transition: all 0.2s;
}

.portugal-city-group:hover .portugal-city-circle {
  fill: #C2410C;
  stroke: #FEF08A;
  stroke-width: 3;
}

.portugal-city-beacon-circle {
  fill: #F59E0B;
  stroke: #FFFFFF;
  stroke-width: 2.5;
  animation: pulseBeacon 1.2s infinite;
}

@keyframes pulseBeacon {
  0% { r: 6; opacity: 1; }
  50% { r: 16; opacity: 0.3; }
  100% { r: 6; opacity: 1; }
}

.portugal-city-label {
  font-size: 11px;
  font-weight: 700;
  fill: #1E293B;
  paint-order: stroke;
  stroke: #FFFFFF;
  stroke-width: 3px;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

/* Inset boxes for Azores and Madeira */
.archipelago-inset-box {
  fill: #FFFFFF;
  stroke: #38BDF8;
  stroke-width: 1.5;
  rx: 8px;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.06));
}

.archipelago-island-shape {
  fill: #0284C7;
  stroke: #0369A1;
  stroke-width: 1;
}

/* World Challenge Beacon on Robinson Planisfério */
.world-challenge-beacon {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #F59E0B;
  border: 3px solid #FFFFFF;
  box-shadow: 0 0 15px #F59E0B, 0 0 25px rgba(245, 158, 11, 0.6);
  animation: pulseChallengeBeacon 1.2s infinite;
  z-index: 10;
  pointer-events: none;
}

@keyframes pulseChallengeBeacon {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(1.6); opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.challenge-country-highlight {
  fill: #F59E0B !important;
  stroke: #B45309 !important;
  stroke-width: 3 !important;
  filter: drop-shadow(0 0 12px #F59E0B);
  animation: countryPulse 1.5s ease-in-out infinite;
}

@keyframes countryPulse {
  0%, 100% { opacity: 0.95; }
  50% { opacity: 0.65; }
}

/* ================= SIDE-BY-SIDE IDENTIFICATION EXERCISES ================= */
.map-exercise-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.exercise-mode-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.map-exercise-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}

@media (max-width: 860px) {
  .map-exercise-layout {
    grid-template-columns: 1fr;
  }
}

.exercise-side-panel {
  background: var(--bg-surface-warm);
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: 0 4px 0 var(--border-depth), 0 12px 28px rgba(24, 54, 75, 0.08);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.exercise-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1.5px solid var(--border-tactile);
}

.exercise-score-badge {
  background: #E5F3EB;
  color: #1E4F2F;
  font-weight: 800;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  border: 1.5px solid #C6E6D3;
  font-size: 0.95rem;
  box-shadow: 0 2px 0 #92CCA8;
}

.exercise-prompt-box h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--color-text-main);
  margin-bottom: 10px;
  line-height: 1.35;
}

.exercise-clue-hint {
  background: linear-gradient(180deg, #FFFDF7 0%, #FEF3C7 100%);
  border-left: 4px solid #F5C451;
  padding: 12px 16px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 0.92rem;
  color: #7A5300;
  border: 1px solid #FDE68A;
  border-left-width: 4px;
  box-shadow: 0 2px 0 rgba(245, 196, 81, 0.15);
}

.exercise-options-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.exercise-option-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-md);
  font-size: 1.05rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: all var(--transition-fast);
  background: #FFFFFF;
  color: var(--color-text-main);
  box-shadow: 0 3px 0 var(--border-depth);
}

.exercise-option-btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  background: var(--bg-sky);
  color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 5px 0 var(--border-depth);
}

.exercise-option-btn:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--border-depth);
}

.exercise-option-btn.correct {
  border-color: #357046 !important;
  background: #E5F3EB !important;
  color: #1E4F2F !important;
  box-shadow: 0 3px 0 #2F603D !important;
}

.exercise-option-btn.incorrect {
  border-color: var(--accent-coral) !important;
  background: #FCECE9 !important;
  color: #8C291B !important;
  box-shadow: 0 3px 0 #BD4B3A !important;
}

.exercise-option-btn:disabled {
  cursor: default;
}

.exercise-feedback-card {
  padding: 18px 20px;
  border-radius: var(--radius-md);
  margin-top: 8px;
  animation: fadeIn 0.3s ease;
}

.exercise-feedback-card.correct {
  background: #E5F3EB;
  border: 2px solid #C6E6D3;
  color: #1E4F2F;
  box-shadow: 0 3px 0 #92CCA8;
}

.exercise-feedback-card.incorrect {
  background: linear-gradient(180deg, #FFFDF7 0%, #FEF3C7 100%);
  border: 2px solid #F5C451;
  color: #7A5300;
  box-shadow: 0 3px 0 #D9A028;
}

/* ================= DYNASTY CHIPS IN HISTORY ================= */
.dynasty-chips-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  margin-bottom: 22px;
}

.dynasty-chip {
  padding: 8px 18px;
  border-radius: var(--radius-full);
  border: 2px solid var(--border-tactile);
  background: #FFFFFF;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--color-text-main);
  cursor: pointer;
  box-shadow: 0 2px 0 var(--border-depth);
  transition: all var(--transition-fast);
}

.dynasty-chip:hover {
  border-color: var(--accent-orange);
  background: #FFFDF7;
  color: #8F5215;
  transform: translateY(-1px);
}

.dynasty-chip.active {
  background: linear-gradient(180deg, var(--accent-orange) 0%, #C4792C 100%);
  color: #FFFFFF;
  border-color: #B26A23;
  box-shadow: 0 3px 0 #8F5215, 0 4px 10px rgba(233, 152, 66, 0.3);
}

.monarch-dynasty-badge {
  font-size: 0.78rem;
  font-weight: 800;
  background: #FEF3C7;
  color: #B45309;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  margin-left: 6px;
}

/* ================= THREE-SCREEN RESTRUCTURE (WELCOME -> HUB -> MODULE) ================= */

/* Screen Visibility Rules */
body.screen-welcome .app-header {
  display: none;
}
body.screen-welcome .themes-nav-bar {
  display: none !important;
}
body.screen-welcome .components-tabs-bar {
  display: none !important;
}
body.screen-welcome .benji-floating-dock {
  display: none !important;
}

body.screen-hub .themes-nav-bar {
  display: none !important;
}
body.screen-hub .components-tabs-bar {
  display: none !important;
}

body.screen-module .themes-nav-bar {
  display: none !important;
}
body.screen-module .components-tabs-bar {
  display: none !important;
}

/* ================= 1. WELCOME SCREEN ================= */
.welcome-screen-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 0 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  animation: fadeIn 0.4s ease;
}

.welcome-hero-brand {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  padding: 8px 0 16px 0;
}

/* 3D Pixar Animation Volumetric Block Letters */
.welcome-logo-badge {
  display: inline-flex;
  gap: 16px;
  font-family: var(--font-display);
  font-size: 3.8rem;
  font-weight: 900;
  line-height: 1;
  padding: 8px 12px 14px 12px;
  filter: drop-shadow(0 14px 32px rgba(15, 23, 42, 0.16));
}

.w-logo-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 90px;
  border-radius: 26px;
  border: 3.5px solid;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  user-select: none;
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 900;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

/* Specular curved gloss overlay on upper half */
.w-logo-letter::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 6px;
  right: 6px;
  height: 42%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.15) 100%);
  border-radius: 20px 20px 36px 36px;
  pointer-events: none;
  z-index: 1;
}

/* 3D Physics Bouncing Hover */
.w-logo-letter:hover {
  transform: translateY(-14px) scale(1.15) rotate(0deg) !important;
  box-shadow: 0 18px 0 rgba(0, 0, 0, 0.28), 0 26px 40px rgba(0, 0, 0, 0.25), inset 0 3px 2px #FFFFFF !important;
  z-index: 5;
}

/* B: Cerulean Explorer Blue */
.letter-b { 
  color: #0369A1; 
  background: linear-gradient(180deg, #FFFFFF 0%, #E0F2FE 30%, #38BDF8 75%, #0284C7 100%); 
  border-color: #7DD3FC;
  box-shadow: 0 10px 0 #075985, 0 13px 0 #0C4A6E, 0 18px 28px rgba(2, 132, 199, 0.35), inset 0 3px 2px #FFFFFF, inset 0 -4px 6px rgba(0, 0, 0, 0.22);
  text-shadow: 0 2px 0 #BAE6FD, 0 5px 0 #0284C7, 0 7px 0 #075985, 0 8px 14px rgba(7, 89, 133, 0.45);
  transform: rotate(-3.5deg) translateY(-2px);
}

/* E: Warm Honey Amber */
.letter-e { 
  color: #B45309; 
  background: linear-gradient(180deg, #FFFFFF 0%, #FEF3C7 30%, #FBBF24 75%, #D97706 100%); 
  border-color: #FDE68A;
  box-shadow: 0 10px 0 #92400E, 0 13px 0 #78350F, 0 18px 28px rgba(217, 119, 6, 0.35), inset 0 3px 2px #FFFFFF, inset 0 -4px 6px rgba(0, 0, 0, 0.22);
  text-shadow: 0 2px 0 #FDE68A, 0 5px 0 #D97706, 0 7px 0 #92400E, 0 8px 14px rgba(146, 64, 14, 0.45);
  transform: rotate(2.5deg) translateY(3px);
}

/* N: Jungle Emerald Green */
.letter-n { 
  color: #047857; 
  background: linear-gradient(180deg, #FFFFFF 0%, #D1FAE5 30%, #34D399 75%, #059669 100%); 
  border-color: #A7F3D0;
  box-shadow: 0 10px 0 #065F46, 0 13px 0 #064E3B, 0 18px 28px rgba(5, 150, 105, 0.35), inset 0 3px 2px #FFFFFF, inset 0 -4px 6px rgba(0, 0, 0, 0.22);
  text-shadow: 0 2px 0 #A7F3D0, 0 5px 0 #059669, 0 7px 0 #065F46, 0 8px 14px rgba(6, 95, 70, 0.45);
  transform: rotate(-2deg) translateY(-4px);
}

/* J: Candy Berry Ruby Red */
.letter-j { 
  color: #BE123C; 
  background: linear-gradient(180deg, #FFFFFF 0%, #FFE4E6 30%, #FB7185 75%, #E11D48 100%); 
  border-color: #FECDD3;
  box-shadow: 0 10px 0 #9F1239, 0 13px 0 #881337, 0 18px 28px rgba(225, 29, 72, 0.35), inset 0 3px 2px #FFFFFF, inset 0 -4px 6px rgba(0, 0, 0, 0.22);
  text-shadow: 0 2px 0 #FECDD3, 0 5px 0 #E11D48, 0 7px 0 #9F1239, 0 8px 14px rgba(159, 18, 57, 0.45);
  transform: rotate(3deg) translateY(2px);
}

/* I: Royal Sapphire Indigo */
.letter-i { 
  color: #4338CA; 
  background: linear-gradient(180deg, #FFFFFF 0%, #E0E7FF 30%, #818CF8 75%, #4F46E5 100%); 
  border-color: #C7D2FE;
  box-shadow: 0 10px 0 #3730A3, 0 13px 0 #312E81, 0 18px 28px rgba(79, 70, 229, 0.35), inset 0 3px 2px #FFFFFF, inset 0 -4px 6px rgba(0, 0, 0, 0.22);
  text-shadow: 0 2px 0 #C7D2FE, 0 5px 0 #4F46E5, 0 7px 0 #3730A3, 0 8px 14px rgba(55, 48, 163, 0.45);
  transform: rotate(-2.5deg) translateY(-1px);
}

/* Floating Cinema Badge Ribbon */
.welcome-acronym-ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 2px solid #E2E8F0;
  border-top-color: #FFFFFF;
  border-bottom-color: #CBD5E1;
  border-radius: var(--radius-full);
  padding: 8px 24px;
  box-shadow: 0 5px 0 #CBD5E1, 0 12px 28px rgba(15, 23, 42, 0.08), inset 0 2px 0 rgba(255, 255, 255, 0.95);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-text-main);
  flex-wrap: wrap;
  transition: transform var(--transition-normal);
}

.welcome-acronym-ribbon:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 0 #CBD5E1, 0 16px 36px rgba(15, 23, 42, 0.12), inset 0 2px 0 #FFFFFF;
}

.acronym-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-full);
  padding: 4px 12px;
  box-shadow: 0 2px 0 #CBD5E1;
  letter-spacing: 0.3px;
  cursor: default;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.acronym-item:hover {
  transform: translateY(-2px) scale(1.05);
  background: #FFFFFF;
  border-color: var(--color-primary);
  box-shadow: 0 4px 8px rgba(14, 165, 233, 0.18);
  color: var(--color-primary-dark);
}

.acronym-bullet {
  font-size: 1.12rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.12));
}

.acronym-sep {
  color: #F59E0B;
  font-weight: 900;
  font-size: 0.95rem;
  filter: drop-shadow(0 1px 2px rgba(245, 158, 11, 0.35));
}

/* Pixar Explorer Gold Motto Banner */
.welcome-motto-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, #FFFBEB 0%, #FEF08A 28%, #FDE047 70%, #EAB308 100%);
  color: #713F12;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.12rem;
  padding: 10px 32px;
  border-radius: var(--radius-full);
  border: 2.5px solid #CA8A04;
  box-shadow: 0 5px 0 #A16207, 0 12px 28px rgba(202, 138, 4, 0.35), inset 0 2px 2px #FFFFFF;
  letter-spacing: 0.35px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
  transition: transform var(--transition-normal);
}

.welcome-motto-tag:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 7px 0 #A16207, 0 16px 36px rgba(202, 138, 4, 0.42), inset 0 2px 2px #FFFFFF;
}

.welcome-motto-tag strong {
  font-weight: 900;
  color: #451A03;
  text-decoration: underline;
  text-decoration-color: rgba(202, 138, 4, 0.6);
  text-underline-offset: 3px;
}

.motto-star {
  font-size: 1.18rem;
  display: inline-block;
  animation: mottoStarSparkle 3s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(161, 98, 7, 0.45));
}

@keyframes mottoStarSparkle {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 2px 4px rgba(161, 98, 7, 0.4));
  }
  50% {
    transform: scale(1.24) rotate(18deg);
    filter: drop-shadow(0 3px 8px rgba(234, 179, 8, 0.85));
  }
}

/* Panoramic 2-Column Cockpit for Laptops and Tablets */
.welcome-stage-grid {
  display: grid;
  grid-template-columns: minmax(360px, 460px) 1fr;
  gap: 36px;
  width: 100%;
  align-items: center;
}

/* Left Column: Hero Character Stage - Completely Unboxed, Grand, Floating */
.welcome-character-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.welcome-benji-hero-wrap {
  width: 100%;
  max-width: 440px;
  border-radius: 36px;
  overflow: hidden;
  border: none;
  box-shadow: 0 20px 48px -12px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.7);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: benjiHeroFloat 4s ease-in-out infinite alternate;
}

@keyframes benjiHeroFloat {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-8px);
  }
}

.welcome-hero-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 15%;
  filter: drop-shadow(0 12px 28px rgba(15, 23, 42, 0.12));
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: block;
  border-radius: 36px;
}

.welcome-benji-hero-wrap:hover .welcome-hero-photo {
  transform: scale(1.04);
}

.welcome-benji-svg-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Right Column: Setup Panel beside Benji */
.welcome-setup-card {
  width: 100%;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 32px;
  padding: 32px 36px;
  box-shadow: 0 16px 45px -8px rgba(15, 23, 42, 0.1), 0 4px 12px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 26px;
}

.setup-step-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.setup-step-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-main);
}

.step-num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 800;
  border: 1px solid var(--color-primary-dark);
  box-shadow: 0 2px 4px rgba(22, 117, 165, 0.3);
}

.setup-step-hint {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin-top: -2px;
  line-height: 1.45;
}

/* Language Selection Grid (4 columns across on desktop/laptop) */
.welcome-lang-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.welcome-lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 14px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-tactile);
  background: #FFFFFF;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-main);
  cursor: pointer;
  box-shadow: 0 3px 0 var(--border-depth), 0 3px 6px rgba(24, 54, 75, 0.05);
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.welcome-lang-btn:hover {
  border-color: var(--color-primary);
  background: var(--bg-sky);
  color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 5px 0 var(--border-depth), 0 6px 14px rgba(22, 117, 165, 0.18);
}

.welcome-lang-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--border-depth), 0 2px 4px rgba(24, 54, 75, 0.08);
}

.welcome-lang-btn.active {
  border-color: var(--color-primary-dark);
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #FFFFFF;
  box-shadow: 0 3px 0 #0C4360, 0 6px 14px rgba(22, 117, 165, 0.3);
}

/* Age Selection Grid (4 columns across on desktop/laptop) */
.welcome-age-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.welcome-age-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 18px 12px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-tactile);
  background: #FFFFFF;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--border-depth), 0 4px 8px rgba(24, 54, 75, 0.05);
  transition: all var(--transition-fast);
}

.welcome-age-card:hover {
  border-color: var(--color-accent);
  background: #FFFDF7;
  transform: translateY(-3px);
  box-shadow: 0 6px 0 var(--border-depth), 0 8px 16px rgba(245, 196, 81, 0.2);
}

.welcome-age-card:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--border-depth), 0 2px 4px rgba(24, 54, 75, 0.08);
}

.welcome-age-card.active {
  border-color: var(--color-accent-dark);
  background: linear-gradient(180deg, #FFFDF7 0%, #FEF3C7 100%);
  box-shadow: 0 4px 0 #C9961E, 0 8px 18px rgba(245, 196, 81, 0.28);
}

.w-age-icon {
  font-size: 2.2rem;
  margin-bottom: 6px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.w-age-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-text-main);
}

.w-age-sub {
  font-size: 0.82rem;
  font-weight: 700;
  color: #B45309;
  margin-bottom: 4px;
}

.w-age-desc {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  line-height: 1.35;
}

/* Responsive Adjustments for Tablet & Mobile */
@media (max-width: 1080px) {
  .welcome-stage-grid {
    grid-template-columns: 360px 1fr;
    gap: 22px;
  }
  .welcome-benji-hero-wrap {
    height: 250px;
  }
  .welcome-lang-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .welcome-age-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .welcome-screen-container {
    padding: 16px 0 40px;
    gap: 20px;
  }
  .welcome-logo-badge {
    font-size: 2.8rem;
    gap: 10px;
  }
  .w-logo-letter {
    width: 62px;
    height: 62px;
  }
  .welcome-acronym-ribbon {
    font-size: 0.95rem;
    padding: 6px 16px;
    gap: 8px;
  }
  .welcome-stage-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .welcome-character-stage {
    flex-direction: column;
    align-items: center;
    padding: 0;
    gap: 16px;
  }
  .welcome-benji-hero-wrap {
    width: 280px;
    max-width: 85%;
    height: auto;
    flex-shrink: 0;
  }
  .welcome-setup-card {
    padding: 24px 20px;
  }
}

@media (max-width: 580px) {
  .welcome-logo-badge {
    font-size: 2.2rem;
    gap: 6px;
  }
  .w-logo-letter {
    width: 48px;
    height: 48px;
  }
  .welcome-acronym-ribbon {
    font-size: 0.82rem;
    padding: 6px 12px;
    gap: 6px;
  }
  .welcome-character-stage {
    flex-direction: column;
    text-align: center;
    padding: 0;
  }
  .welcome-benji-hero-wrap {
    width: 220px;
    max-width: 80%;
    height: auto;
  }
  .welcome-lang-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .welcome-age-grid {
    grid-template-columns: 1fr;
  }
}

/* Start Adventure Button */
.welcome-cta-container {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.btn-hero-start {
  padding: 18px 52px;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #FFFFFF;
  border: 2px solid var(--color-primary-dark);
  box-shadow: 0 6px 0 #0C4360, 0 12px 28px rgba(22, 117, 165, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  letter-spacing: 0.5px;
}

.btn-hero-start:hover {
  transform: translateY(-3px);
  box-shadow: 0 9px 0 #0C4360, 0 16px 36px rgba(22, 117, 165, 0.45);
}

.btn-hero-start:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #0C4360, 0 4px 8px rgba(22, 117, 165, 0.25);
}

/* ================= 2. HUB SCREEN (PANORAMIC MODULES SHOWCASE) ================= */
.hub-screen-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-bottom: 60px;
  animation: fadeIn 0.4s ease;
}

.hub-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 60%, var(--support-twilight) 100%);
  color: #FFFFFF;
  border-radius: var(--radius-xl);
  border: 2.5px solid var(--border-tactile);
  padding: 38px 44px;
  box-shadow: 0 8px 0 var(--border-depth), 0 20px 45px -10px rgba(24, 54, 75, 0.16);
  gap: 32px;
  position: relative;
  overflow: hidden;
}

.hub-banner::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, transparent 70%);
  pointer-events: none;
}

.hub-greeting-tag {
  display: inline-block;
  background: rgba(255, 255, 255, 0.22);
  padding: 6px 18px;
  border-radius: var(--radius-full);
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(6px);
}

.hub-banner-content h2 {
  font-family: var(--font-display);
  font-size: 2.3rem;
  margin-bottom: 8px;
  line-height: 1.2;
}

.hub-banner-content p {
  font-size: 1.12rem;
  opacity: 0.95;
  max-width: 680px;
  line-height: 1.55;
}

.hub-banner-avatar {
  flex-shrink: 0;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 
    0 8px 0 rgba(12, 67, 96, 0.4),
    0 20px 45px rgba(0, 0, 0, 0.32);
  overflow: hidden;
  background: radial-gradient(circle at center, #FFFDF8 0%, #F5E8D3 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hub-banner:hover .hub-banner-avatar {
  transform: scale(1.04) rotate(1.5deg);
}

.hub-mascot-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

/* Modules Hub Grid (2-Column Panoramic Grid across 1240px width) */
.modules-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  width: 100%;
}

/* Feature 9th card across full width if single on last row */
.module-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.module-card {
  background: #FFFFFF;
  border: 2.5px solid var(--border-tactile);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
  box-shadow: 0 6px 0 var(--border-depth), 0 14px 30px rgba(24, 54, 75, 0.08);
  position: relative;
  overflow: hidden;
  padding: 16px;
  gap: 20px;
}

.module-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 0 var(--border-depth), 0 24px 48px rgba(22, 117, 165, 0.2);
  border-color: var(--color-primary);
}

/* Framed 3:4 Portrait Media Window (Zero Cropping of Child & Essential Scene) */
.module-card-media {
  position: relative;
  width: 240px;
  height: 320px; /* Exact 3:4 aspect ratio: 240 / 320 = 0.75 */
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: radial-gradient(circle at center, #FFFFFF 0%, #F6ECDD 100%);
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 0 var(--border-depth), 0 8px 18px rgba(24, 54, 75, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--transition-normal), border-color var(--transition-normal);
}

.module-card:hover .module-card-media {
  border-color: var(--color-primary);
  transform: scale(1.015);
}

.module-card-img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Zero cropping: child and entire scene fully visible */
  object-position: center center;
  display: block;
  border-radius: calc(var(--radius-lg) - 2px);
  filter: drop-shadow(0 4px 10px rgba(24, 54, 75, 0.1));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.module-card:hover .module-card-img {
  transform: scale(1.025);
}

.module-card-media.no-image {
  width: 240px;
  height: 320px;
  background: linear-gradient(135deg, var(--bg-sand) 0%, var(--bg-canvas) 100%);
}

.module-card-media.no-image .module-card-img {
  display: none;
}

/* Content Column in 2-Column Split Card */
.module-card-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 8px 4px 0;
  flex: 1;
  min-height: 320px;
  gap: 12px;
}

/* Card Header with Category Badge and Tag */
.module-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 2px;
}

.module-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, #FFFFFF 0%, #F5E8D3 100%);
  border: 2px solid var(--border-tactile);
  box-shadow: 0 3px 0 var(--border-depth), 0 4px 10px rgba(24, 54, 75, 0.1);
  font-size: 1.55rem;
  flex-shrink: 0;
}

.module-tag {
  background: rgba(255, 248, 236, 0.98);
  color: var(--color-text-main);
  border: 1.5px solid var(--border-tactile);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.8rem;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 0 var(--border-depth);
}

.module-tag.badge-new {
  background: linear-gradient(180deg, #FFFDF7 0%, #FEF3C7 100%);
  color: #7A5300;
  border-color: #F5C451;
  box-shadow: 0 2px 0 #D9A028, 0 4px 10px rgba(245, 196, 81, 0.2);
}

.module-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.module-card-body h3 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--color-text-main);
  margin-bottom: 4px;
  line-height: 1.25;
}

.module-motto {
  font-size: 0.9rem;
  font-style: italic;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 8px;
}

.module-desc {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.52;
  margin-bottom: 12px;
}

.module-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
}

.h-pill {
  background: var(--bg-canvas-subtle);
  border: 1.5px solid var(--border-tactile);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-main);
}

.module-card-footer {
  margin-top: 10px;
}

.enter-module-btn {
  width: 100%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  padding: 13px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #FFFFFF;
  border: 2px solid var(--color-primary-dark);
  box-shadow: 0 4px 0 #0C4360, 0 6px 14px rgba(22, 117, 165, 0.25);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.enter-module-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #0C4360, 0 10px 20px rgba(22, 117, 165, 0.35);
}

.enter-module-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #0C4360;
}

/* Responsive adjustments for Tablets & Laptops */
@media (max-width: 1100px) {
  .modules-hub-grid {
    gap: 20px;
  }
  .module-card {
    padding: 14px;
    gap: 16px;
  }
  .module-card-media {
    width: 210px;
    height: 280px; /* 3:4 */
  }
  .module-card-content {
    min-height: 280px;
  }
}

@media (max-width: 860px) {
  .hub-banner {
    flex-direction: column-reverse;
    text-align: center;
    padding: 28px 20px;
    gap: 22px;
  }
  .hub-banner-avatar {
    width: 170px;
    height: 170px;
  }
  .hub-greeting-tag {
    margin: 0 auto 10px;
  }
  .modules-hub-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .module-card {
    flex-direction: row;
  }
}

@media (max-width: 620px) {
  .module-card {
    flex-direction: column;
    align-items: center;
    padding: 16px;
  }
  .module-card-media {
    width: 100%;
    max-width: 255px;
    height: 340px; /* 3:4 */
  }
  .module-card-content {
    width: 100%;
    min-height: auto;
    padding: 12px 0 0 0;
  }
}

/* ================= 3. MODULE HERO BANNER (PANORAMIC THEMATIC STAGE) ================= */
.module-hero-banner {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 32px;
  align-items: center;
  width: 100%;
  max-width: 1380px;
  margin: 0 auto 28px;
  background: linear-gradient(135deg, #0C4360 0%, #1675A5 60%, #1A446C 100%);
  color: #FFFFFF;
  border: 2.5px solid var(--border-tactile);
  border-radius: var(--radius-xl);
  padding: 32px 38px;
  box-shadow: 0 8px 0 var(--border-depth), 0 20px 45px -10px rgba(24, 54, 75, 0.16);
  position: relative;
  overflow: hidden;
}

.module-hero-banner::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, transparent 70%);
  pointer-events: none;
}

.module-hero-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  position: relative;
  z-index: 1;
}

.module-header-nav-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-back-to-hub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 2px solid var(--border-tactile);
  color: var(--color-primary-dark);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  padding: 9px 20px;
  border-radius: var(--radius-full);
  cursor: pointer;
  box-shadow: 0 3px 0 var(--border-depth), 0 4px 8px rgba(24, 54, 75, 0.06);
  transition: all var(--transition-fast);
}

.btn-back-to-hub:hover {
  background: #FEF3C7;
  border-color: #D9A028;
  color: #7A5300;
  transform: translateX(-3px);
  box-shadow: 0 4px 0 #B45309, 0 8px 16px rgba(0, 0, 0, 0.2);
}

.btn-back-to-hub:active {
  transform: translateX(-1px);
  box-shadow: 0 1px 0 var(--border-depth);
}

.module-header-motto {
  font-size: 0.95rem;
  font-style: italic;
  font-weight: 700;
  color: #FEF3C7;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.module-hero-title-group {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.module-header-icon {
  font-size: 3.2rem;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
}

.module-header-text-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.module-hero-tag {
  display: inline-block;
  background: linear-gradient(180deg, #FFFDF7 0%, #FEF3C7 100%);
  color: #7A5300;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  border: 1.5px solid #F5C451;
  box-shadow: 0 2px 0 #D9A028;
  width: fit-content;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.module-header-title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.2;
}

.module-hero-desc {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.55;
  max-width: 700px;
}

.module-quick-features {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.m-feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.18);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-full);
  padding: 6px 14px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: #FFFFFF;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(6px);
}

/* Framed 3:4 Portrait Thematic Media (Zero Cropping) */
.module-hero-media {
  flex-shrink: 0;
  width: 255px;
  height: 340px; /* Exact 3:4 aspect ratio */
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 0 rgba(12, 67, 96, 0.4), 0 20px 45px rgba(0, 0, 0, 0.32);
  background: radial-gradient(circle at center, #FFFFFF 0%, #F5E8D3 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-normal);
}

.module-hero-img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Zero cropping */
  object-position: center center;
  transition: transform 0.4s ease;
  display: block;
  border-radius: calc(var(--radius-xl) - 2px);
  filter: drop-shadow(0 4px 10px rgba(24, 54, 75, 0.12));
}

.module-hero-banner:hover .module-hero-img {
  transform: scale(1.025);
}

.module-media-caption {
  display: none;
}

.module-tab-content-host {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

/* Responsive adjustments for Tablets & Laptops */
@media (max-width: 1080px) {
  .module-hero-banner {
    grid-template-columns: 1fr 225px;
    gap: 24px;
    padding: 24px;
  }
  .module-hero-media {
    width: 225px;
    height: 300px; /* 3:4 */
  }
  .module-header-title {
    font-size: 1.85rem;
  }
}

@media (max-width: 860px) {
  .module-hero-banner {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 22px 18px;
    text-align: center;
  }
  .module-header-nav-row {
    justify-content: center;
  }
  .module-hero-title-group {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .module-hero-tag {
    margin: 0 auto;
  }
  .module-quick-features {
    justify-content: center;
  }
  .module-hero-media {
    width: 100%;
    max-width: 255px;
    height: 340px; /* 3:4 */
    margin: 0 auto;
  }
}

/* ==========================================================================
   BENJI — World Countries & Cultures Dossiers (38 Principal Countries)
   Comprehensive pedagogical UI with interactive tabs, timelines, rivers,
   monuments, gastronomy, historical figures and Benji's field notebook.
   ========================================================================== */

/* --- Countries Browser Subview --- */
.countries-browser-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.countries-filter-toolbar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--bg-surface-warm);
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-tactile);
  box-shadow: 0 4px 12px rgba(24, 54, 75, 0.05);
}

.country-search-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFFFFF;
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04);
}

.country-search-box:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(22, 117, 165, 0.15);
}

.country-search-box .search-icon {
  font-size: 1.2rem;
  color: var(--color-text-muted);
}

.country-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--color-text);
  outline: none;
}

.clear-search-btn {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 50%;
  transition: all var(--transition-fast);
}

.clear-search-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-text);
}

.continent-chips-scroll {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.countries-results-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  padding: 0 4px;
}

.countries-results-meta strong {
  color: var(--color-primary-dark);
}

/* Countries Cards Grid */
.countries-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 22px;
}

.country-dossier-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-tactile);
  box-shadow: 0 4px 0 var(--border-depth), 0 8px 18px rgba(24, 54, 75, 0.06);
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  cursor: pointer;
}

.country-dossier-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 0 var(--border-depth), 0 16px 28px rgba(24, 54, 75, 0.12);
  border-color: var(--color-primary);
}

.card-hero-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4; /* 4 de altura e 3 de largura */
  height: auto;
  background: linear-gradient(135deg, #E2F1F8 0%, #F4F8FA 100%);
  overflow: hidden;
}

.country-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform var(--transition-normal);
}

.country-dossier-card:hover .country-card-img {
  transform: scale(1.05);
}

.card-flag-floating {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 2.2rem;
  line-height: 1;
  background: rgba(255, 255, 255, 0.92);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(4px);
}

.card-continent-pill {
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  background: rgba(255, 255, 255, 0.94);
  padding: 4px 10px;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4px);
}

.country-card-content {
  display: flex;
  flex-direction: column;
  padding: 16px;
  flex: 1;
  gap: 12px;
}

.country-title-row {
  display: flex;
  flex-direction: column;
}

.country-card-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-text);
}

.country-native-sub {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.country-card-capital {
  font-size: 0.92rem;
  color: var(--color-text-muted);
}

.country-card-highlights {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-surface-warm);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-tactile);
}

.highlight-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.highlight-item .hi-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.highlight-item .hi-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.country-card-actions {
  margin-top: auto;
  padding-top: 8px;
}

.country-card-actions .open-country-page-btn {
  width: 100%;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
}

/* --- Dedicated Full-Screen Country Dossier View --- */
.country-dossier-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: fadeIn 0.25s ease-out;
}

/* Dossier Top Nav */
.dossier-top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  background: var(--bg-surface-warm);
  padding: 12px 18px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-tactile);
  box-shadow: 0 3px 0 var(--border-depth);
}

.nav-left-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.nav-right-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quick-select-label {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.country-quick-select {
  padding: 8px 14px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-tactile);
  background: #FFFFFF;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition-fast);
}

.country-quick-select:focus {
  border-color: var(--color-primary);
}

/* Country Hero Banner */
.country-hero-banner {
  display: grid;
  grid-template-columns: minmax(340px, 440px) 1fr;
  gap: 32px;
  background: #FFFFFF;
  padding: 28px;
  border-radius: var(--radius-xl);
  border: 3px solid var(--border-tactile);
  box-shadow: 0 6px 0 var(--border-depth), 0 14px 32px rgba(24, 54, 75, 0.1);
  align-items: center;
}

.country-hero-media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4; /* 4 de altura e 3 de largura */
  height: auto;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 3px solid var(--border-tactile);
  box-shadow: 0 6px 0 var(--border-depth), 0 10px 24px rgba(24, 54, 75, 0.12);
  background: linear-gradient(135deg, #1A446C 0%, #2980B9 100%);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

.country-hero-media:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 10px 0 var(--border-depth), 0 16px 36px rgba(24, 54, 75, 0.18);
}

.country-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.4s ease;
  display: block;
}

.country-hero-media:hover .country-hero-img {
  transform: scale(1.04);
}

.module-literature .country-hero-media {
  background: radial-gradient(circle at center, #1E293B 0%, #0B1120 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  box-sizing: border-box;
}

.module-literature .country-hero-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain !important;
  object-position: center center;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.hero-zoom-pill {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(18, 30, 49, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.84rem;
  padding: 6px 14px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.25);
  pointer-events: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.country-hero-media:hover .hero-zoom-pill {
  background: var(--color-primary, #EB5E28);
  transform: scale(1.06);
}

.hero-flag-floating {
  position: absolute;
  bottom: 14px;
  right: 14px;
  font-size: 3.2rem;
  line-height: 1;
  background: rgba(255, 255, 255, 0.96);
  padding: 6px 14px;
  border-radius: var(--radius-md);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(6px);
  border: 2px solid rgba(255, 255, 255, 0.85);
  pointer-events: none;
  transition: transform 0.2s ease;
}

.country-hero-media:hover .hero-flag-floating {
  transform: scale(1.08);
}

/* Benji Country Image Lightbox */
.benji-lightbox-backdrop {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(11, 26, 44, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  animation: modalFadeIn 0.22s ease-out;
}

.benji-lightbox-card {
  position: relative;
  max-width: 960px;
  width: 94vw;
  max-height: 90vh;
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  border: 4px solid var(--border-tactile);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modalPopUp 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.lightbox-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(18, 30, 49, 0.85);
  color: #FFFFFF;
  border: 2px solid rgba(255, 255, 255, 0.4);
  font-size: 1.8rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s ease, transform 0.2s ease;
}

.lightbox-close-btn:hover {
  background: var(--color-danger, #E74C3C);
  transform: scale(1.1);
}

.lightbox-image-wrap {
  width: 100%;
  max-height: calc(90vh - 90px);
  background: #0f1c2b;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.lightbox-full-img {
  max-width: 100%;
  max-height: calc(90vh - 90px);
  object-fit: contain;
  display: block;
}

.lightbox-caption-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  background: #FFFFFF;
  border-top: 2px solid var(--border-tactile);
}

.lightbox-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
}

.lightbox-flag {
  font-size: 2.2rem;
  line-height: 1;
}

.lightbox-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--color-text);
}

.lightbox-sub {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.lightbox-observation-clue {
  margin-top: 6px;
  background: #FFFBEB;
  border: 1.5px solid #FDE68A;
  border-left: 4px solid #F59E0B;
  padding: 8px 14px;
  border-radius: 8px;
  text-align: left;
}

.lightbox-obs-label {
  color: #92400E;
  font-weight: 800;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.lightbox-obs-text {
  color: #78350F;
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0;
  font-weight: 500;
}

.country-hero-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.hero-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.continent-badge-tag {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  padding: 4px 14px;
  border-radius: 20px;
}

.country-motto-pill {
  font-size: 0.88rem;
  font-style: italic;
  color: var(--color-text-muted);
  background: var(--bg-surface-warm);
  padding: 4px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-tactile);
}

.country-hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--color-text);
  line-height: 1.1;
}

.country-native-name {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.country-quick-facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.fact-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background: var(--bg-surface-warm);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-tactile);
  min-width: 0;
  box-sizing: border-box;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.fact-box:hover {
  border-color: #3B82F6;
  transform: translateY(-1px);
}

.fact-box .fact-box-header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.fact-box .fact-icon {
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
}

.fact-box .fact-lbl {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--color-text-muted);
  letter-spacing: 0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fact-box .fact-val {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.35;
  word-break: break-word;
}

.fact-box.fact-box-wide {
  grid-column: span 2;
}

.fact-box.fact-box-full {
  grid-column: 1 / -1;
}

@media (max-width: 640px) {
  .fact-box.fact-box-wide {
    grid-column: 1 / -1;
  }
}

/* Dossier Tabs Bar */
.country-dossier-tabs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--bg-surface-warm);
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-tactile);
  box-shadow: 0 3px 0 var(--border-depth);
}

.country-tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  background: transparent;
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.country-tab-btn:hover {
  background: var(--bg-sky);
  color: var(--color-primary-dark);
}

.country-tab-btn.active {
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #FFFFFF;
  border-color: var(--color-primary-dark);
  box-shadow: 0 3px 0 #0C4360, 0 4px 10px rgba(22, 117, 165, 0.25);
}

/* Country Tab Content Panel */
.country-tab-content-panel {
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  border: 3px solid var(--border-tactile);
  padding: 28px;
  box-shadow: 0 6px 0 var(--border-depth), 0 10px 24px rgba(24, 54, 75, 0.05);
}

.tab-pane {
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: fadeIn 0.2s ease-out;
}

.tab-intro-card {
  background: linear-gradient(135deg, #F0F9FF 0%, #E6F4FA 100%);
  border: 2px solid #BAE6FD;
  border-radius: var(--radius-lg);
  padding: 18px 24px;
  box-shadow: 0 2px 6px rgba(14, 165, 233, 0.08);
}

.founding-pill {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: #0369A1;
  background: #FFFFFF;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 12px;
  border: 1.5px solid #BAE6FD;
}

.history-lead-text, .geo-lead-text, .detail-history-story p {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.68;
  color: #0F172A;
  font-weight: 500;
  white-space: pre-line;
}

.author-kid-bio-box p {
  white-space: pre-line;
}

.section-sub-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--color-text);
}

/* Eras Timeline */
.eras-timeline-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.era-timeline-card {
  display: flex;
  gap: 18px;
  background: var(--bg-surface-warm);
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: 0 3px 0 var(--border-depth);
  transition: transform var(--transition-fast);
}

.era-timeline-card:hover {
  transform: translateX(4px);
  border-color: var(--color-primary);
}

.era-index-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 3px 6px rgba(22, 117, 165, 0.3);
}

.era-card-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.era-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.era-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--color-text);
}

.era-period-badge {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  background: #FFFFFF;
  padding: 4px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-tactile);
}

.era-body-desc {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-text);
}

/* Geography Specs Grid */
.geo-specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.geo-spec-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-surface-warm);
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: 0 3px 0 var(--border-depth);
}

.spec-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

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

.spec-header h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-text);
}

.geo-spec-card p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--color-text);
}

/* Dossier Items Grids (Rivers, Monuments, Figures, Food) */
.dossier-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

.dossier-item-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-surface-warm);
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: 0 4px 0 var(--border-depth);
  transition: transform var(--transition-fast);
}

.dossier-item-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-primary);
}

.item-card-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.item-icon-bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  font-size: 1.6rem;
  flex-shrink: 0;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

.river-bubble { background: #E0F2FE; }
.monument-bubble { background: #FEF3C7; }
.figure-bubble { background: #EDE9FE; }
.food-bubble { background: #FEE2E2; }

/* =====================================================================
   MUSEUM-STYLE HISTORICAL FIGURES & MONARCHS (PUBLIC DOMAIN WIKIPEDIA)
   ===================================================================== */
.figures-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.figure-item-card.figure-card-large {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background: var(--color-surface);
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-xl);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}

.figure-item-card.figure-card-large:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.13);
  border-color: #818CF8;
}

.figure-card-media {
  position: relative;
  width: 100%;
  height: 270px;
  background: linear-gradient(135deg, #1E1B4B 0%, #312E81 100%);
  overflow: hidden;
  cursor: pointer;
}

.figure-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.figure-card-media:hover .figure-card-img {
  transform: scale(1.06);
}

.figure-card-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4.5rem;
  background: #EDE9FE;
  color: #6366F1;
}

.figure-card-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.5) 0%, transparent 40%, rgba(15, 23, 42, 0.55) 100%);
}

.figure-pd-pill {
  pointer-events: auto;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(8px);
  color: #F8FAFC;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  letter-spacing: 0.3px;
}

.figure-card-zoom-btn {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease;
}

.figure-card-zoom-btn:hover {
  transform: scale(1.15);
  background: #FFFFFF;
}

.figure-card-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  background: var(--color-surface);
}

.figure-card-top-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.figure-role-badge {
  font-size: 0.8rem;
  font-weight: 800;
  color: #4338CA;
  background: #EEF2FF;
  padding: 3px 10px;
  border-radius: 9999px;
  border: 1px solid #C7D2FE;
}

.figure-dates-pill {
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748B;
}

.figure-card-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.25;
}

.figure-source-credit {
  font-size: 0.74rem;
  color: #94A3B8;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #F1F5F9;
  line-height: 1.4;
}

/* Timeline Monarch Portrait Banner */
.timeline-card-media {
  position: relative;
  width: 100%;
  height: 250px;
  background: linear-gradient(135deg, #1E1B4B 0%, #312E81 100%);
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  cursor: pointer;
}

.timeline-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-card-media:hover img {
  transform: scale(1.06);
}

.timeline-card-media .figure-card-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.45) 0%, transparent 40%, rgba(15, 23, 42, 0.5) 100%);
}

/* Monarch Modal Hero Portrait */
.monarch-hero-portrait-box {
  position: relative;
  width: 100%;
  height: 320px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 16px;
  border: 2px solid var(--border-tactile);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  background: linear-gradient(135deg, #1E1B4B 0%, #312E81 100%);
  cursor: pointer;
}

.monarch-hero-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.35s ease;
}

.monarch-hero-portrait-box:hover .monarch-hero-portrait-img {
  transform: scale(1.04);
}

/* World Figures Section in History */
.world-figures-section {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 2px dashed #CBD5E1;
}

.world-figures-section .section-subtitle-wrap {
  margin-bottom: 24px;
}

.world-figures-section .section-subtitle-wrap h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 6px;
}

.world-figures-section .section-subtitle-wrap p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

/* Fallback for legacy small figure portrait box */
.figure-portrait-box {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 2px solid var(--border-tactile);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  background: #EDE9FE;
}

.figure-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.25s ease;
}

.figure-item-card:hover .figure-portrait-img {
  transform: scale(1.08);
}

.figure-pd-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #4F46E5;
  background: #EEF2FF;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  margin-top: 4px;
  border: 1px solid #C7D2FE;
  width: fit-content;
}

.item-title-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.item-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 800;
  color: var(--color-text);
}

.item-meta-pill {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.item-desc {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--color-text);
}

.river-mouth-info {
  font-size: 0.92rem;
  color: #0369A1;
  background: #E0F2FE;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid #BAE6FD;
}

.item-highlight-box {
  display: flex;
  gap: 10px;
  background: #FFFBEB;
  border: 1.5px solid #FDE68A;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  line-height: 1.45;
  color: #92400E;
}

.item-highlight-box p {
  margin: 0;
}

.item-highlight-box .fact-star {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.figure-role-tag {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: #6D28D9;
}

.item-dates {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.figure-accomplishment-box {
  display: flex;
  gap: 10px;
  background: #F5F3FF;
  border: 1.5px solid #DDD6FE;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.94rem;
  line-height: 1.45;
  color: #5B21B6;
}

.figure-accomplishment-box p {
  margin: 0;
}

.food-type-tag {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: #B91C1C;
  background: #FEE2E2;
  padding: 2px 8px;
  border-radius: 8px;
  display: inline-block;
  width: fit-content;
}

/* Culture Stack */
.culture-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.culture-section-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-surface-warm);
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  box-shadow: 0 3px 0 var(--border-depth);
}

.sec-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sec-header .sec-icon {
  font-size: 1.4rem;
}

.sec-header h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-text);
}

.culture-section-card p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.68;
  color: var(--color-text);
  white-space: pre-line;
}

/* Benji Notebook & Curiosities */
.benji-notebook-card {
  display: flex;
  gap: 20px;
  align-items: center;
  background: linear-gradient(135deg, #FEF9C3 0%, #FEF08A 100%);
  border: 2.5px solid #FACC15;
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: 0 4px 14px rgba(234, 179, 8, 0.18);
}

.notebook-avatar-wrap {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #FFFFFF;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}

.notebook-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Travel Photo Snapshot inside Caderno de Viagem */
.notebook-action-snapshot {
  width: 120px;
  background: #FFFFFF;
  padding: 6px 6px 10px 6px;
  border-radius: 12px;
  border: 1.5px solid rgba(234, 179, 8, 0.4);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.notebook-action-snapshot:hover,
.notebook-action-snapshot:focus {
  transform: translateY(-3px) rotate(-1deg);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
  outline: none;
}

.notebook-snapshot-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* Fichas dos Monumentos: Proporção Vertical Rigorosa 3:4 (4 de altura por 3 de largura) */
.monument-dossier-page .notebook-action-snapshot,
.feature-notebook-snapshot {
  width: 140px;
}

.monument-dossier-page .notebook-snapshot-img,
.feature-notebook-snapshot .notebook-snapshot-img {
  aspect-ratio: 3 / 4 !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover;
}

.notebook-snapshot-caption {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 800;
  color: #854D0E;
  margin-top: 6px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.notebook-speech-bubble {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notebook-header-tag {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  color: #854D0E;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.benji-travel-quote {
  margin: 0;
  font-size: 1.18rem;
  line-height: 1.55;
  color: #713F12;
  font-weight: 600;
  font-style: italic;
}

.curiosity-age-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.age-bracket-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-surface-warm);
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: 0 3px 0 var(--border-depth);
  transition: all var(--transition-fast);
}

.age-bracket-card.active-age {
  border-color: var(--color-primary);
  background: #F0F9FF;
  box-shadow: 0 4px 0 var(--color-primary-dark), 0 6px 16px rgba(14, 165, 233, 0.15);
}

.age-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  background: #FFFFFF;
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid var(--border-tactile);
  width: fit-content;
}

.age-bracket-card.active-age .age-badge {
  background: var(--color-primary);
  color: #FFFFFF;
  border-color: var(--color-primary-dark);
}

.age-bracket-card p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--color-text);
}

.expedition-clues-box {
  background: #F0FDF4;
  border: 2px solid #86EFAC;
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  box-shadow: 0 3px 0 #4ADE80;
}

.clues-ol {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.clues-ol li {
  font-size: 1.02rem;
  line-height: 1.5;
  color: #14532D;
  font-weight: 500;
}

/* Cross Promo to Languages */
.languages-cross-promo-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  border: 2px solid #93C5FD;
  border-radius: var(--radius-xl);
  padding: 22px 26px;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.12);
  margin-top: 12px;
}

.promo-icon {
  font-size: 2.8rem;
  flex-shrink: 0;
}

.promo-content {
  flex: 1;
}

.promo-content h4 {
  margin: 0 0 6px 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: #1E40AF;
}

.promo-content p {
  margin: 0;
  font-size: 0.98rem;
  color: #1E3A8A;
}

.go-to-languages-btn {
  flex-shrink: 0;
  font-weight: 800;
  font-size: 1rem;
}

/* Modal action extension */
.open-full-country-dossier-btn {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 0 #0C4360;
}

/* Responsive adjustments */
@media (max-width: 1120px) {
  .country-hero-banner {
    grid-template-columns: minmax(300px, 380px) 1fr;
    gap: 24px;
    padding: 22px;
  }
  .country-hero-media {
    aspect-ratio: 3 / 4;
    height: auto;
  }
}

@media (max-width: 960px) {
  .country-hero-banner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 22px;
    padding: 20px;
  }
  .country-hero-media {
    max-width: 420px;
    aspect-ratio: 3 / 4;
    height: auto;
    margin: 0 auto;
  }
  .hero-header-row, .country-quick-facts-grid {
    justify-content: center;
  }
  .languages-cross-promo-card {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 600px) {
  .country-hero-banner {
    padding: 16px;
  }
  .country-hero-media {
    max-width: 100%;
    aspect-ratio: 3 / 4;
    height: auto;
  }
  .country-hero-title {
    font-size: 2rem;
  }
  .hero-flag-floating {
    font-size: 2.6rem;
    padding: 4px 10px;
    bottom: 10px;
    right: 10px;
  }
  .country-dossier-tabs-bar {
    overflow-x: auto;
    white-space: nowrap;
    flex-wrap: nowrap;
  }
  .dossier-items-grid {
    grid-template-columns: 1fr;
  }
  .benji-notebook-card {
    flex-direction: column;
    text-align: center;
  }
}

/* ==========================================================================
   ACIDENTES GEOGRÁFICOS DO MUNDO: MONTANHAS, RIOS, LAGOS E DESERTOS
   ========================================================================== */

.geo-features-browser {
  display: flex;
  flex-direction: column;
  gap: 22px;
  animation: fadeIn 0.25s ease-out;
}

/* Intro Hero Banner */
.geo-features-intro-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: linear-gradient(135deg, #EBF8FF 0%, #E6FFFA 100%);
  border: 2px solid #BEE3F8;
  border-radius: var(--radius-xl);
  padding: 22px 28px;
  box-shadow: 0 4px 0 #90CDF4, 0 8px 20px rgba(49, 130, 206, 0.08);
}

.geo-features-intro-text h3 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  margin-bottom: 6px;
}

.geo-features-intro-text p {
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 820px;
}

.geo-features-stat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  padding: 12px 18px;
  background: #FFFFFF;
  border: 2px solid #BEE3F8;
  border-radius: var(--radius-lg);
  box-shadow: 0 3px 0 #BEE3F8;
  text-align: center;
}

.geo-features-stat-pill .stat-count {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--color-primary);
  line-height: 1;
}

.geo-features-stat-pill .stat-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* Filter & Search Toolbar */
.geo-features-toolbar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg-surface-warm);
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-tactile);
  box-shadow: 0 3px 0 var(--border-depth);
}

.feature-search-box {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.feature-search-input {
  width: 100%;
  padding: 12px 42px 12px 42px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-tactile);
  background: #FFFFFF;
  font-family: var(--font-body);
  font-size: 0.96rem;
  color: var(--color-text);
  outline: none;
  transition: all var(--transition-fast);
}

.feature-search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(34, 147, 206, 0.15);
}

.feature-search-box .search-icon {
  position: absolute;
  left: 14px;
  font-size: 1.05rem;
  pointer-events: none;
  opacity: 0.65;
}

/* Category Pills Bar */
.category-pills-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.feature-category-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border-tactile);
  background: #FFFFFF;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 0 var(--border-depth);
}

.feature-category-pill:hover {
  background: var(--bg-sky);
  border-color: #90CDF4;
  transform: translateY(-1px);
}

.feature-category-pill.active {
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #FFFFFF;
  border-color: var(--color-primary-dark);
  box-shadow: 0 3px 0 #0C4360, 0 4px 10px rgba(22, 117, 165, 0.25);
}

/* Grid of Geographic Feature Cards */
.geo-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

/* Feature Card */
.geo-feature-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  border: 2px solid var(--border-tactile);
  box-shadow: 0 4px 0 var(--border-depth), 0 8px 18px rgba(24, 54, 75, 0.06);
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, border-color 0.2s ease;
  cursor: pointer;
}

.geo-feature-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-primary);
  box-shadow: 0 8px 0 var(--border-depth), 0 16px 28px rgba(22, 117, 165, 0.15);
}

/* Card Hero Media */
.geo-feature-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4; /* 4 de altura e 3 de largura */
  height: auto;
  overflow: hidden;
  background: linear-gradient(135deg, #1A446C 0%, #2980B9 100%);
}

/* Subtle top vignette for contrast and framing of top labels */
.geo-feature-card-media::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  z-index: 1;
}

.geo-feature-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.35s ease;
  color: transparent; /* hides broken alt text overlay */
}

.geo-feature-card:hover .geo-feature-card-img {
  transform: scale(1.05);
}

/* Kings of Portugal Card Portrait Framing & Face Centering */
.monarch-card .geo-feature-card-media {
  background: radial-gradient(circle at 50% 30%, #1e293b 0%, #0f172a 100%);
}

.monarch-card .geo-feature-card-img,
.monarch-card-img {
  object-fit: cover;
  object-position: center 18%; /* Default portrait face centering */
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), object-position 0.25s ease;
}

.monarch-card:hover .geo-feature-card-img,
.monarch-card:hover .monarch-card-img {
  transform: scale(1.05);
}

.geo-feature-card-overlay {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
  gap: 6px;
  z-index: 2;
}

.geo-category-badge {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  align-items: center;
  gap: 3.5px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.18;
  padding: 2.5px 7px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
  max-width: calc(100% - 75px);
  min-width: 0;
  word-break: break-word;
}

.geo-record-badge {
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #0F172A;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 1.18;
  padding: 2.5px 7px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.14);
  white-space: nowrap;
  flex-shrink: 0;
}

.geo-card-zoom-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s ease, background 0.18s ease;
}

.geo-card-zoom-btn:hover {
  transform: scale(1.12);
  background: #FFFFFF;
}

/* Card Body */
.geo-feature-card-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
}

.geo-feature-card-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.geo-feature-flag {
  font-size: 1.8rem;
  line-height: 1;
}

.geo-feature-name-group {
  display: flex;
  flex-direction: column;
}

.geo-feature-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.25;
}

.geo-feature-subtitle {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.geo-feature-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.geo-meta-item {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.geo-badge-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.76rem;
  font-weight: 800;
  color: #B7791F;
  background: #FEFCBF;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid #ECC94B;
}

.geo-feature-summary {
  font-size: 0.88rem;
  line-height: 1.48;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.geo-feature-facts-preview {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--bg-surface-warm);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-tactile);
}

.geo-fact-mini-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.35;
}

.fact-mini-dot {
  color: var(--color-primary);
  font-size: 0.75rem;
}

.geo-feature-card-actions {
  margin-top: auto;
  padding-top: 8px;
}

.geo-feature-card-actions .btn {
  width: 100%;
  justify-content: center;
  font-weight: 800;
  padding: 10px 14px;
}

/* ==========================================================================
   FEATURE DOSSIER MODAL STYLES
   ========================================================================== */

.feature-dossier-modal {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.feature-modal-hero-box {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  aspect-ratio: 3 / 4; /* 4 de altura e 3 de largura */
  height: auto;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 3px solid var(--border-tactile);
  box-shadow: 0 6px 0 var(--border-depth), 0 10px 24px rgba(24, 54, 75, 0.12);
  background: linear-gradient(135deg, #1A446C 0%, #2980B9 100%);
}

.feature-modal-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.feature-modal-hero-badge-row {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.feature-hero-badge-record {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.feature-hero-lightbox-btn {
  font-weight: 800;
  font-size: 0.86rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.feature-highlight-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: linear-gradient(135deg, #FFFDF5 0%, #FEFCBF 100%);
  border: 2px solid #ECC94B;
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  box-shadow: 0 3px 0 #D69E2E;
}

.highlight-spark {
  font-size: 1.6rem;
  line-height: 1;
}

.highlight-title {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 800;
  color: #744210;
  display: block;
  margin-bottom: 4px;
}

.highlight-text {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #744210;
}

/* Specs Grid */
.feature-specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.feature-spec-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-surface-warm);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-tactile);
}

.feature-spec-cell.highlight-cell {
  background: #EBF8FF;
  border-color: #90CDF4;
}

.feature-spec-cell .spec-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.feature-spec-cell .spec-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
}

.feature-spec-cell .highlight-value {
  color: var(--color-primary-dark);
  font-size: 1.05rem;
  font-weight: 900;
}

/* Narrative Sections */
.feature-modal-sections {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feature-section-block {
  background: #FFFFFF;
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  box-shadow: 0 3px 0 var(--border-depth);
}

.feature-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.feature-section-header .section-icon {
  font-size: 1.3rem;
}

.feature-section-header h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-text);
}

.feature-section-block p {
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--color-text);
}

/* Benji Diary Box */
.feature-benji-diary-box {
  background: linear-gradient(135deg, #FFF5F5 0%, #FED7D7 100%);
  border: 2px solid #FEB2B2;
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  box-shadow: 0 3px 0 #FC8181;
}

.benji-diary-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 800;
  color: #9B2C2C;
  margin-bottom: 8px;
}

.benji-diary-quote {
  font-size: 0.98rem;
  line-height: 1.55;
  color: #742A2A;
  font-style: italic;
  font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .geo-features-intro-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .geo-features-stat-pill {
    width: 100%;
  }
  .geo-features-grid {
    grid-template-columns: 1fr;
  }
  .feature-modal-hero-box {
    max-width: 320px;
    aspect-ratio: 3 / 4;
    height: auto;
  }
}

/* ================= DEDICATED GEOGRAPHIC FEATURE DOSSIER PAGE (3:4 RATIO - 4 ALTURA, 3 LARGURA) ================= */
.feature-dossier-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: fadeIn 0.25s ease-out;
}

.feature-hero-banner {
  display: grid;
  grid-template-columns: minmax(340px, 440px) 1fr;
  gap: 32px;
  background: #FFFFFF;
  padding: 28px;
  border-radius: var(--radius-xl);
  border: 3px solid var(--border-tactile);
  box-shadow: 0 6px 0 var(--border-depth), 0 14px 32px rgba(24, 54, 75, 0.1);
  align-items: center;
}

.feature-hero-media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4; /* 4 de altura e 3 de largura */
  height: auto;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 3px solid var(--border-tactile);
  box-shadow: 0 6px 0 var(--border-depth), 0 10px 24px rgba(24, 54, 75, 0.12);
  background: linear-gradient(135deg, #1A446C 0%, #2980B9 100%);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

.feature-hero-media:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 10px 0 var(--border-depth), 0 16px 36px rgba(24, 54, 75, 0.18);
}

.feature-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.4s ease;
}

.feature-hero-media:hover .feature-hero-img {
  transform: scale(1.04);
}

.feature-hero-metric-overlay {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 2;
  pointer-events: none;
}

.hero-metric-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.hero-metric-chip strong {
  color: #FBBF24;
}

.feature-hero-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.category-badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #E0F2FE;
  color: #0369A1;
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  border: 1px solid #BAE6FD;
}

.feature-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FEF3C7;
  color: #92400E;
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  border: 1px solid #FDE68A;
}

.feature-hero-title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--color-primary-dark);
  line-height: 1.15;
  margin: 0;
}

.feature-hero-subtitles {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.feature-native-name {
  font-style: italic;
  color: #0284C7;
}

.feature-en-name {
  color: var(--color-text-muted);
  font-weight: 600;
}

.feature-countries-line {
  font-size: 0.96rem;
  color: var(--color-text);
}

.feature-quick-select {
  padding: 8px 14px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-tactile);
  background: #FFFFFF;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  outline: none;
  max-width: 320px;
  transition: border-color var(--transition-fast);
}

.feature-quick-select:focus {
  border-color: var(--color-primary);
}

.feature-quick-facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.highlight-fact-box {
  background: #EFF6FF !important;
  border-color: #93C5FD !important;
}

.highlight-fact-box .fact-val {
  color: #1D4ED8 !important;
}

/* Feature Dossier Navigation Tabs */
.feature-dossier-tabs-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--border-tactile);
}

.feature-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border: 2px solid transparent;
  border-bottom: none;
  background: var(--bg-surface-warm);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.feature-tab-btn:hover {
  background: #FFFFFF;
  color: var(--color-primary-dark);
}

.feature-tab-btn.active {
  background: #FFFFFF;
  color: var(--color-primary);
  border-color: var(--border-tactile);
  box-shadow: 0 -2px 0 var(--color-primary);
  margin-bottom: -2px;
}

.feature-tab-content-panel {
  background: #FFFFFF;
  border: 3px solid var(--border-tactile);
  border-radius: 0 var(--radius-xl) var(--radius-xl) var(--radius-xl);
  padding: 28px;
  box-shadow: 0 6px 0 var(--border-depth);
}

/* Overview Pane */
.feature-highlight-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: linear-gradient(135deg, #FFFDF5 0%, #FEFCBF 100%);
  border: 2px solid #ECC94B;
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  box-shadow: 0 4px 0 #D69E2E;
  margin-bottom: 24px;
}

.feature-highlight-card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: #744210;
  margin-bottom: 6px;
}

.highlight-summary {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #744210;
}

.feature-spec-grid-full {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.feature-spec-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg-surface-warm);
  border: 1.5px solid var(--border-tactile);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  box-shadow: 0 2px 0 var(--border-depth);
}

.feature-spec-card.highlight-card {
  background: #EFF6FF;
  border-color: #93C5FD;
  box-shadow: 0 2px 0 #60A5FA;
}

.spec-card-icon {
  font-size: 1.4rem;
  line-height: 1;
}

.spec-card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.spec-card-label {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.spec-card-value {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.4;
}

.spec-card-badge {
  display: inline-block;
  align-self: flex-start;
  margin-top: 4px;
  background: #FBBF24;
  color: #78350F;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.feature-connected-countries-box {
  margin-top: 28px;
  background: #F8FAFC;
  border: 2px dashed #CBD5E1;
  border-radius: var(--radius-lg);
  padding: 18px 22px;
}

.connected-countries-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.connected-countries-header .conn-icon {
  font-size: 1.6rem;
}

.connected-countries-header h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 2px;
}

.connected-countries-header p {
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

.connected-countries-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Narrative Cards */
.feature-narrative-card {
  background: #FFFFFF;
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 3px 0 var(--border-depth);
}

.narrative-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1.5px solid var(--border-tactile);
}

.narrative-icon {
  font-size: 1.6rem;
}

.narrative-card-header h4 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-primary-dark);
}

.narrative-text {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--color-text);
}

/* Next / Prev Landmark Navigator */
.feature-next-prev-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 16px 20px;
  background: var(--bg-surface-warm);
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-lg);
  box-shadow: 0 3px 0 var(--border-depth);
}

.feature-next-prev-nav .nav-placeholder {
  flex: 1;
}

@media (max-width: 980px) {
  .feature-hero-banner {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
  }
  .feature-hero-media {
    max-width: 420px;
    margin: 0 auto;
    aspect-ratio: 3 / 4;
    height: auto;
  }
}

@media (max-width: 600px) {
  .feature-hero-media {
    max-width: 100%;
    aspect-ratio: 3 / 4;
    height: auto;
  }
}

/* ==========================================================================
   DEDICATED MONUMENT DOSSIER PAGE (4:3 RATIO BENJI ARTWORKS & HERITAGE)
   ========================================================================== */
.monument-dossier-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: fadeIn 0.25s ease-out;
}

.monument-hero-banner {
  display: grid;
  grid-template-columns: minmax(360px, 480px) 1fr;
  gap: 32px;
  background: #FFFFFF;
  padding: 28px;
  border-radius: var(--radius-xl);
  border: 3px solid var(--border-tactile);
  box-shadow: 0 6px 0 var(--border-depth), 0 14px 32px rgba(24, 54, 75, 0.1);
  align-items: center;
}

.monument-hero-media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-width: 380px;
  margin: 0 auto;
  height: auto;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 3px solid var(--border-tactile);
  box-shadow: 0 6px 0 var(--border-depth), 0 10px 24px rgba(24, 54, 75, 0.12);
  background: linear-gradient(135deg, #1A446C 0%, #2980B9 100%);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

.monument-hero-media:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 10px 0 var(--border-depth), 0 16px 36px rgba(24, 54, 75, 0.18);
}

.monument-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.4s ease;
}

.monument-hero-media:hover .monument-hero-img {
  transform: scale(1.04);
}

.monument-hero-category-chip {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 2;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.monument-hero-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.monument-hero-title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--color-primary-dark);
  line-height: 1.18;
  margin: 0;
}

.monument-location-line {
  font-size: 1.05rem;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.monument-hero-summary {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0;
}

.monument-quick-facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.monument-quick-select {
  padding: 8px 14px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-tactile);
  background: #FFFFFF;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  outline: none;
  max-width: 340px;
  transition: border-color var(--transition-fast);
}

.monument-dossier-tabs-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--border-tactile);
}

.monument-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border: 2px solid transparent;
  border-bottom: none;
  background: var(--bg-surface-warm);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.monument-tab-btn:hover {
  background: #FFFFFF;
  color: var(--color-primary-dark);
}

.monument-tab-btn.active {
  background: #FFFFFF;
  color: var(--color-primary);
  border-color: var(--border-tactile);
  box-shadow: 0 -2px 0 var(--color-primary);
  margin-bottom: -2px;
}

.monument-tab-content-panel {
  background: #FFFFFF;
  border: 3px solid var(--border-tactile);
  border-radius: 0 var(--radius-xl) var(--radius-xl) var(--radius-xl);
  padding: 28px;
  box-shadow: 0 6px 0 var(--border-depth);
}

.monument-curiosities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.monument-curiosity-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #F8FAFC;
  border: 2px solid #E2E8F0;
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: 0 3px 0 #CBD5E1;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.monument-curiosity-card:hover {
  transform: translateY(-2px);
  border-color: #38BDF8;
  background: #F0F9FF;
}

.monument-audio-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  border: 2px solid #93C5FD;
  border-radius: var(--radius-lg);
  padding: 16px 22px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.monument-siblings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.monument-sibling-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #FFFFFF;
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 3px 0 var(--border-depth);
}

.monument-sibling-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  box-shadow: 0 5px 0 var(--border-depth), 0 8px 16px rgba(0, 0, 0, 0.08);
}

.monument-sibling-thumb {
  width: 54px;
  height: 72px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-tactile);
}

@media (max-width: 900px) {
  .monument-hero-banner {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
  }
  .monument-hero-media {
    max-width: 100%;
    margin: 0 auto;
  }
}

/* ==========================================================================
   DIRECT ALL-SUBDIVISIONS-OPEN DOSSIER LAYOUT (PAÍSES, CIDADES & MONUMENTOS)
   ========================================================================== */
.country-subdivisions-container,
.feature-subdivisions-container,
.monument-subdivisions-container {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 10px;
}

.country-subdivision-section,
.feature-subdivision-section,
.monument-subdivision-section {
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  border: 3px solid var(--border-tactile);
  padding: 26px 28px;
  box-shadow: 0 6px 0 var(--border-depth), 0 10px 24px rgba(24, 54, 75, 0.05);
  scroll-margin-top: 90px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.country-subdivision-section:hover,
.feature-subdivision-section:hover,
.monument-subdivision-section:hover {
  border-color: #7DD3FC;
  box-shadow: 0 6px 0 var(--border-depth), 0 12px 28px rgba(14, 165, 233, 0.12);
}

.subdivision-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 22px;
  border-bottom: 2.5px solid var(--border-tactile);
  flex-wrap: wrap;
}

.subdivision-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.subdivision-icon {
  font-size: 2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: var(--bg-sky, #F0F9FF);
  border: 2px solid var(--border-tactile);
  box-shadow: 0 3px 0 var(--border-depth);
  flex-shrink: 0;
}

.subdivision-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--color-text);
}

.subdivision-lead {
  display: block;
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.subdivision-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  background: var(--bg-surface-warm);
  border: 1.5px solid var(--border-tactile);
  border-radius: 20px;
  padding: 5px 14px;
  white-space: nowrap;
}

.sticky-tabs-bar {
  position: sticky;
  top: 12px;
  z-index: 30;
  backdrop-filter: blur(10px);
  background: rgba(254, 250, 246, 0.96) !important;
  box-shadow: 0 4px 12px rgba(24, 54, 75, 0.12), 0 3px 0 var(--border-depth) !important;
}

.tab-all-badge {
  font-size: 0.76rem;
  font-weight: 800;
  background: #10B981;
  color: #FFFFFF;
  padding: 2px 7px;
  border-radius: 10px;
  margin-left: 4px;
}

@media (max-width: 768px) {
  .country-subdivision-section,
  .feature-subdivision-section {
    padding: 18px 16px;
  }
  .subdivision-title {
    font-size: 1.25rem;
  }
  .subdivision-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* ==========================================================================
   BENJI — In-Page Multiple-Choice Photo Challenge ("Desafio com Fotos")
   ========================================================================== */
.inline-photo-quiz-section {
  background: linear-gradient(180deg, #FFFDF9 0%, #F0F9FF 100%);
  border: 3px solid var(--border-tactile);
  border-radius: var(--radius-xl);
  padding: 26px 28px;
  margin: 26px 0 30px;
  box-shadow: 0 8px 0 var(--border-depth), 0 16px 36px rgba(14, 165, 233, 0.12);
  position: relative;
  overflow: hidden;
}

.inline-photo-quiz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 2.5px dashed #BAE6FD;
}

.inline-photo-quiz-title-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.inline-photo-quiz-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border: 2.5px solid #F59E0B;
  box-shadow: 0 4px 0 #D97706;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.85rem;
  flex-shrink: 0;
}

.inline-photo-quiz-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #B45309;
  background: #FEF3C7;
  border: 1.5px solid #FCD34D;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 4px;
}

.inline-photo-quiz-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--color-text-main);
  margin: 0;
  line-height: 1.25;
}

.inline-photo-quiz-sub {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin: 3px 0 0;
}

.inline-photo-quiz-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.photo-quiz-mode-switch {
  display: inline-flex;
  background: #FFFFFF;
  border: 2px solid var(--border-tactile);
  border-radius: 999px;
  padding: 3px;
  box-shadow: 0 2px 0 var(--border-depth);
}

.pq-mode-btn {
  border: none;
  background: transparent;
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--color-text-muted);
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pq-mode-btn.active {
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
}

.pq-score-badges {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pq-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #FFFFFF;
  border: 2px solid var(--border-tactile);
  border-radius: 999px;
  padding: 6px 13px;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  box-shadow: 0 2px 0 var(--border-depth);
}

/* Mode 1 Layout: Single Hero Photo Left + 4 Options Right */
.pq-hero-mode-grid {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 26px;
  align-items: stretch;
}

.pq-hero-photo-card {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  border: 3px solid var(--border-tactile);
  background: radial-gradient(circle at center, #FFFFFF 0%, #F1F5F9 100%);
  box-shadow: 0 6px 0 var(--border-depth), 0 12px 24px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pq-hero-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  transition: transform 0.35s ease;
}

.pq-hero-photo-card:hover .pq-hero-photo-img {
  transform: scale(1.04);
}

.pq-zoom-chip {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(15, 23, 42, 0.82);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  pointer-events: none;
}

.pq-mystery-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.pq-question-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

.pq-prompt-banner {
  background: #FFFFFF;
  border: 2px solid #BAE6FD;
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  box-shadow: 0 3px 0 #7DD3FC;
}

.pq-q-type-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  color: #0284C7;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.pq-prompt-question {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 800;
  color: var(--color-text-main);
  margin: 0 0 8px;
  line-height: 1.35;
}

.pq-clue-box {
  font-size: 0.94rem;
  color: #334155;
  background: #F8FAFC;
  border-left: 4px solid #F59E0B;
  padding: 9px 13px;
  border-radius: 8px;
  line-height: 1.5;
}

.pq-text-options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.pq-text-option-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  background: #FFFFFF;
  border: 2.5px solid var(--border-tactile);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 0 var(--border-depth);
  cursor: pointer;
  transition: all 0.16s ease;
  font-family: var(--font-body);
}

.pq-text-option-btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  background: #F0F9FF;
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--border-depth);
}

.pq-opt-letter {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #E0F2FE;
  border: 1.5px solid #7DD3FC;
  color: #0369A1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pq-opt-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.pq-opt-main {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--color-text-main);
  line-height: 1.25;
}

.pq-opt-sub {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.3;
}

/* Mode 2 Layout: Question Prompt + 4 Photo Option Cards (A, B, C, D) */
.pq-four-photos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.pq-photo-option-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 3px solid var(--border-tactile);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--border-depth), 0 8px 18px rgba(15, 23, 42, 0.06);
  transition: all 0.2s ease;
  padding: 0;
  text-align: left;
  position: relative;
}

.pq-photo-option-card:hover:not(:disabled) {
  transform: translateY(-4px);
  border-color: var(--color-primary);
  box-shadow: 0 8px 0 var(--border-depth), 0 14px 26px rgba(2, 132, 199, 0.18);
}

.pq-photo-option-media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: #F1F5F9;
  overflow: hidden;
}

.pq-photo-option-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  transition: transform 0.3s ease;
}

.pq-photo-option-card:hover:not(:disabled) .pq-photo-option-img {
  transform: scale(1.05);
}

.pq-photo-option-letter {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.85);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #FFFFFF;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.pq-photo-option-zoom {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid #CBD5E1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  cursor: pointer;
  z-index: 3;
}

.pq-photo-option-caption {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #FFFFFF;
  border-top: 2px solid var(--border-tactile);
  width: 100%;
}

.pq-photo-option-title {
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 800;
  color: var(--color-text-main);
  line-height: 1.25;
}

/* Correct / Incorrect Option States */
.pq-text-option-btn.is-correct,
.pq-photo-option-card.is-correct {
  border-color: #10B981 !important;
  background: #ECFDF5 !important;
  box-shadow: 0 4px 0 #059669 !important;
}

.pq-text-option-btn.is-correct .pq-opt-letter,
.pq-photo-option-card.is-correct .pq-photo-option-letter {
  background: #10B981 !important;
  color: #FFFFFF !important;
  border-color: #059669 !important;
}

.pq-text-option-btn.is-wrong,
.pq-photo-option-card.is-wrong {
  border-color: #EF4444 !important;
  background: #FEF2F2 !important;
  box-shadow: 0 4px 0 #DC2626 !important;
  opacity: 0.88;
}

.pq-text-option-btn.is-wrong .pq-opt-letter,
.pq-photo-option-card.is-wrong .pq-photo-option-letter {
  background: #EF4444 !important;
  color: #FFFFFF !important;
  border-color: #DC2626 !important;
}

/* Feedback Banner */
.pq-feedback-banner {
  margin-top: 16px;
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  border: 2.5px solid #10B981;
  background: #ECFDF5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  animation: fadeIn 0.25s ease;
}

.pq-feedback-banner.is-wrong {
  border-color: #F59E0B;
  background: #FFFBEB;
}

.pq-feedback-text-col {
  flex: 1;
  min-width: 240px;
}

.pq-feedback-title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 800;
  color: #065F46;
  margin: 0 0 4px;
}

.pq-feedback-banner.is-wrong .pq-feedback-title {
  color: #92400E;
}

.pq-feedback-desc {
  font-size: 0.94rem;
  color: #1E293B;
  margin: 0;
  line-height: 1.5;
}

.pq-feedback-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 960px) {
  .pq-hero-mode-grid {
    grid-template-columns: 230px 1fr;
    gap: 18px;
  }
  .pq-four-photos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .pq-hero-mode-grid {
    grid-template-columns: 1fr;
  }
  .pq-hero-photo-card {
    max-width: 260px;
    margin: 0 auto;
  }
  .pq-text-options-grid {
    grid-template-columns: 1fr;
  }
  .inline-photo-quiz-section {
    padding: 18px 16px;
  }
}



/* Photo quiz auto-advance countdown */
.pq-auto-advance-track { margin-top: 10px; height: 6px; border-radius: 999px; background: rgba(15,23,42,0.08); overflow: hidden; }
.pq-auto-advance-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #0284C7, #22C55E); transition: width 1s linear; }
.pq-feedback-banner.is-wrong .pq-auto-advance-fill { background: linear-gradient(90deg, #F59E0B, #F97316); }

/* ==========================================================================
   BENJI — Module View Switcher (Cards vs Photo Challenge) & Invitation Cards
   ========================================================================== */
.module-view-switcher {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #F1F5F9;
  padding: 4px;
  border-radius: 999px;
  border: 2px solid #CBD5E1;
  box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.05);
  margin-bottom: 12px;
}

.view-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border: none;
  background: transparent;
  border-radius: 999px;
  font-family: var(--font-display, inherit);
  font-size: 0.92rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
}

.view-switch-btn:hover {
  color: #0F172A;
  background: rgba(255, 255, 255, 0.6);
}

.view-switch-btn.active {
  background: #FFFFFF;
  color: #0284C7;
  box-shadow: 0 3px 8px rgba(2, 132, 199, 0.2), 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* Photo Quiz Jump / Invitation Card */
.photo-quiz-jump-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, #EFF6FF 0%, #F0FDF4 100%);
  border: 2px dashed #38BDF8;
  border-radius: 16px;
  padding: 14px 20px;
  margin: 14px 0 20px 0;
  cursor: pointer;
  transition: all 0.22s ease;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.08);
}

.photo-quiz-jump-card:hover {
  transform: translateY(-2px);
  border-color: #0284C7;
  box-shadow: 0 8px 20px rgba(14, 165, 233, 0.16);
  background: linear-gradient(135deg, #E0F2FE 0%, #DCFCE7 100%);
}

.pq-jump-icon {
  font-size: 1.8rem;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.15);
  flex-shrink: 0;
}

.pq-jump-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pq-jump-text strong {
  font-size: 1.02rem;
  color: #0F172A;
}

.pq-jump-text span {
  font-size: 0.88rem;
  color: #475569;
}

.pq-jump-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #0284C7;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.photo-quiz-jump-card:hover .pq-jump-badge {
  transform: translateX(4px);
  background: #0369A1;
}

@media (max-width: 640px) {
  .photo-quiz-jump-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .pq-jump-badge {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   BENJI LANGUAGES — APPLE iOS RESPONSIVE ARCHITECTURE (iPhone & iPad)
   Optimized for Portrait & Landscape with Safe Area Insets and Auto-fit Images
   ========================================================================== */

/* Universal Safe Areas and Touch Ergonomics */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

body {
  padding-top: 0;
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

/* Universal Image Quality & Fit */
img {
  max-width: 100%;
  height: auto;
  image-rendering: auto;
}

.lang-choice-card-media img,
.showcase-mascot-img,
.landmark-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --------------------------------------------------------------------------
   1. iPhone Portrait & Mobile Screens (< 640px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 640px) {
  /* ================= ULTRA-SLEEK TOP APP BAR (SINGLE ROW) ================= */
  .app-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: rgba(255, 248, 236, 0.96) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    height: calc(48px + env(safe-area-inset-top, 0px)) !important;
    min-height: calc(48px + env(safe-area-inset-top, 0px)) !important;
    max-height: calc(48px + env(safe-area-inset-top, 0px)) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 10px rgba(24, 54, 75, 0.06);
    border-bottom: 1.5px solid var(--border-tactile);
  }

  .app-header .header-inner {
    padding: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  .main-content-container {
    padding-top: 8px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 90px !important;
  }

  .brand-group {
    flex-shrink: 0;
    margin: 0;
    cursor: pointer;
  }

  .brand-logo {
    display: flex;
    align-items: center;
    gap: 0;
  }

  .brand-logo .logo-text {
    font-size: 1.25rem;
    line-height: 1;
    letter-spacing: 0.02em;
  }

  .logo-subtext,
  .brand-motto {
    display: none !important;
  }

  .header-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
  }

  .control-item {
    display: flex;
    align-items: center;
  }

  /* Compact iPhone Header Controls */
  #interface-lang-select {
    min-height: 32px;
    height: 32px;
    padding: 2px 6px;
    font-size: 0.8rem;
    width: 66px;
    max-width: 66px;
    border-radius: 10px;
    background: #FFFFFF;
    border: 1.5px solid var(--border-tactile);
    box-shadow: 0 1.5px 0 var(--border-depth);
  }

  #btn-change-age {
    min-height: 32px;
    height: 32px;
    padding: 2px 8px;
    font-size: 0.78rem;
    border-radius: 10px;
    gap: 4px;
    box-shadow: 0 1.5px 0 var(--border-depth);
  }

  #btn-change-age .age-suffix {
    display: none !important;
  }

  #btn-open-passport {
    min-height: 32px;
    height: 32px;
    width: 34px;
    padding: 0;
    justify-content: center;
    font-size: 0.82rem;
    border-radius: 10px;
    box-shadow: 0 1.5px 0 var(--border-depth);
  }

  #btn-open-passport .pill-text {
    display: none !important;
  }

  #btn-open-passport .pill-icon {
    font-size: 1.05rem;
    margin: 0;
  }

  /* Accessibility Toolbar: Hidden on mobile portrait to preserve screen real estate */
  .accessibility-group {
    display: none !important;
  }

  /* ================= SUB-NAVIGATION BAR (DETAIL PAGE) ================= */
  .lang-page-view {
    gap: 12px;
  }

  .lang-page-top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    background: #FFFFFF;
    border: 1.5px solid var(--border-tactile);
    border-radius: 14px;
    box-shadow: 0 2px 0 var(--border-depth);
    padding: 8px 12px;
    margin-bottom: 4px;
    min-height: 44px;
    height: auto;
  }

  .btn-back-to-menu {
    min-height: 36px;
    height: 36px;
    padding: 4px 12px;
    font-size: 0.82rem;
    border-radius: 12px;
    gap: 6px;
    box-shadow: 0 1.5px 0 var(--border-depth);
  }

  .lang-page-quick-switcher select {
    min-height: 36px;
    height: 36px;
    padding: 4px 10px;
    font-size: 0.82rem;
    border-radius: 12px;
    max-width: 100%;
    box-shadow: 0 1.5px 0 var(--border-depth);
  }

  /* ================= MODE NAVIGATION TABS (SEGMENTED CONTROL) ================= */
  .lang-view-navigation {
    margin: 10px 0 12px 0;
    width: 100%;
  }

  .lang-view-tabs {
    display: flex;
    width: 100%;
    background: #E2E8F0;
    padding: 3px;
    border-radius: 14px;
    gap: 4px;
    border: none;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  .lang-view-tab {
    flex: 1;
    justify-content: center;
    padding: 7px 8px;
    font-size: 0.84rem;
    min-height: 34px;
    height: 34px;
    border-radius: 11px;
    gap: 6px;
    color: #475569;
  }

  .lang-view-tab.active {
    background: #FFFFFF;
    color: var(--color-primary-dark);
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  }

  .lang-view-tab .score-badge {
    padding: 1px 5px;
    font-size: 0.7rem;
  }

  /* ================= CONFIGURATION & FILTERS BAR ================= */
  .lang-config-bar {
    margin-top: -6px !important;
    margin-bottom: 12px !important;
    gap: 8px;
    padding-top: 4px;
    border-top: none;
  }

  .config-row-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .config-control-item {
    gap: 6px;
  }

  .control-label {
    font-size: 0.78rem;
    margin-bottom: 0;
  }

  .btn-group-toggle {
    padding: 2px;
  }

  .toggle-btn {
    padding: 4px 8px;
    font-size: 0.76rem;
    min-height: 30px;
  }

  .btn-voice-speed {
    padding: 4px 10px;
    font-size: 0.78rem;
    min-height: 30px;
  }

  /* ================= MENU LÍNGUAS HERO & TOOLBAR ================= */
  .lang-menu-hero {
    padding: 4px 6px;
    border-radius: 12px;
    margin-bottom: 6px;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .lang-menu-hero .lang-badge-row {
    display: none !important;
  }

  .lang-menu-hero h2 {
    font-size: 1.25rem;
    line-height: 1.2;
    margin: 0 0 4px 0;
    font-weight: 800;
    color: var(--color-primary-dark);
  }

  .lang-menu-hero-left > p {
    display: none !important;
  }

  .lang-menu-stats-row {
    display: flex;
    gap: 6px;
    margin-top: 2px;
    flex-wrap: wrap;
  }

  .lang-menu-stats-row .stat-pill {
    padding: 2px 8px;
    font-size: 0.72rem;
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-primary-dark);
    border: 1.5px solid var(--border-tactile);
    border-radius: 8px;
  }

  .lang-menu-stats-row .stat-pill:nth-child(n+3) {
    display: none !important;
  }

  /* Filter Toolbar */
  .lang-filter-toolbar {
    margin-bottom: 10px;
    gap: 6px;
    padding: 8px 10px;
    background: #FFFFFF;
    border: 1.5px solid var(--border-tactile);
    border-radius: 16px;
    box-shadow: 0 2px 0 var(--border-depth);
  }

  .module-view-switcher {
    display: flex;
    width: 100%;
    background: #E2E8F0;
    padding: 3px;
    border-radius: 12px;
    gap: 4px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
  }

  .view-switch-btn {
    flex: 1;
    justify-content: center;
    padding: 6px 8px;
    font-size: 0.78rem;
    min-height: 32px;
    border-radius: 9px;
  }

  .lang-region-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0;
    width: 100%;
    gap: 6px;
  }

  .lang-region-tab {
    flex: 0 0 auto;
    min-width: 0;
    white-space: nowrap;
    justify-content: center;
    padding: 6px 12px;
    font-size: 0.78rem;
    min-height: 34px;
    border-radius: 10px;
    gap: 5px;
  }

  .lang-search-box {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    min-height: 36px;
    padding: 6px 12px;
    border-radius: 12px;
  }

  .lang-search-box input {
    font-size: 0.82rem;
  }

  /* 6 Course Cards Grid: 1 Full-Width Column */
  .lang-choice-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .lang-choice-card-media {
    width: 100%;
    height: 210px;
  }

  .lang-choice-card-media img {
    object-position: center 20%;
  }

  .lang-choice-card-body {
    padding: 14px;
    gap: 8px;
  }

  .lang-choice-name {
    font-size: 1.2rem;
  }

  .lang-choice-desc {
    font-size: 0.84rem;
    line-height: 1.35;
  }

  .lang-choice-action-btn {
    min-height: 44px;
    font-size: 0.9rem;
  }

  /* Detail Showcase: Stacked Vertically with Zero-Crop 3:4 Aspect Ratio */
  .lang-country-showcase-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px !important;
    gap: 12px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  .showcase-visual {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .showcase-img-frame {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    aspect-ratio: 3 / 4 !important;
    height: auto !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: radial-gradient(circle at center, #1E293B 0%, #0F172A 100%) !important;
    box-shadow: 0 6px 20px rgba(24, 54, 75, 0.15) !important;
    box-sizing: border-box !important;
  }

  .showcase-mascot-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }

  .showcase-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .showcase-country-tag-below {
    padding: 8px 12px;
    margin-top: 8px;
    border-radius: 14px;
    gap: 10px;
  }

  .country-tag-flag {
    font-size: 1.8rem;
  }

  .country-tag-name {
    font-size: 1.05rem;
  }

  .country-tag-region,
  .country-tag-landmark {
    font-size: 0.78rem;
  }

  .showcase-audio-btn-large {
    min-height: 46px;
    padding: 8px 14px;
    border-radius: 14px;
    margin-top: 8px;
    gap: 10px;
  }

  .showcase-audio-btn-large .audio-subtext {
    font-size: 0.72rem;
  }

  .showcase-audio-btn-large .audio-maintext {
    font-size: 0.95rem;
  }

  .showcase-landmarks-carousel {
    margin-top: 8px;
  }

  .landmarks-carousel-title {
    font-size: 0.76rem;
    margin-bottom: 4px;
  }

  .landmarks-thumbnails-row {
    gap: 6px;
    padding: 2px 0;
  }

  .landmark-thumb-btn {
    flex: 0 0 60px;
  }

  .landmark-thumb-btn img {
    width: 60px;
    height: 80px;
    aspect-ratio: 3 / 4;
    border-radius: 8px;
  }

  .landmark-thumb-label {
    font-size: 0.7rem;
  }

  .showcase-matrix-deck {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .discovery-deck-card {
    padding: 12px 14px;
    border-radius: 16px;
  }

  .deck-titles h4 {
    font-size: 0.98rem;
  }

  .deck-desc {
    font-size: 0.82rem;
    line-height: 1.35;
  }

  /* Vocabulary Cards */
  .lang-cards-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .lang-card {
    padding: 14px;
    border-radius: 18px;
  }

  .lang-card .card-image-box {
    width: calc(100% + 28px);
    margin: -14px -14px 10px -14px;
    height: 145px;
    border-radius: 15px 15px 0 0;
  }

  /* Floating Benji Dock */
  .benji-floating-dock {
    transform: scale(0.8);
    bottom: calc(var(--safe-bottom, 0px) + 8px);
    right: 8px;
  }

  /* Onboarding Modal Mobile Refinements */
  .onboarding-hero {
    padding: 16px 14px !important;
    gap: 14px !important;
  }

  .onboarding-avatar-box {
    width: 82px !important;
    height: 82px !important;
    border-width: 3px !important;
  }

  .onboarding-hero-text h2 {
    font-size: 1.15rem !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important;
  }

  .onboarding-hero-text p {
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
  }

  .age-choices-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .onboarding-age-card {
    padding: 12px 10px !important;
  }

  .onboarding-age-card .age-bracket-tag {
    font-size: 0.95rem !important;
  }

  .onboarding-age-card .age-bracket-desc {
    font-size: 0.74rem !important;
    line-height: 1.3 !important;
  }
}

/* --------------------------------------------------------------------------
   2. iPhone Landscape (< 520px height)
   -------------------------------------------------------------------------- */
@media screen and (max-height: 520px) and (orientation: landscape) {
  .app-header {
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    padding: 0 16px;
    box-shadow: 0 2px 8px rgba(24, 54, 75, 0.06);
  }

  .app-header .header-inner {
    padding: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
  }

  .brand-logo .logo-text {
    font-size: 1.22rem;
  }

  .logo-subtext,
  .brand-motto {
    display: none !important;
  }

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

  .lang-page-top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 6px 12px;
    margin-bottom: 6px;
    background: #FFFFFF;
    border: 1.5px solid var(--border-tactile);
    border-radius: 14px;
    box-shadow: 0 2px 0 var(--border-depth);
    min-height: 40px;
    height: auto;
  }

  .btn-back-to-menu {
    min-height: 34px;
    height: 34px;
    padding: 2px 10px;
    font-size: 0.8rem;
    border-radius: 10px;
  }

  .lang-page-quick-switcher select {
    min-height: 34px;
    height: 34px;
    padding: 2px 8px;
    font-size: 0.8rem;
    border-radius: 10px;
  }

  .lang-view-navigation {
    margin: 6px 0 10px 0;
  }

  .lang-view-tabs {
    background: #E2E8F0;
    padding: 2px;
    border: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
  }

  .lang-view-tab {
    min-height: 32px;
    height: 32px;
    padding: 4px 12px;
    font-size: 0.8rem;
  }

  .lang-menu-hero {
    padding: 10px 14px;
    margin-bottom: 10px;
  }

  .lang-menu-hero h2 {
    font-size: 1.2rem;
  }

  .lang-menu-hero p {
    display: none !important;
  }

  /* 6 Course Cards Grid: 2 Columns × 3 Rows */
  .lang-choice-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .lang-choice-card-media {
    height: 125px;
  }

  .lang-choice-card-body {
    padding: 12px;
    gap: 8px;
  }

  .lang-choice-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.8rem;
  }

  .lang-choice-action-btn {
    min-height: 40px;
    padding: 6px 12px;
    font-size: 0.85rem;
  }

  /* Detail Showcase: 2-Column Split View */
  .lang-country-showcase-card {
    grid-template-columns: 210px 1fr;
    padding: 12px 16px;
    gap: 16px;
  }

  .showcase-visual {
    width: 210px;
    margin: 0;
  }

  .showcase-img-frame {
    width: 100%;
    aspect-ratio: 3 / 4;
    height: auto;
    max-height: 280px;
    border-radius: 16px;
    background: radial-gradient(circle at center, #1E293B 0%, #0F172A 100%);
  }

  .showcase-mascot-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .showcase-matrix-deck {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .showcase-audio-btn-large {
    padding: 8px 12px;
  }

  /* Vocabulary Cards */
  .lang-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .lang-card {
    padding: 14px;
    border-radius: 18px;
  }

  .lang-card .card-image-box {
    width: calc(100% + 28px);
    margin: -14px -14px 10px -14px;
    height: 130px;
    border-radius: 15px 15px 0 0;
  }

  /* Floating Benji Dock in Landscape */
  .benji-floating-dock {
    transform: scale(0.75);
    bottom: 8px;
    right: 8px;
  }
}

/* --------------------------------------------------------------------------
   3. iPad Portrait ("Em Pé": 641px - 1024px)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 641px) and (max-width: 1024px) and (orientation: portrait) {
  .app-header .header-inner {
    padding: 12px 24px;
  }

  .lang-menu-hero {
    padding: 28px 24px;
    border-radius: 24px;
    margin-bottom: 24px;
  }

  .lang-menu-hero h2 {
    font-size: 2rem;
  }

  /* Exactly 6 Courses: 2 Columns × 3 Rows */
  .lang-choice-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }

  .lang-choice-card-media {
    height: 220px;
  }

  .lang-choice-card-body {
    padding: 22px;
  }

  .lang-choice-name {
    font-size: 1.45rem;
  }

  .lang-choice-desc {
    font-size: 0.95rem;
    line-height: 1.45;
  }

  /* Detail Showcase: Side-by-side with 340px visual */
  .lang-country-showcase-card {
    grid-template-columns: 340px 1fr;
    padding: 24px;
    gap: 24px;
    border-radius: 24px;
  }

  .showcase-visual {
    width: 340px;
  }

  .showcase-img-frame {
    width: 100%;
    aspect-ratio: 3 / 4;
    height: auto;
    border-radius: 22px;
    background: radial-gradient(circle at center, #1E293B 0%, #0F172A 100%);
  }

  .showcase-mascot-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .showcase-matrix-deck {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  /* Vocabulary Cards */
  .lang-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

/* --------------------------------------------------------------------------
   4. iPad Landscape ("Deitado": >= 768px in landscape, and >= 1025px)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 768px) and (orientation: landscape) and (min-height: 521px),
       screen and (min-width: 1025px) {
  .lang-menu-hero {
    padding: 32px 36px;
    border-radius: 28px;
    margin-bottom: 28px;
  }

  /* Languages Cards Grid: 3-4 Responsive Columns with Generous Card Width */
  .lang-choice-grid {
    grid-template-columns: repeat(auto-fill, minmax(305px, 1fr));
    gap: 20px;
  }

  .lang-choice-card-media {
    height: 210px;
  }

  .lang-choice-card-body {
    padding: 20px;
  }

  .lang-choice-name {
    font-size: 1.4rem;
  }

  /* Detail Showcase: Grand Split Stage */
  .lang-country-showcase-card {
    grid-template-columns: 400px 1fr;
    padding: 32px;
    gap: 32px;
    border-radius: 28px;
  }

  .showcase-visual {
    width: 400px;
  }

  .showcase-img-frame {
    width: 100%;
    aspect-ratio: 3 / 4;
    height: auto;
    border-radius: 24px;
    background: radial-gradient(circle at center, #1E293B 0%, #0F172A 100%);
  }

  .showcase-mascot-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .showcase-matrix-deck {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  /* Vocabulary Cards */
  .lang-cards-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}




/* ==========================================================================
   MONUMENTOS & PATRIMÓNIO ARQUITETÓNICO DO MUNDO (114 MARCOS MUNDIAIS)
   ========================================================================== */
.monuments-intro-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 2px solid #FCD34D;
  border-radius: var(--radius-xl);
  padding: 24px 28px;
  margin-bottom: 24px;
  box-shadow: 0 4px 0 #D97706, 0 10px 24px rgba(217, 119, 6, 0.08);
}

.monuments-intro-media {
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
  border: 2px solid #F59E0B;
}

.monuments-intro-text {
  flex: 1;
}

.monuments-intro-text h3 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  color: #78350F;
  margin: 0 0 8px 0;
  line-height: 1.25;
}

.monuments-intro-text p {
  color: #92400E;
  font-size: 0.96rem;
  line-height: 1.55;
  margin: 0;
}

.monuments-intro-stats {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.monuments-stat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 2px solid #FCD34D;
  border-radius: var(--radius-lg);
  padding: 10px 16px;
  min-width: 86px;
  box-shadow: 0 3px 0 #D97706;
}

.monuments-stat-pill .stat-count {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: #B45309;
  line-height: 1;
}

.monuments-stat-pill .stat-label {
  font-size: 0.70rem;
  font-weight: 700;
  color: #78350F;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* Toolbar & Filters (Global Monuments View) */
.monuments-toolbar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg-surface-warm, #F8FAFC);
  padding: 18px 22px;
  border-radius: var(--radius-xl);
  border: 2px solid var(--border-tactile);
  box-shadow: 0 4px 0 var(--border-depth);
  margin-bottom: 20px;
}

.monument-search-box {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.monument-search-input {
  width: 100%;
  padding: 12px 42px 12px 44px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-tactile);
  background: #FFFFFF;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  outline: none;
  transition: all var(--transition-fast);
}

.monument-search-input:focus {
  border-color: #D97706;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.18);
}

.monument-search-box .search-icon {
  position: absolute;
  left: 14px;
  font-size: 1.1rem;
  pointer-events: none;
  opacity: 0.65;
}

.monument-search-box .clear-search-btn {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  font-size: 1.35rem;
  color: #94A3B8;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

.monument-search-box .clear-search-btn:hover {
  color: #D97706;
}

.monument-continent-chips-row,
.monument-category-chips-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-group-label {
  font-size: 0.78rem;
  font-weight: 800;
  color: #78350F;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 4px;
  white-space: nowrap;
}

.continent-chip,
.monument-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--border-tactile);
  background: #FFFFFF;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 0 var(--border-depth);
  white-space: nowrap;
}

.continent-chip:hover,
.monument-cat-pill:hover {
  background: #FEF3C7;
  border-color: #F59E0B;
  color: #92400E;
  transform: translateY(-1px);
}

.continent-chip.active,
.monument-cat-pill.active {
  background: #D97706 !important;
  border-color: #B45309 !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 0 #92400E !important;
}

.monuments-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 20px 0;
  font-size: 0.92rem;
  color: var(--color-text-muted);
}

.reset-monument-filters-btn {
  font-size: 0.85rem;
  font-weight: 700;
  color: #D97706;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

/* ==========================================================================
   MONUMENT CARDS: UNIVERSAL ARCHITECTURAL STYLING (GLOBAL & COUNTRY DOSSIER)
   ========================================================================== */
.monument-card,
.monument-item-card {
  background: #FFFFFF;
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 4px 0 var(--border-depth), 0 8px 20px rgba(24, 54, 75, 0.06);
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.monument-card:hover,
.monument-item-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 0 var(--border-depth), 0 18px 30px rgba(217, 119, 6, 0.18);
  border-color: #D97706;
}

.monument-card-media {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
  cursor: pointer;
  display: block;
}

.monument-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.monument-card:hover .monument-card-img,
.monument-item-card:hover .monument-card-img {
  transform: scale(1.06);
}

.monument-card-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  color: #D97706;
}

.monument-card-overlay-top {
  position: absolute;
  top: 9px;
  left: 9px;
  right: 9px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
  z-index: 2;
}

.monument-country-pill {
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.monument-era-pill {
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FDE047;
  font-size: 0.70rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 45%;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.monument-zoom-btn {
  position: absolute;
  bottom: 9px;
  right: 9px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #FFFFFF;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.monument-zoom-btn:hover {
  transform: scale(1.12);
  background: #D97706;
  border-color: #F59E0B;
}

.monument-card-content {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.monument-card-header {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.monument-category-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #FEF3C7;
  color: #92400E;
  font-size: 0.70rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #FDE68A;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.monument-card-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
  line-height: 1.28;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.55em;
}

.monument-card-city {
  font-size: 0.78rem;
  color: #64748B;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.monument-card-desc {
  font-size: 0.82rem;
  line-height: 1.48;
  color: #334155;
  margin: 2px 0 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.monument-card-footer {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  background: #F8FAFC;
  border-top: 1px solid #E2E8F0;
  margin-top: auto;
}

.monument-card-footer .btn {
  flex: 1;
  font-size: 0.77rem;
  font-weight: 700;
  padding: 7px 6px;
  border-radius: 9px;
  text-align: center;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.monument-card-footer .open-monument-detail-btn {
  background: #D97706;
  border-color: #B45309;
  color: #FFFFFF;
}

.monument-card-footer .open-monument-detail-btn:hover {
  background: #B45309;
  border-color: #92400E;
}

/* ==========================================================================
   COUNTRY DOSSIER: MONUMENTS TAB & 3-COLUMN MAJESTIC LAYOUT
   ========================================================================== */
.monuments-tab-pane {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.monuments-tab-intro {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 2px solid #FCD34D;
  border-radius: var(--radius-xl);
  padding: 16px 22px;
  box-shadow: 0 3px 0 #D97706;
}

.monuments-tab-intro-icon {
  font-size: 2.2rem;
  line-height: 1;
  flex-shrink: 0;
}

.monuments-tab-intro-text h4 {
  margin: 0 0 4px 0;
  color: #78350F;
  font-size: 1.15rem;
  font-weight: 800;
}

.monuments-tab-intro-text p {
  margin: 0;
  color: #92400E;
  font-size: 0.92rem;
  line-height: 1.48;
}

/* Country Dossier 3-item grid (Exactly 3 monuments per country) */
.monuments-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
  width: 100% !important;
  margin-top: 10px;
}

.monument-item-card.monument-card-large {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
  border: 2px solid var(--border-tactile) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: 0 4px 0 var(--border-depth), 0 8px 22px rgba(24, 54, 75, 0.07) !important;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast) !important;
}

.monument-item-card.monument-card-large:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 8px 0 var(--border-depth), 0 18px 30px rgba(217, 119, 6, 0.18) !important;
  border-color: #D97706 !important;
}

.monument-item-card.monument-card-large .monument-card-title {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  min-height: auto !important;
}

.monument-item-card.monument-card-large .monument-card-desc {
  font-size: 0.88rem !important;
  line-height: 1.54 !important;
  -webkit-line-clamp: 4 !important;
  color: #334155 !important;
}

.monument-item-card.monument-card-large .monument-card-content {
  padding: 16px 18px !important;
  gap: 10px !important;
}

.monument-item-card.monument-card-large .monument-card-footer {
  padding: 12px 16px !important;
  background: #F8FAFC !important;
  border-top: 1px solid #E2E8F0 !important;
}

.monument-item-card.monument-card-large .monument-card-footer .btn {
  font-size: 0.82rem !important;
  padding: 9px 12px !important;
}

@media (max-width: 1024px) {
  .monuments-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}

@media (max-width: 640px) {
  .monuments-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ==========================================================================
   MONUMENT DETAIL MODAL & HERO PRESENTATION
   ========================================================================== */
.monument-detail-modal {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.monument-modal-hero-box {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4 !important;
  max-width: 380px;
  margin: 0 auto;
  height: auto !important;
  max-height: 520px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
  border: 2px solid var(--border-tactile);
  box-shadow: 0 4px 0 var(--border-depth), 0 8px 20px rgba(24, 54, 75, 0.08);
}

.monument-modal-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.monument-modal-hero-box:hover .monument-modal-hero-img {
  transform: scale(1.04);
}

.monument-modal-hero-overlay {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 2;
}

.monument-modal-country-badge {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-size: 0.84rem;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.monument-quiz-jump-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  border: 2px solid #93C5FD;
  border-radius: var(--radius-xl);
  padding: 20px 24px;
  box-shadow: 0 4px 0 #3B82F6;
}

@media (max-width: 768px) {
  .monuments-intro-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 20px;
  }
  .monuments-intro-stats {
    width: 100%;
    justify-content: space-between;
  }
  .monuments-stat-pill {
    flex: 1;
    min-width: 0;
  }
  .monument-quiz-jump-card {
    flex-direction: column;
    text-align: center;
  }
  .monument-modal-hero-box {
    aspect-ratio: 3 / 4 !important;
    height: auto !important;
  }
}

/* ==========================================================================
   MODULE HERO BANNERS (PANORAMIC THEMATIC HEADERS - UNIFORM SIGNATURE OCEANIC BLUE)
   ========================================================================== */
.module-hero-banner,
.module-hero-banner[data-theme="geography"],
.module-hero-banner[data-theme="languages"],
.module-hero-banner[data-theme="history"],
.module-hero-banner[data-theme="science"],
.module-hero-banner[data-theme="art"],
.module-hero-banner[data-theme="painters"],
.module-hero-banner[data-theme="paintings"],
.module-hero-banner[data-theme="music"],
.module-hero-banner[data-theme="animals"],
.module-hero-banner[data-theme="football"],
.module-hero-banner[data-theme="cars"],
.module-hero-banner[data-theme="literature"],
.module-hero-banner[data-theme="mythology"] {
  background: linear-gradient(135deg, #0C4360 0%, #1675A5 60%, #1A446C 100%) !important;
  color: #FFFFFF !important;
}

/* Welcome Screen Mascot and Acronym Letter Badges */
.welcome-benji-hero-wrap {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #0EA5E9;
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.3);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E0F2FE;
}

.welcome-hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.benji-dock-mascot-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.letter-b { color: #0EA5E9; background: #E0F2FE; }
.letter-e { color: #F59E0B; background: #FEF3C7; }
.letter-n { color: #10B981; background: #D1FAE5; }
.letter-j { color: #EC4899; background: #FCE7F3; }
.letter-i { color: #8B5CF6; background: #EDE9FE; }


/* ==========================================================================
   HISTÓRIA MODULE SUBTABS & SECÇÕES AGRUPADAS (PORTUGAL & MUNDO)
   ========================================================================== */
.history-subtabs-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  background: linear-gradient(135deg, #FFFFFF 0%, #F0F9FF 100%);
  border: 2.5px solid var(--border-tactile);
  border-radius: var(--radius-xl);
  padding: 14px 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 0 var(--border-depth), 0 12px 28px rgba(24, 54, 75, 0.08);
}

.history-subtab-btn {
  background: #F8FAFC;
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-full);
  padding: 10px 22px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-text-main);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.history-subtab-btn:hover {
  transform: translateY(-2px);
  background: #EFF6FF;
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(14, 83, 119, 0.15);
}

.history-subtab-btn.active {
  background: linear-gradient(135deg, #0C4360 0%, #1675A5 100%);
  color: #FFFFFF;
  border-color: #0E5377;
  box-shadow: 0 4px 0 #082F49, 0 8px 20px rgba(12, 67, 96, 0.3);
  transform: translateY(-1px);
}

.history-subtab-btn .subtab-icon {
  font-size: 1.25rem;
}

.history-subtab-btn .subtab-badge {
  font-size: 0.78rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.07);
}

.history-subtab-btn.active .subtab-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

.history-section-group {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-margin-top: 110px;
}

.history-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
  border: 2.5px solid var(--border-tactile);
  border-radius: var(--radius-xl);
  padding: 18px 26px;
  box-shadow: 0 4px 0 var(--border-depth), 0 8px 20px rgba(24, 54, 75, 0.06);
}

.history-sec-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}

.history-sec-icon {
  font-size: 2.2rem;
  line-height: 1;
}

.history-sec-text h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-text-main);
  margin: 0 0 4px 0;
}

.history-sec-text p {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.45;
}

.history-sec-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
  background: #E0F2FE;
  color: #0369A1;
  border: 1.5px solid #BAE6FD;
  box-shadow: 0 2px 0 #93C5FD;
}

.history-empty-note {
  text-align: center;
  padding: 24px;
  background: #F8FAFC;
  border: 1.5px dashed #CBD5E1;
  border-radius: var(--radius-lg);
  color: #64748B;
  font-size: 0.95rem;
}

/* ==========================================================================
   ARTE MODULE SUBTABS (PINTORES & PINTURAS UNIFICADOS)
   ========================================================================== */
.art-module-subtabs-bar,
.art-subview-switcher-bar,
.art-subview-toggle-group {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF7ED 100%);
  border: 2.5px solid var(--border-tactile);
  border-radius: var(--radius-xl);
  padding: 14px 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 0 var(--border-depth), 0 12px 28px rgba(24, 54, 75, 0.08);
}

.art-subtab-btn,
.art-subview-tab-btn {
  background: #F8FAFC;
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-full);
  padding: 10px 22px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-text-main);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.art-subtab-btn:hover {
  transform: translateY(-2px);
  background: #EFF6FF;
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
}

.art-subtab-btn.active {
  background: linear-gradient(135deg, #EC4899 0%, #BE185D 100%);
  color: #FFFFFF;
  border-color: #9D174D;
  box-shadow: 0 4px 0 #831843, 0 8px 20px rgba(190, 24, 93, 0.28);
  transform: translateY(-1px);
}

.art-subtab-btn .subtab-icon {
  font-size: 1.25rem;
}

.art-subtab-btn .subtab-badge {
  font-size: 0.78rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.07);
}

.art-subtab-btn.active .subtab-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

/* ==========================================================================
   ESTANTE DE OBRAS-PRIMAS DOS PINTORES (ART & MASTERPIECE PAINTINGS)
   ========================================================================== */
.art-paintings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 22px;
  margin-top: 16px;
}

.art-painting-card {
  background: #FFFFFF;
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 0 var(--border-depth), 0 8px 18px rgba(24, 54, 75, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  height: 100%;
}

.art-painting-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 0 var(--border-depth), 0 16px 28px rgba(236, 72, 153, 0.16);
  border-color: #EC4899;
}

.painting-card-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4; /* 4 de altura e 3 de largura */
  height: auto;
  background: linear-gradient(135deg, #0F172A 0%, #2D1537 100%);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.painting-card-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
  transition: transform var(--transition-normal);
  display: block;
}

.painting-card-img-wrapper:hover .painting-card-img {
  transform: scale(1.05);
}

.painting-zoom-pill {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(15, 23, 42, 0.85);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  backdrop-filter: blur(4px);
  opacity: 0.9;
  transition: all 0.2s ease;
}

.painting-card-img-wrapper:hover .painting-zoom-pill {
  opacity: 1;
  background: rgba(236, 72, 153, 0.95);
  transform: scale(1.05);
}

.painting-year-pill {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(15, 23, 42, 0.85);
  color: #F8FAFC;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

.art-painting-info {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  justify-content: space-between;
}

.painting-card-top-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
}

.painting-medium-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #FCE7F3;
  color: #BE185D;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}

.painting-orig-title {
  font-size: 0.74rem;
  font-style: italic;
  color: #64748B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.painting-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.painting-museum-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #475569;
  font-weight: 600;
}

.painting-desc-box {
  background: #F8FAFC;
  border-radius: 8px;
  padding: 8px 10px;
  border-left: 3px solid #CBD5E1;
  max-height: 80px;
  overflow-y: auto;
}

.painting-desc-text {
  font-size: 0.8rem;
  line-height: 1.4;
  color: #334155;
  margin: 0;
}

.painting-obs-box {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 8px;
  padding: 8px 10px;
  max-height: 90px;
  overflow-y: auto;
}

.painting-obs-label {
  font-size: 0.74rem;
  font-weight: 800;
  color: #166534;
  display: block;
  margin-bottom: 2px;
}

.painting-obs-text {
  font-size: 0.78rem;
  line-height: 1.35;
  color: #14532D;
  margin: 0;
}

.painting-themes-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.painting-themes-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.painting-themes-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.painting-theme-pill {
  background: #F1F5F9;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}

.painting-future-benji-prompt {
  display: none;
}

.painting-future-prompt-header {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #7E22CE;
  margin-bottom: 2px;
}

.painting-future-prompt-text {
  font-size: 0.75rem;
  line-height: 1.3;
  color: #581C87;
  font-style: italic;
  margin: 0;
}

/* ==========================================================================
   ELEGANT ART MASTERPIECE DOSSIER (FICHA INDIVIDUAL DAS PINTURAS)
   Whole uncropped painting, grand display canvas, titles on top,
   museum plaque bar & quick facts below.
   ========================================================================== */

.painting-hero-showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background: #FFFFFF;
  padding: 32px 28px;
  border-radius: var(--radius-xl);
  border: 3px solid var(--border-tactile);
  box-shadow: 0 6px 0 var(--border-depth), 0 14px 32px rgba(24, 54, 75, 0.1);
  margin-bottom: 24px;
}

.painting-hero-header-top {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 20px auto;
  width: 100%;
}

.painting-hero-badges-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.painting-masterpiece-title {
  font-family: var(--font-display, inherit);
  font-size: clamp(1.85rem, 3.4vw, 2.75rem);
  font-weight: 900;
  color: #0F172A;
  margin: 6px 0 8px 0;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.painting-masterpiece-subtitle {
  font-size: clamp(1.02rem, 1.8vw, 1.25rem);
  color: #475569;
  font-weight: 600;
  line-height: 1.45;
}

.painting-canvas-wrapper {
  position: relative;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto 16px auto;
  border-radius: 16px;
  overflow: hidden;
  border: 3px solid #1E293B;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.25), 0 4px 12px rgba(0, 0, 0, 0.12);
  background: radial-gradient(circle at center, #1E293B 0%, #0F172A 70%, #020617 100%);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

.painting-canvas-wrapper:hover {
  transform: translateY(-3px) scale(1.006);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.32), 0 6px 16px rgba(0, 0, 0, 0.16);
}

.painting-canvas-inner {
  position: relative;
  width: 100%;
  min-height: 380px;
  max-height: 680px;
  height: clamp(380px, 62vh, 680px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: transparent;
}

.painting-hero-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain; /* PINTURA INTEIRA SEM QUALQUER CORTE */
  object-position: center center;
  display: block;
  margin: 0 auto;
  border-radius: 4px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55);
  transition: transform 0.35s ease;
}

.painting-canvas-wrapper:hover .painting-hero-img {
  transform: scale(1.02);
}

.painting-museum-plaque-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 22px;
  background: #0F172A;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #F8FAFC;
  font-size: 0.95rem;
}

.painting-museum-plaque-bar .plaque-title {
  font-weight: 700;
  color: #F8FAFC;
  letter-spacing: 0.01em;
}

.painting-museum-plaque-bar .plaque-meta {
  color: #94A3B8;
  font-size: 0.85rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.painting-hero-info-bottom {
  width: 100%;
  max-width: 1040px;
  margin: 20px auto 0 auto;
}

.painting-quick-facts-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 14px;
}

/* Modal hero box for paintings */
.painting-modal-hero-box {
  position: relative;
  width: 100%;
  min-height: 280px;
  max-height: 520px;
  background: radial-gradient(circle at center, #1E293B 0%, #0F172A 100%);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: 2px solid var(--border-tactile);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
  cursor: pointer;
}

.painting-modal-hero-img {
  max-width: 100%;
  max-height: 500px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s ease;
}

.painting-modal-hero-box:hover .painting-modal-hero-img {
  transform: scale(1.02);
}

@media (max-width: 768px) {
  .painting-hero-showcase {
    padding: 20px 14px;
  }
  .painting-canvas-inner {
    min-height: 240px;
    height: clamp(240px, 50vh, 440px);
    padding: 10px;
  }
  .painting-quick-facts-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   FOOTBALL CLUB KIT AVATARS & MASCOT BADGES
   ========================================================================== */

.card-corner-logo-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 48px;
  height: 56px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  z-index: 4;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

.geo-feature-card:hover .card-corner-logo-badge {
  transform: scale(1.15) translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.card-corner-logo-badge img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.card-brand-logo-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 50px;
  border-radius: 10px;
  background: #FFFFFF;
  border: 2px solid #E2E8F0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 3px;
  flex-shrink: 0;
}

.card-brand-logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.dossier-brand-logo-frame {
  width: 82px;
  height: 98px;
  flex-shrink: 0;
  background: #FFFFFF;
  border-radius: 14px;
  padding: 6px;
  border: 2px solid #CBD5E1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dossier-brand-logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.club-kit-identity-showcase {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.club-kit-identity-showcase:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
}

.club-kit-avatar-box {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

.club-kit-avatar-box:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

.club-modal-kit-banner {
  transition: transform 0.2s ease;
}

/* ==========================================================================
   FOOTBALL CLUB CARDS: Official Mascot & Kit Icon as Card Face (Rosto do Card)
   ========================================================================== */
.football-club-card .geo-feature-card-media {
  background: radial-gradient(circle at 50% 32%, #1e293b 0%, #0f172a 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 16px 14px 16px !important;
  box-sizing: border-box !important;
}

.football-club-card .geo-feature-card-img {
  width: auto !important;
  height: auto !important;
  max-width: 86% !important;
  max-height: 86% !important;
  object-fit: contain !important;
  object-position: center center !important;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.35s ease;
}

.football-club-card:hover .geo-feature-card-img {
  transform: scale(1.08) translateY(-4px);
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.65));
}

.football-club-card .card-corner-logo-badge {
  display: none !important;
}

.football-club-card .card-brand-logo-wrapper {
  display: none !important;
}

/* Has Pixar Art Override for Football Club Cards */
.football-club-card.has-pixar-art .geo-feature-card-media {
  padding: 0 !important;
  background: #0f172a !important;
  display: block !important;
  aspect-ratio: 4 / 3 !important;
  position: relative !important;
  overflow: hidden !important;
}

.football-club-card.has-pixar-art .geo-feature-card-img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center 25% !important;
  filter: none !important;
  transition: transform 0.35s ease;
}

.football-club-card.has-pixar-art:hover .geo-feature-card-img {
  transform: scale(1.05);
}

.football-club-card.has-pixar-art .card-corner-logo-badge {
  display: flex !important;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  padding: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  border: 2px solid #ffffff;
  z-index: 3;
  align-items: center;
  justify-content: center;
}

.football-club-card.has-pixar-art .card-corner-logo-badge img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

/* ==========================================================================
   FOOTBALL MODULE: INDIVIDUAL DOSSIER CARDS, BOXES & DISTRIBUTION
   ========================================================================== */

/* Biometrics & Career Spec Grid */
.football-biometrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.football-spec-box {
  background: #FFFFFF;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid #E2E8F0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.football-spec-box.spec-box-full {
  grid-column: 1 / -1;
}

.football-spec-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  color: #64748B;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.football-spec-val {
  font-size: 1rem;
  font-weight: 800;
  color: #0F172A;
}

/* Major Awards List & Grid */
.football-awards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.football-award-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.football-award-item:hover {
  transform: translateY(-2px);
  border-color: #F59E0B;
}

.football-award-icon {
  font-size: 1.6rem;
  line-height: 1;
  min-width: 32px;
  text-align: center;
}

.football-award-name {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.35;
}

.football-award-count {
  background: #FEF3C7;
  color: #92400E;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid #FDE68A;
  flex-shrink: 0;
}

/* Trophies & Distinctions Flexible Pill Grids */
.football-trophies-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.trophy-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFFBEB;
  color: #92400E;
  border: 1.5px solid #FCD34D;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.08);
  transition: transform 0.2s ease;
}

.trophy-pill:hover {
  transform: translateY(-1px);
  background: #FEF3C7;
}

.football-awards-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.award-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #EFF6FF;
  color: #1E40AF;
  border: 1.5px solid #BFDBFE;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.88rem;
  font-weight: 700;
  transition: transform 0.2s ease;
}

.award-pill:hover {
  transform: translateY(-1px);
  background: #DBEAFE;
}

/* Career Clubs Trajectory List */
.football-clubs-trajectory-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.football-club-trajectory-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  padding: 10px 16px;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease;
}

.football-club-trajectory-item:hover {
  transform: translateX(4px);
  border-color: #3B82F6;
}

.club-traj-icon {
  font-size: 1.3rem;
  line-height: 1;
}

.club-traj-name {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 800;
  color: #0F172A;
}

.club-traj-years {
  background: #F1F5F9;
  color: #475569;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid #CBD5E1;
}

/* Legends & Rivalries Pills for Clubs */
.football-legends-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.legend-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F8FAFC;
  color: #1E293B;
  border: 1.5px solid #CBD5E1;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.88rem;
  font-weight: 700;
  transition: transform 0.2s ease;
}

.legend-pill:hover {
  transform: translateY(-1px);
  border-color: #3B82F6;
  color: #2563EB;
}

.football-rivalries-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rivalry-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FEF2F2;
  color: #991B1B;
  border: 1.5px solid #FECACA;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.88rem;
  font-weight: 700;
}

/* ==========================================================================
   LITERATURE MODULE & BOOK CARDS (200 Classic Authors & 440 Books)
   ========================================================================== */
.literature-books-grid {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 18px;
}

@media (min-width: 1500px) {
  .literature-books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(660px, 1fr));
    gap: 24px;
  }
}

.literature-book-card {
  background: #FFFFFF;
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 0 var(--border-depth), 0 8px 18px rgba(24, 54, 75, 0.06);
  display: flex;
  flex-direction: row;
  align-items: stretch;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  min-height: 320px;
}

.literature-book-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 var(--border-depth), 0 16px 28px rgba(2, 132, 199, 0.16);
  border-color: var(--color-primary);
}

.literature-book-card.has-pixar-art {
  border-color: #BAE6FD;
}

.literature-book-card.has-pixar-art:hover {
  border-color: #0284C7;
}

.book-card-visual-column {
  width: 320px;
  min-width: 300px;
  max-width: 350px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #0B1120 0%, #1E293B 100%);
  position: relative;
  border-right: 2px solid var(--border-tactile);
}

.book-primary-image-frame {
  position: sticky;
  top: 16px;
  width: 100%;
  flex: 1;
  min-height: 380px;
  max-height: 520px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, #1E293B 0%, #0B1120 100%);
  padding: 18px 14px;
  box-sizing: border-box;
}

.book-ambient-blur-bg {
  position: absolute;
  inset: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  object-fit: cover;
  filter: blur(28px) brightness(0.32) saturate(1.35);
  opacity: 0.85;
  pointer-events: none;
  z-index: 1;
  transform: scale(1.12);
}

.book-primary-canvas-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.book-primary-img {
  max-width: 100%;
  max-height: 480px;
  width: auto;
  height: auto;
  object-fit: contain !important; /* ZERO CROPPING: Livro e ilustrações 100% visíveis sem cortes */
  object-position: center center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), 0 3px 10px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.book-primary-image-frame:hover .book-primary-img {
  transform: scale(1.035);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.65), 0 4px 14px rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.35);
}

.book-art-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.book-art-badge.pixar-badge {
  background: linear-gradient(135deg, #059669 0%, #10B981 100%);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.book-art-badge.classic-badge {
  background: rgba(15, 23, 42, 0.9);
  color: #E2E8F0;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.book-year-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(15, 23, 42, 0.88);
  color: #F8FAFC;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 3;
}

.book-zoom-overlay-pill {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(15, 23, 42, 0.88);
  color: #FFFFFF;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.2s ease;
  z-index: 3;
}

.book-primary-image-frame:hover .book-zoom-overlay-pill {
  background: #0284C7;
  border-color: #38BDF8;
  transform: translateY(-1px);
}

.book-visual-footer-bar {
  padding: 8px 12px;
  background: rgba(15, 23, 42, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-book-cover-alt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: #E2E8F0;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  justify-content: center;
}

.btn-book-cover-alt:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
  border-color: #38BDF8;
}

.book-card-info {
  flex: 1;
  min-width: 0;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #FFFFFF;
}

.book-card-top-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.book-genre-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #E0F2FE;
  color: #0369A1;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid #BAE6FD;
}

.book-lang-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #EFF6FF;
  color: #1D4ED8;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #BFDBFE;
  transition: all 0.2s ease;
  user-select: none;
}

.book-lang-badge[data-lang-filter]:hover {
  background: #DBEAFE;
  color: #1E40AF;
  border-color: #93C5FD;
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(29, 78, 216, 0.15);
}

.book-orig-title {
  font-size: 0.86rem;
  color: #64748B;
  font-style: italic;
}

.book-pixar-tag-active {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
}

.book-pixar-tag-pending {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #F1F5F9;
  color: #64748B;
  border: 1px solid #CBD5E1;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}

.book-card-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.book-card-title {
  font-size: 1.32rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
  line-height: 1.3;
}

.book-synopsis-box {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-left: 4px solid #0284C7;
  border-radius: 8px;
  padding: 12px 16px;
}

.synopsis-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  color: #0369A1;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.book-synopsis-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #334155;
  margin: 0;
  white-space: pre-line;
}

.book-themes-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.themes-label {
  font-size: 0.76rem;
  font-weight: 800;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.book-themes-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.book-theme-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #F1F5F9;
  border: 1px solid #CBD5E1;
  color: #334155;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.book-theme-pill:hover {
  background: #E2E8F0;
  border-color: #94A3B8;
}

.book-benji-note {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-left: 4px solid #F59E0B;
  border-radius: 8px;
  padding: 12px 16px;
}

.benji-avatar-pill {
  font-size: 0.82rem;
  font-weight: 800;
  color: #B45309;
  margin-bottom: 3px;
}

.benji-note-text {
  font-size: 0.92rem;
  line-height: 1.55;
  color: #78350F;
  margin: 0;
}

.book-pixar-concept-note {
  background: #FAF5FF;
  border: 1px solid #E9D5FF;
  border-left: 4px solid #A855F7;
  border-radius: 8px;
  padding: 10px 14px;
}

.concept-note-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 800;
  color: #7E22CE;
  margin-bottom: 3px;
}

.future-sparkle-icon {
  font-size: 0.95rem;
}

.future-prompt-text {
  font-size: 0.84rem;
  line-height: 1.5;
  color: #581C87;
  font-style: italic;
  margin: 0;
}

@media (max-width: 768px) {
  .literature-book-card {
    flex-direction: column;
  }
  .book-card-visual-column {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    border-right: none;
    border-bottom: 2px solid var(--border-tactile);
  }
  .book-primary-image-frame {
    position: relative;
    top: 0;
    width: 100%;
    min-height: 320px;
    height: 360px;
    max-height: 380px;
    padding: 16px;
  }
  .book-primary-img {
    max-height: 320px;
    max-width: 90%;
    object-fit: contain !important;
  }
  .book-card-info {
    padding: 16px;
    gap: 12px;
  }
  .book-card-title {
    font-size: 1.2rem;
  }
}

/* Literature Subtabs Nav (Escritores vs Livros) */
.literature-subtabs-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 14px auto 26px auto;
  padding: 6px;
  background: #F1F5F9;
  border-radius: 50px;
  max-width: 520px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.literature-subtab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 40px;
  border: none;
  background: transparent;
  color: #475569;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.literature-subtab-btn:hover {
  color: #0F172A;
  background: rgba(255, 255, 255, 0.6);
}

.literature-subtab-btn.active {
  background: #FFFFFF;
  color: #0284C7;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.16), 0 1px 3px rgba(0, 0, 0, 0.05);
}

.literature-subtab-btn .subtab-icon {
  font-size: 1.25rem;
}

.literature-subtab-btn .subtab-badge {
  background: #E2E8F0;
  color: #475569;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 800;
}

.literature-subtab-btn.active .subtab-badge {
  background: #E0F2FE;
  color: #0284C7;
}

/* Literature Books Dedicated Toolbar */
.literature-books-toolbar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
  background: #FFFFFF;
  padding: 18px 20px;
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-lg);
  box-shadow: 0 3px 0 var(--border-depth);
}

.lit-toolbar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.lit-search-box {
  flex: 1;
  min-width: 280px;
}

.lit-sort-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #F8FAFC;
  border: 1.5px solid #CBD5E1;
  padding: 6px 14px;
  border-radius: 10px;
  flex-shrink: 0;
}

.lit-sort-box .sort-icon {
  font-size: 1.1rem;
}

.lit-sort-box .sort-label {
  font-size: 0.85rem;
  font-weight: 800;
  color: #475569;
  white-space: nowrap;
}

.lit-sort-select {
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #0F172A;
  background: #FFFFFF;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease;
}

.lit-sort-select:focus {
  border-color: #0284C7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.lit-results-count-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.88rem;
  color: #64748B;
  padding-top: 8px;
  border-top: 1px solid #E2E8F0;
  flex-wrap: wrap;
  gap: 8px;
}

.btn-book-author-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #F1F5F9;
  color: #334155;
  border: 1px solid #CBD5E1;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-book-author-link:hover {
  background: #E0F2FE;
  color: #0369A1;
  border-color: #7DD3FC;
}

.btn-open-author-dossier {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 16px;
}

/* Literature Recommended Reading Age (Obra Integral) Tabs Selector */
.literature-age-selector-wrapper {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 2px solid #FCD34D;
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.08);
}

.lit-age-selector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.lit-age-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.96rem;
  font-weight: 800;
  color: #92400E;
  flex-wrap: wrap;
}

.lit-age-target-icon {
  font-size: 1.15rem;
}

.lit-age-active-badge {
  background: #B45309;
  color: #FFFFFF;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.lit-age-header-desc {
  font-size: 0.82rem;
  color: #B45309;
  font-style: italic;
}

/* Primary Age Tabs Bar */
.lit-age-tabs-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.75);
  padding: 6px;
  border-radius: 14px;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.lit-age-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  background: transparent;
  color: #78350F;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.lit-age-tab-btn:hover {
  background: #FFFFFF;
  color: #92400E;
  border-color: #FCD34D;
  transform: translateY(-1px);
}

.lit-age-tab-btn.active {
  background: #FFFFFF;
  color: #B45309;
  border-color: #F59E0B;
  box-shadow: 0 3px 8px rgba(245, 158, 11, 0.25);
  font-weight: 800;
}

.lit-age-tab-btn .age-tab-count {
  background: #FEF3C7;
  color: #92400E;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
}

.lit-age-tab-btn.active .age-tab-count {
  background: #F59E0B;
  color: #FFFFFF;
}

/* Exact Age Pills Row */
.lit-exact-ages-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px dashed rgba(245, 158, 11, 0.35);
}

.exact-ages-label {
  font-size: 0.78rem;
  font-weight: 800;
  color: #92400E;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.exact-ages-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.lit-exact-age-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #FFFFFF;
  border: 1px solid #FCD34D;
  color: #78350F;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.lit-exact-age-chip:hover {
  background: #FEF3C7;
  color: #92400E;
  border-color: #F59E0B;
  transform: translateY(-1px);
}

.lit-exact-age-chip.active {
  background: #F59E0B;
  color: #FFFFFF;
  border-color: #D97706;
  font-weight: 800;
  box-shadow: 0 2px 5px rgba(245, 158, 11, 0.3);
}

.lit-exact-age-chip .chip-count {
  font-size: 0.70rem;
  opacity: 0.85;
}

.book-age-badge[data-age-filter] {
  cursor: pointer;
  transition: all 0.18s ease;
}

.book-age-badge[data-age-filter]:hover {
  background: #FDE68A !important;
  color: #78350F !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
}

@media (max-width: 768px) {
  .lit-age-tabs-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .lit-age-tab-btn {
    flex-shrink: 0;
  }
  .exact-ages-pills {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .lit-exact-age-chip {
    flex-shrink: 0;
  }
}

/* ==========================================================================
   SCIENCE MODULE: SUBTABS, INVENTIONS & HORIZONTAL DISCOVERY CARDS
   (200 Scientists & 236 Inventions/Discoveries with Benji Pixar & Schematics)
   ========================================================================== */
.science-subtabs-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 14px auto 26px auto;
  padding: 6px;
  background: #F1F5F9;
  border-radius: 50px;
  max-width: 560px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.science-subtab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 40px;
  border: none;
  background: transparent;
  color: #475569;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.science-subtab-btn:hover {
  color: #0F172A;
  background: rgba(255, 255, 255, 0.6);
}

.science-subtab-btn.active {
  background: #FFFFFF;
  color: #0284C7;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.16), 0 1px 3px rgba(0, 0, 0, 0.05);
}

.science-subtab-btn .subtab-icon {
  font-size: 1.25rem;
}

.science-subtab-btn .subtab-badge {
  background: #E2E8F0;
  color: #475569;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 800;
}

.science-subtab-btn.active .subtab-badge {
  background: #E0F2FE;
  color: #0284C7;
}

/* Science Discoveries Dedicated Toolbar */
.science-discoveries-toolbar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
  background: #FFFFFF;
  padding: 18px 20px;
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-lg);
  box-shadow: 0 3px 0 var(--border-depth);
}

.sci-toolbar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.sci-search-box {
  flex: 1;
  min-width: 280px;
}

.sci-sort-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #F8FAFC;
  border: 1.5px solid #CBD5E1;
  padding: 6px 14px;
  border-radius: 10px;
  flex-shrink: 0;
}

.sci-sort-box .sort-icon {
  font-size: 1.1rem;
}

.sci-sort-box .sort-label {
  font-size: 0.85rem;
  font-weight: 800;
  color: #475569;
  white-space: nowrap;
}

.sci-sort-select {
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #0F172A;
  background: #FFFFFF;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease;
}

.sci-sort-select:focus {
  border-color: #0284C7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.sci-results-count-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.88rem;
  color: #64748B;
  padding-top: 8px;
  border-top: 1px solid #E2E8F0;
  flex-wrap: wrap;
  gap: 8px;
}

/* ================= SCIENCE INVENTIONS & DISCOVERIES GRID & CARDS ================= */
.science-discoveries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 26px;
  margin-top: 20px;
  width: 100%;
  align-items: stretch;
}

@media (min-width: 1400px) {
  .science-discoveries-grid {
    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
    gap: 28px;
  }
}

@media (max-width: 640px) {
  .science-discoveries-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.science-discovery-card {
  background: #FFFFFF;
  border: 2.5px solid var(--border-tactile);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 0 var(--border-depth), 0 10px 24px rgba(15, 23, 42, 0.07);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.science-discovery-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 0 var(--border-depth), 0 20px 36px rgba(2, 132, 199, 0.18);
  border-color: var(--color-primary);
}

.science-discovery-card.has-pixar-art {
  border-color: #BAE6FD;
}

.science-discovery-card.has-pixar-art:hover {
  border-color: #0284C7;
}

/* Hero Media Wrapper (Image on top, perfectly framed) */
.discovery-hero-media-wrapper {
  position: relative;
  width: 100%;
  background: linear-gradient(145deg, #0B1120 0%, #1E293B 100%);
  display: flex;
  flex-direction: column;
  border-bottom: 2px solid var(--border-tactile);
}

.discovery-primary-image-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 250px;
  max-height: 360px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, #1E293B 0%, #0B1120 100%);
}

.discovery-primary-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
}

.discovery-primary-image-frame:hover .discovery-primary-img {
  transform: scale(1.04);
}

.discovery-media-top-overlay {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 2;
}

.discovery-art-badge {
  font-size: 0.78rem;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
}

.discovery-art-badge.pixar-badge {
  background: linear-gradient(135deg, #059669 0%, #10B981 100%);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.discovery-art-badge.historic-badge {
  background: rgba(15, 23, 42, 0.92);
  color: #93C5FD;
  border: 1px solid rgba(147, 197, 253, 0.4);
}

.discovery-year-badge {
  background: rgba(15, 23, 42, 0.92);
  color: #F8FAFC;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
}

.discovery-zoom-overlay-pill {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.88);
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  z-index: 2;
}

.discovery-primary-image-frame:hover .discovery-zoom-overlay-pill {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
  background: rgba(2, 132, 199, 0.95);
  border-color: #38BDF8;
}

.discovery-visual-footer-bar {
  padding: 8px 12px;
  background: #0B1120;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-discovery-alt {
  width: 100%;
  background: rgba(30, 41, 59, 0.95);
  color: #93C5FD;
  border: 1px solid rgba(147, 197, 253, 0.35);
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-discovery-alt:hover {
  background: #1E293B;
  color: #60A5FA;
  border-color: #60A5FA;
  transform: translateY(-1px);
}

/* Card Body & Info */
.discovery-card-info {
  flex: 1;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.discovery-card-top-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.discovery-meta-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.discovery-field-badge {
  background: #EFF6FF;
  color: #1E40AF;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #BFDBFE;
}

.discovery-scientist-link-btn {
  background: #F0F9FF;
  color: #0369A1;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1.5px solid #BAE6FD;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.16s ease;
}

.discovery-scientist-link-btn:hover {
  background: #E0F2FE;
  color: #0284C7;
  border-color: #38BDF8;
  transform: translateY(-1px);
}

.discovery-pixar-tag-active {
  background: #ECFDF5;
  color: #065F46;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #A7F3D0;
}

.discovery-pixar-tag-pending {
  background: #FFFBEB;
  color: #92400E;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #FDE68A;
}

.discovery-card-title {
  margin: 2px 0 0 0;
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.35;
}

.discovery-desc-box {
  background: #F0FDF4;
  border-left: 4px solid #10B981;
  border-radius: 10px;
  padding: 12px 16px;
}

.desc-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 800;
  color: #065F46;
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}

.discovery-desc-text {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.65;
  color: #064E3B;
  white-space: pre-line;
}

.discovery-details-stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.discovery-how-box {
  background: #F8FAFC;
  border-left: 4px solid #3B82F6;
  border-radius: 8px;
  padding: 10px 14px;
}

.discovery-how-box .desc-label {
  color: #1D4ED8;
}

.discovery-how-box p {
  color: #1E293B;
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
}

.discovery-why-box {
  background: #FAF5FF;
  border-left: 4px solid #8B5CF6;
  border-radius: 8px;
  padding: 10px 14px;
}

.discovery-why-box .desc-label {
  color: #6D28D9;
}

.discovery-why-box p {
  color: #3B0764;
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
}

.discovery-curiosity-box {
  background: #FFFBEB;
  border-left: 4px solid #F59E0B;
  border-radius: 8px;
  padding: 10px 14px;
}

.discovery-curiosity-box .desc-label {
  color: #B45309;
}

.discovery-curiosity-box p {
  color: #78350F;
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
}

.discovery-benji-note {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-left: 4px solid #10B981;
  padding: 12px 16px;
  border-radius: 10px;
  margin-top: auto;
}

.benji-avatar-pill {
  font-size: 0.86rem;
  font-weight: 800;
  color: #065F46;
  margin-bottom: 4px;
}

.benji-note-text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #047857;
}

.discovery-pixar-concept-note {
  background: #FFFBEB;
  border: 1px dashed #F59E0B;
  border-radius: 8px;
  padding: 10px 14px;
}

.concept-note-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: #92400E;
  margin-bottom: 4px;
}

.future-prompt-text {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #78350F;
  font-style: italic;
}

@media (max-width: 768px) {
  .discovery-primary-image-frame {
    min-height: 210px;
    aspect-ratio: 16 / 10;
  }
  .discovery-card-info {
    padding: 16px;
    gap: 12px;
  }
  .discovery-card-title {
    font-size: 1.15rem;
  }
  .discovery-details-stack {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   CLASSICAL MUSIC MODULE & MASTERPIECE WORK CARDS (Horizontal Spacious Layout)
   ========================================================================== */
.music-works-grid {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 18px;
  width: 100%;
}

@media (min-width: 1500px) {
  .music-works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(660px, 1fr));
    gap: 24px;
  }
}

.music-work-card {
  background: #FFFFFF;
  border: 2px solid var(--border-tactile);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 0 var(--border-depth), 0 8px 18px rgba(24, 54, 75, 0.06);
  display: flex;
  flex-direction: row;
  align-items: stretch;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  min-height: 320px;
  position: relative;
}

.music-work-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 var(--border-depth), 0 16px 28px rgba(99, 102, 241, 0.16);
  border-color: #6366F1;
}

.music-work-card.has-pixar-art {
  border-color: #C7D2FE;
}

.music-work-card.has-pixar-art:hover {
  border-color: #4F46E5;
}

/* Left Visual Showcase Column */
.work-card-visual-column {
  width: 320px;
  min-width: 300px;
  max-width: 350px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #0F172A 0%, #1E1B4B 100%);
  position: relative;
  border-right: 2px solid var(--border-tactile);
}

.work-primary-image-frame {
  position: sticky;
  top: 16px;
  width: 100%;
  flex: 1;
  min-height: 360px;
  max-height: 500px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, #1E1B4B 0%, #0B0F19 100%);
  padding: 16px;
  box-sizing: border-box;
}

.work-ambient-blur-bg {
  position: absolute;
  inset: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  object-fit: cover;
  filter: blur(28px) brightness(0.32) saturate(1.35);
  opacity: 0.85;
  pointer-events: none;
  z-index: 1;
  transform: scale(1.12);
}

.work-primary-canvas-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.work-primary-img {
  max-width: 100%;
  max-height: 440px;
  width: auto;
  height: auto;
  object-fit: contain !important;
  object-position: center center;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 3px 10px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.work-primary-image-frame:hover .work-primary-img {
  transform: scale(1.035);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 4px 14px rgba(0, 0, 0, 0.45);
}

.work-art-badge,
.work-year-badge,
.work-zoom-overlay-pill {
  z-index: 3;
}

.work-art-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.work-art-badge.pixar-badge {
  background: linear-gradient(135deg, #059669 0%, #10B981 100%);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.work-art-badge.classic-badge {
  background: rgba(15, 23, 42, 0.9);
  color: #E2E8F0;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.work-year-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(15, 23, 42, 0.88);
  color: #F8FAFC;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 2;
}

.work-zoom-overlay-pill {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(15, 23, 42, 0.88);
  color: #FFFFFF;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.2s ease;
  z-index: 2;
}

.work-primary-image-frame:hover .work-zoom-overlay-pill {
  background: #4F46E5;
  border-color: #818CF8;
  transform: translateY(-1px);
}

.work-visual-footer-bar {
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.btn-work-cover-alt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: #E2E8F0;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  justify-content: center;
}

.btn-work-cover-alt:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
  border-color: #818CF8;
}

.btn-work-audio-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
  color: #FFFFFF;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.35);
}

.btn-work-audio-primary:hover {
  background: linear-gradient(135deg, #4338CA 0%, #4F46E5 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.45);
}

.btn-work-audio-primary.playing {
  background: linear-gradient(135deg, #059669 0%, #10B981 100%) !important;
  animation: pulsePlay 1.2s infinite;
}

/* Right Content & Reading Column */
.work-card-info {
  flex: 1;
  min-width: 0;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #FFFFFF;
}

.work-card-top-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.work-genre-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #EDE9FE;
  color: #5B21B6;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid #DDD6FE;
}

.work-orig-title {
  font-size: 0.86rem;
  color: #64748B;
  font-style: italic;
}

.work-pixar-tag-active {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ECFDF5;
  color: #065F46;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #A7F3D0;
}

.work-pixar-tag-pending {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #F8FAFC;
  color: #64748B;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #E2E8F0;
}

.work-card-title-group {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.work-card-title {
  font-size: 1.32rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
  line-height: 1.3;
}

/* Guia de Escuta Box */
.work-synopsis-box {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 10px;
  padding: 14px 16px;
}

.work-synopsis-label {
  font-size: 0.82rem;
  font-weight: 800;
  color: #166534;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: block;
  margin-bottom: 6px;
}

.work-synopsis-text {
  font-size: 0.94rem;
  line-height: 1.6;
  color: #14532D;
  margin: 0;
  white-space: pre-line;
}

/* Elementos & Emoções Box */
.work-themes-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.work-themes-label {
  font-size: 0.80rem;
  font-weight: 800;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.work-themes-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.work-theme-pill {
  display: inline-block;
  background: #F1F5F9;
  border: 1px solid #CBD5E1;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}

/* O que Escutar com o Benji */
.work-benji-note {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-left: 4px solid #F59E0B;
  border-radius: 10px;
  padding: 12px 16px;
}

.work-benji-avatar-pill {
  font-size: 0.82rem;
  font-weight: 800;
  color: #92400E;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.work-benji-note-text {
  font-size: 0.90rem;
  line-height: 1.55;
  color: #78350F;
  margin: 0;
}

/* 3D Pixar Concept / Art Box */
.work-future-benji-prompt {
  background: #FAF5FF;
  border: 1.5px dashed #C084FC;
  border-radius: 10px;
  padding: 12px 16px;
}

.work-future-prompt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.work-future-prompt-text {
  font-size: 0.84rem;
  line-height: 1.5;
  color: #581C87;
  font-style: italic;
  margin: 0;
}

/* Mobile Responsiveness for Musical Works */
@media (max-width: 768px) {
  .music-work-card {
    flex-direction: column;
  }
  .work-card-visual-column {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    border-right: none;
    border-bottom: 2px solid var(--border-tactile);
  }
  .work-primary-image-frame {
    min-height: 260px;
    height: 280px;
  }
  .work-card-info {
    padding: 16px;
    gap: 12px;
  }
  .work-card-title {
    font-size: 1.2rem;
  }
}

/* Responsive adjustments for 5-card grids */
/* ==========================================================================
   CARDS DAS ENTRADAS: ESTRUTURA PRIORIZADA EM 5 POR FILA (MÁXIMO RIGOR E ELEGÂNCIA)
   Aplica-se universalmente a:
   - Geografia: Países do Mundo & Maravilhas Geográficas (.countries-cards-grid, .geo-features-grid)
   - Línguas: Menu Global de Línguas (.lang-choice-grid)
   - História: Monarcas & Grandes Figuras (.geo-features-grid)
   - Ciência: Cientistas, Conceitos & Invenções (.geo-features-grid)
   - Arte: 100 Pintores & 200 Quadros Mundiais (.geo-features-grid, .art-paintings-grid)
   - Literatura: 50 Grandes Autores & Obras-Primas (.geo-features-grid, .literature-books-grid)
   - Música: 52 Compositores & Obras Clássicas (.geo-features-grid, .music-works-grid)
   - Natureza: 100 Animais Selvagens & Biodiversidade (.geo-features-grid)
   - Desporto: Futebol, Regras & Lendas (.geo-features-grid)
   - Carros: 200 Marcas & Modelos Automóveis (.geo-features-grid)
   - Mitologia: 202 Heróis & Figuras Mitológicas (.geo-features-grid)
   - Monumentos: Património Mundial (.monuments-grid)
   - Fichas de Exploração (.discovery-cards-grid, .dossier-items-grid)
   ========================================================================== */
.geo-features-grid,
.countries-cards-grid,
.lang-choice-grid,
.art-paintings-grid,
.monuments-grid,
.universal-dossier-grid,
.discovery-cards-grid,
.dossier-items-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
  margin-top: 16px;
}

/* Otimização interna dos cards para layout esguio de 5 por fila (3:4 Ratio) */
.geo-feature-card,
.country-dossier-card,
.lang-choice-card,
.art-painting-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
}

.geo-feature-card-media,
.card-hero-image-wrap,
.lang-choice-card-media,
.painting-card-img-wrapper,
.book-card-cover-wrapper {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  height: auto !important;
  overflow: hidden !important;
}

.geo-feature-card-body,
.country-card-content,
.lang-choice-card-body,
.art-painting-info,
.book-card-info {
  padding: 14px !important;
  gap: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  justify-content: space-between !important;
}

.geo-feature-title,
.country-card-name,
.lang-choice-name,
.painting-card-title,
.book-card-title {
  font-size: 1.05rem !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  margin: 0 !important;
}

.geo-feature-subtitle,
.country-card-capital,
.lang-choice-script,
.painting-museum-line {
  font-size: 0.78rem !important;
  line-height: 1.3 !important;
}

.geo-feature-summary,
.country-card-summary,
.lang-choice-summary {
  font-size: 0.8rem !important;
  line-height: 1.38 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.geo-feature-facts-preview,
.country-quick-facts-mini {
  padding: 6px 10px !important;
  gap: 3px !important;
  font-size: 0.76rem !important;
}

.geo-feature-open-btn,
.view-in-200-paintings-btn,
.open-painter-from-pt-btn {
  padding: 7px 12px !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
}

/* Responsividade de Alta Fidelidade */
@media (max-width: 1220px) {
  .geo-features-grid,
  .countries-cards-grid,
  .lang-choice-grid,
  .art-paintings-grid,
  .monuments-grid,
  .universal-dossier-grid,
  .discovery-cards-grid,
  .dossier-items-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

@media (max-width: 960px) {
  .geo-features-grid,
  .countries-cards-grid,
  .lang-choice-grid,
  .art-paintings-grid,
  .monuments-grid,
  .universal-dossier-grid,
  .discovery-cards-grid,
  .dossier-items-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (max-width: 680px) {
  .geo-features-grid,
  .countries-cards-grid,
  .lang-choice-grid,
  .art-paintings-grid,
  .monuments-grid,
  .universal-dossier-grid,
  .discovery-cards-grid,
  .dossier-items-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

@media (max-width: 440px) {
  .geo-features-grid,
  .countries-cards-grid,
  .lang-choice-grid,
  .art-paintings-grid,
  .monuments-grid,
  .universal-dossier-grid,
  .discovery-cards-grid,
  .dossier-items-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .geo-feature-card-overlay {
    top: 6px;
    left: 6px;
    right: 6px;
    gap: 4px;
  }
  .geo-category-badge,
  .geo-record-badge {
    font-size: 0.60rem;
    padding: 2px 6px;
    border-radius: 5px;
  }
}

/* ==========================================================================
   CARS MODULE BRAND CARDS: OFFICIAL EMBLEM & REAL VEHICLE SHOWCASE
   ========================================================================== */
.cars-view .geo-feature-card-media {
  background: radial-gradient(circle at center, #ffffff 0%, #f8fafc 55%, #e2e8f0 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 34px 24px !important;
  box-sizing: border-box !important;
}

.cars-view .geo-feature-card-img {
  width: auto !important;
  height: auto !important;
  max-width: 82% !important;
  max-height: 82% !important;
  object-fit: contain !important;
  object-position: center center !important;
  filter: drop-shadow(0 6px 16px rgba(15, 23, 42, 0.16));
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}

.cars-view .geo-feature-card:hover .geo-feature-card-img {
  transform: scale(1.12);
  filter: drop-shadow(0 12px 24px rgba(15, 23, 42, 0.25));
}

.cars-view .card-corner-logo-badge {
  display: none !important;
}

.cars-view .card-brand-logo-wrapper {
  display: none !important;
}

.cars-view .car-model-showcase-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cars-view .car-model-showcase-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
}

.cars-view .car-model-card-visual img {
  transition: transform 0.35s ease;
}

.cars-view .car-model-showcase-card:hover .car-model-card-visual img {
  transform: scale(1.04);
}

/* ==========================================================================
   NAVIGATION & FLUIDITY DESIGN SYSTEM (60FPS FLUID PERFORMANCE AUDIT)
   - CSS Rendering Virtualization (content-visibility: auto) for large grids
   - GPU-promoted composite layers for stutter-free hover & scroll
   - Silky hardware-accelerated view & tab entrance transitions
   - Horizontal scroll momentum, containment & custom sleek scrollbars
   - Mobile-first responsive segmented control tabs bar (40px compact height)
   - Dynamic concise tab labels for small viewports
   - Floating "Voltar ao Topo" (Scroll-to-top) tactile quick button
   - Modal background scroll chaining containment
   - Smooth tactile press micro-interactions & search focus glow
   ========================================================================== */

/* 1. CSS Rendering Virtualization: Boosts scroll performance to 60fps on massive grids */
.geo-features-grid > .geo-feature-card,
.countries-cards-grid > .country-card,
.countries-cards-grid > .country-dossier-card,
.art-paintings-grid > .art-painting-card,
.dossier-items-grid > .geo-feature-card,
.universal-dossier-grid > .discovery-card,
.monuments-grid > .geo-feature-card,
.modules-hub-grid > .module-card,
.car-model-showcase-card {
  content-visibility: auto;
  contain-intrinsic-size: 280px 380px;
}

.music-works-grid > .music-work-card {
  content-visibility: auto;
  contain-intrinsic-size: 700px 340px;
}

/* 2. GPU Composite Layer Promotion: Zero composite layer redraws during transforms */
.geo-feature-card,
.module-card,
.country-card,
.country-dossier-card,
.art-painting-card,
.art-painter-card,
.literature-book-card,
.music-work-card,
.discovery-card,
.car-model-showcase-card,
.btn-pill,
.theme-nav-btn,
.tab-nav-btn {
  will-change: transform, box-shadow;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

/* 3. Tactile Active Press Feedback */
.btn:active,
.btn-pill:active,
.theme-nav-btn:active,
.tab-nav-btn:active,
.feature-category-pill:active,
.geo-feature-card:active,
.module-card:active,
.car-model-showcase-card:active {
  transform: translateY(2px) scale(0.985) !important;
  transition-duration: 0.08s !important;
}

/* 4. Hardware-Accelerated View & Tab Entrance Transitions */
@keyframes screenViewFadeIn {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tabViewFadeIn {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.welcome-screen-container,
.hub-screen-container,
.module-hero-banner {
  animation: screenViewFadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#module-tab-content-host,
.explorer-view,
.quiz-container,
.games-container {
  animation: tabViewFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* 5. Horizontal Scrolling Fluidity (Themes Bar, Category Pills & Chips) */
.category-pills-bar,
.themes-scroll,
.continent-chips-scroll {
  display: flex !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
  overscroll-behavior-x: contain !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(22, 117, 165, 0.22) transparent;
  scroll-snap-type: x proximity;
  padding: 4px 4px 8px 4px;
}

.feature-category-pill,
.theme-nav-btn,
.continent-chip {
  scroll-snap-align: start;
  flex-shrink: 0;
}

.category-pills-bar::-webkit-scrollbar,
.themes-scroll::-webkit-scrollbar,
.continent-chips-scroll::-webkit-scrollbar {
  height: 6px;
}

.category-pills-bar::-webkit-scrollbar-track,
.themes-scroll::-webkit-scrollbar-track,
.continent-chips-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.category-pills-bar::-webkit-scrollbar-thumb,
.themes-scroll::-webkit-scrollbar-thumb,
.continent-chips-scroll::-webkit-scrollbar-thumb {
  background: rgba(22, 117, 165, 0.22);
  border-radius: var(--radius-full);
}

.category-pills-bar::-webkit-scrollbar-thumb:hover,
.themes-scroll::-webkit-scrollbar-thumb:hover,
.continent-chips-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(22, 117, 165, 0.45);
}

/* 6. Floating Scroll-To-Top Quick Navigation Pill */
.btn-scroll-top {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 990;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
  box-shadow: 0 4px 14px rgba(22, 117, 165, 0.35), 0 2px 0 var(--border-depth);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  font-weight: 800;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.85);
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
  pointer-events: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.btn-scroll-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.btn-scroll-top:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 8px 20px rgba(22, 117, 165, 0.45);
}

.btn-scroll-top:active {
  transform: translateY(1px) scale(0.96);
}

.scroll-top-arrow {
  line-height: 1;
  display: block;
}

/* 7. Modal & Sheet Scroll Containment: Prevents background scroll chaining */
.modal-backdrop,
.benji-modal,
.benji-modal-container,
.universal-modal {
  overscroll-behavior: contain !important;
}

.modal-body,
.passport-body,
.modal-content-scroll {
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

/* 8. Search Input Glow & Tactile Filter Bar Transitions */
.feature-search-input,
.country-search-box {
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.feature-search-input:focus,
.country-search-box:focus-within {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(22, 117, 165, 0.2) !important;
}

/* 9. Mobile & Tablet Navigation Fluidity Overrides */
@media (max-width: 768px) {
  .components-tabs-bar {
    padding: 6px 0 !important;
    background: rgba(255, 248, 236, 0.96) !important;
    position: sticky !important;
    top: calc(48px + env(safe-area-inset-top, 0px)) !important;
    z-index: 95 !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1.5px solid var(--border-tactile) !important;
    box-shadow: 0 2px 8px rgba(24, 54, 75, 0.05) !important;
  }

  .tabs-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: stretch !important;
    gap: 6px !important;
    padding: 0 12px !important;
  }

  .tab-nav-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 4px 8px !important;
    font-size: 0.84rem !important;
    border-radius: 12px !important;
    gap: 6px !important;
    white-space: nowrap !important;
    justify-content: center !important;
    box-shadow: 0 2px 0 var(--border-depth) !important;
  }

  .tab-nav-btn .tab-icon {
    font-size: 1rem !important;
  }

  .btn-scroll-top {
    bottom: 16px;
    left: 14px;
    width: 40px;
    height: 40px;
    font-size: 1.15rem;
  }
}

@media screen and (max-width: 640px) {
  /* Dynamic concise tab titles on mobile */
  .tab-nav-btn[data-tab="explore"] .tab-title {
    font-size: 0 !important;
    line-height: 0 !important;
  }
  .tab-nav-btn[data-tab="explore"] .tab-title::after {
    content: "Explorar";
    font-size: 0.82rem;
    font-weight: 700;
  }

  .tab-nav-btn[data-tab="review"] .tab-title {
    font-size: 0 !important;
    line-height: 0 !important;
  }
  .tab-nav-btn[data-tab="review"] .tab-title::after {
    content: "Rever";
    font-size: 0.82rem;
    font-weight: 700;
  }

  .tab-nav-btn[data-tab="play"] .tab-title {
    font-size: 0 !important;
    line-height: 0 !important;
  }
  .tab-nav-btn[data-tab="play"] .tab-title::after {
    content: "Jogar";
    font-size: 0.82rem;
    font-weight: 700;
  }

  /* Compact Home Nav button in sticky header */
  #btn-home-nav {
    min-height: 32px !important;
    height: 32px !important;
    padding: 2px 8px !important;
    font-size: 0.78rem !important;
    border-radius: 10px !important;
    gap: 4px !important;
    box-shadow: 0 1.5px 0 var(--border-depth) !important;
  }
  #btn-home-nav .pill-icon {
    font-size: 0.92rem !important;
  }
}

/* ==========================================================================
   ANIMAL EXPEDITIONS 3D PIXAR SHOWCASE & QUEUE
   ========================================================================== */
.animals-expeditions-banner {
  background: linear-gradient(135deg, #3B0764 0%, #6D28D9 60%, #7C3AED 100%);
  color: #FFFFFF;
  border-radius: 16px;
  padding: 18px 24px;
  margin-bottom: 22px;
  box-shadow: 0 10px 25px -5px rgba(109, 40, 217, 0.3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.animals-expeditions-banner h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.01em;
}

.animals-expeditions-banner p {
  margin: 4px 0 0 0;
  font-size: 0.92rem;
  color: #EDE9FE;
  line-height: 1.5;
}

.expeditions-counter-pill {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.open-expeditions-queue-modal-btn {
  background: #FFFFFF !important;
  color: #6D28D9 !important;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
  padding: 10px 18px !important;
  border-radius: 12px !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.open-expeditions-queue-modal-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
  background: #FAF5FF !important;
}

/* Dossier Showcase: Completed 3D Pixar Illustration */
.animal-expedition-showcase {
  background: linear-gradient(135deg, #FAF5FF 0%, #F5F3FF 100%);
  border: 2px solid #C084FC;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 6px 20px rgba(147, 51, 234, 0.1);
}

.animal-expedition-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 10px;
}

.animal-expedition-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.animal-expedition-sparkle {
  font-size: 1.6rem;
}

.animal-expedition-heading {
  margin: 0;
  color: #6B21A8;
  font-size: 1.15rem;
  font-weight: 800;
}

.animal-expedition-heading-queued {
  margin: 0;
  color: #334155;
  font-size: 1.1rem;
  font-weight: 700;
}

.animal-expedition-subheading {
  font-size: 0.78rem;
  color: #7E22CE;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.animal-expedition-badge-completed {
  background: linear-gradient(135deg, #7E22CE 0%, #9333EA 100%);
  color: #FFFFFF;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 3px 8px rgba(126, 34, 206, 0.3);
}

.animal-expedition-media-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 440px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid #E9D5FF;
  background: #0F172A;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.animal-expedition-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.animal-expedition-media-wrap:hover .animal-expedition-media-img {
  transform: scale(1.03);
}

.animal-expedition-media-overlay {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.animal-expedition-prompt-box {
  margin-top: 14px;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 14px 16px;
  border: 1px solid #E9D5FF;
}

.animal-expedition-prompt-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #7E22CE;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.animal-expedition-prompt-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #4C1D95;
  font-style: italic;
}

/* Dossier Concept Card: Queued for Pixar Generation */
.animal-expedition-queue-card {
  background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
  border: 2px dashed #CBD5E1;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
}

.animal-expedition-badge-queued {
  background: #E2E8F0;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #CBD5E1;
}

.animal-expedition-prompt-box-queued {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 14px 16px;
  border: 1px solid #E2E8F0;
  margin-bottom: 10px;
}

.animal-expedition-prompt-text-queued {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #334155;
  font-style: italic;
}

.animal-expedition-queue-note {
  font-size: 0.82rem;
  color: #64748B;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
}

/* Card Button: Direct 3D Pixar View */
.open-animal-expedition-direct-btn {
  background: #FAF5FF !important;
  color: #7E22CE !important;
  border-color: #C084FC !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all 0.2s ease !important;
}

.open-animal-expedition-direct-btn:hover {
  background: #7E22CE !important;
  color: #FFFFFF !important;
  border-color: #7E22CE !important;
  transform: translateY(-1px);
}

/* Modal Catalog Queue Styles */
.expeditions-modal-filter-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-bottom: 16px;
  scrollbar-width: thin;
}

.expeditions-filter-pill {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  border: 1px solid #E2E8F0;
  background: #F8FAFC;
  color: #475569;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.expeditions-filter-pill.active,
.expeditions-filter-pill:hover {
  background: #7E22CE;
  color: #FFFFFF;
  border-color: #7E22CE;
}

.expeditions-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px;
}

.expedition-modal-item-card {
  border-radius: 12px;
  padding: 14px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.2s ease;
}

.expedition-modal-item-card.completed {
  border-color: #C084FC;
  background: #FAF5FF;
  box-shadow: 0 2px 8px rgba(126, 34, 206, 0.08);
}

.expedition-modal-item-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   ELEGANT AUTOMOTIVE DOSSIER & SHOWROOM (FICHA INDIVIDUAL DE MARCAS & CARROS)
   ========================================================================== */

/* Showroom Container */
.car-hero-showcase {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
}

/* Header Top */
.car-hero-header-top {
  margin-bottom: 20px;
}

.car-hero-badges-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.car-country-pill {
  background: #F1F5F9;
  color: #334155;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid #E2E8F0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.car-era-pill {
  background: #FFF7ED;
  color: #C2410C;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid #FED7AA;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Brand Title & Logo Group */
.car-brand-hero-title-group {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.car-hero-brand-logo-frame {
  width: 90px;
  height: 90px;
  min-width: 90px;
  background: #FFFFFF;
  border-radius: 18px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  border: 2px solid #F1F5F9;
}

.car-hero-brand-logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.car-brand-title-text {
  flex: 1;
  min-width: 240px;
}

.car-hero-brand-title {
  margin: 0;
  font-size: 2rem;
  font-weight: 900;
  color: #0F172A;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.car-hero-brand-subtitle {
  font-size: 1rem;
  font-weight: 700;
  color: #EA580C;
  margin-top: 4px;
}

.car-hero-badge-symbol-preview {
  margin-top: 6px;
  font-size: 0.88rem;
  color: #64748B;
  line-height: 1.45;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Cinematic 16:9 Showroom Canvas */
.car-showroom-canvas-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #0B0F19;
  border: 2px solid #1E293B;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.car-showroom-canvas-wrapper:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.24);
}

.car-showroom-canvas-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 520px;
  background: radial-gradient(circle at center, #1E293B 0%, #0B0F19 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.car-showroom-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.car-showroom-canvas-wrapper:hover .car-showroom-hero-img {
  transform: scale(1.03);
}

.car-showroom-floating-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.car-showroom-plaque-bar {
  background: #0F172A;
  color: #F8FAFC;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.car-showroom-plaque-bar .plaque-title {
  color: #FFFFFF !important;
  font-size: 1.05rem;
}

.car-showroom-plaque-bar .plaque-meta {
  color: #94A3B8 !important;
  font-size: 0.88rem;
}

/* Garage Carousel */
.car-landmarks-carousel {
  margin: 18px 0 24px 0;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 14px 16px;
}

.car-carousel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.car-carousel-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 800;
  color: #0F172A;
}

.car-carousel-hint {
  font-size: 0.78rem;
  color: #64748B;
  font-weight: 600;
}

.car-thumbnails-scroll-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
}

.car-thumb-btn {
  flex-shrink: 0;
  width: 140px;
  background: #FFFFFF;
  border: 2px solid #E2E8F0;
  border-radius: 12px;
  padding: 6px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.car-thumb-btn:hover {
  border-color: #EA580C;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.15);
}

.car-thumb-btn.active {
  border-color: #EA580C;
  background: #FFF7ED;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.2);
}

.car-thumb-img-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #0F172A;
}

.car-thumb-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.car-thumb-info {
  font-size: 0.76rem;
  font-weight: 800;
  color: #1E293B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 2px;
}

.car-thumb-btn.active .car-thumb-info {
  color: #C2410C;
}

/* Quick Facts Cockpit Grid */
.car-quick-facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

/* Models Showroom Grid */
.car-models-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.car-model-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.car-model-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
  border-color: #CBD5E1;
}

.car-model-media-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0B0F19;
  overflow: hidden;
  cursor: pointer;
}

.car-model-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.car-model-media-frame:hover .car-model-img {
  transform: scale(1.05);
}

.car-model-media-badge-era {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.car-model-media-badge-body {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(234, 88, 12, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
}

.car-model-media-zoom-overlay {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
}

.car-model-content {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}

.car-model-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.car-model-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.25;
}

.car-model-brand-pill {
  font-size: 0.75rem;
  font-weight: 800;
  color: #EA580C;
  background: #FFF7ED;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.car-model-specs-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: #64748B;
  margin-bottom: 10px;
}

.car-model-desc {
  margin: 0 0 16px 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #334155;
  flex: 1;
}

.car-model-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}

.btn-car-zoom,
.btn-car-switch-hero {
  flex: 1;
  justify-content: center;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.btn-car-zoom {
  background: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
  color: #334155 !important;
}

.btn-car-zoom:hover {
  background: #E2E8F0 !important;
}

.btn-car-switch-hero {
  background: #EA580C !important;
  border: 1px solid #EA580C !important;
  color: #FFFFFF !important;
}

.btn-car-switch-hero:hover {
  background: #C2410C !important;
  border-color: #C2410C !important;
}

/* 3D Pixar Concept Card in Cars Dossier */
.car-pixar-expedition-card {
  background: linear-gradient(135deg, #FAF5FF 0%, #F5F3FF 100%);
  border: 2px solid #C084FC;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(147, 51, 234, 0.08);
}

.car-pixar-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.car-pixar-icon {
  font-size: 1.6rem;
}

.car-pixar-title {
  margin: 0;
  color: #6B21A8;
  font-size: 1.15rem;
  font-weight: 800;
}

.car-pixar-subtitle {
  font-size: 0.78rem;
  color: #7E22CE;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.car-pixar-prompt-box {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 14px 16px;
  border: 1px solid #E9D5FF;
  margin-bottom: 10px;
}

.car-pixar-prompt-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #4C1D95;
  font-style: italic;
}

.car-pixar-note {
  font-size: 0.82rem;
  color: #7E22CE;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .car-hero-showcase {
    padding: 16px;
  }
  .car-hero-brand-title {
    font-size: 1.5rem;
  }
  .car-hero-brand-logo-frame {
    width: 70px;
    height: 70px;
    min-width: 70px;
  }
  .car-models-grid {
    grid-template-columns: 1fr;
  }
  .car-thumb-btn {
    width: 120px;
  }
}


/* ==========================================================================
   SPORTS & MARTIAL ARTS (DESPORTOS & ARTES MARCIAIS)
   ========================================================================== */

/* Subtabs Nav (Artes Marciais vs Futebol) */
.sports-subtabs-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 12px 0 24px 0;
  padding: 6px;
  background: #F1F5F9;
  border-radius: 50px;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04);
}

.sports-subtab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 40px;
  border: none;
  background: transparent;
  color: #475569;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.sports-subtab-btn:hover {
  color: #0F172A;
  background: rgba(255, 255, 255, 0.6);
}

.sports-subtab-btn.active {
  background: #FFFFFF;
  color: #1E40AF;
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.15), 0 1px 3px rgba(0, 0, 0, 0.05);
}

.sports-subtab-btn .subtab-icon {
  font-size: 1.25rem;
}

.sports-subtab-btn .subtab-badge {
  background: #E2E8F0;
  color: #475569;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 800;
}

.sports-subtab-btn.active .subtab-badge {
  background: #DBEAFE;
  color: #1E40AF;
}

/* Martial Arts Catalog View */
.martial-arts-module-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px 48px 16px;
}

/* Hero Showcase Banner */
.martial-arts-hero-banner {
  background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 60%, #1D4ED8 100%);
  border-radius: 20px;
  padding: 36px 32px;
  color: #FFFFFF;
  margin-bottom: 24px;
  box-shadow: 0 10px 25px -5px rgba(30, 58, 138, 0.3);
  position: relative;
  overflow: hidden;
}

.martial-arts-hero-banner::after {
  content: '🥋';
  position: absolute;
  right: 24px;
  bottom: -20px;
  font-size: 8rem;
  opacity: 0.12;
  pointer-events: none;
}

.hero-banner-content {
  position: relative;
  z-index: 1;
  max-width: 860px;
}

.hero-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  color: #FDE047;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-title {
  font-size: 2.1rem;
  font-weight: 900;
  margin: 0 0 12px 0;
  line-height: 1.25;
  letter-spacing: -0.5px;
}

.hero-desc {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #E2E8F0;
  margin: 0 0 20px 0;
}

.hero-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-stats-row .stat-pill {
  background: rgba(255, 255, 255, 0.12);
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 0.9rem;
  color: #F8FAFC;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.hero-stats-row .stat-pill strong {
  color: #FDE047;
}

/* Toolbar & Search */
.martial-arts-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.toolbar-search-box {
  position: relative;
  flex: 1 1 320px;
  max-width: 580px;
}

.toolbar-search-box .search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  color: #94A3B8;
  pointer-events: none;
}

.toolbar-search-box input {
  width: 100%;
  padding: 12px 42px 12px 46px;
  border-radius: 30px;
  border: 1.5px solid #CBD5E1;
  background: #FFFFFF;
  font-size: 0.95rem;
  color: #0F172A;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.toolbar-search-box input:focus {
  outline: none;
  border-color: #3B82F6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.clear-search-btn {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: #E2E8F0;
  border: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 14px;
  color: #475569;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toolbar-view-switcher {
  display: flex;
  gap: 6px;
  background: #F1F5F9;
  padding: 4px;
  border-radius: 30px;
}

.toolbar-view-switcher .view-switch-btn {
  padding: 8px 18px;
  border-radius: 20px;
  border: none;
  background: transparent;
  color: #64748B;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.toolbar-view-switcher .view-switch-btn.active {
  background: #FFFFFF;
  color: #1E40AF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Family Filter Pills */
.family-filters-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 12px;
  margin-bottom: 24px;
  scrollbar-width: thin;
}

.family-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 25px;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  color: #334155;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.family-filter-pill:hover {
  background: #F8FAFC;
  border-color: #94A3B8;
  color: #0F172A;
}

.family-filter-pill.active {
  background: #1E40AF;
  border-color: #1E40AF;
  color: #FFFFFF;
  box-shadow: 0 4px 10px rgba(30, 64, 175, 0.25);
}

.family-filter-pill .family-count-badge {
  font-size: 0.78rem;
  opacity: 0.85;
}

/* Martial Arts Cards Grid */
.martial-arts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.martial-art-card {
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid #E2E8F0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.martial-art-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(30, 64, 175, 0.08);
  border-color: #CBD5E1;
}

/* Proporção Vertical Rigorosa 3:4 (4 vertical / 3 horizontal) para Artes Marciais */
.martial-art-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4; /* 4 vertical / 3 horizontal */
  background: #0F172A;
  overflow: hidden;
}

.martial-art-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  transition: transform 0.35s ease;
}

.martial-art-card:hover .martial-art-card-img {
  transform: scale(1.04);
}

.martial-art-card-flag-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(6px);
  color: #FFFFFF;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.martial-art-card-family-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(30, 64, 175, 0.9);
  backdrop-filter: blur(6px);
  color: #FFFFFF;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.martial-art-card-zoom-overlay {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  color: #FFFFFF;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.martial-art-card:hover .martial-art-card-zoom-overlay {
  opacity: 1;
}

/* Card Body */
.martial-art-card-body {
  padding: 20px 20px 16px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.martial-art-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.martial-art-card-title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  color: #0F172A;
}

.martial-art-card-native {
  font-size: 0.95rem;
  font-weight: 700;
  color: #2563EB;
}

.martial-art-card-origin-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: #64748B;
  font-weight: 600;
  margin-bottom: 12px;
}

.martial-art-card-summary {
  font-size: 0.92rem;
  line-height: 1.55;
  color: #334155;
  margin: 0 0 14px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.martial-art-card-tags {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
}

.ma-card-tag {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 0.78rem;
  color: #475569;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ma-tag-movement {
  background: #EFF6FF;
  border-color: #BFDBFE;
  color: #1E40AF;
}

.ma-tag-style {
  background: #F0FDF4;
  border-color: #BBF7D0;
  color: #166534;
}

/* Card Footer */
.martial-art-card-footer {
  padding: 12px 20px;
  background: #F8FAFC;
  border-top: 1px solid #F1F5F9;
  display: flex;
  gap: 8px;
}

.open-art-detail-btn {
  flex: 1;
}

/* Empty Results */
.empty-results-box {
  text-align: center;
  padding: 60px 20px;
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid #E2E8F0;
}

.empty-results-box .empty-icon {
  font-size: 3.5rem;
  display: block;
  margin-bottom: 16px;
}

/* ==========================================================================
   LEVEL 2: FULL MARTIAL ART DOSSIER PAGE (MODELO DAS LÍNGUAS)
   ========================================================================== */
.martial-art-dossier-page {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 16px 60px 16px;
}

/* Top Nav & Breadcrumb */
.dossier-top-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.nav-left-group {
  display: flex;
  gap: 8px;
}

.dossier-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  color: #64748B;
}

.dossier-breadcrumb strong {
  color: #0F172A;
}

.breadcrumb-native {
  color: #2563EB;
  font-weight: 700;
}

.dossier-quick-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: #475569;
}

.dossier-quick-switcher select {
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  font-weight: 600;
  color: #0F172A;
}

/* Sequential Sibling Navigation Bar */
.dossier-sequential-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 10px 16px;
  margin-bottom: 24px;
}

.btn-seq-nav {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-seq-nav:hover {
  background: #EFF6FF;
  border-color: #3B82F6;
}

.seq-arrow {
  font-size: 1.2rem;
  font-weight: 800;
  color: #2563EB;
}

.seq-text {
  display: flex;
  flex-direction: column;
}

.seq-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  color: #64748B;
  font-weight: 700;
}

.seq-title {
  font-size: 0.88rem;
  color: #0F172A;
}

.seq-position-badge {
  font-size: 0.85rem;
  font-weight: 700;
  color: #64748B;
  background: #FFFFFF;
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid #E2E8F0;
}

/* Grand Showcase Card (3:4 Vertical Media Left + Balanced Narrative Right) */
.martial-art-showcase-card {
  display: grid;
  grid-template-columns: minmax(320px, 370px) 1fr;
  gap: 36px;
  background: #FFFFFF;
  border-radius: 24px;
  border: 1px solid #E2E8F0;
  padding: 32px;
  margin-bottom: 32px;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
  align-items: start;
}

/* Left Visual Column */
.showcase-visual-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.showcase-img-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4; /* Proporção 4 vertical / 3 horizontal */
  border-radius: 20px;
  overflow: hidden;
  background: #0F172A;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
  cursor: pointer;
}

.showcase-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  transition: transform 0.35s ease;
}

.showcase-img-frame:hover .showcase-main-img {
  transform: scale(1.03);
}

.showcase-zoom-hint {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(4px);
  color: #FFFFFF;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.showcase-photo-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #475569;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 8px 12px;
  text-align: center;
}

/* Tag Below Photo (preservado para compatibilidade retroativa) */
.showcase-tag-below {
  display: flex;
  gap: 14px;
  padding: 14px 18px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
}

.tag-flag-symbol {
  font-size: 2.2rem;
  line-height: 1;
}

.tag-details-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.85rem;
  color: #475569;
}

.tag-country-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F172A;
}

.showcase-audio-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 14px;
  width: 100%;
  text-align: left;
}

.showcase-audio-btn .audio-pulse-icon {
  font-size: 1.4rem;
}

.audio-btn-labels {
  display: flex;
  flex-direction: column;
}

.audio-subtext {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.85;
}

.audio-maintext {
  font-size: 0.95rem;
  font-weight: 800;
}

/* Right Narrative Column - Balanced Typography & Hierarchy */
.showcase-narrative-col {
  display: flex;
  flex-direction: column;
}

.showcase-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.badge-family {
  background: #EFF6FF;
  color: #1E40AF;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid #BFDBFE;
}

.badge-country {
  background: #F1F5F9;
  color: #334155;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
}

.badge-olympic {
  background: #FEF3C7;
  color: #92400E;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid #FDE68A;
}

.showcase-title {
  font-size: 2.4rem;
  font-weight: 900;
  color: #0F172A;
  margin: 0 0 4px 0;
  line-height: 1.15;
}

.showcase-native-script {
  font-size: 1.35rem;
  font-weight: 700;
  color: #2563EB;
  margin-bottom: 16px;
}

/* Heritage & Foundation Strip */
.showcase-heritage-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.heritage-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
}

.heritage-pill-icon {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}

.heritage-pill small {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  font-weight: 700;
  color: #64748B;
  letter-spacing: 0.4px;
}

.heritage-pill strong {
  font-size: 0.86rem;
  color: #0F172A;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Etymology & Meaning Box */
.showcase-etymology-box {
  background: #EFF6FF;
  border: 1.5px solid #BFDBFE;
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.etymology-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.etymology-icon {
  font-size: 1.25rem;
  line-height: 1.2;
}

.etymology-body strong {
  display: block;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #1E40AF;
  margin-bottom: 2px;
}

.etymology-body p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #1E3A8A;
}

.showcase-summary-box {
  margin-bottom: 16px;
}

.showcase-summary-text {
  font-size: 1.02rem;
  line-height: 1.6;
  color: #334155;
  margin: 0;
}

/* Philosophy & Moral Code Highlight */
.showcase-philosophy-highlight {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #F0FDF4;
  border: 1.5px solid #BBF7D0;
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 18px;
}

.philo-icon {
  font-size: 1.3rem;
  line-height: 1.2;
  flex-shrink: 0;
}

.philo-body strong {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #166534;
  margin-bottom: 3px;
  font-weight: 800;
}

.philo-body p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #14532D;
}

.showcase-meta-deck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-top: auto;
}

.meta-pill-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #F8FAFC;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
}

.meta-pill-icon {
  font-size: 1.4rem;
}

.meta-pill-item small {
  display: block;
  font-size: 0.72rem;
  color: #64748B;
  text-transform: uppercase;
  font-weight: 700;
}

.meta-pill-item strong {
  font-size: 0.88rem;
  color: #0F172A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   DOSSIER CHAPTER CARDS (SPECIFICATIONS DECK)
   ========================================================================== */
.martial-art-dossier-deck {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.dossier-chapter-card {
  background: #FFFFFF;
  border-radius: 20px;
  border: 1px solid #E2E8F0;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.chapter-card-header {
  padding: 20px 24px;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.chapter-icon {
  font-size: 1.8rem;
}

.chapter-titles h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: #0F172A;
}

.chapter-titles p {
  margin: 2px 0 0 0;
  font-size: 0.88rem;
  color: #64748B;
}

.chapter-card-body {
  padding: 24px;
}

/* Spec Grid 4 */
.spec-grid-four {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.spec-box {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.spec-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #64748B;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.spec-val {
  font-size: 1.05rem;
  color: #0F172A;
}

/* Spec Boxes Column */
.spec-boxes-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.spec-detail-row {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 16px 20px;
}

.spec-detail-row .row-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.spec-detail-row .row-icon {
  font-size: 1.2rem;
}

.spec-detail-row h4 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #1E40AF;
}

.spec-detail-row p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: #334155;
}

/* Curiosity Gold Box */
.curiosity-gold-box {
  background: #FFFBEB;
  border: 2px solid #FCD34D;
  border-radius: 16px;
  padding: 18px 22px;
}

.gold-box-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.gold-icon {
  font-size: 1.4rem;
}

.gold-box-header h4 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: #92400E;
}

.gold-box-text {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: #78350F;
  font-weight: 500;
}

/* Styles Cards Grid */
.styles-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.style-card-item {
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  padding: 16px 18px;
}

.style-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.style-card-title-row h4 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F172A;
}

.style-card-desc {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #475569;
}

/* ==========================================================================
   MOVEMENTS & TECHNIQUES CARDS GRID (EXPLICIT USER REQUEST)
   ========================================================================== */
.movements-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 18px;
}

.movement-card-item {
  background: #FFFFFF;
  border: 2px solid #E2E8F0;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;
}

.movement-card-item:hover {
  border-color: #3B82F6;
  box-shadow: 0 8px 18px rgba(59, 130, 246, 0.1);
  transform: translateY(-2px);
}

.movement-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.movement-number {
  background: #1E40AF;
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 12px;
}

.movement-type-tag {
  background: #EFF6FF;
  color: #1E40AF;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid #BFDBFE;
}

.movement-name-title {
  margin: 0 0 10px 0;
  font-size: 1.25rem;
  font-weight: 900;
  color: #0F172A;
  letter-spacing: -0.2px;
}

.movement-description-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #334155;
}

/* History Timeline Chapters */
.history-lead-summary {
  background: #F8FAFC;
  border-left: 4px solid #3B82F6;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 24px;
}

.history-lead-summary p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.65;
  color: #1E3A8A;
  font-weight: 600;
}

.history-timeline-chapters {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.timeline-chapter-block {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
}

.timeline-marker-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.marker-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1E40AF;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
}

.marker-line {
  width: 2px;
  flex: 1;
  background: #CBD5E1;
  margin-top: 8px;
}

.timeline-content-col h4 {
  margin: 0 0 6px 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F172A;
}

.timeline-content-col p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.65;
  color: #334155;
}

/* Benji Journal Chapter */
.benji-journal-chapter {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border-color: #FCD34D;
}

.benji-journal-flex {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 24px;
  align-items: start;
}

.benji-journal-avatar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.journal-avatar-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid #F59E0B;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  margin-bottom: 8px;
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.2);
}

.benji-journal-avatar-col strong {
  font-size: 0.95rem;
  color: #92400E;
}

.benji-journal-avatar-col small {
  font-size: 0.78rem;
  color: #B45309;
}

.journal-quote-bubble {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 16px 20px;
  border: 1px solid #FDE68A;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.journal-quote-text {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #78350F;
  font-style: italic;
  font-weight: 500;
}

.journal-tip-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255, 255, 255, 0.7);
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid #FCD34D;
}

.journal-tip-box .tip-icon {
  font-size: 1.25rem;
}

.journal-tip-box strong {
  font-size: 0.85rem;
  color: #92400E;
  display: block;
  margin-bottom: 2px;
}

.journal-tip-box p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #78350F;
}

/* Sibling Arts Row */
.siblings-arts-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.sibling-art-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 8px 14px 8px 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sibling-art-pill:hover {
  background: #EFF6FF;
  border-color: #3B82F6;
  transform: translateY(-2px);
}

.sibling-thumb {
  width: 44px;
  height: 58px;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  object-fit: cover;
}

.sibling-info {
  display: flex;
  flex-direction: column;
}

.sibling-info strong {
  font-size: 0.9rem;
  color: #0F172A;
}

.sibling-info span {
  font-size: 0.78rem;
  color: #2563EB;
}

/* Martial Art Quiz */
.martial-art-quiz-card {
  background: #FFFFFF;
  border-radius: 20px;
  border: 1px solid #CBD5E1;
  padding: 32px;
  max-width: 680px;
  margin: 0 auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.quiz-badge {
  background: #FEF3C7;
  color: #92400E;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 800;
  display: inline-block;
  margin-bottom: 8px;
}

.quiz-header h3 {
  margin: 0 0 14px 0;
  font-size: 1.5rem;
  color: #0F172A;
}

.quiz-clue-box {
  background: #EFF6FF;
  border-left: 4px solid #3B82F6;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.quiz-clue-box p {
  margin: 0;
  font-size: 1.05rem;
  color: #1E3A8A;
  font-weight: 600;
}

.quiz-media-wrapper {
  position: relative;
  width: 100%;
  max-width: 280px;
  margin: 0 auto 24px auto;
  aspect-ratio: 3 / 4; /* Proporção 4 vertical / 3 horizontal */
  border-radius: 16px;
  overflow: hidden;
  background: #0F172A;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.quiz-mystery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.4s ease;
}

.quiz-mystery-img.blurred {
  filter: blur(14px) brightness(0.7);
}

.quiz-mystery-img.revealed {
  filter: blur(0) brightness(1);
}

.quiz-overlay-clue {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(15, 23, 42, 0.85);
  color: #FFFFFF;
  padding: 10px 18px;
  border-radius: 30px;
  font-size: 0.95rem;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.3);
  text-align: center;
}

.quiz-options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.quiz-option-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px;
  border-radius: 12px;
  border: 2px solid #E2E8F0;
  background: #FFFFFF;
  cursor: pointer;
  transition: all 0.2s ease;
}

.quiz-option-btn:hover:not(:disabled) {
  border-color: #3B82F6;
  background: #EFF6FF;
}

.quiz-option-btn .opt-flag {
  font-size: 1.5rem;
  margin-bottom: 4px;
}

.quiz-option-btn .opt-name {
  font-size: 1.05rem;
  color: #0F172A;
}

.quiz-option-btn .opt-native {
  font-size: 0.82rem;
  color: #64748B;
}

.quiz-option-btn.correct {
  background: #DCFCE7;
  border-color: #22C55E;
}

.quiz-option-btn.correct .opt-name {
  color: #15803D;
}

.quiz-option-btn.wrong {
  background: #FEE2E2;
  border-color: #EF4444;
}

.quiz-option-btn.wrong .opt-name {
  color: #B91C1C;
}

.quiz-feedback-box {
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  border-radius: 12px;
  padding: 16px 20px;
  text-align: center;
}

.quiz-feedback-box p {
  margin: 0 0 10px 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #334155;
}

.quiz-actions-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 14px;
}

/* Responsive adjustments */
@media (max-width: 960px) {
  .martial-art-showcase-card {
    grid-template-columns: 1fr;
    padding: 24px;
  }
  .showcase-visual-col {
    max-width: 520px;
    margin: 0 auto;
  }
  .showcase-title {
    font-size: 2rem;
  }
  .benji-journal-flex {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .hero-title {
    font-size: 1.5rem;
  }
  .martial-arts-grid {
    grid-template-columns: 1fr;
  }
  .quiz-options-grid {
    grid-template-columns: 1fr;
  }
  .spec-grid-four {
    grid-template-columns: 1fr;
  }
}

/* Biografias Pedagógicas Harmonizadas para Crianças */
.figure-biography-10yo-box p,
.figure-kid-card p {
  white-space: pre-line;
}


/* ==========================================================================
   BENJI CARTOGRAPHY & GEOGRAPHIC EXPERIENCE (Contextual Globe & Dedicated Country Map)
   ========================================================================== */

/* 1. Contextual Location ("Onde fica?") Card */
.benji-geographic-location-box {
  background: #FFFFFF;
  border: 2px solid #BAE6FD;
  border-radius: 20px;
  padding: 20px 24px;
  margin: 20px 0 28px 0;
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.08);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
}

.geo-loc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  border-bottom: 2px dashed #E0F2FE;
  padding-bottom: 14px;
}

.geo-loc-top-badges {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.geo-top-capital-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FEF3C7;
  border: 1.5px solid #F59E0B;
  color: #92400E;
  padding: 5px 14px;
  border-radius: 999px;
  font-family: 'Lexend', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.15);
}

.geo-top-continent-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F0F9FF;
  border: 1.5px solid #BAE6FD;
  color: #0369A1;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: 'Lexend', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
}

/* Dual Stage: Side-by-Side Presentation (World Map beside Country Map) */
.geo-loc-dual-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

@media (max-width: 900px) {
  .geo-loc-dual-stage {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.geo-dual-col {
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
}

.geo-world-col {
  border-color: #BAE6FD;
  background: #F0F9FF;
}

.geo-country-col {
  border-color: #FED7AA;
  background: #FFFDF8;
}

.geo-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1.5px dashed rgba(0, 0, 0, 0.08);
}

.geo-col-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.geo-col-icon {
  font-size: 1.35rem;
}

.geo-col-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F172A;
  font-family: 'Fredoka', 'Lexend', sans-serif;
}

.geo-col-capital-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FEF3C7;
  border: 1.5px solid #F59E0B;
  color: #92400E;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: 'Lexend', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.15);
}

/* Country map viewport */
.geo-country-map-viewport {
  min-height: 340px;
  height: 340px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  background: #E0F2FE;
  border: 1.5px solid #BAE6FD;
  display: flex;
  align-items: center;
  justify-content: center;
}

.country-side-map-container {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.country-side-map-svg {
  width: 100%;
  height: 100%;
  max-height: 340px;
  display: block;
}

/* Capital Marker styling in SVG (⭐ Capital) */
.marker-capital {
  cursor: pointer;
}

.marker-capital .capital-pulse-aura {
  fill: none;
  stroke: #F59E0B;
  stroke-width: 2.5;
  animation: capitalPulseAura 2s infinite ease-out;
}

@keyframes capitalPulseAura {
  0% { r: 12; opacity: 1; }
  50% { opacity: 0.7; }
  100% { r: 32; opacity: 0; }
}

.marker-capital .capital-badge-circle {
  fill: #F59E0B;
  stroke: #FFFFFF;
  stroke-width: 2.5;
  filter: drop-shadow(0 2px 8px rgba(245, 158, 11, 0.55));
}

.capital-callout-badge {
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.22));
}

.capital-callout-rect {
  fill: rgba(15, 23, 42, 0.94);
  stroke: #F59E0B;
  stroke-width: 1.5;
}

.capital-callout-text {
  fill: #FEF3C7;
  font-family: 'Lexend', sans-serif;
  font-size: 10px;
  font-weight: 800;
}

/* Floating Side Place Card */
.side-map-place-card {
  position: absolute;
  bottom: 12px;
  left: 12px;
  max-width: 320px;
  width: calc(100% - 24px);
  background: rgba(255, 255, 255, 0.96);
  border: 1.5px solid #BAE6FD;
  border-radius: 12px;
  padding: 8px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(8px);
  z-index: 450;
  display: flex;
  flex-direction: column;
  gap: 5px;
  animation: cardSlideUp 0.2s ease-out;
}

@keyframes cardSlideUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

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

.side-place-badge {
  background: #F0F9FF;
  border: 1px solid #BAE6FD;
  color: #0369A1;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
}

.side-place-close-btn {
  background: transparent;
  border: none;
  color: #64748B;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}

.side-place-close-btn:hover {
  color: #EF4444;
  background: #FEE2E2;
}

.side-place-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.side-place-thumb {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  object-fit: cover;
  border: 1.5px solid #E2E8F0;
}

.side-place-name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: #0F172A;
  font-family: 'Fredoka', 'Lexend', sans-serif;
}

.side-place-coords {
  font-size: 0.75rem;
  color: #64748B;
  font-family: 'Lexend', sans-serif;
}

.side-place-desc {
  margin: 0;
  font-size: 0.82rem;
  color: #334155;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.side-place-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.side-jump-btn {
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 800;
  border-radius: 999px;
}

/* Quick Selector Pills Bar */
.geo-country-quick-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.quick-bar-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #64748B;
  font-weight: 700;
}

.quick-bar-pills-row {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 2px 6px 2px;
  scrollbar-width: thin;
}

.quick-bar-pills-row::-webkit-scrollbar {
  height: 4px;
}

.quick-bar-pills-row::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}

.geo-place-quick-pill {
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  color: #334155;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: 'Lexend', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.geo-place-quick-pill:hover {
  border-color: #0284C7;
  color: #0284C7;
  background: #F0F9FF;
  transform: translateY(-1px);
}

.geo-place-quick-pill.active {
  background: #0284C7;
  color: #FFFFFF;
  border-color: #0284C7;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
}

/* Capital Quick Pill */
.geo-place-quick-pill.capital-quick-pill {
  background: #FEF3C7;
  border-color: #F59E0B;
  color: #92400E;
}

.geo-place-quick-pill.capital-quick-pill:hover {
  background: #FDE68A;
  border-color: #D97706;
}

.geo-place-quick-pill.capital-quick-pill.active {
  background: #F59E0B;
  color: #FFFFFF;
  border-color: #D97706;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

.geo-loc-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.geo-loc-icon {
  font-size: 2rem;
  background: #F0F9FF;
  border: 2px solid #BAE6FD;
  border-radius: 14px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(3, 105, 161, 0.1);
}

.geo-loc-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  color: #0F172A;
  font-family: 'Fredoka', 'Lexend', sans-serif;
}

.geo-loc-subtitle {
  font-size: 0.95rem;
  color: #475569;
}

.geo-loc-switch-bar {
  display: inline-flex;
  background: #F1F5F9;
  border: 1px solid #CBD5E1;
  padding: 4px;
  border-radius: 999px;
  gap: 4px;
}

.geo-view-btn {
  border: none;
  background: transparent;
  color: #475569;
  padding: 8px 16px;
  border-radius: 999px;
  font-family: 'Lexend', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.geo-view-btn:hover {
  color: #0369A1;
  background: rgba(255, 255, 255, 0.6);
}

.geo-view-btn.active {
  background: #0284C7;
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35);
}

/* Stage Viewports */
.geo-loc-stage {
  min-height: 340px;
  background: radial-gradient(circle at 50% 50%, #F0F9FF 0%, #E0F2FE 100%);
  border-radius: 16px;
  border: 1px solid #BAE6FD;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.globe-viewport-wrapper,
.flat-map-viewport-wrapper {
  width: 100%;
  height: 340px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.benji-globe-canvas {
  display: block;
  cursor: grab;
}

.benji-globe-canvas:active {
  cursor: grabbing;
}

.benji-flat-map-svg {
  width: 100%;
  height: 100%;
  max-height: 340px;
  display: block;
}

/* Flat Map Country Styling */
.flat-map-neutral-country {
  fill: #E2E8F0;
  stroke: #CBD5E1;
  stroke-width: 1;
  transition: fill 0.2s ease;
}

.flat-map-target-country {
  fill: #FF6B4A !important;
  stroke: #C2410C !important;
  stroke-width: 2 !important;
  filter: drop-shadow(0 2px 8px rgba(234, 88, 12, 0.45));
}

.flat-map-spoken-country {
  fill: #FDE047 !important;
  stroke: #D97706 !important;
  stroke-width: 1.4 !important;
  opacity: 0.92;
  transition: fill 0.2s ease, opacity 0.2s ease;
}

.flat-map-spoken-country:hover {
  fill: #FBBF24 !important;
  stroke: #B45309 !important;
  stroke-width: 2 !important;
  cursor: pointer;
}

.language-geo-slot {
  margin: 28px 0;
  width: 100%;
}

.geo-lang-switcher-container {
  margin: 14px 0 20px 0;
}

.flat-beacon-wave {
  fill: none;
  stroke: #EA580C;
  stroke-width: 2.5;
  animation: beaconPulse 1.8s infinite ease-out;
}

@keyframes beaconPulse {
  0% { r: 6; opacity: 1; }
  100% { r: 24; opacity: 0; }
}

/* Overlay Controls */
.globe-overlay-controls,
.flat-map-overlay-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 5;
}

.globe-ctrl-btn {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #BAE6FD;
  color: #0369A1;
  padding: 6px 12px;
  border-radius: 8px;
  font-family: 'Lexend', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(6px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.globe-ctrl-btn:hover {
  background: #FFFFFF;
  border-color: #0284C7;
  color: #0284C7;
  transform: translateY(-1px);
}

.globe-zoom-group {
  display: flex;
  gap: 4px;
}

.globe-zoom-group .globe-ctrl-btn {
  padding: 6px 10px;
  font-size: 0.95rem;
}

.globe-badge-indicator {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(15, 23, 42, 0.82);
  color: #FFFFFF;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: 'Lexend', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(4px);
  z-index: 5;
}

/* Geo Loc Footer Bar */
.geo-loc-footer-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 8px;
}

.geo-loc-coords-pill,
.geo-loc-meta-pill,
.geo-loc-hint-pill {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.geo-loc-coords-pill {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  color: #15803D;
  font-weight: 700;
}

.geo-loc-meta-pill {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  color: #475569;
  font-weight: 600;
}

.geo-loc-hint-pill {
  margin-left: auto;
  color: #64748B;
  font-size: 0.82rem;
}

/* ==========================================================================
   2. DEDICATED COUNTRY MAP ("À descoberta de [País]")
   ========================================================================== */

.benji-country-explorer-map-section {
  background: #FFFFFF;
  border: 2px solid #E2E8F0;
  border-radius: 20px;
  padding: 24px;
  margin: 28px 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.country-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  border-bottom: 2px solid #F1F5F9;
  padding-bottom: 16px;
}

.country-map-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.country-map-flag-icon {
  font-size: 2.4rem;
  background: #FFF7ED;
  border: 2px solid #FFEDD5;
  border-radius: 14px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.country-map-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: #0F172A;
  font-family: 'Fredoka', 'Lexend', sans-serif;
}

.country-map-subtitle {
  margin: 4px 0 0 0;
  font-size: 0.95rem;
  color: #475569;
}

/* Region Selector Pills (Açores, Madeira, etc.) */
.country-map-region-pills {
  display: inline-flex;
  flex-wrap: wrap;
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  padding: 4px;
  border-radius: 12px;
  gap: 6px;
}

.region-pill-btn {
  border: none;
  background: transparent;
  color: #475569;
  padding: 6px 14px;
  border-radius: 8px;
  font-family: 'Lexend', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.region-pill-btn:hover {
  background: rgba(255, 255, 255, 0.8);
  color: #0369A1;
}

.region-pill-btn.active {
  background: #0284C7;
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
}

/* Category Filter Tabs */
.country-map-filters-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-pill-btn {
  border: 1px solid #CBD5E1;
  background: #F8FAFC;
  color: #334155;
  padding: 7px 16px;
  border-radius: 999px;
  font-family: 'Lexend', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-pill-btn:hover {
  border-color: #94A3B8;
  background: #FFFFFF;
  transform: translateY(-1px);
}

.filter-pill-btn.active {
  background: #EA580C;
  border-color: #C2410C;
  color: #FFFFFF;
  box-shadow: 0 3px 10px rgba(234, 88, 12, 0.3);
}

/* Interactive Map Grid: Split Left / Right */
.country-map-interactive-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

@media (max-width: 960px) {
  .country-map-interactive-grid {
    grid-template-columns: 1fr;
  }
}

/* Map Visual Pane */
.country-map-visual-pane {
  background: #F0F9FF;
  border: 2px solid #BAE6FD;
  border-radius: 16px;
  padding: 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.country-map-svg-container {
  width: 100%;
  min-height: 480px;
  max-height: 580px;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #E0F2FE;
}

.portugal-dedicated-svg,
.country-dedicated-svg {
  width: 100%;
  height: 100%;
  min-height: 480px;
  max-height: 580px;
  display: block;
}

/* Portugal SVG elements */
.portugal-ocean-bg {
  fill: #E0F2FE;
}

.spain-neighbor-context {
  fill: #F1F5F9;
  stroke: #CBD5E1;
  stroke-width: 1.5;
}

.pt-district-shape {
  stroke: #FFFFFF;
  stroke-width: 1.2;
  transition: all 0.2s ease;
  cursor: pointer;
}

.pt-district-shape:hover {
  filter: brightness(1.08);
  stroke: #0284C7;
  stroke-width: 2;
}

.pt-river-line {
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 3px rgba(2, 132, 199, 0.4));
}

.pt-archipelago-inset {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.08));
}

.inset-box-border {
  fill: #F0F9FF;
  stroke: #0284C7;
  stroke-width: 1.8;
  stroke-dasharray: 4, 3;
}

.inset-title {
  font-family: 'Lexend', sans-serif;
  font-size: 11px;
  font-weight: 800;
  fill: #0369A1;
}

.inset-island-shape {
  fill: #86EFAC;
  stroke: #16A34A;
  stroke-width: 0.8;
}

.target-country-vector-focus {
  fill: #FFEDD5;
  stroke: #EA580C;
  stroke-width: 2;
}

.neighbor-country-vector {
  fill: #F1F5F9;
  stroke: #CBD5E1;
  stroke-width: 1;
}

/* Markers */
.country-map-marker {
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.country-map-marker:hover {
  transform: scale(1.35) !important;
}

.marker-pin-circle {
  fill: #FFFFFF;
  stroke: #0F172A;
  stroke-width: 2;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}

.marker-city .marker-pin-circle { stroke: #0284C7; }
.marker-monument .marker-pin-circle { stroke: #D97706; }
.marker-nature .marker-pin-circle { stroke: #16A34A; }

.marker-pulse-ring {
  fill: none;
  stroke: #EA580C;
  stroke-width: 2.5;
  animation: beaconPulse 1.6s infinite ease-out;
}

.marker-label-tooltip {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.country-map-marker:hover .marker-label-tooltip,
.country-map-marker.active-marker .marker-label-tooltip {
  opacity: 1;
}

.marker-tooltip-bg {
  fill: #0F172A;
  opacity: 0.92;
}

.marker-tooltip-text {
  fill: #FFFFFF;
  font-family: 'Lexend', sans-serif;
  font-size: 8px;
  font-weight: 700;
}

/* Place Preview Card */
.benji-place-preview-card {
  background: #FFFFFF;
  border: 2px solid #FFEDD5;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 6px 20px rgba(234, 88, 12, 0.12);
  animation: slideUpFade 0.25s ease-out;
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.place-preview-inner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.place-preview-thumbnail {
  width: 90px;
  height: 90px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid #FED7AA;
}

.place-preview-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.place-preview-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.place-preview-header-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview-badge {
  background: #FEF3C7;
  color: #B45309;
  border: 1px solid #FDE68A;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

.preview-coords {
  font-size: 0.78rem;
  color: #64748B;
  font-family: 'Lexend', sans-serif;
}

.preview-close-btn {
  margin-left: auto;
  border: none;
  background: #F1F5F9;
  color: #64748B;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-close-btn:hover {
  background: #E2E8F0;
  color: #0F172A;
}

.preview-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F172A;
  font-family: 'Fredoka', 'Lexend', sans-serif;
}

.preview-desc {
  margin: 0;
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.45;
}

.preview-actions-bar {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.place-preview-empty-hint {
  background: #FFFFFF;
  border: 1px dashed #CBD5E1;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 0.88rem;
  color: #64748B;
  text-align: center;
}

/* Places List Pane */
.country-map-places-list-pane {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 640px;
}

.places-list-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid #E2E8F0;
  padding-bottom: 8px;
}

.places-list-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: #1E293B;
  font-family: 'Fredoka', sans-serif;
}

.places-list-tip {
  font-size: 0.8rem;
  color: #64748B;
}

.places-scroll-container {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
}

.place-list-item-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.place-list-item-card:hover {
  border-color: #0284C7;
  transform: translateX(3px);
  box-shadow: 0 3px 10px rgba(2, 132, 199, 0.1);
}

.place-list-item-card.active-item {
  border-color: #EA580C;
  background: #FFF7ED;
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.15);
}

.place-item-icon-box {
  font-size: 1.4rem;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.active-item .place-item-icon-box {
  background: #FFEDD5;
}

.place-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.place-item-name {
  font-size: 0.95rem;
  color: #0F172A;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.place-item-badge {
  font-size: 0.78rem;
  color: #64748B;
}

.place-item-arrow {
  color: #CBD5E1;
  font-weight: 800;
  font-size: 0.9rem;
  transition: transform 0.15s ease;
}

.place-list-item-card:hover .place-item-arrow,
.active-item .place-item-arrow {
  color: #EA580C;
  transform: translateX(2px);
}

/* Legend Bar */
.country-map-legend-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 0.85rem;
  color: #475569;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.legend-dot.city-dot { background: #0284C7; }
.legend-dot.monument-dot { background: #D97706; }
.legend-dot.river-dot { background: #06B6D4; }
.legend-dot.nature-dot { background: #16A34A; }

/* In-Page Jump Golden Glow Highlight Pulse */
.benji-section-highlight-pulse {
  animation: sectionHighlightPulse 2.2s ease-out;
  border-radius: 16px;
}

@keyframes sectionHighlightPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.85);
    background-color: rgba(254, 243, 199, 0.6);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(234, 88, 12, 0);
    background-color: rgba(254, 243, 199, 0.3);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(234, 88, 12, 0);
    background-color: transparent;
  }
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .flat-beacon-wave,
  .marker-pulse-ring,
  .benji-section-highlight-pulse {
    animation: none !important;
  }
  .place-preview-card {
    animation: none !important;
  }
}

/* ==========================================================================
   Leaflet Dynamic Vector Cartography Styling
   ========================================================================== */

/* Leaflet Container Viewports */
.benji-leaflet-map-element {
  width: 100%;
  height: 500px;
  min-height: 440px;
  border-radius: 14px;
  z-index: 1;
  background: #E0F2FE;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.country-side-leaflet-container {
  width: 100%;
  height: 340px;
  border-radius: 12px;
  z-index: 1;
  background: #E0F2FE;
}

.country-explorer-leaflet-wrapper {
  position: relative;
  width: 100%;
}

/* Controls row and View Mode Toggles */
.country-map-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 4px;
}

.map-view-mode-bar,
.side-map-mode-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.side-map-mode-bar {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 500;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(6px);
  padding: 3px 6px;
  border-radius: 999px;
  border: 1px solid #BAE6FD;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.map-mode-btn,
.side-mode-btn {
  border: 1.5px solid #CBD5E1;
  background: #FFFFFF;
  color: #475569;
  font-family: 'Lexend', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.side-mode-btn {
  font-size: 0.74rem;
  padding: 3px 9px;
  border: 1px solid transparent;
  background: transparent;
}

.map-mode-btn:hover,
.side-mode-btn:hover {
  background: #F1F5F9;
  color: #0369A1;
}

.map-mode-btn.active,
.side-mode-btn.active {
  background: #0284C7;
  color: #FFFFFF;
  border-color: #0369A1;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.28);
}

/* Custom Benji Leaflet Markers */
.leaflet-benji-div-icon {
  background: transparent !important;
  border: none !important;
}

.leaflet-benji-marker {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.leaflet-benji-marker .leaflet-marker-pin {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: #FFFFFF;
  border: 2.5px solid #0284C7;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.22);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.leaflet-benji-marker:hover .leaflet-marker-pin,
.leaflet-benji-marker.active-marker .leaflet-marker-pin {
  transform: scale(1.22);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.32);
}

/* Capital Marker ⭐ */
.leaflet-benji-marker.marker-capital .leaflet-marker-pin {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #FEF3C7 0%, #F59E0B 100%);
  border: 3px solid #FFFFFF;
  font-size: 20px;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.6);
}

.leaflet-benji-marker .leaflet-capital-aura {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  margin-left: -26px;
  border-radius: 50%;
  border: 3px solid #F59E0B;
  animation: capitalPulseAura 2s infinite ease-out;
  pointer-events: none;
}

/* Spotlight Target Marker 📍 */
.leaflet-benji-marker.marker-spotlight .leaflet-marker-pin {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, #FFEDD5 0%, #EA580C 100%);
  border: 3px solid #FFFFFF;
  font-size: 22px;
  box-shadow: 0 4px 18px rgba(234, 88, 12, 0.65);
}

.leaflet-benji-marker .leaflet-spotlight-aura {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  margin-top: -28px;
  margin-left: -28px;
  border-radius: 50%;
  border: 3px solid #EA580C;
  animation: capitalPulseAura 1.8s infinite ease-out;
  pointer-events: none;
}

/* Monument Marker 🏛️ */
.leaflet-benji-marker.marker-monument .leaflet-marker-pin {
  border-color: #8B5CF6;
  background: #FAF5FF;
}

/* History Marker 📜 / ⚔️ */
.leaflet-benji-marker.marker-history .leaflet-marker-pin {
  border-color: #D97706;
  background: #FFFBEB;
}

/* Nature Marker 🌊 */
.leaflet-benji-marker.marker-nature .leaflet-marker-pin {
  border-color: #059669;
  background: #ECFDF5;
}

/* City Marker 🏙️ */
.leaflet-benji-marker.marker-city .leaflet-marker-pin {
  border-color: #0284C7;
  background: #F0F9FF;
}

.leaflet-benji-marker .leaflet-marker-label {
  display: none;
}

/* Floating Tools on Map */
.leaflet-floating-tools {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.leaflet-tool-btn {
  background: rgba(255, 255, 255, 0.94);
  border: 1.5px solid #BAE6FD;
  border-radius: 12px;
  padding: 7px 14px;
  font-family: 'Lexend', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  color: #0369A1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(6px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.18s ease;
}

.leaflet-tool-btn:hover {
  background: #FFFFFF;
  color: #0284C7;
  border-color: #38BDF8;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.22);
}

/* Tooltip Customization */
.benji-leaflet-tooltip {
  background: rgba(15, 23, 42, 0.94) !important;
  color: #FFFFFF !important;
  border: 1.5px solid #38BDF8 !important;
  border-radius: 8px !important;
  font-family: 'Lexend', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
}

.benji-leaflet-tooltip::before {
  border-top-color: rgba(15, 23, 42, 0.94) !important;
}

/* ==========================================================================
   Music Macro Subviews Switcher (All / Classical / Contemporary)
   ========================================================================== */

.music-subtabs-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.music-subtab-btn {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 20px;
  background: var(--bg-surface, #FFFFFF);
  border: 2px solid var(--border-subtle, #E2E8F0);
  border-radius: 14px;
  font-size: 0.96rem;
  font-weight: 800;
  color: var(--color-text, #334155);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.music-subtab-btn:hover {
  border-color: var(--color-primary, #6366F1);
  color: var(--color-primary, #6366F1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.music-subtab-btn.active {
  background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
  border-color: #4338CA;
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.35);
  transform: translateY(-1px);
}

.music-subtab-btn.active .subtab-badge {
  background: rgba(255, 255, 255, 0.28);
  color: #FFFFFF;
}

.music-subtab-btn .subtab-badge {
  font-size: 0.76rem;
  padding: 3px 9px;
  border-radius: 12px;
  background: #F1F5F9;
  color: #475569;
  font-weight: 700;
  transition: all 0.2s ease;
}

/* ==========================================================================
   Illustrated Storybook Layout for Kids & Historical Narratives
   ========================================================================== */

.story-illustrated-layout {
  display: grid;
  grid-template-columns: minmax(300px, 390px) 1fr;
  gap: 26px;
  align-items: start;
  margin-top: 18px;
  background: var(--bg-surface, #FFFFFF);
  border: 1px solid var(--border-subtle, #E2E8F0);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
}

@media (max-width: 900px) {
  .story-illustrated-layout {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 16px;
  }
}

.story-integrated-media {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 24px;
}

.story-media-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid var(--border-tactile, #CBD5E1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  background: #0F172A;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.story-media-frame:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.story-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.story-media-frame:hover .story-media-img {
  transform: scale(1.04);
}

.story-media-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #FFFFFF;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.02em;
}

.story-media-badge.badge-history {
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.story-media-badge.badge-pixar {
  background: rgba(16, 185, 129, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.45);
}

.story-zoom-hint {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(15, 23, 42, 0.85);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 16px;
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  gap: 5px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.story-media-dual-toggles {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-story-thumb {
  flex: 1;
  min-width: 130px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--bg-surface-warm, #F8FAFC);
  border: 1px solid var(--border-subtle, #CBD5E1);
  color: var(--color-text, #1E293B);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.18s ease;
}

.btn-story-thumb:hover {
  background: var(--color-primary-light, #EEF2FF);
  border-color: var(--color-primary, #6366F1);
  color: var(--color-primary, #6366F1);
}

.btn-story-thumb.active {
  background: #4F46E5;
  color: #FFFFFF;
  border-color: #4338CA;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.25);
}

.story-media-caption {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--color-text-muted, #64748B);
  padding: 4px 6px;
}

.story-illustrated-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.story-header-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.story-header-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: rgba(16, 185, 129, 0.12);
  color: #065F46;
  font-size: 0.82rem;
  font-weight: 800;
  border-radius: 20px;
  border: 1px solid rgba(16, 185, 129, 0.28);
}

.story-epoch-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: rgba(79, 70, 229, 0.1);
  color: #3730A3;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 20px;
  border: 1px solid rgba(79, 70, 229, 0.22);
}

.story-narrative-title {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--color-text, #0F172A);
  line-height: 1.35;
}

.story-text-flow {
  font-size: 1.08rem;
  line-height: 1.82;
  color: var(--color-text, #1E293B);
}

.story-paragraph {
  margin: 0 0 16px 0;
}

.story-paragraph:last-child {
  margin-bottom: 0;
}

.story-drop-cap {
  float: left;
  font-family: var(--font-display, Georgia, serif);
  font-size: 3.5rem;
  line-height: 0.78;
  padding-top: 4px;
  padding-right: 12px;
  padding-bottom: 2px;
  font-weight: 900;
  color: var(--color-primary, #4F46E5);
}

.story-benji-callout {
  margin-top: 12px;
  padding: 16px 20px;
  background: #FEF3C7;
  border: 2px solid #FCD34D;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.08);
}

.story-benji-avatar-pill {
  font-weight: 800;
  font-size: 0.9rem;
  color: #92400E;
  display: flex;
  align-items: center;
  gap: 6px;
}

.story-benji-quote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.62;
  color: #78350F;
  font-style: italic;
}

/* ==========================================================================
   200 DIAS QUE MUDARAM O MUNDO — PLANISFÉRIO & MAPAS HISTÓRICOS
   ========================================================================== */

.benji-history-map-explorer-section {
  border-color: #CBD5E1;
  background: #FFFFFF;
}

.benji-history-leaflet-divicon {
  background: transparent !important;
  border: none !important;
}

.benji-history-marker {
  position: relative;
  width: 36px;
  height: 36px;
  background: var(--marker-color, #B45309);
  border: 2.5px solid #FFFFFF;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32);
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
  user-select: none;
}

.benji-history-marker:hover,
.benji-history-marker.active-marker {
  transform: scale(1.24);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  border-color: #FEF08A;
  z-index: 1000 !important;
}

.benji-history-marker .marker-epoch-badge {
  font-size: 13px;
  line-height: 1;
}

.benji-history-marker .marker-day-tag {
  font-size: 8px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1;
  margin-top: 1px;
  letter-spacing: -0.2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.history-svg-pin {
  transition: transform 0.2s ease;
}

.history-svg-pin:hover circle.marker-core-circle,
.history-svg-pin.active-marker circle.marker-core-circle {
  r: 12;
  stroke: #FEF08A;
  stroke-width: 3.5;
}

.history-svg-pin:hover circle.marker-pulse-ring,
.history-svg-pin.active-marker circle.marker-pulse-ring {
  opacity: 0.55;
  r: 22;
}

.history-day-preview-card .place-preview-badge {
  font-weight: 800;
  font-size: 0.85rem;
  padding: 4px 10px;
  border-radius: 12px;
}

.open-history-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-color: #0284C7;
  color: #0284C7;
  font-weight: 700;
  transition: all 0.2s ease;
}

.open-history-map-btn:hover {
  background: #E0F2FE;
  border-color: #0369A1;
  color: #0369A1;
}

/* ===================================================
   LITERATURE GEOGRAPHY & STORY SETTINGS ENHANCEMENTS
   =================================================== */

.geo-lit-switcher-container {
  margin: 0 0 16px 0;
  padding: 14px 18px;
  background: linear-gradient(135deg, #F8FAFC 0%, #EEF2F6 100%);
  border: 1px solid #CBD5E1;
  border-left: 4px solid #0284C7;
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.geo-lit-switcher-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 10px;
}

.geo-lit-switcher-icon {
  font-size: 1.25rem;
}

.geo-lit-switcher-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.geo-lit-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  border-radius: 9999px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.geo-lit-switcher-btn:hover {
  background: #F1F5F9;
  border-color: #94A3B8;
  color: #0F172A;
  transform: translateY(-1px);
}

.geo-lit-switcher-btn.active {
  background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%);
  border-color: #0284C7;
  color: #FFFFFF;
  box-shadow: 0 3px 10px rgba(2, 132, 199, 0.35);
  transform: translateY(-1px);
}

.geo-lit-switcher-btn.active .geo-lit-btn-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

.geo-lit-btn-icon {
  font-size: 1rem;
}

.geo-lit-btn-label {
  line-height: 1.2;
}

.geo-lit-btn-badge {
  font-size: 0.76rem;
  background: #F1F5F9;
  color: #475569;
  padding: 2px 7px;
  border-radius: 9999px;
  font-weight: 700;
}

.book-story-setting-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
}

.book-author-home-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #F0F9FF;
  color: #075985;
  border: 1px solid #BAE6FD;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
}

.btn-book-map-jump {
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  padding: 4px 12px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.btn-book-map-catalog-jump {
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  padding: 4px 12px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.btn-book-map-catalog-jump:hover,
.btn-book-map-jump:hover {
  transform: translateY(-1px);
}

/* ================= ENHANCED PRACTICE & EXERCISES MODE (LANGUAGES) ================= */
.practice-jump-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 50%, #E0E7FF 100%);
  border: 2px solid #93C5FD;
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.08);
}
.practice-jump-banner:hover {
  transform: translateY(-2px);
  border-color: #3B82F6;
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.16);
}
.practice-jump-banner .pq-jump-icon {
  font-size: 2.2rem;
  background: #FFFFFF;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.12);
  flex-shrink: 0;
}
.practice-jump-banner .pq-jump-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.practice-jump-banner .pq-jump-text strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: #1E3A8A;
}
.practice-jump-banner .pq-jump-text span {
  font-size: 0.95rem;
  color: #1E40AF;
}
.practice-jump-banner .pq-jump-badge {
  background: linear-gradient(135deg, #2563EB, #1D4ED8);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.92rem;
  padding: 10px 18px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.lang-card-dual-actions {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: auto;
}
.lang-card-dual-actions .lang-choice-action-btn {
  flex: 1.25;
}
.lang-choice-practice-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid #93C5FD;
  background: #EFF6FF;
  color: #1D4ED8;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.lang-choice-practice-btn:hover {
  background: #2563EB;
  border-color: #2563EB;
  color: #FFFFFF;
  transform: translateY(-1px);
}

.btn-top-practice-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 2px solid #2563EB;
  background: linear-gradient(135deg, #2563EB, #1D4ED8);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
  transition: all 0.2s ease;
}
.btn-top-practice-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}
.btn-top-practice-cta.is-active-mode {
  background: #ECFDF5;
  border-color: #10B981;
  color: #047857;
}

.practice-mode-selector-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 0;
  padding: 14px;
  background: #FFFFFF;
  border: 2px solid var(--border-tactile);
  border-radius: 20px;
  box-shadow: 0 4px 0 var(--border-depth);
}
.practice-mode-selector-title {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #475569;
  padding: 0 4px 8px;
  border-bottom: 1.5px dashed #E2E8F0;
}
.practice-mode-buttons-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.practice-type-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1.5px solid #CBD5E1;
  background: #F8FAFC;
  color: #334155;
  font-weight: 700;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.practice-type-btn:hover {
  border-color: #3B82F6;
  color: #1D4ED8;
  background: #EFF6FF;
  transform: translateX(2px);
}
.practice-type-btn.active {
  background: linear-gradient(135deg, #2563EB, #1D4ED8);
  border-color: #1D4ED8;
  color: #FFFFFF;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.22);
}

@media (max-width: 860px) {
  .lang-practice-view {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .practice-side-panel {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 14px;
    align-items: stretch;
  }
  .practice-benji-photo-wrap {
    max-width: 150px;
  }
  .practice-mode-buttons-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
}

@media (max-width: 600px) {
  .practice-side-panel {
    grid-template-columns: 1fr;
  }
  .practice-benji-card {
    flex-direction: row;
    text-align: left;
    padding: 10px 12px;
    gap: 12px;
  }
  .practice-benji-photo-wrap {
    width: 84px;
    max-width: 84px;
    flex-shrink: 0;
  }
  .practice-benji-status {
    align-items: flex-start;
  }
  .practice-mode-buttons-list {
    grid-template-columns: 1fr 1fr;
  }
}

.practice-context-banner {
  margin: 12px auto 16px;
  max-width: 680px;
  padding: 14px 18px;
  border-radius: 14px;
  background: #FEF3C7;
  border: 1.5px solid #FCD34D;
  color: #92400E;
  font-size: 0.98rem;
  line-height: 1.5;
  font-weight: 600;
}

.practice-option-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.practice-option-main {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  flex: 1;
}
.practice-option-audio-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: #1D4ED8;
  font-size: 0.9rem;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.15s ease;
}
.practice-option-audio-mini:hover {
  background: #DBEAFE;
  transform: scale(1.08);
}

.practice-pedagogical-detail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(0, 0, 0, 0.12);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Hide Photo Challenge elements globally */
.photo-quiz-jump-card,
.inline-photo-quiz-section,
[id$="-photo-quiz-slot"],
[data-countries-view="quiz"],
[data-features-view="quiz"],
[data-monuments-view="quiz"],
[data-hist-view="quiz"],
[data-mod-view="quiz"] {
  display: none !important;
}

/* Hide Age Bracket & duplicate Interface Language selector when in Languages module */
body[data-active-theme="languages"] #btn-change-age,
body[data-active-theme="languages"] .control-item:has(#btn-change-age),
body[data-active-theme="languages"] #interface-lang-select,
body[data-active-theme="languages"] .control-item:has(#interface-lang-select),
.module-hero-banner[data-theme="languages"],
body[data-active-theme="languages"][data-lang-view="detail"] .themes-nav-bar {
  display: none !important;
}

/* ==========================================================================
   AUDIT & POLISH: LANGUAGES MODULE BARS, MENUS & HIGH-VISIBILITY EXERCISES
   ========================================================================== */

/* 1. Compact Base Language Selector Bar (especially on Welcome & Course Detail Page) */
.lang-base-selector-bar.is-compact {
  padding: 4px 10px;
  gap: 8px;
  border-radius: 999px;
}
.lang-base-selector-bar.is-compact .base-selector-sub,
.lang-base-selector-bar.is-compact .base-selector-badge {
  display: none !important;
}
.lang-base-selector-bar.is-compact .base-selector-title {
  font-size: 0.76rem;
}
.lang-base-selector-bar.is-compact .base-lang-btn {
  padding: 3px 9px;
  font-size: 0.76rem;
}

/* 2. Menu Filter Toolbar Alignment & Polish (Fix vertical misalignment of .module-view-switcher) */
.lang-filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 20px;
}

.lang-filter-toolbar .module-view-switcher {
  margin: 0 !important;
  height: 42px;
  padding: 4px;
  background: #F1F5F9;
  border: 1.5px solid #CBD5E1;
  border-radius: 999px;
  flex-shrink: 0;
}

.lang-filter-toolbar .view-switch-btn {
  height: 32px;
  padding: 0 14px;
  font-size: 0.86rem;
  font-weight: 800;
  border-radius: 999px;
}

.lang-filter-toolbar #btn-menu-open-practice {
  background: linear-gradient(135deg, #2563EB, #1D4ED8);
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}
.lang-filter-toolbar #btn-menu-open-practice:hover {
  background: linear-gradient(135deg, #1D4ED8, #1E40AF);
  color: #FFFFFF;
  transform: translateY(-1px);
}

.lang-filter-toolbar .lang-region-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
}

.lang-filter-toolbar .lang-region-tab {
  height: 38px;
  padding: 0 13px;
  font-size: 0.84rem;
  margin: 0;
}

.lang-filter-toolbar .lang-search-box {
  height: 40px;
  padding: 0 16px;
  min-width: 240px;
  flex: 0 1 280px;
  margin: 0;
}

/* 3. Hero Quick Practice CTA & Practice Jump Mode Chips */
.hero-practice-quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #FEF08A 0%, #F59E0B 100%);
  color: #451A03;
  border: 2px solid #FFFFFF;
  border-radius: 999px;
  padding: 6px 16px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.88rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hero-practice-quick-btn:hover {
  transform: translateY(-2px) scale(1.03);
  background: linear-gradient(180deg, #FDE047 0%, #D97706 100%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.pq-jump-modes-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.pq-mode-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid #93C5FD;
  color: #1E3A8A;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.18s ease;
}
.pq-mode-chip:hover {
  background: #2563EB;
  border-color: #1D4ED8;
  color: #FFFFFF;
  transform: translateY(-1px);
}

/* 4. Language Card Dual Action Buttons Formatting */
.lang-card-dual-actions {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr;
  gap: 8px;
  width: 100%;
  margin-top: auto;
  align-items: stretch;
}

.lang-card-dual-actions .lang-choice-action-btn,
.lang-card-dual-actions .lang-choice-practice-btn {
  margin: 0 !important;
  min-height: 42px;
  padding: 8px 10px;
  font-size: 0.85rem;
  white-space: nowrap;
  border-radius: 12px;
}

/* 5. Course Detail Top Navigation Bar (.lang-page-top-nav) */
.lang-page-top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 16px;
  background: #FFFFFF;
  border: 2px solid var(--border-tactile);
  border-radius: 18px;
  box-shadow: 0 3px 0 var(--border-depth);
}

.lang-page-top-nav .lang-nav-actions,
.lang-page-top-nav .lang-nav-left-actions,
.lang-page-top-nav .lang-nav-cta-col {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.lang-page-top-nav .lang-page-quick-switcher {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 280px;
  justify-content: center;
}

.lang-page-top-nav .lang-page-quick-switcher label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.lang-page-top-nav .lang-page-quick-switcher select {
  min-width: 220px;
  max-width: 360px;
  width: auto;
  height: 40px;
  padding: 6px 14px;
  border-radius: 12px;
  border: 2px solid var(--border-tactile);
  background: #F8FAFC;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--color-primary-dark);
  cursor: pointer;
}

/* 6. Prominent Course Mode Switcher (#lang-view-navigation) */
.lang-view-navigation {
  margin: 0 !important;
  width: 100%;
}

.lang-view-navigation .lang-view-tabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  background: #F1F5F9;
  padding: 8px;
  border-radius: 20px;
  border: 2px solid #CBD5E1;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.lang-view-navigation .lang-view-tab {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-height: 64px !important;
  height: auto !important;
  padding: 12px 18px !important;
  border-radius: 14px !important;
  border: 2px solid transparent;
  background: rgba(255, 255, 255, 0.65);
  color: #334155;
  text-align: left;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lang-view-navigation .lang-view-tab:hover {
  background: #FFFFFF;
  border-color: #93C5FD;
  transform: translateY(-1px);
}

.lang-view-navigation .lang-view-tab .tab-icon {
  font-size: 1.65rem;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #E0F2FE;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lang-view-navigation .lang-view-tab.tab-practice-highlight .tab-icon {
  background: #FEF3C7;
}

.lang-view-navigation .lang-view-tab .tab-label-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.lang-view-navigation .lang-view-tab .tab-main-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 900;
  color: #0F172A;
  line-height: 1.2;
}

.lang-view-navigation .lang-view-tab .tab-sub-caption {
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lang-view-navigation .lang-view-tab .practice-cta-pill {
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.lang-view-navigation .lang-view-tab.active {
  background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%) !important;
  border-color: #075985 !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.28) !important;
}

.lang-view-navigation .lang-view-tab.tab-practice-highlight.active {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
  border-color: #1E40AF !important;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.32) !important;
}

.lang-view-navigation .lang-view-tab.active .tab-main-title,
.lang-view-navigation .lang-view-tab.active .tab-sub-caption {
  color: #FFFFFF !important;
}

.lang-view-navigation .lang-view-tab.active .tab-sub-caption {
  opacity: 0.9;
}

.lang-view-navigation .lang-view-tab.active .tab-icon {
  background: rgba(255, 255, 255, 0.22);
}

/* 7. Showcase Practice Button & Shelf Practice Button */
.showcase-practice-btn-large {
  width: 100%;
  margin-top: 10px;
  padding: 12px 16px;
  border-radius: 16px;
  border: 2px solid #2563EB;
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  color: #1E3A8A;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 3px 0 #93C5FD;
  text-align: left;
}
.showcase-practice-btn-large:hover {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
  color: #FFFFFF;
  border-color: #1E40AF;
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(37, 99, 235, 0.3);
}
.showcase-practice-btn-large .practice-btn-icon {
  font-size: 1.5rem;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.showcase-practice-btn-large .practice-btn-labels {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.showcase-practice-btn-large .practice-subtext {
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0.85;
}
.showcase-practice-btn-large .practice-maintext {
  font-family: var(--font-display);
  font-size: 0.96rem;
  font-weight: 900;
}

.shelf-practice-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1.5px solid #2563EB;
  background: linear-gradient(135deg, #2563EB, #1D4ED8);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.84rem;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.25);
  transition: all 0.2s ease;
}
.shelf-practice-cta-btn:hover {
  transform: translateY(-1px) scale(1.03);
  background: linear-gradient(135deg, #1D4ED8, #1E40AF);
}

@media (max-width: 768px) {
  .lang-view-navigation .lang-view-tabs {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .lang-page-top-nav .lang-page-quick-switcher {
    order: 3;
    flex: 1 1 100%;
    justify-content: space-between;
  }
  .lang-page-top-nav .lang-page-quick-switcher select {
    flex: 1;
    max-width: none;
  }
}

/* ==========================================================================
   INITIAL PUBLISHED SITE LANDING PAGE ("Learn with Benji" — Welcome v1)
   ========================================================================== */

/* Hide multi-module carousel & header language/age pickers in Initial Languages Edition */
.themes-nav-bar,
#interface-lang-select,
.control-item:has(#interface-lang-select),
#btn-change-age,
.control-item:has(#btn-change-age) {
  display: none !important;
}

.welcome-landing-v1 {
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px 0 40px 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.welcome-story-showcase-card {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 38px;
  align-items: center;
  background: #FFFFFF;
  border: 3px solid var(--border-tactile);
  border-radius: 32px;
  padding: 36px;
  box-shadow: 0 10px 0 var(--border-depth), 0 24px 48px rgba(15, 23, 42, 0.1);
}

.welcome-story-visual-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.welcome-story-photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 26px;
  overflow: hidden;
  border: 3px solid #E2E8F0;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
  background: radial-gradient(circle at center, #1E293B 0%, #0F172A 100%);
}

.welcome-story-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.welcome-story-photo-frame:hover .welcome-story-main-img {
  transform: scale(1.03);
}

.welcome-floating-badges {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.w-float-pill {
  position: absolute;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border: 2px solid #BAE6FD;
  color: #0F172A;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.88rem;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}

.w-float-pill.pill-top-left {
  top: 14px;
  left: 14px;
}

.w-float-pill.pill-top-right {
  top: 14px;
  right: 14px;
}

.w-float-pill.pill-bottom-left {
  bottom: 14px;
  left: 14px;
}

.w-float-pill.pill-bottom-right {
  bottom: 14px;
  right: 14px;
}

.welcome-story-highlights {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.w-highlight-chip {
  background: #F0F9FF;
  border: 1.5px solid #BAE6FD;
  color: #0369A1;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 999px;
}

.welcome-story-content-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.welcome-eyebrow-row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: -10px;
  border-bottom: 2px dashed #E2E8F0;
  width: 100%;
}

.welcome-project-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border: 1.5px solid #F59E0B;
  color: #92400E;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9rem;
  padding: 7px 18px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.12);
}

.welcome-family-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #FCE7F3 0%, #EDE9FE 100%);
  border: 1.5px solid #C084FC;
  color: #6B21A8;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9rem;
  padding: 7px 18px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(192, 132, 252, 0.14);
}

.welcome-family-callout {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 1.5px dashed #F59E0B;
  border-radius: 14px;
  padding: 12px 16px;
  color: #92400E;
  font-weight: 700;
  font-size: 1.02rem;
}

.welcome-story-headline {
  font-family: var(--font-display);
  font-size: 2.35rem;
  font-weight: 900;
  color: #0F172A;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.5px;
}

.welcome-story-subheadline {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: #0284C7;
  margin: 0 0 4px 0;
}

.welcome-story-paragraphs {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 1.06rem;
  line-height: 1.68;
  color: #334155;
}

.welcome-story-paragraphs p {
  margin: 0;
}

.welcome-story-quote-box {
  background: linear-gradient(135deg, #EFF6FF 0%, #F0FDF4 100%);
  border-left: 5px solid #0284C7;
  border-radius: 14px;
  padding: 14px 18px;
  color: #1E3A8A;
  font-weight: 600;
}

.welcome-story-closing {
  font-family: var(--font-display);
  font-size: 1.14rem;
  font-weight: 800;
  color: #0F172A;
  margin-top: 2px !important;
}

.welcome-landing-v1 .welcome-cta-container {
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
}

.welcome-play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 34px !important;
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #FDE047 0%, #F59E0B 100%) !important;
  color: #451A03 !important;
  border: 3px solid #D97706 !important;
  box-shadow: 0 6px 0 #92400E, 0 14px 28px rgba(245, 158, 11, 0.35) !important;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.welcome-play-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 0 #92400E, 0 18px 34px rgba(245, 158, 11, 0.45) !important;
}

.welcome-play-btn .cta-arrow {
  font-size: 1.3rem;
  transition: transform 0.2s ease;
}

.welcome-play-btn:hover .cta-arrow {
  transform: translateX(4px);
}

@media (max-width: 960px) {
  .welcome-story-showcase-card {
    grid-template-columns: 1fr;
    padding: 24px 20px;
    gap: 24px;
  }
  .welcome-eyebrow-row {
    justify-content: center;
    padding-bottom: 14px;
    margin-bottom: -6px;
    gap: 10px;
  }
  .welcome-project-eyebrow,
  .welcome-family-badge {
    flex: 1 1 280px;
    text-align: center;
    box-sizing: border-box;
  }
  .welcome-story-visual-col {
    max-width: 380px;
    margin: 0 auto;
    width: 100%;
  }
  .welcome-story-headline {
    font-size: 1.85rem;
  }
  .welcome-story-subheadline {
    font-size: 1.2rem;
  }
  .welcome-landing-v1 .welcome-cta-container {
    justify-content: center;
  }
  .welcome-play-btn {
    width: 100%;
  }
}

/* ==========================================================================
   "VOLTA AO MUNDO" RANDOM LANGUAGE DISCOVERY BUTTONS
   ========================================================================== */

.lang-menu-hero-right {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.around-world-hero-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 265px;
  max-width: 310px;
  padding: 18px 22px;
  border-radius: 22px;
  border: 2.5px solid #FDE047;
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.98) 0%, rgba(253, 224, 71, 0.96) 100%);
  color: #451A03;
  box-shadow: 0 6px 0 #B45309, 0 14px 28px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  text-align: left;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.around-world-hero-card:hover {
  transform: translateY(-3px) scale(1.02);
  background: linear-gradient(135deg, #FEF9C3 0%, #FACC15 100%);
  box-shadow: 0 8px 0 #92400E, 0 18px 34px rgba(0, 0, 0, 0.28);
}

.around-world-hero-card:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 #92400E;
}

.around-world-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.around-world-globe-icon {
  font-size: 1.75rem;
  line-height: 1;
}

.around-world-title {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 900;
  color: #78350F;
  letter-spacing: -0.3px;
}

.around-world-prompt {
  margin: 0 !important;
  font-family: var(--font-display);
  font-size: 0.95rem !important;
  font-weight: 700;
  font-style: italic;
  color: #92400E !important;
  line-height: 1.35 !important;
}

.around-world-cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #B45309;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(120, 53, 15, 0.25);
}

/* Toolbar "Volta ao Mundo" Pill */
.lang-region-tab.lang-around-world-tab {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%) !important;
  border: 2px solid #F59E0B !important;
  color: #78350F !important;
  box-shadow: 0 3px 0 #D97706 !important;
  font-weight: 800 !important;
}

.lang-region-tab.lang-around-world-tab:hover {
  background: linear-gradient(135deg, #FDE68A 0%, #FCD34D 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #B45309 !important;
}

.lang-region-tab.lang-around-world-tab em {
  font-style: italic;
  font-weight: 700;
  color: #92400E;
}

/* Top Nav Bar "Volta ao Mundo" Button inside Language Detail View */
.btn-around-world-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 14px;
  border: 2px solid #F59E0B;
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  color: #78350F;
  box-shadow: 0 3px 0 #D97706;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-around-world-top:hover {
  background: linear-gradient(135deg, #FDE68A 0%, #FCD34D 100%);
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #B45309;
}

.btn-around-world-top .around-world-btn-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.btn-around-world-top .around-world-btn-texts {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.btn-around-world-top .around-world-btn-texts strong {
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 900;
  color: #78350F;
}

.btn-around-world-top .around-world-btn-texts small {
  font-size: 0.72rem;
  font-weight: 700;
  color: #92400E;
}

@media (max-width: 900px) {
  .lang-menu-hero {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .lang-menu-hero-right {
    width: 100%;
  }
  .around-world-hero-card {
    max-width: none;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }
  .lang-page-top-nav {
    gap: 10px;
  }
  .lang-page-top-nav .lang-nav-left-actions {
    flex: 1 1 auto;
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  /* Welcome Landing v1 Mobile Calibration */
  .welcome-landing-v1 {
    padding: 6px 0 24px 0;
    gap: 16px;
  }
  .welcome-story-showcase-card {
    padding: 16px 14px;
    border-radius: 22px;
    gap: 18px;
  }
  .welcome-story-visual-col {
    max-width: 100%;
  }
  .welcome-story-photo-frame {
    border-radius: 20px;
  }
  .w-float-pill {
    font-size: 0.72rem;
    padding: 4px 10px;
    max-width: calc(50% - 14px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .w-float-pill.pill-top-left {
    top: 8px;
    left: 8px;
  }
  .w-float-pill.pill-top-right {
    top: 8px;
    right: 8px;
  }
  .w-float-pill.pill-bottom-left {
    bottom: 8px;
    left: 8px;
  }
  .w-float-pill.pill-bottom-right {
    bottom: 8px;
    right: 8px;
  }
  .welcome-project-eyebrow,
  .welcome-family-badge {
    font-size: 0.78rem;
    padding: 5px 12px;
  }
  .welcome-story-headline {
    font-size: 1.48rem;
  }
  .welcome-story-subheadline {
    font-size: 1.05rem;
  }
  .welcome-story-paragraphs {
    font-size: 0.94rem;
    line-height: 1.55;
    gap: 10px;
  }
  .welcome-play-btn {
    padding: 13px 18px !important;
    font-size: 1.02rem !important;
    width: 100%;
    box-sizing: border-box;
  }

  /* "Volta ao Mundo" Mobile Calibration */
  .lang-menu-hero {
    gap: 10px;
  }
  .around-world-hero-card {
    padding: 12px 14px;
    border-radius: 16px;
    gap: 6px;
  }
  .around-world-globe-icon {
    font-size: 1.4rem;
  }
  .around-world-title {
    font-size: 1.08rem;
  }
  .around-world-prompt {
    display: block !important;
    font-size: 0.86rem !important;
  }
  .around-world-cta-pill {
    font-size: 0.76rem;
    padding: 5px 12px;
  }
  .lang-region-tab.lang-around-world-tab em {
    display: none;
  }

  /* Language Detail Top Navigation Bar Mobile Calibration */
  .lang-page-top-nav .lang-nav-left-actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .lang-page-top-nav .btn-back-to-menu {
    flex: 0 0 auto;
  }
  .lang-page-top-nav .btn-around-world-top {
    flex: 1 1 180px;
    min-width: 0;
    padding: 6px 10px;
    justify-content: center;
    box-sizing: border-box;
  }
  .btn-around-world-top .around-world-btn-texts strong {
    font-size: 0.8rem;
  }
  .btn-around-world-top .around-world-btn-texts small {
    font-size: 0.68rem;
    white-space: normal;
  }
  .lang-page-top-nav .lang-page-quick-switcher {
    width: 100%;
    min-width: 0;
    flex: 1 1 100%;
  }
  .lang-page-top-nav .lang-page-quick-switcher select {
    min-width: 0;
    width: 100%;
    flex: 1;
    box-sizing: border-box;
  }
  .lang-page-top-nav .lang-nav-cta-col {
    width: 100%;
  }
  .lang-page-top-nav .btn-top-practice-cta {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }
}