/* hungarian-alphabet-1: colours and course-only rules for kana.css */

.kana-lesson.hungarian-alphabet-1 {
  --c1: #5aa469;
  --c2: #14301c;
}

.kana-lesson:where(.hungarian-alphabet-1) .dialog-line .hu {
  font-size: 1.05em;
  display: block;
  margin-left: 28px;
  color: #e2e4ec;
}

.kana-lesson:where(.hungarian-alphabet-1) .hu-word {
  font-size: 1.45rem;
  font-family: 'Noto Sans JP', 'Yu Gothic', 'Meiryo', sans-serif;
  color: #fff;
}

.kana-lesson:where(.hungarian-alphabet-1) .vocab-table .hu-word {
  white-space: nowrap;
}

.kana-lesson:where(.hungarian-alphabet-1) .vowel-strip {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 6px;
  font-family: system-ui, -apple-system, sans-serif;
}

.kana-lesson:where(.hungarian-alphabet-1) .vs-cell {
  width: 92px;
  text-align: center;
  border-radius: 8px;
  padding: 10px 0 8px;
  background: #1a1d27;
  border: 1px solid #2a2d3a;
}

.kana-lesson:where(.hungarian-alphabet-1) .vs-cell.new {
  background: #14301c;
  border-color: #5aa469;
}

.kana-lesson:where(.hungarian-alphabet-1) .vs-kana {
  display: block;
  font-size: 2.6rem;
  line-height: 1.1;
  color: #fff;
  font-family: 'Noto Sans JP', 'Yu Gothic', 'Meiryo', sans-serif;
}

.kana-lesson:where(.hungarian-alphabet-1) .vs-cell.old .vs-kana {
  color: #c9d1d9;
}

.kana-lesson:where(.hungarian-alphabet-1) .vs-rom {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: #5aa469;
  margin-top: 2px;
}

.kana-lesson:where(.hungarian-alphabet-1) .kana-map td.old {
  color: #c9d1d9;
}

.kana-lesson:where(.hungarian-alphabet-1) .recap-box {
  background: #1a1d27;
  border: 1px solid #5aa469;
  border-radius: 8px;
  padding: 16px 20px;
  margin-top: 28px;
}

.kana-lesson:where(.hungarian-alphabet-1) .recap-box h3 {
  margin: 0 0 6px;
  color: #5aa469;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1.05rem;
}

.kana-lesson:where(.hungarian-alphabet-1) .hu-word {
  font-size: 1.3rem;
  color: #fff;
  font-family: 'Georgia', serif;
}

.kana-lesson:where(.hungarian-alphabet-1) .alpha-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin: 12px 0 8px;
  font-family: system-ui, -apple-system, sans-serif;
}

.kana-lesson:where(.hungarian-alphabet-1) .al {
  text-align: center;
  padding: 8px 0;
  border-radius: 6px;
  font-size: 1.15rem;
  border: 1px solid #2a2d3a;
  background: #14161e;
  color: #8b93a8;
}

.kana-lesson:where(.hungarian-alphabet-1) .al-back {
  color: #c9f0d5;
  background: #14301c;
  border-color: #2c5a3a;
}

.kana-lesson:where(.hungarian-alphabet-1) .al-front {
  color: #bfe3f5;
  background: #12283a;
  border-color: #2a4f6b;
}

.kana-lesson:where(.hungarian-alphabet-1) .al-now {
  outline: 2px solid #5aa469;
  background: #1f5030;
  color: #fff;
  font-weight: 700;
}

.kana-lesson:where(.hungarian-alphabet-1) .al-key {
  display: inline-block;
  padding: 1px 10px;
  border-radius: 10px;
  margin-right: 6px;
  font-size: 0.85em;
  border: 1px solid #2a2d3a;
}

.kana-lesson:where(.hungarian-alphabet-1) .rule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 12px 0 22px;
  font-family: system-ui, -apple-system, sans-serif;
}

.kana-lesson:where(.hungarian-alphabet-1) .rule-card {
  background: #1a1d27;
  border: 1px solid #2a2d3a;
  border-top: 3px solid #5aa469;
  border-radius: 8px;
  padding: 14px 16px;
}

.kana-lesson:where(.hungarian-alphabet-1) .rule-num {
  font-size: 1.6rem;
  font-weight: 700;
  color: #5aa469;
  line-height: 1;
}

.kana-lesson:where(.hungarian-alphabet-1) .rule-title {
  font-weight: 700;
  color: #fff;
  margin: 6px 0 4px;
}

.kana-lesson:where(.hungarian-alphabet-1) .rule-text {
  font-size: 0.88em;
  color: #c9d1d9;
  line-height: 1.5;
}

.kana-lesson:where(.hungarian-alphabet-1) .vocab-table tr.row-now td {
  background: #14301c;
}

@media (max-width: 600px) {
  .kana-lesson:where(.hungarian-alphabet-1) .alpha-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

.kana-lesson:where(.hungarian-alphabet-1) .tip-box .hu-word {
  font-size: 1.05em;
}

.kana-lesson:where(.hungarian-alphabet-1) .vocab-table tr.row-back td:first-child {
  border-left: 3px solid #5aa469;
}

.kana-lesson:where(.hungarian-alphabet-1) .vocab-table tr.row-front td:first-child {
  border-left: 3px solid #4a8fb8;
}

.kana-lesson:where(.hungarian-alphabet-1) .vocab-table tr.row-round td:first-child {
  border-left: 3px solid #b07ad6;
}