/* ==========================================================================
   1. VÁLTOZÓK
   ========================================================================== */

:root {
  --color-navy:  #2F4156;
  --color-teal:  #567C8D;
  --color-sky:   #C8D9E6;
  --color-beige: #F5EFEB;
  --color-white: #FFFFFF;

  --color-navy-light: #3E5570;
  --color-navy-deep:  #22303F;
  --color-teal-light: #7A9AA8;
  --color-sky-soft:   #E4EDF4;
  --color-border:     #D9E3EC;
  --color-text-muted: #6B7F8E;

  --color-accent:     #E8A33D;
  --color-accent-bg:  #FBEEDA;

  --color-correct:    #3F8A6E;
  --color-correct-bg: #E6F3EC;
  --color-wrong:      #C4645C;
  --color-wrong-bg:   #FAEBE8;
  --color-hint:       #A0763C;
  --color-hint-bg:    #F8F0E3;

  --tint-1: #D9E7F3;
  --tint-2: #DCEAE2;
  --tint-3: #F6E5D1;
  --tint-4: #E4E0F1;
  --tint-5: #F8E6E3;


  --font-display: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display",
                  "Trebuchet MS", Verdana, system-ui, sans-serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                  Arial, "Noto Sans", sans-serif;

  /* Generikus math család + tartalék, hogy az ő / ű / é betűk is meglegyenek. */
  --font-math: math, "Cambria Math", "STIX Two Math", "Latin Modern Math",
               "Times New Roman", serif;

  --page-max-width: 1080px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 30px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --shadow-soft: 0 6px 20px -14px rgba(47, 65, 86, 0.55);
  --shadow-lift: 0 16px 32px -20px rgba(47, 65, 86, 0.7);
}


/* ==========================================================================
   2. ALAPOK
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-navy);
  background-color: var(--color-beige);
  background-image: radial-gradient(var(--color-sky) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  background-position: -11px -11px;
}

h1, h2 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
}

p { margin: 0; }

button {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

input { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--color-teal);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

[hidden] { display: none !important; }


/* ==========================================================================
   3. FEJLÉC
   ========================================================================== */

.app-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-navy);
  color: var(--color-white);
}

.app-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--space-2) var(--space-4);
  min-height: 54px;
}

.app-bar__back {
  padding: var(--space-2) var(--space-3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 120ms ease;
}

.app-bar__back:hover { background: rgba(255, 255, 255, 0.24); }

.app-bar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}


/* ==========================================================================
   4. OLDALVÁZ ÉS NÉZETEK
   ========================================================================== */

.page {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-7);
  flex: 1 0 auto;
  width: 100%; 
}

.view { animation: view-in 260ms ease-out both; }

.view__title {
  font-size: 25px;
  margin-bottom: var(--space-3);
}

.view__lead {
  color: var(--color-text-muted);
  font-size: 14px;
  margin-bottom: var(--space-5);
}

.intro { margin-bottom: var(--space-5); }

.intro__title {
  font-size: 34px;
  margin-bottom: var(--space-2);
}

.intro__text {
  color: var(--color-text-muted);
  max-width: 46ch;
}

.empty-note {
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 2px dashed var(--color-sky);
  color: var(--color-text-muted);
  text-align: center;
}

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: 13px;
  color: var(--color-text-muted);
}

.breadcrumb__link {
  padding: 0;
  color: var(--color-teal);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.breadcrumb__separator { color: var(--color-teal-light); }

.breadcrumb__current { font-weight: 700; }


/* Indulási hiba (app.js szúrja be, ha hiányzik egy fájl vagy egy elem) */
.startup-error {
  max-width: var(--page-max-width);
  margin: var(--space-4) auto;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-wrong-bg);
  border: 2px solid var(--color-wrong);
  color: var(--color-navy);
}

.startup-error h2 { font-size: 18px; margin-bottom: var(--space-2); }

.startup-error ul { margin: var(--space-2) 0; padding-left: var(--space-5); }

.startup-error li { font-size: 14px; line-height: 1.6; }


/* ==========================================================================
   5. TÉMAKÖR-KÁRTYÁK
   ========================================================================== */

.topic-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.topic-card {
  position: relative;
  display: block;
  overflow: hidden;
  padding: var(--space-5);
  text-align: left;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.topic-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

.topic-card:active { transform: translateY(0) scale(0.99); }

.topic-grid .topic-card:nth-child(1) { background: var(--tint-1); }
.topic-grid .topic-card:nth-child(2) { background: var(--tint-2); }
.topic-grid .topic-card:nth-child(3) { background: var(--tint-3); }
.topic-grid .topic-card:nth-child(4) { background: var(--tint-4); }
.topic-grid .topic-card:nth-child(5) { background: var(--tint-5); }

.topic-card__index {
  position: absolute;
  top: -6px;
  right: 10px;
  font-family: var(--font-display);
  font-size: 66px;
  font-weight: 800;
  line-height: 1;
  color: var(--color-white);
  opacity: 0.75;
}

.topic-card__title {
  position: relative;
  display: block;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-3);
  padding-right: 56px;
}

.topic-card__meta {
  position: relative;
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--color-navy);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.topic-card__meta--soon {
  background: rgba(47, 65, 86, 0.12);
  color: var(--color-navy);
}


/* ==========================================================================
   6. ALTÉMAKÖR-LISTA
   ========================================================================== */

.topic-layout { display: block; }

.topic-content {
  max-width: 820px;
  margin: 0 auto;
}

.subtopic-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

.subtopic-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 2px solid transparent;
  box-shadow: var(--shadow-soft);
  transition: border-color 140ms ease, transform 140ms ease;
}

.subtopic-card:hover {
  border-color: var(--color-teal);
  transform: translateX(3px);
}

.subtopic-card:active { transform: scale(0.99); }

.subtopic-card__index {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--color-sky-soft);
  color: var(--color-navy);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
}

.subtopic-card__title {
  flex: 1;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
}

.subtopic-card__arrow {
  flex: 0 0 auto;
  color: var(--color-teal);
  font-size: 18px;
  transition: transform 140ms ease;
}

.subtopic-card:hover .subtopic-card__arrow { transform: translateX(3px); }


/* ==========================================================================
   7. MATEMATIKAI KIFEJEZÉSEK
   Minden matek a MathApp.mathml függvényeiből jön, egyetlen betűtípussal.
   ========================================================================== */

math,
math mn, math mo, math mi, math mtext, math ms,
.expression,
.math-highlight,
.solution__math,
.solution__result,
.feedback__forms,
.answer-box {
  font-family: var(--font-math);
}

math { font-size: inherit; }


/* ==========================================================================
   8. FELADATNÉZET
   ========================================================================== */

body.is-exercise-mode { overflow: hidden; }

body.is-exercise-mode .app-bar,
body.is-exercise-mode .page-footer { display: none; }

body.is-exercise-mode .page { padding: 0; max-width: none; }

.view--exercise {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-beige);
  background-image: radial-gradient(var(--color-sky) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  animation: fade-in 220ms ease-out both;
}

.exercise-inner {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.exercise-top {
  flex: 0 0 auto;
  padding: calc(var(--space-3) + env(safe-area-inset-top)) var(--space-4) var(--space-2);
}

.exercise-segments {
  display: flex;
  gap: 4px;
  margin-bottom: var(--space-3);
}

.exercise-segments__bar {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(47, 65, 86, 0.14);
  transition: background-color 260ms ease, transform 200ms ease;
}


.exercise-segments__bar.is-first-try { background: var(--color-correct); }
.exercise-segments__bar.is-retry     { background: var(--color-accent); }
.exercise-segments__bar.is-helped    { background: var(--color-wrong); }


.exercise-segments__bar.is-current {
  transform: scaleY(1.8);
}

.exercise-segments__bar.is-current:not(.is-first-try):not(.is-retry):not(.is-helped) {
  background: var(--color-navy);
}

.exercise-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.exercise-head__title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exercise-head__close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(47, 65, 86, 0.08);
  color: var(--color-navy);
  font-size: 15px;
  transition: background-color 140ms ease;
}

.exercise-head__close:hover { background: rgba(47, 65, 86, 0.16); }


.exercise-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow: hidden;
  padding: var(--space-2) var(--space-4) var(--space-2);
}

#exerciseArea {
  flex: 0 0 auto;
}

#feedbackSlot {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}


.exercise-actions {
  flex: 0 0 auto;
  padding: var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, var(--color-beige) 45%);
}

.exercise-actions__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.exercise-actions__row .button { flex: 1; }
.exercise-actions__row .button--hint { flex: 0.5; }

.nav-button {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-navy);
  font-size: 20px;
  box-shadow: 0 4px 0 var(--color-sky);
  transition: transform 100ms ease, opacity 140ms ease;
}

.nav-button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--color-sky); }

.nav-button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
}

.question-card {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
  animation: card-in 260ms ease-out both;
}

.question-card__prompt {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
}

.question-card__note {
  margin-top: var(--space-1);
  font-size: 13px;
  color: var(--color-text-muted);
}


.expression {
  display: block;
  max-width: 100%;
  padding: var(--space-4) var(--space-3);
  margin-top: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-sky-soft);
  font-size: clamp(22px, 6.4vw, 26px);
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
  overflow: visible;
}

.expression math { max-width: 100%; }

.answer-area { margin-top: var(--space-4); }

.answer-area__label {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: var(--space-2);
}


.question-card.is-tight .question-card__note { display: none; }

.question-card.is-tight .expression {
  padding: var(--space-2);
  margin-top: var(--space-2);
  font-size: clamp(19px, 5.6vw, 22px);
}

.question-card.is-tight .answer-area { margin-top: var(--space-3); }

.question-card.is-compact .answer-area { display: none; }

.fraction-input {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.fraction-input__rule {
  width: 78px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-navy);
}


.answer-box {
  width: 78px;
  height: 50px;
  text-align: center;
  font-family: var(--font-math);
  font-size: 24px;
  color: var(--color-navy);
  background: var(--color-sky-soft);
  border: 2.5px solid transparent;
  border-radius: 14px;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.answer-box:focus {
  outline: none;
  background: var(--color-white);
  border-color: var(--color-teal);
}

.answer-box:disabled { opacity: 0.75; }

.answer-area.is-correct .answer-box {
  border-color: var(--color-correct);
  background: var(--color-correct-bg);
}

.answer-area.is-incorrect .answer-box {
  border-color: var(--color-wrong);
  background: var(--color-wrong-bg);
  animation: shake 320ms ease-in-out;
}

.value-input {
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.value-input .answer-box {
  width: 100%;
  max-width: 240px;
}

.option-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.option-list--inline {
  grid-template-columns: repeat(3, 1fr);
}

.option-list--inline .option-button {
  min-height: 60px;
  font-size: 28px;
}

.option-button {
  display: grid;
  place-items: center;
  min-height: 68px;
  line-height: 1.4;
  padding: var(--space-3);
  font-size: 22px;
  border-radius: var(--radius-md);
  background: var(--color-sky-soft);
  border: 2.5px solid transparent;
  transition: border-color 140ms ease, background-color 140ms ease, transform 120ms ease;
}

.option-button:hover { border-color: var(--color-teal-light); }

.option-button:active { transform: scale(0.97); }

.option-button.is-selected {
  border-color: var(--color-teal);
  background: var(--color-white);
}

.option-button.is-correct {
  border-color: var(--color-correct);
  background: var(--color-correct-bg);
}

.option-button.is-incorrect {
  border-color: var(--color-wrong);
  background: var(--color-wrong-bg);
}


/* ==========================================================================
   9. VISSZAJELZÉS ÉS LEVEZETÉS
   ========================================================================== */

.feedback {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
  animation: slide-up 220ms ease-out both;
}

.feedback__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  margin-bottom: var(--space-1);
}

.feedback__message { font-size: 14px; line-height: 1.6; }

.feedback__forms {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3em;
  margin-top: var(--space-2);
}

.feedback--correct   { background: var(--color-correct-bg); }
.feedback--correct .feedback__title { color: var(--color-correct); }

.feedback--incorrect { background: var(--color-wrong-bg); }
.feedback--incorrect .feedback__title { color: var(--color-wrong); }

.feedback--hint      { background: var(--color-hint-bg); }
.feedback--hint .feedback__title { color: var(--color-hint); }

.feedback--solution  { background: var(--color-sky-soft); }
.feedback--solution .feedback__title { color: var(--color-navy); }

.solution__steps {
  counter-reset: solution-step;
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}

.solution__step {
  counter-increment: solution-step;
  position: relative;
  padding-left: 32px;
  padding-bottom: var(--space-2);
  font-size: 14px;
  line-height: 1.6;
}

.solution__step:last-child { padding-bottom: 0; }

.solution__step::before {
  content: counter(solution-step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
}


.math-highlight,
.solution__math {
  display: block;
  line-height: 1.5;
  padding: 6px var(--space-3);
  margin-top: var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  font-size: 19px;
  overflow: visible;
}

.solution__result {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 2px solid var(--color-sky);
  font-size: 19px;
}


.solution__result-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-teal);
}


/* ==========================================================================
   10. GOMBOK
   ========================================================================== */

.button {
  display: inline-block;
  padding: var(--space-3) var(--space-4);
  border-radius: 999px;
  background: var(--color-navy);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 4px 0 var(--color-navy-deep);
  transition: transform 100ms ease, background-color 140ms ease;
}

.button:hover { background: var(--color-navy-light); }

.button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--color-navy-deep); }

.button--secondary {
  background: var(--color-white);
  color: var(--color-navy);
  box-shadow: 0 4px 0 var(--color-sky);
}

.button--secondary:hover { background: var(--color-white); }

.button--secondary:active { box-shadow: 0 1px 0 var(--color-sky); }

.button--hint {
  flex: 0 0 auto;
  padding-inline: var(--space-4);
  background: var(--color-accent);
  color: #3A2708;
  box-shadow: 0 4px 0 #B87A22;
}

.button--hint:hover { background: #F0B257; }

.button--hint:active { box-shadow: 0 1px 0 #B87A22; }

.button--quiet {
  background: none;
  color: var(--color-teal);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  box-shadow: none;
  padding: var(--space-3) var(--space-2);
}

.button--quiet:hover { background: none; color: var(--color-navy); }

.button--quiet:active { transform: none; box-shadow: none; }

.feedback__actions {
  margin-top: var(--space-2);
}

.feedback__actions .button--quiet {
  padding: 0;
  font-size: 13px;
}

.button--wide { display: block; width: 100%; }

.result-card {
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
  text-align: center;
  animation: card-in 260ms ease-out both;
}

.result-card__mark {
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--color-accent-bg);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  animation: pop-in 400ms ease-out both;
}

.result-card__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  margin-bottom: var(--space-2);
}

.result-card__text {
  color: var(--color-text-muted);
  max-width: 40ch;
  margin: 0 auto;
}

.result-card__skipped {
  margin-top: var(--space-3);
  font-size: 13px;
  color: var(--color-text-muted);
}

.score-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.score-tile {
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-md);
  animation: pop-in 340ms ease-out both;
}

.score-tile:nth-child(2) { animation-delay: 80ms; }
.score-tile:nth-child(3) { animation-delay: 160ms; }

.score-tile__value {
  display: block;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
}

.score-tile__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  margin-top: var(--space-1);
}

.score-tile--first-try  { background: var(--color-correct-bg); color: var(--color-correct); }
.score-tile--with-help  { background: var(--color-accent-bg);  color: #8A5A12; }
.score-tile--not-solved { background: var(--color-wrong-bg);   color: var(--color-wrong); }


/* ==========================================================================
   11. LÁBLÉC
   ========================================================================== */

.page-footer {
  margin-top: auto;
  padding: var(--space-5) var(--space-4);
  background: var(--color-navy);
  color: var(--color-sky);
}
 
.page-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  max-width: var(--page-max-width);
  margin: 0 auto;
}
 
.page-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--color-white);
}
 

 
.page-footer__status {
  margin: var(--space-2) 0 0;
  font-size: 12px;
  color: var(--color-teal-light);
}
 
.page-footer__heading {
  margin: 0 0 var(--space-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-teal-light);
}
 
.page-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
}
 
.page-footer__links li { margin-bottom: var(--space-2); }
 
.page-footer__links a {
  color: var(--color-sky);
  font-size: 14px;
  text-decoration: none;
}
 
.page-footer__links a:hover {
  color: var(--color-white);
  text-decoration: none;
  text-underline-offset: 3px;
}
 
.page-footer__text {
  margin: 0;
  max-width: 40ch;
  font-size: 14px;
  line-height: 1.55;
}


/* ==========================================================================
   12. MOZGÁS
   ========================================================================== */

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

@keyframes view-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

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

@keyframes pop-in {
  0%   { opacity: 0; transform: scale(0.7); }
  70%  { transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

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

@keyframes celebrate {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}

.question-card.is-celebrating { animation: celebrate 420ms ease-out; }


/* ==========================================================================
   13. SZÉLESEBB KÉPERNYŐK
   ========================================================================== */

/* ---- Tablet ---- */
@media (min-width: 620px) {

  .page { padding: var(--space-6) var(--space-5) var(--space-7); }

  .intro__title { font-size: 42px; }

  .topic-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }

  .topic-card { padding: var(--space-5) var(--space-5) var(--space-5); }

  .topic-card__index { font-size: 76px; }

  .subtopic-list { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }

  .view__title { font-size: 28px; }

  .question-card { padding: var(--space-5); }

  .expression { font-size: 28px; padding: var(--space-5) var(--space-3); }

  .question-card.is-tight .expression { font-size: 23px; }

  .answer-box { width: 84px; height: 54px; font-size: 25px; }

  .fraction-input__rule { width: 84px; }

  .math-highlight,
  .solution__math { font-size: 21px; }

  .exercise-inner { max-width: 600px; }

  .exercise-top { padding-top: var(--space-5); }

  .exercise-head__title { font-size: 17px; }

  .exercise-body { padding: var(--space-3) var(--space-5); gap: var(--space-4); }

  .exercise-actions { padding: var(--space-4) var(--space-5) var(--space-5); }

  .page-footer { padding: var(--space-6) var(--space-5); }
 
  .page-footer__inner {
    grid-template-columns: 1.2fr 1fr 1.4fr;
    gap: var(--space-6);
  }
    
}

/* ---- Monitor ---- */
@media (min-width: 960px) {

  .app-bar__inner { padding-inline: var(--space-6); }

  .page { padding: var(--space-7) var(--space-6); }

  .intro__title { font-size: 50px; }

  .topic-grid { grid-template-columns: repeat(3, 1fr); }

  .topic-card { padding: var(--space-6); }

  .topic-card__index { font-size: 84px; }

  .topic-card__title { font-size: 25px; }

  .topic-content { max-width: 900px; }
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}