.kb-intro {
  font-size: clamp(0.9rem, 2.4vmin, 1.2rem);
  color: #888;
  text-align: center;
  line-height: 1.6;
}

.kb-mastery-summary {
  font-size: clamp(1rem, 2.6vmin, 1.3rem);
  font-weight: bold;
  color: var(--accent);
  min-height: 1.4em;
}

.kb-memo-title {
  font-size: clamp(1.6rem, 5vmin, 2.6rem);
  font-weight: bold;
  color: var(--accent);
}

.kb-memo-progress {
  font-size: clamp(1rem, 2.8vmin, 1.3rem);
  font-weight: bold;
  color: #999;
}

.kb-memo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vmin, 16px);
  width: min(70vw, 320px);
  aspect-ratio: 1;
  border-radius: 28px;
  background: #f7f7f7;
  border: 3px solid var(--accent-dim);
}

.kb-memo-card.enter {
  animation: kbCardIn 0.3s ease;
}

@keyframes kbCardIn {
  from { opacity: 0; transform: scale(0.85) rotate(-3deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}

.kb-memo-card .small {
  font-size: clamp(2rem, 9vmin, 3.6rem);
  color: #aaa;
}

.kb-memo-card .big {
  font-size: clamp(4rem, 18vmin, 7rem);
  font-weight: bold;
  color: var(--ink);
  line-height: 1;
}

#btn-memo-next:disabled {
  opacity: 0.35;
  cursor: default;
}

.kb-prompt {
  font-size: clamp(1.6rem, 5vmin, 2.6rem);
  font-weight: bold;
  color: var(--ink);
  text-align: center;
  min-height: 1.6em;
}

.kb-prompt .kb-target-letter {
  color: var(--accent);
  font-size: 1.3em;
}

.kb-feedback {
  font-size: clamp(1rem, 2.8vmin, 1.4rem);
  font-weight: bold;
  min-height: 1.6em;
  color: var(--good);
  text-align: center;
}

.kb-feedback.bad {
  color: var(--bad);
}

.kb-case-target {
  font-size: clamp(3rem, 14vmin, 6rem);
  font-weight: bold;
  color: var(--ink);
  line-height: 1;
}

.kb-case-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(6px, 1.6vmin, 12px);
  width: min(96vw, 600px);
  margin: 0 auto;
}

.kb-case-btn {
  font-family: inherit;
  font-size: clamp(1.7rem, 5.2vmin, 2.4rem);
  font-weight: bold;
  padding: clamp(0.5em, 1.8vmin, 0.8em) 0;
  border-radius: 14px;
  border: 2.5px solid var(--gray);
  background: white;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.1s ease;
}

.kb-case-btn:active {
  transform: scale(0.95);
}

.kb-case-btn.kb-correct {
  border-color: var(--good);
  background: #eef9ee;
  color: var(--good);
}

.kb-case-btn.kb-wrong {
  border-color: var(--bad);
  background: #fdeeee;
  color: var(--bad);
}

.keyboard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 1vmin, 8px);
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.kb-row {
  display: flex;
  gap: clamp(3px, 0.8vmin, 7px);
}

/* Rough JIS stagger — only the alphabet keys are real targets, everything
   else (numbers, Tab/Caps/Shift/Enter/space, punctuation) is just visual
   context so the layout looks like the keyboard he'll actually see. */
.kb-row-2 { margin-left: clamp(14px, 3vmin, 26px); }
.kb-row-3 { margin-left: clamp(20px, 4.5vmin, 38px); }
.kb-row-4 { margin-left: clamp(10px, 2vmin, 18px); }

.kb-key {
  font-family: inherit;
  font-size: clamp(0.75rem, 2.4vmin, 1.15rem);
  font-weight: bold;
  width: clamp(26px, 6.4vmin, 46px);
  height: clamp(26px, 6.4vmin, 46px);
  border-radius: 8px;
  border: 2px solid var(--gray);
  background: white;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.1s ease, background 0.2s ease, border-color 0.2s ease;
}

.kb-key:active {
  transform: scale(0.9);
}

.kb-key.kb-correct {
  background: var(--good);
  border-color: var(--good);
  color: white;
}

.kb-key.kb-wrong {
  background: var(--bad);
  border-color: var(--bad);
  color: white;
}

.kb-key.kb-target-hint {
  animation: kbPulse 0.9s ease infinite;
}

@keyframes kbPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 140, 66, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(255, 140, 66, 0); }
}

.kb-tab, .kb-caps, .kb-shift { font-size: clamp(0.55rem, 1.6vmin, 0.75rem); }
.kb-tab { width: clamp(38px, 9vmin, 62px); }
.kb-caps { width: clamp(46px, 10.5vmin, 72px); }
.kb-enter { width: clamp(52px, 12vmin, 82px); font-size: clamp(0.55rem, 1.6vmin, 0.75rem); }
.kb-shift { width: clamp(58px, 13vmin, 92px); font-size: clamp(0.55rem, 1.6vmin, 0.75rem); }
.kb-wide { width: clamp(38px, 9vmin, 62px); }

.kb-space {
  width: clamp(200px, 46vmin, 380px);
}

.kb-letters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  max-width: 500px;
  margin: 0 auto;
}

.kb-letter-chip {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: bold;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eee;
  color: #bbb;
}

.kb-letter-chip.mastered {
  background: var(--good);
  color: white;
}

/* the batch currently being learned */
.kb-letter-chip.active-batch {
  background: #fff3e5;
  border: 2px solid var(--accent);
  color: #c96f2a;
}

@media (max-height: 500px) {
  .kb-row { gap: 3px; }
  .kb-key { width: clamp(22px, 6vh, 34px); height: clamp(22px, 6vh, 34px); font-size: clamp(0.65rem, 2.2vh, 0.9rem); }
  .kb-space { width: clamp(160px, 40vh, 280px); }
  .kb-prompt { font-size: clamp(1.2rem, 5vh, 1.8rem); min-height: 1.2em; }
  .kb-case-target { font-size: clamp(2rem, 10vh, 3.5rem); }
  .kb-case-grid { gap: 4px; }
  .kb-case-btn { font-size: clamp(1.1rem, 4vh, 1.7rem); padding: clamp(0.3em, 1vh, 0.6em) 0; }
  .kb-memo-card { width: min(60vw, 220px); }
  .kb-memo-card .small { font-size: clamp(1.4rem, 7vh, 2.4rem); }
  .kb-memo-card .big { font-size: clamp(2.6rem, 14vh, 4.5rem); }
}