/*
 * ═══════════════════════════════════════════════════════════
 *  Article Swipe — Shared Stylesheet
 *  Learn language articles by swiping
 *  Chunky UI with 3D buttons
 * ═══════════════════════════════════════════════════════════
 *
 *  TABLE OF CONTENTS
 *  ─────────────────
 *  1.  Design Tokens (CSS Custom Properties)
 *  2.  Reset & Base
 *  3.  Typography
 *  4.  Welcome Screen
 *  5.  App Layout
 *  6.  Header
 *  7.  Stats Bar
 *  8.  Progress Bar
 *  9.  Card Area & Swipe Hints
 *  10. Card
 *  11. Card Animations (fly-off, enter, nudge)
 *  12. Feedback Overlay
 *  13. Answer Buttons (left / right article)
 *  14. Complete Screen
 *  15. Overlays (About, Privacy, Report, Medals)
 *  16. Report Overlay Specifics
 *  17. Medals & Achievements
 *  18. Toast Notification
 *  19. Cookie Consent Banner
 *  20. Utilities
 *  21. Responsive
 *
 * ═══════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Colors ── */
  --color-bg: #0f0f1a;
  --color-bg-card: #252542;
  --color-text: #f0f0f0;
  --color-text-muted: #8888aa;
  --color-accent-right: #FF8C00;
  --color-accent-left: #4a90d9;
  --color-accent-right-bg: rgba(255, 140, 0, 0.15);
  --color-accent-left-bg: rgba(74, 144, 217, 0.15);
  --color-correct: #4ade80;
  --color-wrong: #f87171;
  --color-gold: #fbbf24;
  --color-gold-alt: #f59e0b;
  --color-border-subtle: rgba(255, 255, 255, 0.06);
  --color-border-light: rgba(255, 255, 255, 0.1);
  --color-border-card: rgba(255, 255, 255, 0.1);
  --color-overlay: rgba(0, 0, 0, 0.85);

  /* ── Typography ── */
  --font-heading: "Nunito", sans-serif;
  --font-body:
    "M PLUS Rounded 1c", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* ── Font sizes ── */
  --text-2xs: 11px;
  --text-xs: 10px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 28px;
  --text-4xl: 36px;
  --text-5xl: 48px;

  /* ── Spacing ── */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 14px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 36px;

  /* ── Sizes (icons, elements) ── */
  --icon-xs: 16px;
  --icon-sm: 20px;
  --icon-md: 22px;
  --icon-lg: 32px;
  --icon-xl: 52px;
  --icon-2xl: 64px;
  --icon-3xl: 72px;
  --emoji-card: 120px;
  --emoji-card-sm: 80px;

  /* ── Borders & Radii ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  --border-width: 1px;

  /* ── Shadows (chunky 3D press depth) ── */
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-btn-right: 0 4px 0 #CC7000;
  --shadow-btn-left: 0 4px 0 #3468a0;
  --shadow-btn-primary: 0 5px 0 #8b3a1a;
  --shadow-btn-secondary: 0 3px 0 #1a1a30;
  --shadow-btn-ghost: 0 3px 0 rgba(255, 255, 255, 0.08);
  --shadow-btn-ghost-subtle: 0 2px 0 rgba(255, 255, 255, 0.04);
  --shadow-medal: 0 0 12px rgba(251, 191, 36, 0.1);

  /* ── Hover lift (negative translateY to "lift" on hover) ── */
  --hover-lift: -2px;

  /* ── Button press depth (translateY on :active) ── */
  --press-depth-lg: 4px;
  --press-depth-md: 3px;
  --press-depth-sm: 2px;

  /* ── Transitions ── */
  --transition-fast: 0.1s ease;
  --transition-normal: 0.15s ease;
  --transition-smooth: 0.2s ease;
  --transition-spring: 0.3s ease;
  --transition-button: 0.12s ease;

  /* ── Layout ── */
  --app-max-width: 430px;
  --overlay-max-width: 380px;
  --card-max-width: 340px;
  --card-aspect: 3 / 4;
  --progress-height: 6px;
  --btn-height: 60px;
  --btn-width: 140px;
  --text-btn: 22px;

  /* ── Safe Areas (notch devices) ── */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ═══════════════════════════════════════════════════════════
   2. RESET & BASE
   ═══════════════════════════════════════════════════════════ */

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

html,
body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ═══════════════════════════════════════════════════════════
   3. TYPOGRAPHY
   ═══════════════════════════════════════════════════════════ */

h1,
h2,
h3 {
  font-family: var(--font-heading);
}

/* ═══════════════════════════════════════════════════════════
   4. WELCOME SCREEN
   ═══════════════════════════════════════════════════════════ */

.welcome-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--space-2xl);
}

.welcome-content {
  text-align: center;
  max-width: var(--card-max-width);
  width: 100%;
}

/* App logo — extra bold Nunito */
.welcome-logo {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: var(--font-weight-black);
  letter-spacing: -1px;
  background: linear-gradient(
    135deg,
    var(--color-accent-right),
    var(--color-accent-left)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--space-sm);
}

.welcome-tagline {
  font-family: var(--font-body);
  color: var(--color-text-muted);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-4xl);
}

/* Animated demo card */
/* Welcome demo: fixed height container for the animated card */
.welcome-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
  height: calc(var(--space-xl) * 5); /* 100px */
  position: relative;
}

.welcome-labels {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-sm);
  z-index: 2;
  pointer-events: none;
}

.welcome-card {
  width: calc(var(--btn-height)); /* 60px */
  height: calc(var(--btn-height) + var(--space-xl)); /* 80px */
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  border: var(--space-2xs) solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: welcomeSwipe 3s ease-in-out infinite;
  box-shadow: 0 var(--space-xs) var(--space-lg) rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.welcome-card-emoji {
  width: var(--icon-lg);
  height: var(--icon-lg);
  pointer-events: none;
}

.welcome-label {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0;
  padding: var(--space-xs) var(--space-base);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 var(--space-2xs) var(--space-sm) rgba(0, 0, 0, 0.3);
}

.welcome-label-right {
  color: var(--color-accent-right);
  animation: welcomeLabelRight 3s ease-in-out infinite;
  width: var(--btn-height); /* 60px */
}

.welcome-label-left {
  color: var(--color-accent-left);
  animation: welcomeLabelLeft 3s ease-in-out infinite;
  width: var(--btn-height); /* 60px */
}

@keyframes welcomeSwipe {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  15% {
    transform: translateX(50px) rotate(6deg);
  }
  30% {
    transform: translateX(50px) rotate(6deg);
  }
  45% {
    transform: translateX(0) rotate(0deg);
  }
  60% {
    transform: translateX(-50px) rotate(-6deg);
  }
  75% {
    transform: translateX(-50px) rotate(-6deg);
  }
  90% {
    transform: translateX(0) rotate(0deg);
  }
  100% {
    transform: translateX(0) rotate(0deg);
  }
}

@keyframes welcomeLabelRight {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes welcomeLabelLeft {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  85% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.welcome-hint {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4xl);
}

.welcome-hint strong {
  font-weight: var(--font-weight-extrabold);
  color: var(--color-text);
}

/* Chunky start button — 3D press effect */
.welcome-start {
  width: 100%;
  padding: var(--space-lg) var(--space-xl);
  border: none;
  border-radius: var(--radius-lg);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-extrabold);
  cursor: pointer;
  background: linear-gradient(
    135deg,
    var(--color-accent-right),
    var(--color-accent-left)
  );
  color: #fff;
  box-shadow: var(--shadow-btn-primary);
  transition:
    transform var(--transition-button),
    box-shadow var(--transition-button),
    filter var(--transition-button);
  position: relative;
}

.welcome-start:hover {
  transform: translateY(var(--hover-lift));
  box-shadow: 0 7px 0 #8b3a1a;
  filter: brightness(1.08);
}

.welcome-start:active {
  transform: translateY(var(--press-depth-md));
  box-shadow: none;
  filter: none;
}

/* Disclaimer note — used on welcome + complete screens */
.disclaimer-note {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-top: var(--space-xl);
  line-height: 1.5;
  opacity: 0.6;
}

/* Welcome credits */
.welcome-credits {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-top: var(--space-md);
  opacity: 0.5;
}

.welcome-credits strong {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}

/* ═══════════════════════════════════════════════════════════
   5. APP LAYOUT
   ═══════════════════════════════════════════════════════════ */

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: var(--app-max-width);
  margin: 0 auto;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  position: relative;
}

/* ═══════════════════════════════════════════════════════════
   6. HEADER
   ═══════════════════════════════════════════════════════════ */

#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-xl) var(--space-sm);
  flex-shrink: 0;
}

/* Header logo — Nunito extra bold */
.logo {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-black);
  letter-spacing: -0.5px;
  background: linear-gradient(
    135deg,
    var(--color-accent-right),
    var(--color-accent-left)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header-icons {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
}

.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  line-height: 1;
  color: var(--color-text);
  opacity: 0.7;
  transition: opacity var(--transition-normal);
  /* 48×48 touch target for comfortable mobile tapping */
  min-width: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-icon:hover {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   7. STATS BAR
   ═══════════════════════════════════════════════════════════ */

.stats-bar {
  display: flex;
  justify-content: center;
  gap: var(--space-2xl);
  padding: var(--space-xs) var(--space-xl) var(--space-xs);
  flex-shrink: 0;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.stat-emoji {
  width: var(--icon-xs);
  height: var(--icon-xs);
  flex-shrink: 0;
}

.stat-value {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ═══════════════════════════════════════════════════════════
   8. PROGRESS BAR
   ═══════════════════════════════════════════════════════════ */

.progress-bar {
  height: var(--progress-height);
  background: var(--color-border-subtle);
  flex-shrink: 0;
  border-radius: var(--radius-full);
  margin: 0 var(--space-xl);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(
    90deg,
    var(--color-accent-right),
    var(--color-accent-left)
  );
  transition: width 0.4s ease;
  border-radius: var(--radius-full);
}

/* ═══════════════════════════════════════════════════════════
   9. CARD AREA & SWIPE HINTS
   ═══════════════════════════════════════════════════════════ */

#card-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: var(--space-lg) var(--space-xl);
  overflow: hidden;
}

/* Swipe direction labels that fade in during drag */
.swipe-hint {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-black);
  letter-spacing: 2px;
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
  z-index: 5;
}

.swipe-hint-left {
  left: var(--space-2xl);
  color: var(--color-accent-left);
}

.swipe-hint-right {
  right: var(--space-2xl);
  color: var(--color-accent-right);
}

/* ═══════════════════════════════════════════════════════════
   10. CARD
   ═══════════════════════════════════════════════════════════ */

#card-stack {
  width: 100%;
  max-width: var(--card-max-width);
  aspect-ratio: var(--card-aspect);
  position: relative;
  perspective: 800px;
}

.card {
  width: 100%;
  height: 100%;
  background: var(--color-bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-2xl);
  position: absolute;
  top: 0;
  left: 0;
  cursor: grab;
  will-change: transform;
  touch-action: none;
  border: var(--space-2xs) solid var(--color-border-card);
  transition: box-shadow var(--transition-smooth);
}

.card:active {
  cursor: grabbing;
}

/* Colored border glow when swiping */
.card.swiping-right {
  border-color: var(--color-accent-right);
  box-shadow: 0 0 var(--space-3xl) rgba(255, 140, 0, 0.2);
}

.card.swiping-left {
  border-color: var(--color-accent-left);
  box-shadow: 0 0 var(--space-3xl) rgba(74, 144, 217, 0.2);
}

.card-emoji {
  width: var(--emoji-card);
  height: var(--emoji-card);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-emoji img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.card-word {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.5px;
  text-align: center;
  line-height: 1.1;
}

.card-translation {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-align: center;
}

/* Floating DE/HET badge on card during drag */
.card-badge {
  position: absolute;
  top: var(--space-lg);
  font-family: var(--font-heading);
  font-size: var(--text-btn);
  font-weight: var(--font-weight-black);
  letter-spacing: 1px;
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--radius-sm);
  opacity: 0;
  transform: scale(0.8);
  transition:
    opacity var(--transition-normal),
    transform var(--transition-normal);
}

.card-badge.show-right {
  right: var(--space-lg);
  color: var(--color-accent-right);
  background: var(--color-accent-right-bg);
  border: var(--space-2xs) solid var(--color-accent-right);
  opacity: 1;
  transform: scale(1);
}

.card-badge.show-left {
  left: var(--space-lg);
  color: var(--color-accent-left);
  background: var(--color-accent-left-bg);
  border: var(--space-2xs) solid var(--color-accent-left);
  opacity: 1;
  transform: scale(1);
}

/* Report button (flag) in top-left of card */
/* Wrapper for button + label (used for report, toggle, listen) */
.card-btn-with-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.card-btn-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.35;
  color: var(--color-text-muted);
  pointer-events: none;
  line-height: 1;
}

/* Report button wrapper — positioned top-left of card */
.card > .card-btn-with-label:first-child {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 10;
}

.card-report-btn {
  background: rgba(255, 255, 255, 0.06);
  border: var(--border-width) solid var(--color-border-light);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  color: var(--color-text-muted);
  opacity: 0.5;
  box-shadow: var(--shadow-btn-ghost-subtle);
  transition:
    opacity var(--transition-normal),
    transform var(--transition-button),
    box-shadow var(--transition-button);
  line-height: 1;
  /* Comfortable mobile touch target */
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-report-btn:hover {
  opacity: 0.9;
}

.card-report-btn:active {
  opacity: 0.9;
  transform: translateY(var(--press-depth-sm));
  box-shadow: none;
}

/* Speak group (play button + auto toggle) in top-right of card */
.card-speak-group {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  z-index: 10;
  transition: opacity var(--transition-normal);
}

/* Dim and disable speak group when sound is muted */
.card-speak-group.muted {
  opacity: 0.2;
  pointer-events: none;
}

.card-speak-btn {
  background: rgba(255, 255, 255, 0.06);
  border: var(--border-width) solid var(--color-border-light);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  color: var(--color-text-muted);
  opacity: 0.5;
  box-shadow: var(--shadow-btn-ghost-subtle);
  transition:
    opacity var(--transition-normal),
    transform var(--transition-button),
    box-shadow var(--transition-button),
    color var(--transition-normal);
  line-height: 1;
  /* Comfortable mobile touch target */
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-speak-btn:hover {
  opacity: 0.9;
}

.card-speak-btn:active {
  opacity: 0.9;
  transform: translateY(var(--press-depth-sm));
  box-shadow: none;
}

.card-speak-btn.speaking {
  opacity: 0.9;
  color: var(--color-accent-right);
}

/* Play icon turns tangerine when auto-speak is on */
.card-speak-btn.auto-on {
  opacity: 0.85;
  color: var(--color-accent-right);
}

/* Toggle switch for auto-speak */
.speak-toggle {
  display: flex;
  align-items: center;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--transition-normal);
  /* Enlarged tap target around toggle */
  padding: 10px;
  margin: -10px;
}

.speak-toggle:hover {
  opacity: 0.9;
}

.speak-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.speak-toggle-track {
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.15);
  position: relative;
  transition: background 0.2s;
}

.speak-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-text-muted);
  transition: transform 0.2s, background 0.2s;
}

.speak-toggle input:checked + .speak-toggle-track {
  background: rgba(255, 140, 0, 0.35);
}

.speak-toggle input:checked + .speak-toggle-track::after {
  transform: translateX(18px);
  background: var(--color-accent-right);
}

/* Tooltip for speak group */
.speak-tooltip {
  position: absolute;
  top: calc(100% + var(--space-sm));
  right: 0;
  white-space: nowrap;
  background: var(--color-accent-right);
  color: #fff;
  font-size: var(--text-sm);
  line-height: 1;
  font-weight: 700;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s, transform 0.3s;
}

.speak-tooltip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 10px;
  border: 5px solid transparent;
  border-bottom-color: var(--color-accent-right);
}

.speak-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Tooltip for report button (uncomment HTML in index.html to enable) */
.report-tooltip {
  position: absolute;
  top: calc(100% + var(--space-sm));
  left: 0;
  white-space: nowrap;
  background: var(--color-accent-left);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s, transform 0.3s;
}

.report-tooltip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 10px;
  border: 5px solid transparent;
  border-bottom-color: var(--color-accent-left);
}

.report-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════
   11. CARD ANIMATIONS
   ═══════════════════════════════════════════════════════════ */

/* Fly off screen after answer */
.card.fly-right {
  animation: flyRight 0.4s ease-in forwards;
}

.card.fly-left {
  animation: flyLeft 0.4s ease-in forwards;
}

@keyframes flyRight {
  to {
    transform: translateX(150%) rotate(30deg);
    opacity: 0;
  }
}

@keyframes flyLeft {
  to {
    transform: translateX(-150%) rotate(-30deg);
    opacity: 0;
  }
}

/* New card entrance */
.card.enter {
  animation: cardEnter 0.2s ease-out;
}

@keyframes cardEnter {
  from {
    transform: scale(0.95);
  }
  to {
    transform: scale(1);
  }
}

/* First-time onboarding wiggle */
.card.nudge {
  animation: nudge 1s ease 0.5s;
}

@keyframes nudge {
  0% {
    transform: translateX(0) rotate(0);
  }
  15% {
    transform: translateX(35px) rotate(3deg);
  }
  30% {
    transform: translateX(0) rotate(0);
  }
  45% {
    transform: translateX(-35px) rotate(-3deg);
  }
  60% {
    transform: translateX(0) rotate(0);
  }
  100% {
    transform: translateX(0) rotate(0);
  }
}

/* ═══════════════════════════════════════════════════════════
   12. FEEDBACK OVERLAY
   ═══════════════════════════════════════════════════════════ */

.feedback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 20;
  pointer-events: none;
}

.feedback.correct {
  animation: feedbackPulse 0.6s ease-out;
}

.feedback.wrong {
  animation: feedbackPulse 0.8s ease-out;
}

/* OpenMoji-based feedback icon */
.feedback-icon {
  width: var(--icon-3xl);
  height: var(--icon-3xl);
  margin-bottom: var(--space-sm);
}

.feedback-icon img {
  width: 100%;
  height: 100%;
}

.feedback-text {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 1px;
}

.feedback.correct .feedback-text {
  color: var(--color-correct);
}

.feedback.wrong .feedback-text {
  color: var(--color-wrong);
}

@keyframes feedbackPulse {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  20% {
    opacity: 1;
    transform: scale(1.1);
  }
  40% {
    transform: scale(1);
  }
  100% {
    opacity: 0;
  }
}

/* ═══════════════════════════════════════════════════════════
   13. ANSWER BUTTONS — Chunky 3D style
   ═══════════════════════════════════════════════════════════
   The "volume" effect comes from a thick bottom box-shadow
   that disappears on :active, while the button translates
   down to fill the gap — like pressing a physical button.
   ═══════════════════════════════════════════════════════════ */

#footer {
  display: flex;
  gap: var(--space-xl);
  padding: var(--space-md) var(--space-xl) var(--space-xl);
  justify-content: center;
  flex-shrink: 0;
}

.btn-article {
  pointer-events: none;
}

.btn {
  width: var(--btn-width);
  height: var(--btn-height);
  border: var(--space-2xs) solid transparent;
  border-radius: var(--radius-lg);
  font-family: var(--font-heading);
  font-size: var(--text-btn);
  font-weight: var(--font-weight-extrabold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 1px;
  transition:
    transform var(--transition-button),
    box-shadow var(--transition-button),
    filter var(--transition-button);
  position: relative;
  text-transform: lowercase;
}

/* ── Left article button — blue chunky ── */
.btn-left {
  background: var(--color-accent-left);
  color: #fff;
  border-color: var(--color-accent-left);
  box-shadow: var(--shadow-btn-left);
}

.btn-left:hover {
  transform: translateY(var(--hover-lift));
  box-shadow: 0 6px 0 #3468a0;
  filter: brightness(1.1);
}

.btn-left:active {
  transform: translateY(var(--press-depth-lg));
  box-shadow: none;
  filter: none;
}

/* ── Right article button — orange chunky ── */
.btn-right {
  background: var(--color-accent-right);
  color: #fff;
  border-color: var(--color-accent-right);
  box-shadow: var(--shadow-btn-right);
}

.btn-right:hover {
  transform: translateY(var(--hover-lift));
  box-shadow: 0 6px 0 #CC7000;
  filter: brightness(1.1);
}

.btn-right:active {
  transform: translateY(var(--press-depth-lg));
  box-shadow: none;
  filter: none;
}

/* ═══════════════════════════════════════════════════════════
   14. COMPLETE SCREEN
   ═══════════════════════════════════════════════════════════ */

.complete {
  position: absolute;
  inset: 0;
  background: var(--color-bg);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 50;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.complete-content {
  text-align: center;
  padding: var(--space-2xl) var(--space-2xl) var(--space-3xl);
  max-width: var(--overlay-max-width);
  width: 100%;
  margin: auto 0;
}

.complete-emoji {
  width: var(--icon-2xl);
  height: var(--icon-2xl);
  margin: 0 auto var(--space-xs);
}

.complete-emoji img {
  width: 100%;
  height: 100%;
}

.complete-content h2 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-extrabold);
  margin-bottom: var(--space-xs);
}

.complete-message {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}

.complete-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.complete-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--space-base) var(--space-md);
  border: var(--border-width) solid var(--color-border-subtle);
  gap: var(--space-2xs);
}

.complete-stat-icon {
  width: var(--icon-md);
  height: var(--icon-md);
  margin-bottom: var(--space-2xs);
}

.complete-stat-value {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-extrabold);
}

.complete-stat-label {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Accuracy color coding */
.accuracy-green {
  color: var(--color-correct);
}
.accuracy-orange {
  color: var(--color-accent-right);
}
.accuracy-red {
  color: var(--color-wrong);
}

/* Complete screen action buttons — chunky style */
.btn-complete {
  width: 100%;
  padding: var(--space-base);
  border: var(--space-2xs) solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  background: transparent;
  color: var(--color-text);
  margin-bottom: var(--space-md);
  transition:
    transform var(--transition-button),
    box-shadow var(--transition-button),
    background var(--transition-normal),
    filter var(--transition-button);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  box-shadow: var(--shadow-btn-ghost);
}

.btn-complete:hover {
  transform: translateY(var(--hover-lift));
  box-shadow: 0 5px 0 rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.btn-complete:active {
  transform: translateY(var(--press-depth-md));
  box-shadow: none;
  background: rgba(255, 255, 255, 0.05);
}

/* Primary action — gradient, no border */
.btn-complete-primary {
  background: linear-gradient(
    135deg,
    var(--color-accent-right),
    var(--color-accent-left)
  );
  color: #fff;
  border: none;
  box-shadow: var(--shadow-btn-primary);
}

.btn-complete-primary:hover {
  transform: translateY(var(--hover-lift));
  box-shadow: 0 7px 0 #8b3a1a;
  filter: brightness(1.08);
}

.btn-complete-primary:active {
  transform: translateY(var(--press-depth-md));
  box-shadow: none;
  filter: none;
  background: linear-gradient(
    135deg,
    var(--color-accent-right),
    var(--color-accent-left)
  );
}

/* Secondary action */
.btn-complete-secondary {
  background: var(--color-bg-card);
  border: var(--space-2xs) solid var(--color-border-light);
  box-shadow: var(--shadow-btn-secondary);
}

.btn-complete-secondary:hover {
  transform: translateY(var(--hover-lift));
  box-shadow: 0 5px 0 #1a1a30;
  filter: brightness(1.1);
}

.btn-complete-secondary:active {
  transform: translateY(var(--press-depth-md));
  box-shadow: none;
  filter: none;
}

.complete-about-link {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-base);
  cursor: pointer;
  padding: var(--space-sm);
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.7;
  transition: opacity var(--transition-normal);
}

.complete-about-link:hover {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   15. OVERLAYS (About, Privacy, Report, Medals)
   ═══════════════════════════════════════════════════════════ */

.about-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  animation: fadeIn 0.2s ease;
}

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

.about-content {
  background: var(--color-bg-card);
  border-radius: var(--radius-xl);
  padding: var(--space-3xl) var(--space-3xl);
  max-width: var(--overlay-max-width);
  width: 100%;
  position: relative;
  max-height: 85vh;
  overflow-y: auto;
  border: var(--border-width) solid var(--color-border-subtle);
}

.about-close {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
  transition: color var(--transition-normal);
}

.about-close:hover {
  color: var(--color-text);
}

.about-content h2 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-extrabold);
  margin-bottom: var(--space-xs);
  background: linear-gradient(
    135deg,
    var(--color-accent-right),
    var(--color-accent-left)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.about-tagline {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  margin-bottom: var(--space-2xl);
}

.about-section {
  margin-bottom: var(--space-xl);
}

.about-section h3 {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.about-section p {
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text);
}

.about-section a {
  color: var(--color-accent-right);
  text-decoration: none;
}

.about-section a:hover {
  text-decoration: underline;
}

.about-credits {
  margin-bottom: 0;
  padding-top: var(--space-lg);
  border-top: var(--border-width) solid var(--color-border-subtle);
}

.about-credits p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.about-credits a {
  color: var(--color-text-muted);
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════
   16. REPORT OVERLAY SPECIFICS
   ═══════════════════════════════════════════════════════════ */

.report-content {
  max-width: var(--card-max-width);
}

.report-content h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-extrabold);
  margin-bottom: var(--space-sm);
}

.report-word {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-right);
  margin-bottom: var(--space-lg);
}

.report-hint {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

/* Report option buttons — chunky style */
.report-option {
  width: 100%;
  padding: var(--space-base) var(--space-lg);
  border: var(--border-width) solid var(--color-border-light);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text);
  margin-bottom: var(--space-sm);
  transition:
    background var(--transition-normal),
    transform var(--transition-button),
    box-shadow var(--transition-button);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  text-align: left;
  box-shadow: var(--shadow-btn-ghost-subtle);
}

.report-option:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(var(--hover-lift));
  box-shadow: 0 4px 0 rgba(255, 255, 255, 0.04);
}

.report-option:active {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(var(--press-depth-sm));
  box-shadow: none;
}

/* Step 2: send options */
.report-send-step {
  margin-top: var(--space-md);
  border-top: var(--border-width) solid var(--color-border-subtle);
  padding-top: var(--space-md);
}

.report-preview {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-sm);
  padding: var(--space-md) var(--space-md);
  margin-bottom: var(--space-md);
  line-height: 1.5;
  white-space: pre-line;
  word-break: break-word;
}

/* Primary report option (Gmail) */
.report-option-primary {
  background: rgba(74, 144, 217, 0.15) !important;
  border-color: var(--color-accent-left) !important;
  color: var(--color-accent-left) !important;
}

.report-option-primary:hover,
.report-option-primary:active {
  background: rgba(74, 144, 217, 0.25) !important;
}

.report-footer {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-lg);
  opacity: 0.7;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════
   17. MEDALS & ACHIEVEMENTS
   ═══════════════════════════════════════════════════════════ */

.medals-content {
  max-width: var(--overlay-max-width);
}

.medals-content h2 {
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-alt));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--space-lg);
}

/* Stats summary grid (4 cols) */
.medals-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
}

.medals-stat-item {
  text-align: center;
  padding: var(--space-sm) var(--space-xs);
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
}

.medals-stat-icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  margin-bottom: var(--space-2xs);
}

.medals-stat-item .stat-num,
.medals-stat-value {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-extrabold);
  display: block;
}

.medals-stat-item .stat-lbl,
.medals-stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Medal grid container */
.medals-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Medal categories & rows */
.medal-category,
.medals-category {
  margin-bottom: var(--space-xl);
}

.medal-category h3,
.medals-category h3 {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.medal-row,
.medals-row {
  display: flex;
  gap: var(--space-sm);
}

/* Individual medal tile */
.medal-item {
  flex: 1;
  text-align: center;
  padding: var(--space-base) var(--space-xs) var(--space-md);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  border: var(--border-width) solid rgba(255, 255, 255, 0.04);
  transition: all var(--transition-spring);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.medal-item.locked {
  opacity: 0.35;
  filter: grayscale(100%);
}

.medal-item.unlocked {
  opacity: 1;
  filter: none;
  border-color: rgba(251, 191, 36, 0.3);
  box-shadow: var(--shadow-medal);
}

.medal-icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
  margin-bottom: var(--space-xs);
}

.medal-icon img {
  width: 100%;
  height: 100%;
}

.medal-name,
.medal-label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  line-height: 1.2;
}

.medal-threshold,
.medal-desc {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.25);
  margin-top: var(--space-xs);
}

/* Mini progress bar inside each medal tile */
.medal-progress,
.medal-progress-bar {
  height: var(--space-2xs);
  width: 80%;
  background: var(--color-border-subtle);
  border-radius: var(--border-width);
  margin: var(--space-xs) auto 0;
  overflow: hidden;
}

.medal-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-alt));
  border-radius: var(--border-width);
  transition: width var(--transition-spring);
}

/* ── New Medal Celebration (on complete screen) ── */
.new-medals {
  margin-bottom: var(--space-lg);
}

.new-medals h3 {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}

.new-medal-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: rgba(251, 191, 36, 0.1);
  border: var(--border-width) solid rgba(251, 191, 36, 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-base);
  margin-bottom: var(--space-sm);
  animation: medalPop 0.5s ease;
}

.new-medal-icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
  flex-shrink: 0;
}

.new-medal-icon img {
  width: 100%;
  height: 100%;
}

.new-medal-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-gold);
  font-weight: var(--font-weight-bold);
}

.new-medal-name {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
}

.new-medal-desc {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
}

.new-medal-banner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: rgba(251, 191, 36, 0.1);
  border: var(--border-width) solid rgba(251, 191, 36, 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-base);
  margin-bottom: var(--space-sm);
  animation: medalPop 0.5s ease;
}

.new-medal-banner .medal-icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.new-medal-info {
  text-align: left;
}

@keyframes medalPop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  60% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Medals empty state */
.medals-empty {
  text-align: center;
  padding: var(--space-3xl) var(--space-lg);
  color: var(--color-text-muted);
}

.medals-empty-icon {
  width: var(--icon-xl);
  height: var(--icon-xl);
  margin: 0 auto var(--space-md);
  opacity: 0.4;
}

.medals-empty-icon img {
  width: 100%;
  height: 100%;
}

.medals-empty p {
  font-size: var(--text-base);
  line-height: 1.5;
}

/* Streak fire animation */
#streak.on-fire {
  color: var(--color-gold-alt);
  animation: fire 0.3s ease;
}

@keyframes fire {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
  }
}

/* ═══════════════════════════════════════════════════════════
   18. TOAST NOTIFICATION
   ═══════════════════════════════════════════════════════════ */

.toast {
  position: fixed;
  bottom: calc(var(--btn-height) + var(--space-xl));
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-bg-card);
  color: var(--color-text);
  padding: var(--space-md) var(--space-2xl);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  z-index: 300;
  border: var(--border-width) solid var(--color-border-light);
  animation: toastIn 0.3s ease;
}

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

/* ═══════════════════════════════════════════════════════════
   19. COOKIE CONSENT BANNER
   ═══════════════════════════════════════════════════════════ */

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 400;
  padding: var(--space-lg) var(--space-xl);
  padding-bottom: calc(var(--space-lg) + var(--safe-bottom));
  animation: slideUp 0.3s ease;
}

.cookie-banner-content {
  max-width: var(--app-max-width);
  margin: 0 auto;
  background: var(--color-bg-card);
  border: var(--border-width) solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.cookie-banner-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.cookie-banner-icon {
  flex-shrink: 0;
  margin-top: var(--space-2xs);
}

.cookie-banner-text {
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-text);
}

.cookie-banner-text a {
  color: var(--color-accent-right);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-banner-buttons {
  display: flex;
  gap: var(--space-md);
}

/* Cookie buttons — chunky style */
.cookie-btn {
  flex: 1;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  border: none;
  transition:
    transform var(--transition-button),
    box-shadow var(--transition-button),
    filter var(--transition-button);
}

.cookie-btn-accept {
  background: linear-gradient(
    135deg,
    var(--color-accent-right),
    var(--color-accent-left)
  );
  color: #fff;
  box-shadow: var(--shadow-btn-primary);
}

.cookie-btn-accept:hover {
  transform: translateY(var(--hover-lift));
  box-shadow: 0 7px 0 #8b3a1a;
  filter: brightness(1.08);
}

.cookie-btn-accept:active {
  transform: translateY(var(--press-depth-md));
  box-shadow: none;
  filter: none;
}

.cookie-btn-decline {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-muted);
  border: var(--border-width) solid var(--color-border-light);
  box-shadow: var(--shadow-btn-ghost-subtle);
}

.cookie-btn-decline:hover {
  transform: translateY(var(--hover-lift));
  box-shadow: 0 4px 0 rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.1);
}

.cookie-btn-decline:active {
  transform: translateY(var(--press-depth-sm));
  box-shadow: none;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════
   20. UTILITIES
   ═══════════════════════════════════════════════════════════ */

.hidden {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   21. RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

/* Small screens (short devices) */
@media (max-height: 640px) {
  .card-emoji {
    width: var(--emoji-card-sm);
    height: var(--emoji-card-sm);
  }
  .card-word {
    font-size: var(--text-3xl);
  }
  #card-stack {
    aspect-ratio: 4 / 4;
  }
}

/* Desktop: subtle side borders */
@media (min-width: 431px) {
  #app {
    border-left: var(--border-width) solid rgba(255, 255, 255, 0.05);
    border-right: var(--border-width) solid rgba(255, 255, 255, 0.05);
  }
}

/* Tablet portrait (768px+): scale up the layout */
@media (min-width: 768px) {
  :root {
    --app-max-width: 520px;
    --card-max-width: 420px;
    --btn-width: 170px;
    --btn-height: 68px;
    --text-btn: 24px;
  }
  .logo {
    font-size: var(--text-2xl);
  }
  .stat-value {
    font-size: var(--text-lg);
  }
  .card-word {
    font-size: var(--text-5xl);
  }
  .card-translation {
    font-size: var(--text-md);
  }
  .welcome-logo {
    font-size: var(--text-5xl);
  }
  .welcome-tagline {
    font-size: var(--text-lg);
  }
}

/* Large tablet / small desktop (1024px+) */
@media (min-width: 1024px) {
  :root {
    --app-max-width: 560px;
    --card-max-width: 460px;
  }
}

/* Landscape phone: aggressive shrink for short+wide */
@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --emoji-card: 56px;
    --btn-height: 48px;
    --btn-width: 120px;
    --text-btn: 18px;
  }
  #card-stack {
    aspect-ratio: 1 / 1;
  }
  #header {
    padding: var(--space-xs) var(--space-md);
  }
  .stats-bar {
    padding: var(--space-xs) var(--space-md);
    gap: var(--space-md);
  }
  #footer {
    padding: var(--space-xs) var(--space-xl) var(--space-sm);
  }
  .card-word {
    font-size: var(--text-2xl);
  }
}

/* Landscape tablet: wide + enough height */
@media (min-width: 768px) and (orientation: landscape) {
  :root {
    --app-max-width: 600px;
    --card-max-width: 380px;
  }
  #card-stack {
    aspect-ratio: 4 / 4.5;
  }
}

/* ═══════════════════════════════════════════════════════════
   15. Utility Classes
   ═══════════════════════════════════════════════════════════ */

.icon-inline {
  vertical-align: middle;
}

.icon-inline-subtle {
  vertical-align: middle;
  opacity: 0.7;
}

.icon-inline-muted {
  vertical-align: middle;
  opacity: 0.5;
}

.accent-right {
  color: var(--color-accent-right);
}

.accent-left {
  color: var(--color-accent-left);
}

.mt-xs {
  margin-top: var(--space-xs);
}

.mt-sm {
  margin-top: var(--space-sm);
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-text-muted);
}