/* =========================
   基础设置
========================= */

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

html {
  background: var(--page-bg);
}

body {
  min-height: 100vh;

  color: var(--text);

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    "Noto Serif JP",
    "MS Mincho",
    "KaiTi",
    "STKaiti",
    "Microsoft YaHei",
    serif;
}

button {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

[hidden] {
  display: none !important;
}


/* =========================
   页面背景
========================= */

.study-page {
  position: relative;

  width: 100%;
  min-height: 100vh;

  padding:
    clamp(25px, 4.5vh, 52px)
    clamp(25px, 6vw, 96px)
    clamp(60px, 8vh, 100px);

  overflow-x: hidden;

  background-color: var(--page-bg);
}

.study-page::before {
  content: "";

  position: fixed;
  inset: 0;

  z-index: 0;
  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      var(--border) 100%
    );
}

.study-header,
.mode-section,
.progress-section,
.study-view {
  position: relative;
  z-index: 2;
}


/* =========================
   页面顶部
========================= */

.study-header {
  display: grid;

  grid-template-columns:
    minmax(120px, 1fr)
    minmax(320px, 720px)
    minmax(120px, 1fr);

  align-items: start;

  width: 100%;
  margin-bottom: clamp(35px, 6vh, 65px);
}

.back-link {
  justify-self: start;

  padding: 8px 0;

  color: var(--text);
  text-decoration: none;

  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.back-link:hover {
  color: var(--text-strong);
  transform: translateX(-4px);
}

.heading-area {
  grid-column: 2;

  text-align: center;
}

.breadcrumb {
  margin: 0 0 17px;

  color: var(--text-muted);

  font-size: 0.7rem;
  letter-spacing: 0.24em;
}

.unit-number {
  margin: 0 0 12px;

  color: var(--text-muted);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.15em;
}

.heading-area h1 {
  margin: 0;

  color: var(--text);

  font-size: clamp(2.1rem, 4.2vw, 4.4rem);
  font-weight: 400;
  line-height: 1.3;

  letter-spacing: 0.12em;

  text-shadow:
    0 2px 12px var(--border);
}

.heading-translation {
  margin: 15px 0 0;

  color: var(--text-muted);

  font-family:
    "KaiTi",
    "STKaiti",
    "Microsoft YaHei",
    "PingFang SC",
    sans-serif;

  font-size: 0.74rem;
  letter-spacing: 0.19em;
}


/* =========================
   模式切换
========================= */

.mode-section {
  display: flex;
  justify-content: center;

  width: min(760px, 88vw);
  margin: 0 auto 34px;

  border-top:
    1px solid var(--border);

  border-bottom:
    1px solid var(--border);
}

.mode-button {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;

  width: 50%;
  padding: 17px 20px 15px;

  border: 0;
  background: transparent;

  color: var(--text-muted);

  cursor: pointer;

  transition:
    color 0.3s ease,
    background-color 0.3s ease;
}

.mode-button + .mode-button {
  border-left:
    1px solid var(--border);
}

.mode-button:hover {
  color: var(--text-strong);

  background:
    rgba(255, 255, 255, 0.25);
}

.mode-button.active {
  color: var(--text-strong);

  background:
    rgba(255, 255, 255, 0.4);
}

.mode-button.active::after {
  content: "";

  position: absolute;
  right: 25%;
  bottom: -1px;
  left: 25%;

  height: 2px;

  background:
    var(--border-strong);
}

.mode-japanese {
  font-size: 1.08rem;
  letter-spacing: 0.2em;
}

.mode-chinese {
  margin-top: 7px;

  font-family:
    "KaiTi",
    "STKaiti",
    "Microsoft YaHei",
    "PingFang SC",
    sans-serif;

  font-size: 0.65rem;
  letter-spacing: 0.14em;
}


/* =========================
   学习进度
========================= */

.progress-section {
  width: min(900px, 88vw);
  margin: 0 auto 58px;

  padding: 24px clamp(20px, 4vw, 42px);

  border:
    1px solid var(--border);

  background:
    rgba(255, 255, 255, 0.26);

  backdrop-filter: blur(3px);
}

.progress-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;

  margin-bottom: 22px;
}

.progress-title {
  margin: 0;

  color: var(--text);

  font-size: 0.92rem;
  letter-spacing: 0.18em;
}

.progress-subtitle {
  margin: 7px 0 0;

  color: var(--text-muted);

  font-family:
    "KaiTi",
    "STKaiti",
    "Microsoft YaHei",
    "PingFang SC",
    sans-serif;

  font-size: 0.63rem;
  letter-spacing: 0.13em;
}

.reset-button {
  padding: 8px 3px;

  border: 0;
  border-bottom:
    1px solid var(--border);

  background: transparent;

  color: var(--text-muted);

  font-size: 0.68rem;
  letter-spacing: 0.13em;

  cursor: pointer;

  transition:
    color 0.3s ease,
    border-color 0.3s ease;
}

.reset-button:hover {
  color: var(--text-strong);

  border-color: var(--text-muted);
}

.progress-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  border-top:
    1px solid var(--border);

  border-bottom:
    1px solid var(--border);
}

.progress-item {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 18px 8px;
}

.progress-item + .progress-item {
  border-left:
    1px solid var(--border);
}

.progress-number {
  color: var(--text);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 1.45rem;
  font-weight: 400;
}

.progress-label {
  margin-top: 7px;

  color: var(--text-muted);

  font-family:
    "KaiTi",
    "STKaiti",
    "Microsoft YaHei",
    "PingFang SC",
    sans-serif;

  font-size: 0.65rem;
  letter-spacing: 0.12em;
}


/* =========================
   内容区域
========================= */

.study-view {
  width: min(1040px, 90vw);
  margin: 0 auto;
}

.section-heading {
  margin-bottom: 22px;
}

.section-japanese {
  margin: 0;

  color: var(--text);

  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.2em;
}

.section-chinese {
  margin: 8px 0 0;

  color: var(--text-muted);

  font-family:
    "KaiTi",
    "STKaiti",
    "Microsoft YaHei",
    "PingFang SC",
    sans-serif;

  font-size: 0.68rem;
  letter-spacing: 0.13em;
}


/* =========================
   词汇表
========================= */

.vocabulary-list {
  border-top:
    1px solid var(--border);
}

.vocabulary-entry {
  display: grid;

  grid-template-columns:
    55px
    minmax(165px, 0.78fr)
    minmax(175px, 0.72fr)
    minmax(300px, 1.5fr)
    80px;

  align-items: center;

  min-height: 126px;
  padding: 18px 10px;

  border-bottom:
    1px solid var(--border);

  background:
    rgba(255, 255, 255, 0.14);

  transition:
    background-color 0.3s ease,
    padding-left 0.3s ease;
}

.vocabulary-entry:hover {
  padding-left: 18px;

  background:
    rgba(255, 255, 255, 0.34);
}

.entry-number {
  color: var(--text-muted);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 0.7rem;
  letter-spacing: 0.07em;
}

.entry-word {
  color: var(--text);

  font-size: clamp(1.2rem, 2vw, 1.7rem);
  letter-spacing: 0.08em;
}

.entry-reading {
  display: block;
  margin-top: 8px;

  color: var(--text-muted);

  font-size: 0.74rem;
  letter-spacing: 0.09em;
}

.entry-meaning {
  color: var(--text);

  font-family:
    "KaiTi",
    "STKaiti",
    "Microsoft YaHei",
    "PingFang SC",
    sans-serif;

  font-size: 0.84rem;
  letter-spacing: 0.08em;
}

.entry-type {
  display: block;

  margin-bottom: 9px;

  color: var(--text-muted);

  font-size: 0.64rem;
  letter-spacing: 0.12em;
}

.entry-example {
  color: var(--text);

  font-size: 0.94rem;
  line-height: 1.75;
  letter-spacing: 0.07em;
}

.entry-translation {
  display: block;
  margin-top: 7px;

  color: var(--text-muted);

  font-family:
    "KaiTi",
    "STKaiti",
    "Microsoft YaHei",
    "PingFang SC",
    sans-serif;

  font-size: 0.67rem;
  line-height: 1.65;
  letter-spacing: 0.07em;
}

.entry-status {
  justify-self: end;

  padding: 6px 8px;

  border:
    1px solid var(--border);

  color: var(--text-muted);

  font-family:
    "KaiTi",
    "STKaiti",
    "Microsoft YaHei",
    "PingFang SC",
    sans-serif;

  font-size: 0.59rem;
  letter-spacing: 0.08em;
}

.entry-status.known {
  color: var(--text);

  border-color: var(--text-faint);
}

.entry-status.fuzzy {
  color: rgba(111, 80, 18, 0.72);

  border-color:
    rgba(111, 80, 18, 0.22);
}

.entry-status.unknown {
  color: rgba(110, 48, 48, 0.7);

  border-color:
    rgba(110, 48, 48, 0.22);
}


/* =========================
   背诵模式
========================= */

#memoryView {
  width: min(760px, 90vw);
}

.memory-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 17px;
}

.card-position,
.memory-tip {
  margin: 0;

  color: var(--text-muted);

  font-size: 0.68rem;
  letter-spacing: 0.13em;
}

.memory-tip {
  font-family:
    "KaiTi",
    "STKaiti",
    "Microsoft YaHei",
    "PingFang SC",
    sans-serif;

  font-size: 0.63rem;
}

.flashcard {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 430px;

  padding: 55px clamp(28px, 7vw, 75px);

  border:
    1px solid var(--border);

  background:
    rgba(255, 255, 255, 0.7);

  box-shadow:
    0 20px 55px var(--border);

  color: var(--text);

  text-align: center;

  cursor: pointer;

  transition:
    transform 0.35s ease,
    background-color 0.35s ease,
    box-shadow 0.35s ease;
}

.flashcard:hover {
  transform: translateY(-3px);

  background:
    rgba(255, 255, 255, 0.85);

  box-shadow:
    0 24px 65px var(--border);
}

.card-front-label {
  position: absolute;
  top: 24px;
  left: 27px;

  color: var(--text-faint);

  font-size: 0.62rem;
  letter-spacing: 0.2em;
}

.card-word {
  font-size: clamp(2rem, 5.5vw, 4.8rem);
  line-height: 1.35;
  letter-spacing: 0.09em;
}

.card-answer {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;
  margin-top: 27px;
}

.card-reading {
  color: var(--text-muted);

  font-size: 0.95rem;
  letter-spacing: 0.11em;
}

.card-type {
  margin-top: 16px;

  color: var(--text-muted);

  font-size: 0.65rem;
  letter-spacing: 0.13em;
}

.card-meaning {
  margin-top: 8px;

  color: var(--text);

  font-family:
    "KaiTi",
    "STKaiti",
    "Microsoft YaHei",
    "PingFang SC",
    sans-serif;

  font-size: 1.02rem;
  letter-spacing: 0.1em;
}

.card-divider {
  width: 60px;
  height: 1px;
  margin: 26px 0;

  background:
    var(--border);
}

.card-example {
  color: var(--text);

  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.7;
  letter-spacing: 0.06em;
}

.card-translation {
  margin-top: 10px;

  color: var(--text-muted);

  font-family:
    "KaiTi",
    "STKaiti",
    "Microsoft YaHei",
    "PingFang SC",
    sans-serif;

  font-size: 0.72rem;
  line-height: 1.65;
  letter-spacing: 0.07em;
}

.card-hint {
  position: absolute;
  right: 25px;
  bottom: 22px;

  color: var(--text-faint);

  font-size: 0.61rem;
  letter-spacing: 0.13em;
}


/* 掌握程度按钮 */

.rating-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  margin-top: 24px;

  border-top:
    1px solid var(--border);

  border-bottom:
    1px solid var(--border);
}

.rating-button {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 15px 10px;

  border: 0;
  background: transparent;

  color: var(--text-muted);

  cursor: pointer;

  transition:
    color 0.3s ease,
    background-color 0.3s ease;
}

.rating-button + .rating-button {
  border-left:
    1px solid var(--border);
}

.rating-button:hover {
  color: var(--text-strong);

  background:
    rgba(255, 255, 255, 0.32);
}

.rating-button.active {
  color: var(--text-strong);

  background:
    rgba(255, 255, 255, 0.52);
}

.rating-main {
  font-family:
    "KaiTi",
    "STKaiti",
    "Microsoft YaHei",
    "PingFang SC",
    sans-serif;

  font-size: 0.78rem;
  letter-spacing: 0.1em;
}

.rating-sub {
  margin-top: 6px;

  font-size: 0.61rem;
  letter-spacing: 0.1em;
}


/* 卡片导航 */

.card-navigation {
  display: flex;
  justify-content: space-between;

  margin-top: 23px;
}

.navigation-button {
  min-width: 110px;
  padding: 10px 4px;

  border: 0;
  border-bottom:
    1px solid var(--border);

  background: transparent;

  color: var(--text-muted);

  font-size: 0.72rem;
  letter-spacing: 0.12em;

  cursor: pointer;

  transition:
    color 0.3s ease,
    border-color 0.3s ease;
}

.navigation-button:hover {
  color: var(--text-strong);

  border-color: var(--text-muted);
}


/* =========================
   平板适配
========================= */

@media (max-width: 1050px) {
  .vocabulary-entry {
    grid-template-columns:
      45px
      minmax(150px, 0.8fr)
      minmax(150px, 0.72fr)
      minmax(240px, 1.3fr)
      65px;
  }
}


/* =========================
   手机适配
========================= */

@media (max-width: 760px) {
  .study-page {
    padding:
      22px
      7vw
      55px;

    background-position: 38% top;
    background-attachment: scroll;
  }

  .study-page::before {
    position: absolute;

    background:
      rgba(255, 255, 255, 0.7);
  }


  /* 顶部 */

  .study-header {
    display: block;
    margin-bottom: 39px;
  }

  .back-link {
    display: inline-block;
    margin-bottom: 30px;
  }

  .heading-area h1 {
    font-size: clamp(1.8rem, 8vw, 2.8rem);
    letter-spacing: 0.08em;
  }


  /* 模式按钮 */

  .mode-section {
    width: 100%;
  }


  /* 学习记录 */

  .progress-section {
    width: 100%;
    margin-bottom: 45px;
    padding: 20px 15px;
  }

  .progress-heading {
    align-items: flex-start;
  }

  .progress-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .progress-item:nth-child(3) {
    border-left: 0;

    border-top:
      1px solid var(--border);
  }

  .progress-item:nth-child(4) {
    border-top:
      1px solid var(--border);
  }


  /* 词汇表 */

  .study-view {
    width: 100%;
  }

  .vocabulary-entry {
    display: grid;

    grid-template-columns:
      34px
      1fr;

    gap: 13px 8px;

    min-height: 0;
    padding: 22px 4px;
  }

  .vocabulary-entry:hover {
    padding-left: 4px;
  }

  .entry-number {
    grid-row: 1 / 4;
  }

  .entry-word,
  .entry-meaning,
  .entry-example {
    grid-column: 2;
  }

  .entry-word {
    font-size: 1.35rem;
  }

  .entry-reading {
    font-size: 0.7rem;
  }

  .entry-meaning {
    padding-top: 2px;
  }

  .entry-example {
    padding-top: 8px;

    border-top:
      1px solid var(--border);
  }

  .entry-status {
    grid-column: 2;
    justify-self: start;

    margin-top: 3px;
  }


  /* 背诵卡 */

  #memoryView {
    width: 100%;
  }

  .flashcard {
    min-height: 410px;
    padding: 55px 24px;
  }

  .card-word {
    font-size: clamp(2rem, 11vw, 3.5rem);
  }

  .memory-tip {
    display: none;
  }

  .rating-main {
    font-size: 0.72rem;
  }

  .rating-sub {
    font-size: 0.56rem;
  }
}
/* =========================
   圆润字体调整
========================= */

body,
button,
.back-link,
.heading-area,
.mode-section,
.progress-section,
.study-view {
  font-family:
    "Hiragino Maru Gothic ProN",
    "Yu Gothic",
    "Yu Gothic UI",
    "Meiryo",
    "KaiTi",
    "STKaiti",
    "Microsoft YaHei",
    "PingFang SC",
    sans-serif;
}

/* 日语标题稍微圆润、不要过粗 */
.heading-area h1,
.card-word,
.entry-word {
  font-family:
    "Hiragino Maru Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    "KaiTi",
    "STKaiti",
    "Microsoft YaHei",
    sans-serif;

  font-weight: 500;
}

/* 英文与数字也不要显得太生硬 */
.unit-number,
.progress-number,
.entry-number,
.card-position {
  font-family:
    "Trebuchet MS",
    "Arial Rounded MT Bold",
    "Yu Gothic UI",
    sans-serif;
}