/* 假名详情弹窗样式 */
.kana-detail-mask {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,40,0.25);
  z-index: 1000;
}
.kana-detail-popup {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 32px #0002;
  z-index: 1001;
  min-width: 320px;
  max-width: 90vw;
  padding: 2rem 2.5rem 1.5rem 2.5rem;
  text-align: center;
}
.kana-detail-main { margin-top: 0.5rem; }
.kana-detail-big { margin-bottom: 1.2rem; }
.kana-detail-hira, .kana-detail-kata {
  font-family: 'Klee One', 'Hiragino Maru Gothic Pro', 'Hiragino Sans', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}
.kana-detail-hira { font-size: 3.5rem; color: #357abd; font-weight: 800; margin-right: 1.2rem; }
.kana-detail-kata { font-size: 2.7rem; color: #888; font-weight: 700; }
.kana-detail-roma { font-size: 1.2rem; color: #4a90e2; margin-bottom: 0.7rem; }
.kana-detail-origin { font-size: 1.1rem; color: #222; margin-bottom: 0.7rem; }
.kana-detail-stroke { font-size: 1.1rem; color: #357abd; margin-bottom: 0.7rem; }
.kana-detail-stroke-img { font-size: 1.3rem; color: #aaa; }
.kana-detail-close {
  position: absolute;
  right: 1.2rem;
  top: 1rem;
  font-size: 2rem;
  color: #357abd;
  cursor: pointer;
  font-weight: bold;
}
/* 全站中文字体（除假名外） */
body {
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', 'Microsoft YaHei', 'Source Han Sans SC', 'Heiti SC', 'WenQuanYi Micro Hei', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  background: #f7f7fa; margin: 0; padding: 0;
}
header { background: #5ed551; color: #fff; padding: 1.5rem 0; text-align: center; }
/* nav { margin-top: -1rem; font-size: 0.5rem; } */
/* .nav-btn { background: #eaf4ff; color: #4a90e2; border: none; padding: 0rem 0rem; margin: 0 0.5rem; border-radius: 6px; font-size: 1.1rem; cursor: pointer; } */
/* .nav-btn:hover { background: #4a90e2; color: #fff; } */
main { max-width: 900px; margin: 2rem auto; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px #0001; padding: 2rem; }
.page { margin-top: 2rem; }
.kana-table { display: flex; flex-direction: column; align-items: center; }
.kana-group { background: #eaf4ff; border-radius: 10px; padding: 1.5rem 2.5rem; margin-bottom: 2rem; width: 100%; max-width: 800px; box-sizing: border-box; }
.kana-group h3 { color: #357abd; margin-bottom: 1rem; text-align: center; }
.kana-list { display: block; }
.kana-row { display: flex; flex-direction: row; gap: 0.7rem; margin-bottom: 0.7rem; justify-content: center; }
.kana-item { background: #fff; border-radius: 8px; box-shadow: 0 1px 4px #0001; padding: 0.7rem 1.2rem; display: flex; flex-direction: column; align-items: center; min-width: 80px; cursor: pointer; transition: transform 0.08s ease, box-shadow 0.12s ease; }
.kana-item:hover { transform: translateY(-1px); box-shadow: 0 2px 8px #0002; }
.kana-roma { color: #4a90e2; font-size: 1.1rem; font-weight: bold; }
/* 页面中展示的假名（非弹窗）使用日文字体，避免受中文字体影响 */
.kana-hira { font-size: 1.5rem; color: #222; font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', 'MS PGothic', system-ui, -apple-system, sans-serif; }
.kana-kata { font-size: 1.3rem; color: #888; font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', 'MS PGothic', system-ui, -apple-system, sans-serif; }
.practice-mode { margin-bottom: 1rem; }
/* .practice-mode button { margin-top: -1rem; margin-right: 1rem; margin-bottom: 1rem; background: #eaf4ff; color: #4a90e2; border: none; padding: 0.5rem 1.2rem; border-radius: 6px; font-size: 1rem; cursor: pointer; }
.practice-mode button.active { background: #4a90e2; color: #fff; }
.practice-mode button:hover { background: #4a90e2; color: #fff; } */
.practice { margin-top: 2rem; padding: 1rem; background: #eaf4ff; border-radius: 8px; }
.score { font-size: 1.1rem; margin-bottom: 0.7rem; color: #357abd; }
#random-kana { font-size: 2.2rem; font-weight: bold; color: #4a90e2; margin-bottom: 1rem; display: block; }
#options { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 1rem; }
.option-btn { font-size: 1.1rem; padding: 0.5rem 1.5rem; background: #fff; color: #4a90e2; border: 2px solid #4a90e2; border-radius: 6px; cursor: pointer; transition: background 0.2s, color 0.2s; }
.option-btn.selected, .option-btn:active { background: #4a90e2; color: #fff; }
.option-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.practice-controls { margin-top: 0.5rem; }
.reset-btn { background: #ffecec; color: #c62828; border: 1px solid #ffcdd2; padding: 0.45rem 0.9rem; border-radius: 6px; cursor: pointer; }
.reset-btn:hover { background: #ffcdd2; }
.practice button { font-size: 1.1rem; padding: 0.3rem 1rem; background: #4a90e2; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
.practice button:hover { background: #357abd; }
.result { margin-top: 0.5rem; font-weight: bold; }
@media (max-width: 600px) {
  main { padding: 1rem; }
  .kana-group { padding: 0.5rem; }
  .kana-row { gap: 0.4rem; }
  .kana-item { min-width: 50px; padding: 0.35rem 0.5rem; }
  .kana-roma { font-size: 0.95rem; }
  .kana-hira { font-size: 1.25rem; }
  .kana-kata { font-size: 1.05rem; }
  #options { flex-direction: column; gap: 0.5rem; }
}

/* 页脚 */
.site-footer {
  margin-top: 2rem;
  padding: 1rem 0;
  text-align: center;
  color: #567;
  font-size: 0.95rem;
}
.footer-inner { display: inline-flex; gap: 0.8rem; align-items: center; }
.footer-name { font-weight: 600; }
.footer-btn {
  background: #eaf4ff;
  color: #357abd;
  border: 1px solid #cfe5ff;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.footer-btn:hover { background: #357abd; color: #fff; }

/* 单词小卡与测试样式 */
#app { padding: 16px; }
.topbar { display:flex; align-items:center;  background:#ffffff; border-bottom:1px solid #e5e7eb; top:0; z-index:10; }
/* .nav .tab-btn { margin-left:8px; margin-bottom:8px; padding:8px 12px; border:1px solid #e5e7eb; background:#fff; border-radius:8px; cursor:pointer; } */
/* .nav .tab-btn.active { background:#111827; color:#fff; border-color:#111827; } */
.view.hidden { display:none; }
.controls { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.controls select, .controls input[type="search"] { font-size: 16px; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 8px; }
.controls select { min-width: 180px; }
.cards-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
.card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:12px; box-shadow:0 1px 2px rgba(0,0,0,0.04); cursor:pointer; transition: transform .1s ease; color:#111; }
.card:hover { transform: translateY(-2px); }
.card .title { font-weight:600; font-size:18px; color:#111; }
.card .subtitle { color:#6b7280; margin-top:4px; }
.card .meaning { margin-top:8px; color:#111; }

.quiz-area { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:16px; }
.quiz-area.hidden { display:none; }
.quiz-question { font-size:20px; font-weight:600; margin-bottom:12px; color:#111; }
.quiz-options { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:8px; }
.option { padding:10px 12px; border:1px solid #e5e7eb; border-radius:8px; cursor:pointer; background:#fafafa; color:#111; }
.option.correct { border-color:#10b981; background:#ecfdf5; }
.option.wrong { border-color:#ef4444; background:#fef2f2; }
.quiz-input { display:flex; gap:8px; margin-top:8px; }
.quiz-footer { margin-top:12px; display:flex; justify-content:space-between; color:#6b7280; }

/* 顶部蓝色导航按钮在移动端的紧凑样式 */
@media (max-width: 640px) {
  header { padding: 0.8rem 0; }
  .nav-btn { padding: 0rem 0rem; margin: 0 0rem; font-size: 0.9rem; }
}

/* 卡片在手机端显示为两列而不是一列 */
@media (max-width: 640px) {
  .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}