/**
 * yb-keyword-card.css  v2  (2026-10-06)
 * 关键词翻面卡 (studyWord / studyWordEnglish) layout.
 *
 * v1 (2026-06-30) made the card fluid and center-or-scroll, but the vertical centering
 * depended on yb-keyword-card.js adding a wrapper. That script is skipped on ?token= entries
 * (admin preview, WeChat/Google login), and there the face fell back to a bare flex box:
 * text stuck to the top, short text pinned to the left.
 *
 * v2:
 *  - Centering is pure CSS now: column flex + ::before/::after auto margins = "safe center"
 *    (centered when short; when taller than the card the margins collapse to 0, so it
 *    scrolls from the top and is never clipped). Works with or without the script.
 *  - Bilingual keywords render as stacked pairs: English (bold) over 中文 (lighter),
 *    one keyword per row; with 4+ keywords English and 中文 share a row so they fit (markup from yb-keyword-card.js v2: .kwc / .kwc-item / .kwc-en / .kwc-zh).
 *  - Long sentence cards render as a readable paragraph instead of being cut at every comma.
 * Reversible: point index.html back at ?v=1 (backup of v1 kept on the server).
 */

/* ── card box ─────────────────────────────────────────────── */
.studys-word-content .word {
  width: 92% !important;
  max-width: 600px;
  height: clamp(320px, 58vh, 460px) !important;
  margin: 0 auto !important;
  perspective: 1600px;
}
.studys-word-content .word li {
  height: 100% !important;
  overflow: hidden;
  border-radius: 28px;
}

/* audio button: centered at the top of the card */
.studys-word-content .word-vector {
  top: 16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 3;
  line-height: 0;
}

/* ── text area: fills the card under the audio button ─────── */
.studys-word-content .word-front-text,
.studys-word-content .word-back-text {
  position: absolute !important;
  top: 56px !important;
  bottom: 36px !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  padding: 0 clamp(16px, 6%, 44px) !important;
  box-sizing: border-box !important;
  text-align: center !important;
  font-size: clamp(20px, 5.4vw, 28px) !important;
  font-weight: 700;
  line-height: 1.4 !important;
  overflow-wrap: break-word;
  word-wrap: break-word;
  scrollbar-width: thin;
}
/* safe vertical centering (no JS needed) */
.studys-word-content .word-front-text::before,
.studys-word-content .word-back-text::before {
  content: "";
  flex: 0 0 auto;
  margin-top: auto;
}
.studys-word-content .word-front-text::after,
.studys-word-content .word-back-text::after {
  content: "";
  flex: 0 0 auto;
  margin-bottom: auto;
}
.studys-word-content .word-front-text p,
.studys-word-content .word-back-text p { margin: 0.15em 0; text-align: center; }
.studys-word-content .word-front-text a,
.studys-word-content .word-back-text a { color: inherit; text-decoration: none; pointer-events: none; }

/* ── formatted content (yb-keyword-card.js v2) ────────────── */
.studys-word-content .kwc {
  flex: 0 0 auto;
  width: 100%;
  max-width: 26em;
  margin: 0 auto;
}
.studys-word-content .kwc-item {
  padding: 0.42em 0.2em;
}
.studys-word-content .kwc-item + .kwc-item {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.studys-word-content .word-back-text .kwc-item + .kwc-item {
  border-top-color: rgba(255, 255, 255, 0.18);
}
.studys-word-content .kwc-en {
  display: block;
  font-weight: 700;
  line-height: 1.25;
}
.studys-word-content .kwc-zh {
  display: block;
  margin-top: 0.2em;
  font-size: 0.84em;
  font-weight: 500;
  line-height: 1.35;
  color: #4b5262;
}
.studys-word-content .word-back-text .kwc-zh { color: rgba(255, 255, 255, 0.88); }

/* 4+ keywords: English and 中文 on one row (wraps as a unit when too long) */
.studys-word-content .kwc--rows .kwc-item { padding: 0.34em 0.2em; }
.studys-word-content .kwc--rows .kwc-en { display: inline; line-height: 1.3; }
.studys-word-content .kwc--rows .kwc-zh {
  display: inline-block;
  max-width: 100%;
  margin: 0 0 0 0.4em;
  vertical-align: baseline;
  font-size: 0.86em;
}
/* many keywords: smaller so 6–10 still fit on a phone */
.studys-word-content .kwc--dense { font-size: 0.86em; }
.studys-word-content .kwc--dense .kwc-item { padding: 0.28em 0.2em; }
.studys-word-content .kwc--xdense { font-size: 0.8em; }
.studys-word-content .kwc--xdense .kwc-item { padding: 0.22em 0.2em; }

/* sentence cards (older scenario rows): paragraph, not a chopped list */
.studys-word-content .kwc-para { font-size: 0.86em; line-height: 1.5; }
.studys-word-content .kwc-para .kwc-en { font-weight: 600; line-height: 1.5; }
.studys-word-content .kwc-para .kwc-zh { font-size: 0.92em; margin-top: 0.5em; line-height: 1.55; }
.studys-word-content .kwc-para--long { font-size: 0.76em; text-align: left; }

/* teacher-pasted lists (<ul><li>): keep, but neutralise the flip-card li rules */
.studys-word-content .kwc-html { text-align: left; display: inline-block; width: auto; max-width: 100%; }
.studys-word-content .kwc-html ul,
.studys-word-content .kwc-html ol { list-style: none; padding: 0; margin: 0; }
.studys-word-content .word-front-text li,
.studys-word-content .word-back-text li {
  position: static !important; top: auto !important; left: auto !important;
  right: auto !important; bottom: auto !important; width: auto !important;
  max-width: none !important; height: auto !important; border-radius: 0 !important;
  box-shadow: none !important; transform: none !important; transition: none !important;
  overflow: visible !important; backface-visibility: visible !important;
  background: transparent !important;
  display: list-item !important; padding: 0.3em 0.2em; font-size: 0.9em;
}

/* v1 wrapper, in case a tab still runs the old script */
.studys-word-content .word-text-inner { flex: 0 0 auto; width: 100%; margin: 0 auto; }

/* thin scrollbars */
.studys-word-content .word-front-text::-webkit-scrollbar,
.studys-word-content .word-back-text::-webkit-scrollbar { width: 5px; }
.studys-word-content .word-front-text::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); border-radius: 4px; }
.studys-word-content .word-back-text::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 4px; }

/* phones: less dead space above the card */
@media only screen and (max-width: 767px) {
  .studys-word-content .paging { padding: 18px 0 !important; }
}

/* tablet / desktop */
@media only screen and (min-width: 768px) {
  .studys-word-content .word {
    width: 640px !important;
    max-width: 92%;
    height: clamp(400px, 60vh, 520px) !important;
  }
  .studys-word-content .word-front-text,
  .studys-word-content .word-back-text {
    top: 60px !important;
    bottom: 32px !important;
    font-size: clamp(22px, 2vw, 26px) !important;
  }
}