/* 学单词：左图铺满剩余舞台，但必须落在图片位内，不能按 66vh 撑破 */
#view-words .word-study-wrap,
.word-study-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(24rem, 0.92fr);
  grid-template-rows: minmax(0, 1fr);
  column-gap: clamp(0.9rem, 2vw, 2.2rem);
  row-gap: 0.5rem;
  align-items: stretch;
  justify-content: stretch;
  justify-items: stretch;
  width: 100%;
  max-width: none;
  margin: 0.08rem 0 0;
  padding: 0.12rem 0.25rem 0.18rem;
  box-sizing: border-box;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}
#view-words .word-col-art,
.word-col-art {
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
#view-words .word-col-art .hero-art,
.word-col-art .hero-art {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
#view-words .word-col-art .polaroid,
.word-col-art .polaroid {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
#view-words .word-col-art .art-img,
.word-col-art .art-img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}
#view-words .word-art-duo,
.word-art-duo {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}
#view-words .word-art-duo .polaroid,
.word-art-duo .polaroid {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}
#view-words .word-art-duo .art-img,
.word-art-duo .art-img {
  max-height: 100%;
}
#view-words .word-col-panel,
.word-col-panel {
  --sb-size: clamp(4.25rem, 6.2vw, 5.55rem);
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.15rem 0.35rem;
  box-sizing: border-box;
  overflow-y: auto;
}
#view-words .word-col-panel .w-display-line,
#view-words .word-col-panel #wEx,
#view-words .word-col-panel #wSpellMsg {
  max-width: 100%;
}
#view-words .word-col-panel .word-big {
  font-size: clamp(2.25rem, 3.9vw, 3.2rem);
  line-height: 1.32;
  font-weight: 600;
}
#view-words .word-col-panel #wEx {
  font-size: clamp(1.38rem, 2.25vw, 1.78rem);
  line-height: 1.5;
  font-weight: 600;
  color: #3a3a3a;
}
#view-words .word-col-panel #wSpellMsg {
  font-size: clamp(1.08rem, 1.7vw, 1.32rem);
}
#view-words .w-sound-wrap,
.word-col-panel .w-sound-wrap,
.view-body--words .w-sound-wrap {
  --sb-size: clamp(4.25rem, 6.2vw, 5.55rem);
  width: 100%;
  max-width: 100%;
}
#view-words .w-sb-grid,
.view-body--words .w-sb-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 0.28rem 0.4rem;
  width: 100%;
  max-width: 100%;
  margin: 0.12rem 0 0.2rem;
  overflow: visible;
}
#view-words .w-sb-col,
.view-body--words .w-sb-col {
  flex: 0 0 auto;
  width: auto;
  min-width: var(--sb-size);
  max-width: none;
  padding-top: 1.7rem;
}
#view-words .w-sb-box,
.view-body--words .w-sb-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  height: var(--sb-size);
  min-width: var(--sb-size);
  min-height: var(--sb-size);
  max-width: none;
  max-height: var(--sb-size);
  aspect-ratio: auto;
  font-size: calc(var(--sb-size) * 0.5);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: visible;
  border-radius: 10px;
  padding: 0 0.38em !important;
}
#view-words .w-sb-hint-under {
  font-size: 0.9rem;
  max-width: 100%;
  overflow: visible;
  font-family: "Noto Sans SC", "Segoe UI", sans-serif;
}
#view-words .w-sb-combo-tag {
  font-size: 0.78rem;
  padding: 0.12rem 0.38rem;
  max-width: min(14rem, 100%);
}
#view-words .w-sb-caption,
.view-body--words .w-sb-caption {
  font-size: clamp(1.18rem, 2.05vw, 1.62rem);
}
#view-words #wActions .btn,
#view-words .word-step-nav .btn {
  min-height: 2.75rem;
  font-size: 1.02rem;
  padding: 0.42rem 1.15rem;
}
@media (max-width: 820px) {
  #view-words .word-study-wrap,
  .word-study-wrap {
    grid-template-columns: 1fr;
    max-width: 100%;
    padding: 0.2rem 0.4rem 0.35rem;
    gap: 0.65rem;
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
  }
  #view-words .word-col-art,
  .word-col-art {
    max-width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
  }
  #view-words .word-col-art .hero-art,
  .word-col-art .hero-art,
  #view-words .word-col-art .polaroid,
  .word-col-art .polaroid {
    height: auto;
    max-height: none;
  }
  #view-words .word-col-art .art-img,
  .word-col-art .art-img {
    max-height: min(44dvh, 22rem);
  }
  #view-words .word-col-panel,
  .word-col-panel {
    --sb-size: clamp(3.55rem, 13vw, 4.4rem);
    max-width: 100%;
    width: 100%;
    padding: 0.15rem 0.25rem 0.3rem;
  }
  #view-words .w-sound-wrap,
  .word-col-panel .w-sound-wrap,
  .view-body--words .w-sound-wrap {
    --sb-size: clamp(3.55rem, 13vw, 4.4rem);
  }
}

/* 学单词：单词列表快跳 + 听音排序 / 看图造句 */
.word-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: none;
  max-height: 5.6rem;
  overflow-y: auto;
  margin: 0 0 0.35rem;
  padding: 0.15rem 0;
  box-sizing: border-box;
  scrollbar-width: thin;
}
.word-jump-chip {
  appearance: none;
  font-family: "Noto Sans SC", sans-serif;
  font-weight: 700;
  font-size: clamp(0.68rem, 1.05vw, 0.78rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  min-height: 1.7rem;
  padding: 0.22rem 0.52rem;
  border-radius: 999px;
  border: 1.5px solid #1a1a1a;
  background: #fff;
  color: #1a1a1a;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.word-jump-chip:hover { background: #fff6c8; }
.word-jump-chip.is-on {
  background: var(--ng-gold, #F5C400);
  box-shadow: 0 2px 0 rgba(0,0,0,.1);
}
.word-jump-chip .zh {
  font-weight: 500;
  opacity: 0.72;
  margin-left: 0.18rem;
}
.w-say-box,
.w-sort-box {
  width: 100%;
  max-width: 100%;
  margin: 0.1rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: stretch;
}
.w-say-hint {
  margin: 0;
  text-align: left;
  font-size: 0.92rem;
  line-height: 1.4;
  color: #5c5c5c;
}
.w-say-input {
  width: 100%;
  min-height: 3.6rem;
  resize: vertical;
  font-family: "Source Serif 4", "Noto Serif SC", Georgia, serif;
  font-size: 1.22rem;
  line-height: 1.45;
  padding: 0.45rem 0.6rem;
  border: 2px solid #1a1a1a;
  border-radius: 8px;
  background: #fff;
  color: #1a1a1a;
}
.w-say-input:focus {
  outline: 3px solid rgba(245, 196, 0, 0.45);
  outline-offset: 1px;
}
.w-say-tools {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0.4rem;
}
.w-say-box .btn.is-rec {
  background: #e11d48;
  color: #fff;
  border-color: #e11d48;
  animation: w-say-recpulse 1s ease-in-out infinite;
}
@keyframes w-say-recpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, .45); }
  50% { box-shadow: 0 0 0 8px rgba(225, 29, 72, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .w-say-box .btn.is-rec { animation: none; }
}
.w-say-score {
  display: none;
  margin: 0;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  text-align: left;
}
.w-say-score.is-on { display: block; }
.w-say-score-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  font-weight: 800;
  color: #0c4a6e;
}
.w-say-score-head b {
  font-size: 1.25rem;
  color: #0369a1;
}
.w-say-score p {
  margin: 0.28rem 0 0;
  color: #075985;
  font-size: 0.95rem;
  line-height: 1.4;
}
.w-say-score .w-say-better { color: #0f766e; }
.w-say-model {
  display: none;
  margin: 0;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  background: #EEF1E8;
  border: 1px solid #c8c4b8;
  border-left: 3px solid var(--ng-gold, #F5C400);
  text-align: left;
}
.w-say-model.is-on { display: block; }
.w-say-model .en {
  margin: 0;
  font-family: "Source Serif 4", Georgia, "Noto Serif SC", serif;
  font-size: clamp(1.22rem, 2vw, 1.52rem);
  font-weight: 600;
}
.w-say-model .zh {
  margin: 0.15rem 0 0;
  color: #5c5c5c;
  font-size: 1.05rem;
}
.w-sort-pool,
.w-sort-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  min-height: 2.4rem;
}
.w-sort-line {
  min-height: 3rem;
  padding: 0.4rem 0.45rem;
  border: 2px dashed #8a8478;
  border-radius: 10px;
  background: #faf8f3;
  align-items: center;
}
.w-sort-line.is-ok {
  border-style: solid;
  border-color: #2C4A3E;
  background: #EDF2EC;
}
.w-sort-tile {
  appearance: none;
  font-family: "Source Serif 4", Georgia, "Noto Serif SC", serif;
  font-weight: 700;
  font-size: clamp(0.92rem, 1.3vw, 1.05rem);
  min-height: 2.3rem;
  padding: 0.28rem 0.62rem;
  border-radius: 8px;
  border: 2px solid #1a1a1a;
  background: #fff;
  color: #1a1a1a;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 2px 0 rgba(0,0,0,.08);
}
.w-sort-tile:hover { background: #fff6c8; }
.w-sort-tile.is-used { opacity: 0.28; cursor: default; }
.w-sort-hint {
  margin: 0;
  text-align: center;
  color: #5c5c5c;
  font-size: 0.82rem;
}
@media (max-width: 820px) {
  .word-jump { max-width: none; width: 100%; }
  .word-jump-chip { min-height: 2rem; font-size: 0.74rem; }
}

/* 顶栏收成一行书名，腾出学单词舞台 */
body:has(.word-study-wrap) .book-sub,
body:has(.word-study-wrap) .ng-bar,
body:has(.word-study-wrap) .book-title em {
  display: none !important;
}
body:has(.word-study-wrap) .book-top {
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem 0.55rem;
  padding: 0.02rem 0 0.1rem;
  margin: 0 0 0.08rem;
}
body:has(.word-study-wrap) .book-top-left {
  flex: 0 1 auto;
  min-width: 0;
}
body:has(.word-study-wrap) .book-title {
  font-size: clamp(0.95rem, 1.35vw, 1.18rem) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  line-height: 1.2;
}
body:has(.word-study-wrap) .book-inner {
  padding: 0.08rem 0.22rem 0.08rem 0.36rem;
}
body:has(.word-study-wrap) .book-cover {
  border-radius: 0;
  box-shadow: none;
}
body:has(.word-study-wrap) #view-words .view-body--words > h2 {
  display: none !important;
}

/* 单词列表折叠：默认收起，少占高度 */
.word-jump-fold {
  width: 100%;
  margin: 0 0 0.18rem;
  border: 1.5px solid #1a1a1a;
  border-radius: 8px;
  background: #fff;
  flex-shrink: 0;
  box-sizing: border-box;
}
.word-jump-fold > summary.word-jump-summary,
.word-jump-fold > summary {
  cursor: pointer;
  list-style: none;
  font-family: "Noto Sans SC", sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.2;
  padding: 0.26rem 0.65rem;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}
.word-jump-fold > summary::-webkit-details-marker {
  display: none;
}
.word-jump-fold > summary::before {
  content: "▸";
  font-size: 0.72rem;
  color: #4a4a4a;
}
.word-jump-fold[open] > summary::before {
  content: "▾";
}
.word-jump-fold .word-jump {
  max-height: min(8.2rem, 26vh);
  margin: 0;
  padding: 0.12rem 0.4rem 0.35rem;
}

/* 桌面铺满视口，去掉 16:9 左右留白 */
@media (pointer: fine) and (min-width: 821px), (min-width: 1025px) {
  body:has(> .app):has(.word-study-wrap) {
    align-items: stretch;
    justify-content: flex-start;
  }
  body:has(> .app):has(.word-study-wrap) > .app {
    width: 100%;
    max-width: none;
    aspect-ratio: auto;
    margin: 0;
  }
}
@media (pointer: coarse) and (max-width: 1024px), (max-width: 820px) {
  #view-words .word-study-wrap,
  .word-study-wrap {
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
  }
  #view-words .word-col-art,
  .word-col-art,
  #view-words .word-col-art .hero-art,
  .word-col-art .hero-art,
  #view-words .word-col-art .polaroid,
  .word-col-art .polaroid {
    height: auto;
    max-height: none;
    overflow: visible;
  }
  body:has(.word-study-wrap) .book-top {
    flex-wrap: wrap;
  }
  body:has(.word-study-wrap) .book-top-right {
    width: 100%;
  }
  body:has(> .app):has(.word-study-wrap) {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    background: #F7F5F0;
  }
  body:has(> .app):has(.word-study-wrap) > .app {
    width: 100%;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }
}