.km-root {
  --km-navy:       #1e3a5f;
  --km-navy-dark:  #142844;
  --km-navy-light: #2a4f7c;
  --km-gold:       #d4af37;
  --km-white:      #ffffff;
  --km-bg:         #eef2f7;
  --km-correct:    #2ecc71;
  --km-wrong:      #e74c3c;
  --km-gray:       #8899aa;
  --km-panel-bg:   #e8eff7;
  --km-sidebar-w:  220px;

  all: unset;
  display: block;
  box-sizing: border-box;
  font-family: 'BIZ UDGothic', sans-serif;
  background: var(--km-bg);
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.km-root *, .km-root *::before, .km-root *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ヘッダー */
.km-root .km-header {
  width: 100%;
  background: var(--km-navy);
  padding: 8px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 3px 10px rgba(0,0,0,0.35);
  height: 52px;
  flex-shrink: 0;
}
.km-root .km-header h1 {
  font-family: 'Dela Gothic One', sans-serif;
  font-size: 1.3rem;
  color: var(--km-gold);
  letter-spacing: 3px;
  font-weight: 400;
  line-height: 1;
}
.km-root .km-hdr-right { display: flex; align-items: center; gap: 12px; }
.km-root .km-hdr-info {
  font-family: 'Dela Gothic One', sans-serif;
  font-size: 0.95rem;
  color: var(--km-gold);
}
.km-root .km-score-badge {
  background: var(--km-wrong);
  color: #fff;
  font-family: 'Dela Gothic One', sans-serif;
  font-size: 0.88rem;
  padding: 4px 14px;
  border-radius: 99px;
  letter-spacing: 1px;
}

/* 3カラム */
.km-root .km-body {
  display: grid;
  grid-template-columns: var(--km-sidebar-w) 1fr var(--km-sidebar-w);
  height: calc(100vh - 52px);
  overflow: hidden;
}

/* サイドバー */
.km-root .km-sidebar {
  background: var(--km-white);
  border-right: 1px solid #d0dce8;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 12px 10px;
  gap: 10px;
}
.km-root .km-sidebar.km-right { border-right: none; border-left: 1px solid #d0dce8; }
.km-root .km-sidebar-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--km-gray);
  letter-spacing: 1px;
  flex-shrink: 0;
}

/* コントロールブロック */
.km-root .km-ctrl-block { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.km-root .km-ctrl-label { font-size: 0.75rem; color: var(--km-gray); }

/* パネルサイズ表示バッジ（サイドバー） */
.km-root .km-size-badge {
  background: var(--km-navy);
  color: #fff;
  font-family: 'Dela Gothic One', sans-serif;
  font-size: 1rem;
  text-align: center;
  padding: 8px 4px;
  border-radius: 8px;
  letter-spacing: 2px;
}

/* タイマー */
.km-root .km-timer-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.km-root .km-timer-ring {
  position: relative; width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
}
.km-root .km-timer-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.km-root .km-timer-track {
  fill: none; stroke: #d0dce8; stroke-width: 4;
}
.km-root .km-timer-arc {
  fill: none; stroke: var(--km-correct); stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 113.1; /* 2π×18 */
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear, stroke 0.3s;
}
.km-root .km-timer-arc.km-timer-warn  { stroke: var(--km-gold); }
.km-root .km-timer-arc.km-timer-danger{ stroke: var(--km-wrong); }
.km-root .km-timer-num {
  font-family: 'Dela Gothic One', sans-serif;
  font-size: 1.5rem; color: var(--km-navy);
  position: relative; z-index: 1;
  transition: color 0.3s;
}
.km-root .km-timer-num.km-timer-warn   { color: #b8860b; }
.km-root .km-timer-num.km-timer-danger { color: var(--km-wrong); }
.km-root .km-timer-pts {
  font-size: 0.75rem; color: var(--km-gray); text-align: center;
}
.km-root .km-timer-pts strong { color: var(--km-navy); }

/* 進捗バー */
.km-root .km-progress-wrap { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.km-root .km-progress-label { font-size: 0.72rem; color: var(--km-gray); }
.km-root .km-progress-bar { height: 6px; background: #d0dce8; border-radius: 99px; overflow: hidden; }
.km-root .km-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--km-gold), var(--km-wrong));
  border-radius: 99px;
  transition: width 0.4s ease;
}

/* ボタン共通 */
.km-root .km-btn {
  width: 100%; height: 42px;
  border: none; border-radius: 8px;
  font-family: 'BIZ UDGothic', sans-serif;
  font-size: 0.9rem; font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, opacity 0.2s;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.km-root .km-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.km-root .km-btn-back { background: #f0f0f0; color: #555; border: 2px solid #ccc; font-size: 0.85rem; }
.km-root .km-btn-back:hover { background: #e4e4e4; }

/* 中央 */
.km-root .km-center {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 12px 16px; gap: 10px;
  overflow: hidden;
  background: var(--km-bg);
}
.km-root .km-kanji-label {
  font-family: 'Dela Gothic One', sans-serif;
  font-size: 1rem; color: var(--km-navy);
  letter-spacing: 2px; flex-shrink: 0;
}

/* パネルグリッド */
.km-root .km-panel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  max-width: min(calc(100vh - 52px - 130px), calc(100vw - var(--km-sidebar-w) * 2 - 32px));
  aspect-ratio: 1;
}
.km-root .km-panel {
  background: var(--km-white);
  border: 2px solid #c8d8e8;
  border-radius: 12px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(30,58,95,0.1);
  transition: all 0.15s;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
}
.km-root .km-panel svg { width: 82%; height: 82%; }
.km-root .km-panel:hover:not(.km-answered) {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(30,58,95,0.2);
  border-color: var(--km-gold);
  background: #fffbe8;
}
.km-root .km-panel.km-correct-panel { border-color: var(--km-correct) !important; background: #edfcf4 !important; animation: kmPulse 0.5s ease; }
.km-root .km-panel.km-wrong-tap     { border-color: var(--km-wrong)   !important; background: #fdf0ee !important; animation: kmShake 0.4s ease; }
.km-root .km-panel.km-answered      { cursor: default; }
.km-root .km-panel-overlay { display: none; }
@keyframes kmPulse { 0%{transform:scale(1)} 50%{transform:scale(1.07)} 100%{transform:scale(1)} }
@keyframes kmShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }

/* フィードバックバー */
.km-root .km-feedback-bar {
  width: 100%;
  max-width: min(calc(100vh - 52px - 130px), calc(100vw - var(--km-sidebar-w) * 2 - 32px));
  background: var(--km-white);
  border: 1.5px solid #d0dce8;
  border-radius: 10px;
  padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 50px;
  box-shadow: 0 2px 8px rgba(30,58,95,0.08);
  flex-shrink: 0;
}
.km-root .km-feedback-text { font-size: 1rem; font-weight: 700; transition: all 0.2s; }
.km-root .km-feedback-text.km-correct { color: var(--km-correct); }
.km-root .km-feedback-text.km-wrong   { color: var(--km-wrong); }
.km-root .km-feedback-text.km-hint    { color: var(--km-gray); font-size: 0.85rem; font-weight: 400; }
.km-root .km-next-btn {
  background: var(--km-navy); color: #fff;
  border: none; border-radius: 8px;
  padding: 8px 18px;
  font-family: 'BIZ UDGothic', sans-serif;
  font-size: 0.88rem; font-weight: 700;
  cursor: pointer; transition: all 0.15s;
  white-space: nowrap; flex-shrink: 0;
}
.km-root .km-next-btn:hover:not(:disabled) { background: var(--km-navy-light); }
.km-root .km-next-btn:disabled { opacity: 0.35; cursor: default; }

/* 履歴 */
.km-root .km-history-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.km-root .km-hist-item { background: var(--km-panel-bg); border-radius: 8px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; }
.km-root .km-hi-no    { font-size: 0.72rem; color: var(--km-gray); min-width: 22px; }
.km-root .km-hi-kanji { font-family: 'BIZ UDMincho', serif; font-size: 1.5rem; color: var(--km-navy); line-height: 1; font-weight: 700; }
.km-root .km-hi-pts   { font-size: 0.75rem; color: var(--km-navy); font-weight: 700; margin-left: auto; }
.km-root .km-hi-result { font-size: 1rem; margin-left: 4px; }
.km-root .km-hist-empty { font-size: 0.82rem; color: var(--km-gray); text-align: center; padding: 20px 0; }

/* ローディング */
.km-root .km-loading-dots { display: flex; gap: 6px; align-items: center; justify-content: center; padding: 20px; }
.km-root .km-loading-dots span { width: 8px; height: 8px; background: var(--km-gold); border-radius: 50%; animation: kmDot 0.8s ease-in-out infinite; }
.km-root .km-loading-dots span:nth-child(2) { animation-delay: 0.15s; }
.km-root .km-loading-dots span:nth-child(3) { animation-delay: 0.30s; }
@keyframes kmDot { 0%,100%{transform:translateY(0);opacity:0.4} 50%{transform:translateY(-6px);opacity:1} }

/* ===== 設定モーダル ===== */
.km-root .km-setup {
  position: absolute; inset: 0;
  background: rgba(20,40,68,0.93);
  display: flex; align-items: flex-start; justify-content: center;
  z-index: 200; overflow-y: auto;
  padding: 20px 0 40px;
}
.km-root .km-setup-card {
  background: var(--km-white);
  border-radius: 18px;
  padding: 24px 22px;
  width: min(96vw, 540px);
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.km-root .km-setup-card h2 {
  font-family: 'Dela Gothic One', sans-serif;
  color: var(--km-navy);
  font-size: 1.5rem; text-align: center;
  letter-spacing: 3px; font-weight: 400;
}
.km-root .km-setup-card h2 span { color: var(--km-gold); }

/* 学年タブ */
.km-root .km-grade-tabs { display: flex; gap: 5px; }
.km-root .km-grade-tab {
  flex: 1; padding: 9px 4px;
  border: 2px solid var(--km-navy-light);
  border-radius: 8px;
  background: var(--km-panel-bg);
  color: var(--km-navy);
  font-family: 'BIZ UDGothic', sans-serif;
  font-weight: 700; font-size: 0.95rem;
  cursor: pointer; text-align: center;
  transition: all 0.15s;
}
.km-root .km-grade-tab.active { background: var(--km-navy); color: #fff; border-color: var(--km-navy); }

/* 単元スクロール */
.km-root .km-unit-scroll {
  border: 1.5px solid #d0dce8;
  border-radius: 10px;
  overflow-y: auto; height: 260px;
  background: #fafcff; padding: 6px;
}
.km-root .km-unit-scroll > * + * { margin-top: 4px; }
.km-root .km-unit-row {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  background: var(--km-panel-bg);
  border: 1px solid #d8e4f0;
  border-radius: 8px;
  cursor: pointer; transition: all 0.13s; gap: 8px;
}
.km-root .km-unit-row:hover { background: #d8eaf8; border-color: var(--km-navy-light); transform: translateX(3px); }
.km-root .km-unit-row-name  { font-size: 0.88rem; font-weight: 700; color: var(--km-navy); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.km-root .km-unit-row-count { font-size: 0.78rem; color: var(--km-gray); white-space: nowrap; flex-shrink: 0; }
.km-root .km-unit-row-arrow { color: var(--km-gold); font-size: 0.9rem; flex-shrink: 0; }

/* ステップ */
.km-root .km-step { display: none; flex-direction: column; gap: 14px; }
.km-root .km-step.km-step-active { display: flex; }
.km-root .km-step-back {
  background: none; border: none;
  color: var(--km-gray);
  font-family: 'BIZ UDGothic', sans-serif;
  font-size: 0.85rem; cursor: pointer;
  display: flex; align-items: center; gap: 4px;
  padding: 0; font-weight: 700;
}
.km-root .km-step-back:hover { color: var(--km-navy); }
.km-root .km-step-label { font-size: 0.75rem; font-weight: 700; color: var(--km-gray); letter-spacing: 1px; }

/* パネルサイズ選択（モーダル内） */
.km-root .km-modal-size-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.km-root .km-modal-size-btn {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 6px;
  border: 2.5px solid #d0dce8;
  border-radius: 12px;
  background: var(--km-panel-bg);
  cursor: pointer; transition: all 0.15s;
  font-family: 'BIZ UDGothic', sans-serif;
}
.km-root .km-modal-size-btn:hover { border-color: var(--km-gold); background: #fffbe8; }
.km-root .km-modal-size-btn .ms-demo { display: grid; gap: 3px; }
.km-root .km-modal-size-btn .ms-demo span { background: #b0c4d8; border-radius: 2px; height: 8px; }
.km-root .km-modal-size-btn.ms-3 .ms-demo span { height: 10px; }
.km-root .km-modal-size-btn.ms-4 .ms-demo span { height: 8px; }
.km-root .km-modal-size-btn.ms-5 .ms-demo span { height: 6px; }
.km-root .km-modal-size-btn.ms-6 .ms-demo span { height: 5px; }
.km-root .km-modal-size-btn.ms-7 .ms-demo span { height: 4px; }
.km-root .km-modal-size-btn.ms-8 .ms-demo span { height: 3px; }
.km-root .km-modal-size-btn .ms-demo span.ms-x { background: var(--km-wrong); }
.km-root .km-modal-size-btn .ms-label { font-size: 1.1rem; font-weight: 700; color: var(--km-navy); letter-spacing: 1px; }
.km-root .km-modal-size-btn .ms-sub   { font-size: 0.72rem; color: var(--km-gray); }

/* ===== 結果モーダル ===== */
.km-root .km-result {
  position: absolute; inset: 0;
  background: rgba(20,40,68,0.93);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
}
.km-root .km-result-card {
  background: var(--km-white);
  border-radius: 18px; padding: 32px 28px;
  width: min(96vw, 360px);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  text-align: center;
}
.km-root .km-result-card h2 {
  font-family: 'Dela Gothic One', sans-serif;
  color: var(--km-navy); font-size: 1.4rem;
  letter-spacing: 3px; font-weight: 400;
}
.km-root .km-result-circle {
  width: 110px; height: 110px; border-radius: 50%;
  border: 4px solid var(--km-gold);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--km-panel-bg);
}
.km-root .km-result-big   { font-family: 'Dela Gothic One', sans-serif; font-size: 2.6rem; color: var(--km-wrong); line-height: 1; }
.km-root .km-result-denom { font-size: 0.85rem; color: var(--km-gray); }
.km-root .km-result-score { font-family: 'Dela Gothic One', sans-serif; font-size: 1.4rem; color: var(--km-navy); letter-spacing: 2px; }
.km-root .km-result-score span { color: var(--km-gold); }
.km-root .km-result-msg   { font-size: 0.9rem; color: var(--km-gray); }
.km-root .km-result-btn {
  width: 100%; height: 50px; border: none; border-radius: 10px;
  font-family: 'Dela Gothic One', sans-serif; font-size: 1.1rem;
  cursor: pointer; letter-spacing: 2px; transition: background 0.15s;
}
.km-root .km-result-btn-replay { background: var(--km-navy); color: #fff; }
.km-root .km-result-btn-replay:hover { background: var(--km-navy-light); }
.km-root .km-result-btn-back { background: #f0f0f0; color: #555; font-size: 0.9rem; }
.km-root .km-result-btn-back:hover { background: #e4e4e4; }

/* コンフェッティ */
.km-root .km-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 999; }
.km-root .km-confetti-piece { position: absolute; width: 10px; height: 10px; border-radius: 2px; animation: kmConf 1s ease-out forwards; opacity: 0; }
@keyframes kmConf { 0%{transform:translateY(-20px) rotate(0);opacity:1} 100%{transform:translateY(200px) rotate(360deg);opacity:0} }

.km-root .km-hidden { display: none !important; }

@media (max-width: 700px) {
  .km-root { --km-sidebar-w: 150px; }
  .km-root .km-header h1 { font-size: 1rem; letter-spacing: 1px; }
}