/* Shared responsive layout for the active “Wake up the seeds” experience. */
html {
  overscroll-behavior-y: none;
}

body.newwords-seed-page {
  width: 100%;
  height: 100dvh !important;
  min-height: 0 !important;
  padding: 8px !important;
  overflow: hidden !important;
  overscroll-behavior-y: none;
}

/*
 * Live students remain interaction-locked, but the transparent sync marker must
 * not consume touch gestures. Activation is blocked by the companion adapter.
 */
body.newwords-seed-page #lingobao-theory-lock {
  pointer-events: none !important;
}

body.newwords-seed-page .newwords-shell {
  width: 100%;
  height: calc(100dvh - 16px) !important;
  min-height: 0;
  /* Keep inactive slides inside the shell when the classroom injects .cc overrides. */
  overflow: hidden !important;
}

body.newwords-seed-page .newwords-seed-slide {
  min-height: 0;
}

body.newwords-seed-page .newwords-seed-header {
  flex: 0 0 auto;
  margin-top: 8px !important;
  margin-bottom: 12px !important;
}

body.newwords-seed-page .newwords-seed-header h1 {
  margin-top: 12px !important;
  padding-bottom: 6px !important;
}

body.newwords-seed-page .newwords-seed-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 8px 16px 16px !important;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-gutter: stable;
  scrollbar-width: thin !important;
  scrollbar-color: #818cf8 #eef2ff !important;
  -webkit-overflow-scrolling: touch;
}

body.newwords-seed-page .newwords-seed-scroll::-webkit-scrollbar {
  display: block !important;
  width: 10px;
}

body.newwords-seed-page .newwords-seed-scroll::-webkit-scrollbar-track {
  border-radius: 999px;
  background: #eef2ff;
}

body.newwords-seed-page .newwords-seed-scroll::-webkit-scrollbar-thumb {
  border: 2px solid #eef2ff;
  border-radius: 999px;
  background: #818cf8;
}

body.newwords-seed-page .newwords-seed-grid {
  align-content: flex-start;
  gap: 12px !important;
  max-width: 1312px !important;
  padding: 4px 8px 16px;
}

body.newwords-seed-page .newwords-seed-slot,
body.newwords-seed-page .seed-slot {
  width: 120px !important;
  height: 120px !important;
}

/*
 * Revealed vocabulary must reserve enough room for pinyin plus a complete
 * translation. The companion adapter only reduces the translation when its
 * measured content still needs it; short labels keep their original size.
 */
body.newwords-seed-page .newwords-adaptive-details {
  box-sizing: border-box;
  height: 54% !important;
  min-height: 0;
  padding: 3px 4px !important;
  overflow: hidden;
}

body.newwords-seed-page .newwords-adaptive-meaning {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 1px !important;
  padding: 0 2px !important;
  overflow-wrap: anywhere;
  white-space: pre-line;
  line-height: 1.12;
  text-wrap: balance;
}

@media (max-width: 639px) {
  body.newwords-seed-page .newwords-seed-header {
    margin-top: 4px !important;
    margin-bottom: 8px !important;
  }

  body.newwords-seed-page .newwords-seed-header h1 {
    margin-top: 8px !important;
    font-size: 20px !important;
  }

  body.newwords-seed-page .newwords-seed-scroll {
    padding: 6px 8px 12px !important;
  }

  body.newwords-seed-page .newwords-seed-grid {
    gap: 10px !important;
    padding-right: 4px;
    padding-left: 4px;
  }

  body.newwords-seed-page .newwords-seed-slot,
  body.newwords-seed-page .seed-slot {
    width: 85px !important;
    height: 85px !important;
  }
}

@media (min-width: 640px) and (max-width: 899px) {
  body.newwords-seed-page .newwords-seed-slot,
  body.newwords-seed-page .seed-slot {
    width: 105px !important;
    height: 105px !important;
  }
}

@media (min-width: 900px) and (max-height: 720px) {
  body.newwords-seed-page .newwords-seed-slot,
  body.newwords-seed-page .seed-slot {
    width: 108px !important;
    height: 108px !important;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  body.newwords-seed-page {
    padding: 4px !important;
  }

  body.newwords-seed-page .newwords-shell {
    height: calc(100dvh - 8px) !important;
  }

  body.newwords-seed-page .newwords-seed-header {
    margin-top: 2px !important;
    margin-bottom: 4px !important;
  }

  body.newwords-seed-page .newwords-seed-header > span {
    padding: 3px 12px !important;
    font-size: 11px !important;
  }

  body.newwords-seed-page .newwords-seed-header h1 {
    margin-top: 4px !important;
    padding-bottom: 3px !important;
    font-size: 18px !important;
  }

  body.newwords-seed-page .newwords-seed-scroll {
    padding: 4px 10px 8px !important;
  }

  body.newwords-seed-page .newwords-seed-grid {
    gap: 8px !important;
  }

  body.newwords-seed-page .newwords-seed-slot,
  body.newwords-seed-page .seed-slot {
    width: 82px !important;
    height: 82px !important;
  }

  body.newwords-seed-page .newwords-adaptive-details > .font-pinyin,
  body.newwords-seed-page .newwords-adaptive-details > .pinyin {
    margin-bottom: 0 !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  body.newwords-seed-page .newwords-adaptive-details > img {
    width: 28px !important;
    height: 28px !important;
    margin-bottom: 0 !important;
  }
}

/* Unit 1 keeps its legacy two-slide viewport around the shared seed screen. */
body.newwords-seed-page.newwords-legacy-slides {
  padding: 0 !important;
}

body.newwords-seed-page.newwords-legacy-slides .slide-viewport {
  height: 100dvh;
}

body.newwords-seed-page.newwords-legacy-slides .newwords-shell {
  height: calc(100dvh - 16px) !important;
}

/*
 * Compact legacy sets use the real vocabulary count to avoid orphan rows
 * such as 9 + 1. The adapter exposes the calculated column count.
 */
body.newwords-seed-page.newwords-legacy-slides .newwords-seed-grid {
  --newwords-legacy-card-size: clamp(132px, 10vw, 160px);
  display: grid !important;
  grid-template-columns: repeat(
    var(--newwords-balanced-columns, 5),
    var(--newwords-legacy-card-size)
  );
  align-items: start !important;
  justify-content: center !important;
  gap: 18px !important;
}

body.newwords-seed-page.newwords-legacy-slides .newwords-seed-slot {
  width: var(--newwords-legacy-card-size) !important;
  height: var(--newwords-legacy-card-size) !important;
}

@media (max-width: 899px) {
  body.newwords-seed-page.newwords-legacy-slides .newwords-seed-header {
    padding-top: 52px;
  }

  body.newwords-seed-page.newwords-legacy-slides .newwords-seed-header h1 {
    display: block;
    width: fit-content;
    max-width: calc(100% - 16px);
    margin-right: auto !important;
    margin-left: auto !important;
    font-size: 18px !important;
    line-height: 1.15;
    white-space: normal;
  }

  body.newwords-seed-page.newwords-legacy-slides .newwords-legacy-options {
    top: 6px !important;
    right: 6px !important;
    gap: 6px !important;
    transform: scale(0.85) !important;
  }
}

@media (max-width: 639px) {
  body.newwords-seed-page.newwords-legacy-slides .newwords-legacy-options {
    transform: scale(0.78) !important;
  }

  body.newwords-seed-page.newwords-legacy-slides .newwords-seed-grid {
    --newwords-legacy-card-size: clamp(92px, 28vw, 110px);
    grid-template-columns: repeat(2, var(--newwords-legacy-card-size));
    gap: 10px !important;
  }
}

@media (min-width: 640px) and (max-width: 899px) {
  body.newwords-seed-page.newwords-legacy-slides .newwords-seed-grid {
    --newwords-legacy-card-size: clamp(108px, 15vw, 132px);
    gap: 12px !important;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  body.newwords-seed-page.newwords-legacy-slides .newwords-seed-grid {
    --newwords-legacy-card-size: 102px;
    grid-template-columns: repeat(
      var(--newwords-balanced-columns, 5),
      var(--newwords-legacy-card-size)
    );
    gap: 8px !important;
  }
}