.vocab-hero{display:flex;align-items:center;gap:28px;margin-bottom:24px;background:linear-gradient(120deg,var(--ks4),var(--ks14))}.vocab-hero h2{font-size:26px;margin:12px 0}.vocab-hero p{max-width:650px;color:var(--muted)}.vocab-hero img{width:135px;height:145px;object-fit:contain;margin-right:auto}.vocab-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.vocab-topic{display:flex;flex-direction:column;gap:17px}.vocab-topic h2{font-size:20px}.vocab-topic>.btn{margin-top:auto}.vocab-topic summary{cursor:pointer;color:var(--deep);font-weight:650}.vocab-words{list-style:none;padding:0;margin:12px 0}.vocab-words li{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--line);padding:9px 0;font-size:13px}.vocab-words b{flex:1;min-width:75px;text-align:left}.vocab-words li>span:not(.pill){flex:1}.vocab-badge{display:grid;justify-items:center;gap:6px;border:1px solid var(--purple);border-radius:17px;padding:17px;background:var(--ks1);color:var(--deep)}.vocab-badge>.icon{width:35px;height:35px}.vocab-complete{border-color:var(--kb24)}
.error-deck{margin-bottom:26px;background:linear-gradient(145deg,var(--ks4),var(--ks16));overflow:hidden}.flashcard-heading{align-items:flex-start;margin-bottom:22px}.flashcard-heading h2{font-size:25px;margin:10px 0 5px}.flashcard-heading p{color:var(--muted);font-size:13px}.flashcard-count{display:grid;justify-items:center;min-width:92px;padding:12px;border-radius:16px;background:var(--card);border:1px solid var(--line)}.flashcard-count b{font-size:25px;color:var(--purple)}.flashcard-count small,.flashcard-count span{font-size:10px;color:var(--muted)}.flashcard-stage{position:relative;max-width:680px;margin:0 auto;perspective:1200px}.error-flashcard{display:block;width:100%;height:285px;padding:0;border:0;background:transparent;border-radius:24px}.error-flashcard-inner{position:relative;display:block;width:100%;height:100%;transition:transform .48s cubic-bezier(.2,.75,.25,1);transform-style:preserve-3d}.error-flashcard.flipped .error-flashcard-inner{transform:rotateY(180deg)}.flashcard-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;padding:35px;border:1px solid var(--line);border-radius:24px;background:var(--card);box-shadow:0 15px 40px var(--kh10);backface-visibility:hidden;-webkit-backface-visibility:hidden}.flashcard-face small{font-size:10px;letter-spacing:2px;color:var(--purple);font-weight:850}.flashcard-face strong{font-size:clamp(28px,5vw,48px);line-height:1.25}.flashcard-face>span{font-size:12px;color:var(--muted)}.flashcard-back{transform:rotateY(180deg);background:linear-gradient(140deg,var(--card),var(--ks1))}.flashcard-back .flashcard-source{max-width:520px;text-align:center;line-height:1.6}.flashcard-sound{position:absolute;top:18px;right:18px;z-index:3;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:var(--ks4);color:var(--purple)}.flashcard-controls{display:flex;justify-content:center;gap:12px;margin-top:18px}.flashcard-controls[hidden]{display:none}.flashcard-progress{text-align:center;margin-top:12px}.flashcard-complete{display:flex;align-items:center;gap:18px;margin-bottom:26px;background:var(--ks14)}.flashcard-complete p{color:var(--muted);margin-top:4px}
@media(max-width:1100px){.vocab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.vocab-grid{grid-template-columns:1fr}.vocab-hero{gap:12px}.vocab-hero img{width:70px;height:85px}.vocab-hero h2{font-size:21px}.vocab-hero p{font-size:12px}.nav button{padding-inline:4px}.nav button span{font-size:9px}.match-column button.paired{flex-wrap:wrap;justify-content:center}.match-column .pair-result{flex-basis:100%;justify-items:center}.match-grid{align-items:start}.flashcard-heading{gap:12px}.flashcard-heading h2{font-size:20px}.flashcard-heading p{font-size:11px}.flashcard-count{min-width:72px}.error-flashcard{height:230px}.flashcard-face{padding:24px 18px}.flashcard-face strong{font-size:29px}.flashcard-controls .btn{padding-inline:14px}.flashcard-sound{width:42px;height:42px;top:12px;right:12px}}

/* Matching cards share one visual rhythm even when one label wraps to more
   lines. Both columns stretch to the taller column, then divide that height
   into equal rows. */
.match-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.match-column{grid-auto-rows:1fr;min-width:0;align-self:stretch}
.match-column button{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-width:0;text-align:center;line-height:1.5;overflow-wrap:anywhere}