/* ShorinKai Nihongo v4.3.0 — Flashcards */
.flashcards-panel{position:fixed;inset:0;z-index:1200;background:var(--bg,#f5f7fb);overflow:auto;display:none;padding:18px 14px 30px}
.flashcards-panel.open{display:block}
.flashcards-shell{max-width:760px;margin:0 auto}
.flashcards-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.flashcards-header h1{margin:0;font-size:clamp(24px,5vw,34px)}
.flashcards-intro{text-align:center;margin:8vh auto 0;max-width:620px}
.flashcards-mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:24px}
.flashcards-mode{min-height:130px;font-size:21px;display:flex;align-items:center;justify-content:center;text-align:center}
.flashcards-study[hidden],.flashcards-picker[hidden]{display:none!important}
.flashcards-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:8px 0 14px}
.flashcards-toolbar select{min-height:42px;border-radius:12px;padding:8px 12px;border:1px solid #aeb7c2;background:inherit;color:inherit;font-size:16px}
.flashcards-status{display:flex;justify-content:space-between;gap:12px;align-items:center;font-weight:700;margin:8px 2px}
.flashcards-stage{perspective:1100px;min-height:410px}
.flashcard{position:relative;width:100%;min-height:410px;transform-style:preserve-3d;transition:transform .3s ease;cursor:pointer}
.flashcard.is-flipped{transform:rotateY(180deg)}
.flashcard-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid rgba(90,105,120,.28);border-radius:22px;background:var(--card,#fff);box-shadow:0 8px 26px rgba(25,40,55,.14);padding:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:auto}
.flashcard-back{transform:rotateY(180deg);justify-content:flex-start;padding-top:22px}
.flashcard-type{font-size:13px;letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin-bottom:14px}
.flashcard-japanese{font-size:clamp(48px,12vw,84px);line-height:1.15;font-weight:700}
.flashcard-kanji{font-size:clamp(86px,24vw,150px);line-height:1}
.flashcard-hint{margin-top:26px;opacity:.72}
.flashcard-romaji{font-size:25px;font-weight:700;margin-top:12px}
.flashcard-meaning{font-size:22px;margin-top:8px}
.flashcard-details{width:100%;display:grid;gap:10px;margin-top:12px}
.flashcard-detail{border-radius:14px;padding:10px 12px;background:rgba(110,125,140,.10)}
.flashcard-detail strong{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px}
.flashcard-example{font-size:21px}
.flashcard-example small{display:block;font-size:16px;margin-top:3px}
.flashcards-actions,.flashcards-rating{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
.flashcards-rating button{flex:1 1 120px;max-width:200px}
.flashcards-timer{height:5px;border-radius:6px;background:rgba(110,125,140,.18);overflow:hidden;margin-top:10px}
.flashcards-timer>div{height:100%;width:100%;transform-origin:left center;background:currentColor;animation:flashTimer 5s linear}
.flashcards-timer.paused>div{animation-play-state:paused}
@keyframes flashTimer{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.flashcard-strokes{width:180px;height:180px;margin:8px auto 0}
.flashcard-strokes path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:240;stroke-dashoffset:240;animation:flashStroke 1.15s ease forwards}
.flashcard-strokes text{font-size:8px;font-weight:700;fill:currentColor}
@keyframes flashStroke{to{stroke-dashoffset:0}}
body.manual-dark .flashcards-panel{background:#101215;color:#f2f3f5}body.manual-dark .flashcard-face{background:#1b1e23;border-color:#50545c}
@media(prefers-color-scheme:dark){body:not(.manual-light) .flashcards-panel{background:#101215;color:#f2f3f5}body:not(.manual-light) .flashcard-face{background:#1b1e23;border-color:#50545c}}
@media(max-width:560px){.flashcards-mode-grid{grid-template-columns:1fr}.flashcards-stage,.flashcard{min-height:430px}.flashcard-face{padding:20px 16px}.flashcards-header h1{font-size:25px}}
@media(prefers-reduced-motion:reduce){.flashcard{transition:none}.flashcards-timer>div,.flashcard-strokes path{animation:none;transform:none;stroke-dashoffset:0}}