/* ============================================================
   写歪歪 · 英语单词字帖
   ============================================================ */

#wordInput {
  display: block;
  width: 100%;
  min-height: 88px;
  max-height: 180px;
  padding: 13px 14px 4px;
  resize: vertical;
  color: #2d2927;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.75;
}
#wordInput::placeholder {
  color: #b2aaa5;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 1.7;
}

/* 书写格选择 */
.guide-type-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.mini-guide {
  position: relative;
  width: 36px;
  height: 30px;
  color: #9e948d;
}
.mini-guide i {
  position: absolute;
  right: 0;
  left: 0;
  height: 0;
  border-top: 1px solid currentColor;
}
.mini-guide-four i:nth-child(1) { top: 4px; }
.mini-guide-four i:nth-child(2) { top: 12px; }
.mini-guide-four i:nth-child(3) { top: 20px; color: var(--orange); border-top-width: 1.5px; }
.mini-guide-four i:nth-child(4) { top: 28px; }
.mini-guide-single i { top: 20px; }
.guide-type.is-active .mini-guide { color: #ffb192; }
.guide-type.is-active .mini-guide i:nth-child(3) { color: var(--orange); }

.practice-segmented { flex: 0 0 auto; }
.practice-segmented button {
  min-width: 47px;
  padding-right: 6px;
  padding-left: 6px;
  white-space: nowrap;
}

/* 线格主题 */
.theme-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.theme-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 37px;
  padding: 5px 3px;
  color: #7e746e;
  border: 1.5px solid var(--line);
  border-radius: 9px;
  background: #fbfaf9;
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.theme-option:hover { color: var(--orange); border-color: #ffc9b3; background: #fffaf7; }
.theme-option.is-active {
  color: var(--orange);
  border-color: var(--orange);
  background: #fff8f3;
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.06);
}
.theme-dot {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border: 3px solid var(--theme-line);
  border-radius: 6px;
  background: var(--theme-base);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

/* 英语字帖页 */
.word-sheet-content {
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 4mm;
  overflow: hidden;
}
.word-rows {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.word-row {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  overflow: visible;
}
.guide-line {
  position: absolute;
  right: 0;
  left: 0;
  height: 0;
  border-top: 0.18mm solid var(--guide-color, #d2d2d2);
  pointer-events: none;
}
.guide-line.top { top: 0; }
.guide-line.second { top: 33.333%; }
.guide-line.base {
  top: 66.666%;
  border-top: 0.28mm solid var(--baseline-color, #777777);
}
.guide-line.bottom { top: 100%; }

.word-row.is-single .guide-line.top,
.word-row.is-single .guide-line.second,
.word-row.is-single .guide-line.bottom {
  display: none;
}
.word-row.is-single .guide-line.base { top: 72%; }

.word-slots {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
}
.word-slot {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}
.word-slot + .word-slot::before {
  display: none;
}
.word-text {
  position: absolute;
  bottom: calc(33.333% - 0.10em);
  left: 50%;
  display: block;
  max-width: 96%;
  overflow: visible;
  color: #2a2522;
  font-family: var(--word-font, "Comic Sans MS", "Segoe Print", "Bradley Hand", "Chalkboard SE", "PingFang SC", cursive);
  font-size: var(--word-size, 48px);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
  transform: translateX(-50%);
}
.word-row.is-single .word-text { bottom: calc(28% - 0.22em); }
.word-text.is-trace {
  color: rgba(48, 44, 42, 0.24);
  -webkit-text-stroke: 0.012em rgba(48, 44, 42, 0.15);
  paint-order: stroke fill;
}
.word-text.is-print { font-weight: 500; }
.word-text.is-italic {
  font-family: "Segoe UI", Arial, "Helvetica Neue", sans-serif;
  font-style: italic;
  transform: translateX(-50%) skewX(-7deg);
}
.word-row.is-copy .word-text.is-italic { transform: skewX(-7deg); }
/* 示范+临写：只显示一遍示范词，占满整行，避免长短语被压小 */
.word-row.is-copy .word-text {
  left: 2%;
  max-width: 96%;
  text-align: left;
  transform: none;
}

/* 页面主题变量 */
.sheet-page.word-sheet {
  --guide-color: #d9d9d9;
  --baseline-color: #ff6b35;
  --sep-color: #ece7e3;
}

@media (max-width: 1180px) {
  .practice-segmented button { min-width: 42px; font-size: 9px; }
  .theme-option { font-size: 8.5px; gap: 4px; }
  .theme-dot { width: 15px; height: 15px; }
}

@media (max-width: 560px) {
  .guide-type-list { gap: 6px; }
  .theme-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .practice-segmented { width: 100%; }
  .practice-segmented button { flex: 1; }
  .practice-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
}