/* Numere — lecție pe cifră + meniu 1–10
 * Totul se încadrează în viewport (fără scroll pe pagină); scale după lățime + înălțime.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@600;700&family=Nunito:wght@700;800;900&display=swap');

html:has(.numere-cards-page) {
  height: 100%;
  overflow: hidden;
}

.numere-cards-page {
  /* Artboard Figma 1440×1024 */
  --u: min(1px, 100vw / 1440, 100dvh / 1024);
  --menu-h: calc(118 * var(--u));
  --btn-h: calc(80 * var(--u));
  /* Spațiu între Înainte (top 773) și meniu (top 906): 53px */
  --btn-gap: calc(53 * var(--u));
  --footer-h: calc(var(--menu-h) + var(--btn-h) + var(--btn-gap));
  /* Frame 1885: top 65, height 80 → conținut de la ~254 */
  --chrome-top: calc(65 * var(--u));
  --chrome-x: calc(40 * var(--u));
  --top-pad: calc(160 * var(--u));
  --lesson-accent: #41b451;
  --lesson-surface: #ffffff;
  --lesson-on-accent: #ffffff;
  --muted: #bbbbbb;
  --page-bg: #f4ffee;
  --card-radius: calc(43.4 * var(--u));
  --card-shadow: 0 15.5px 23.25px -4.65px rgba(0, 0, 0, 0.1), 0 6.2px 9.3px -6.2px rgba(0, 0, 0, 0.1);
  font-family: 'Nunito', system-ui, sans-serif;
  margin: 0;
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  background: var(--page-bg);
  color: var(--lesson-accent);
  box-sizing: border-box;
}

.numere-cards-page * {
  box-sizing: border-box;
}

.numere-exit {
  position: fixed;
  /* Centrat pe verticală cu switch-ul (frame 80px, buton ~56px) */
  top: calc(var(--chrome-top) + (80 * var(--u) - 56 * var(--u)) / 2);
  left: var(--chrome-x);
  z-index: 40;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  padding: calc(12.4 * var(--u)) calc(24.8 * var(--u));
  gap: calc(12.4 * var(--u));
  height: calc(55.8 * var(--u));
  background: var(--lesson-surface);
  box-shadow: 0 1.55px 4.65px rgba(0, 0, 0, 0.1), 0 1.55px 3.1px -1.55px rgba(0, 0, 0, 0.1);
  border-radius: calc(24.8 * var(--u));
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: max(13px, calc(21.7 * var(--u)));
  line-height: 1.3;
  letter-spacing: -0.233105px;
  color: var(--lesson-accent);
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.numere-exit:hover {
  filter: brightness(1.06);
}

.numere-exit__icon {
  width: max(16px, calc(27.9 * var(--u)));
  height: max(16px, calc(27.9 * var(--u)));
  flex-shrink: 0;
}

.numere-mode {
  --mode-w: calc(226.67 * var(--u));
  --mode-h: calc(80 * var(--u));
  --mode-pad-y: calc(16.67 * var(--u));
  --mode-pad-x: calc(23.33 * var(--u));
  --mode-knob: calc(var(--mode-h) - var(--mode-pad-y) * 2);
  position: fixed;
  top: var(--chrome-top);
  right: var(--chrome-x);
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: var(--mode-w);
  height: var(--mode-h);
  padding: var(--mode-pad-y) var(--mode-pad-x);
  gap: 0;
  background: var(--lesson-surface);
  box-shadow: 0 3.3px 3.3px rgba(0, 0, 0, 0.12);
  border-radius: calc(40 * var(--u));
}

.numere-mode__btn {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--mode-knob);
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: #cccccc;
  cursor: pointer;
  transition: color 0.2s ease;
}

.numere-mode__btn.is-active {
  color: var(--lesson-on-accent);
  background: var(--lesson-accent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.numere-mode__glyph {
  width: max(28px, calc(42 * var(--u)));
  height: max(22px, calc(32 * var(--u)));
  display: block;
}

.numere-mode__btn--hand .numere-mode__glyph {
  width: max(26px, calc(36 * var(--u)));
  height: max(26px, calc(36 * var(--u)));
}

.numere-back,
.numere-next {
  position: fixed;
  top: auto;
  bottom: calc(var(--menu-h) + var(--btn-gap));
  z-index: 40;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  padding: calc(21 * var(--u)) calc(37 * var(--u));
  gap: calc(12 * var(--u));
  height: var(--btn-h);
  min-height: var(--btn-h);
  box-shadow: 0 6.2px 9.3px -1.55px rgba(0, 0, 0, 0.1), 0 3.1px 6.2px -3.1px rgba(0, 0, 0, 0.1);
  border-radius: calc(24.8 * var(--u));
  border: none;
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: max(14px, calc(24.8 * var(--u)));
  line-height: 1.2;
  letter-spacing: -0.484375px;
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.numere-back {
  left: calc(37 * var(--u));
  background: var(--lesson-surface);
  color: var(--lesson-accent);
}

.numere-back[hidden] {
  display: none !important;
}

.numere-back:hover {
  filter: brightness(0.98);
}

.numere-back:active {
  filter: brightness(0.94);
}

.numere-back__chevron,
.numere-next__chevron {
  width: max(18px, calc(34.1 * var(--u)));
  height: max(18px, calc(34.1 * var(--u)));
  flex-shrink: 0;
}

.numere-back__chevron {
  color: var(--lesson-accent);
}

/* Înainte — Figma: fill accent; text alb (sau on_accent pe teme speciale, ex. 4) */
.numere-next {
  right: calc(43 * var(--u));
  background: var(--lesson-accent);
  color: var(--lesson-on-accent);
}

.numere-next:hover {
  filter: brightness(1.06);
}

.numere-next:active {
  filter: brightness(0.92);
}

.numere-next__chevron {
  color: var(--lesson-on-accent);
}

.numere-lesson {
  display: none;
  width: 100%;
  max-width: 1440px;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 auto;
  padding:
    var(--top-pad)
    max(16px, calc(40 * var(--u)))
    var(--footer-h)
    max(16px, calc(40 * var(--u)));
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.numere-lesson--active {
  display: flex;
}

.numere-stage {
  --stage-max-h: calc(100dvh - var(--top-pad) - var(--footer-h) - 8px);
  --card-w: min(
    calc(514 * var(--u)),
    46vw,
    calc(var(--stage-max-h) * 514 / 440)
  );
  --card-h: calc(var(--card-w) * 440 / 514);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: min(clamp(12px, 5vw, calc(100 * var(--u))), 6vw);
  width: 100%;
  max-height: var(--stage-max-h);
  min-height: 0;
  margin: 0;
}

.lesson-card {
  position: relative;
  width: var(--card-w);
  height: var(--card-h);
  flex: none;
  max-width: 100%;
  padding: calc(var(--card-w) * 0.0724);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  isolation: isolate;
}

.lesson-card--number {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: var(--lesson-surface);
}

.lesson-number-center {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
}

.lesson-digit {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: calc(var(--card-w) * 0.5837);
  line-height: 0.73;
  letter-spacing: -0.02em;
  color: var(--lesson-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lesson-audio-cluster {
  position: absolute;
  left: calc(var(--card-w) * 0.0389);
  top: calc(var(--card-h) * (296 / 440));
  bottom: auto;
  z-index: 2;
  width: calc(var(--card-w) * 0.1327);
  height: calc(var(--card-w) * 0.1327);
}

.lesson-audio {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: var(--lesson-surface);
  box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  color: var(--lesson-accent);
  cursor: pointer;
  z-index: 2;
}

.lesson-audio:hover {
  filter: brightness(1.02);
  box-shadow: 0 6px 10px -4px rgba(0, 0, 0, 0.12);
}

.lesson-audio__svg {
  width: 65%;
  height: 65%;
  display: block;
}

.numere-illustration {
  position: relative;
  width: min(calc(580 * var(--u)), 42vw, calc(var(--stage-max-h) * 1.4));
  height: min(calc(400 * var(--u)), var(--stage-max-h), calc(var(--card-h) * 1.02));
  flex: none;
  max-width: 48%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.numere-objects {
  --obj-cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--obj-cols), minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: clamp(6px, calc(14 * var(--u)), 18px);
  width: 100%;
  height: 100%;
  padding: clamp(4px, 1vh, 12px);
}

.numere-cards-page[data-view-mode='hand'] .numere-objects {
  display: none;
}

.numere-object {
  width: min(100%, calc(140 * var(--u)));
  max-height: min(28vh, calc(120 * var(--u)));
  aspect-ratio: 1;
  object-fit: contain;
  display: block;
  user-select: none;
  pointer-events: none;
}

.numere-objects--composed {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-template-columns: none;
}

.numere-object--composed {
  width: 100%;
  height: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}

.numere-hand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.numere-hand[hidden] {
  display: none !important;
}

.numere-cards-page[data-view-mode='objects'] .numere-hand {
  display: none !important;
}

.numere-hand__img {
  width: auto;
  height: min(100%, calc(340 * var(--u)), 52vh);
  max-width: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  pointer-events: none;
}

.numbers-menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 calc(116 * var(--u));
  gap: calc(82 * var(--u));
  width: 100%;
  height: var(--menu-h);
  margin: 0;
  background: var(--lesson-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  scrollbar-width: thin;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.04);
}

.numbers-menu::-webkit-scrollbar {
  height: 4px;
}

.numbers-menu::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 3px;
}

.numbers-menu__btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0;
  width: calc(44.24 * var(--u));
  height: calc(49.59 * var(--u));
  min-width: calc(44.24 * var(--u));
  border: none;
  border-radius: calc(21.7 * var(--u));
  background: transparent;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: max(14px, calc(20 * var(--u)));
  line-height: 1.2;
  color: var(--muted);
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
  flex: none;
}

.numbers-menu__btn:hover:not(.numbers-menu__btn--active) {
  background: color-mix(in srgb, var(--lesson-accent) 8%, transparent);
  color: #888888;
}

.numbers-menu__btn--visited:not(.numbers-menu__btn--active) {
  background: color-mix(in srgb, var(--lesson-accent) 22%, transparent);
  color: var(--lesson-accent);
}

.numbers-menu__btn--visited:hover:not(.numbers-menu__btn--active) {
  background: color-mix(in srgb, var(--lesson-accent) 30%, transparent);
  color: var(--lesson-accent);
}

.numbers-menu__btn--active {
  background: var(--lesson-accent);
  color: var(--lesson-on-accent);
}

.numbers-menu__btn:active {
  transform: scale(0.96);
}

@media (max-width: 1100px) {
  .numbers-menu {
    justify-content: flex-start;
  }

  .numere-stage {
    gap: clamp(12px, 2.5vw, 32px);
  }

  .numere-illustration {
    max-width: 42%;
  }
}

@media (max-width: 900px) {
  .numere-cards-page {
    --menu-h: clamp(56px, 9vh, 72px);
    --btn-h: clamp(44px, 7vh, 52px);
    --btn-gap: 10px;
    --chrome-top: 10px;
    --chrome-x: 10px;
    --top-pad: clamp(52px, 9vh, 72px);
    --u: min(1px, 100vw / 390, 100dvh / 720);
    --card-radius: 18px;
  }

  .numere-exit {
    top: var(--chrome-top);
    left: var(--chrome-x);
    height: auto;
    padding: 8px 14px;
    font-size: 15px;
    gap: 6px;
  }

  .numere-exit__icon {
    width: 18px;
    height: 18px;
  }

  .numere-mode {
    top: var(--chrome-top);
    right: var(--chrome-x);
    --mode-w: 132px;
    --mode-h: 48px;
    --mode-pad-y: 6px;
    --mode-pad-x: 6px;
  }

  .numere-mode__glyph {
    width: 28px;
    height: 20px;
  }

  .numere-mode__btn--hand .numere-mode__glyph {
    width: 24px;
    height: 24px;
  }

  .numere-back,
  .numere-next {
    padding: 0 14px;
    font-size: 15px;
    gap: 6px;
  }

  .numere-back {
    left: 10px;
  }

  .numere-next {
    right: 10px;
  }

  .numere-back__chevron,
  .numere-next__chevron {
    width: 18px;
    height: 18px;
  }

  .numere-lesson {
    padding: var(--top-pad) 12px var(--footer-h);
  }

  .numere-stage {
    --stage-max-h: calc(100dvh - var(--top-pad) - var(--footer-h) - 8px);
    --card-w: min(calc(100vw - 28px), 320px, calc(var(--stage-max-h) * 0.55 * 514 / 440));
    --card-h: calc(var(--card-w) * 440 / 514);
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, 1.5vh, 16px);
  }

  .numere-illustration {
    width: min(280px, 78vw);
    height: min(calc(var(--stage-max-h) - var(--card-h) - 16px), 32vh, 220px);
    max-width: 100%;
  }

  .numere-object {
    max-height: 72px;
  }

  .numere-hand__img {
    height: min(100%, 200px);
  }

  .numbers-menu {
    padding: 0 12px;
    gap: 10px;
  }

  .numbers-menu__btn {
    width: 36px;
    height: 40px;
    min-width: 36px;
    font-size: 16px;
    border-radius: 16px;
  }
}