@import "https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Inter:wght@400;600;700;800&display=swap";.home-screen{flex-direction:column;justify-content:center;align-items:center;gap:32px;min-height:100dvh;padding:24px 16px;display:flex}.home-header{text-align:center}.home-title{color:var(--color-primary);letter-spacing:-.02em;margin:0 0 4px;font-size:3rem;font-weight:800}.home-subtitle{color:#888;margin:0;font-size:1rem}.system-cards{gap:16px;width:100%;max-width:400px;display:flex}.system-card{background:var(--color-card);border-radius:var(--radius);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border:2px solid #e9ecef;flex-direction:column;flex:1;align-items:center;gap:8px;padding:32px 16px;transition:border-color .2s,transform .1s,box-shadow .2s;display:flex}.system-card:active{transform:scale(.96)}.system-card:hover{border-color:var(--color-primary);box-shadow:0 4px 20px #6c5ce726}.system-kana{font-family:var(--font-japanese);color:var(--color-primary);font-size:3rem;line-height:1}.system-name{color:var(--color-text);font-size:1.1rem;font-weight:700}.system-desc{color:#aaa;font-size:.8rem}.kanji-card{flex-direction:row;gap:16px;width:100%;max-width:400px;padding:20px 24px}.home-actions{flex-direction:column;align-items:center;gap:12px;width:100%;max-width:400px;display:flex}.chart-btn{color:var(--color-primary);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:0 0;border:2px solid #e9ecef;border-radius:32px;padding:14px 32px;font-size:1rem;font-weight:600;transition:border-color .2s,background .2s,transform .1s}.chart-btn:hover,.chart-btn.active{border-color:var(--color-primary);background:#6c5ce70a}.chart-btn:active{transform:scale(.96)}.voice-picker{background:var(--color-card);border-radius:var(--radius);border:2px solid #e9ecef;flex-direction:column;gap:12px;width:100%;max-width:400px;padding:16px;display:flex}.voice-picker-header{justify-content:space-between;align-items:center;display:flex}.voice-picker-title{color:var(--color-text);font-size:1rem;font-weight:700}.voice-test-btn{background:var(--color-primary);color:#fff;cursor:pointer;touch-action:manipulation;border:none;border-radius:16px;padding:6px 16px;font-size:.85rem;font-weight:600;transition:opacity .2s}.voice-test-btn:active{opacity:.7}.voice-debug{color:#aaa;margin:0;font-size:.75rem}.voice-empty{color:#888;font-size:.9rem;line-height:1.5}.voice-list{-webkit-overflow-scrolling:touch;flex-direction:column;gap:6px;max-height:240px;display:flex;overflow-y:auto}.voice-option{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;text-align:left;background:0 0;border:2px solid #e9ecef;border-radius:12px;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px;transition:border-color .2s,background .2s;display:flex}.voice-option.selected{border-color:var(--color-primary);background:#6c5ce70f}.voice-option:active{transform:scale(.98)}.voice-name{color:var(--color-text);font-size:.9rem;font-weight:600}.voice-detail{color:#aaa;font-size:.75rem}.mode-select{flex-direction:column;align-items:center;width:100%;max-width:600px;margin:0 auto;padding:24px 16px;display:flex}.mode-header{text-align:center;width:100%;margin-bottom:24px;position:relative}.mode-header .back-btn{color:var(--color-primary);cursor:pointer;touch-action:manipulation;background:0 0;border:none;padding:8px;font-size:1rem;font-weight:600;position:absolute;top:4px;left:0}.mode-header h1{color:var(--color-text);margin:0 0 4px;font-size:1.75rem}.modes-grid{grid-template-columns:repeat(2,1fr);gap:12px;width:100%;display:grid}@media (width>=500px){.modes-grid{grid-template-columns:repeat(3,1fr)}}.mode-card{background:var(--color-card);border-radius:var(--radius);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border:2px solid #e9ecef;flex-direction:column;align-items:center;gap:6px;padding:24px 12px;transition:border-color .2s,transform .1s,box-shadow .2s;display:flex}.mode-card:active{transform:scale(.96)}.mode-card:hover{border-color:var(--color-primary);box-shadow:0 4px 20px #6c5ce726}.mode-icon{font-size:2rem;line-height:1}.mode-name{color:var(--color-text);font-size:.95rem;font-weight:700}.mode-desc{color:#aaa;text-align:center;font-size:.75rem}.group-selector{flex-direction:column;align-items:center;width:100%;max-width:600px;margin:0 auto;padding:24px 16px 120px;display:flex}.selector-header{text-align:center;width:100%;margin-bottom:20px;position:relative}.selector-header .back-btn{color:var(--color-primary);cursor:pointer;touch-action:manipulation;background:0 0;border:none;padding:8px;font-size:1rem;font-weight:600;position:absolute;top:4px;left:0}.selector-header h1{color:var(--color-text);margin:0 0 4px;font-size:1.75rem}.subtitle{color:#888;margin:0;font-size:.95rem}.selector-actions{gap:10px;margin-bottom:16px;display:flex}.select-all-btn,.settings-toggle-btn{border:2px solid var(--color-primary);color:var(--color-primary);cursor:pointer;touch-action:manipulation;background:0 0;border-radius:24px;padding:8px 20px;font-size:.9rem;font-weight:600;transition:background .2s,color .2s}.select-all-btn:active,.settings-toggle-btn:active,.settings-toggle-btn.active{background:var(--color-primary);color:#fff}.settings-panel{background:var(--color-card);border-radius:var(--radius);border:2px solid #e9ecef;flex-direction:column;gap:14px;width:100%;margin-bottom:16px;padding:16px;display:flex}.setting-row{justify-content:space-between;align-items:center;display:flex}.setting-label{color:var(--color-text);font-size:.95rem;font-weight:600}.setting-options{gap:6px;display:flex}.setting-chip{color:#888;cursor:pointer;touch-action:manipulation;background:0 0;border:2px solid #e9ecef;border-radius:16px;padding:4px 14px;font-size:.85rem;font-weight:600;transition:border-color .2s,color .2s,background .2s}.setting-chip.active{border-color:var(--color-primary);color:var(--color-primary);background:#6c5ce70f}.setting-toggle{cursor:pointer;touch-action:manipulation;background:#ddd;border:none;border-radius:14px;width:48px;height:28px;padding:0;transition:background .2s;position:relative}.setting-toggle.on{background:var(--color-primary)}.toggle-knob{background:#fff;border-radius:50%;width:22px;height:22px;transition:transform .2s;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #0003}.setting-toggle.on .toggle-knob{transform:translate(20px)}.groups-grid{grid-template-columns:repeat(2,1fr);gap:12px;width:100%;margin-bottom:24px;display:grid}@media (width>=500px){.groups-grid{grid-template-columns:repeat(3,1fr)}}.group-card{background:var(--color-card);border-radius:var(--radius);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border:2px solid #e9ecef;flex-direction:column;align-items:center;gap:6px;padding:16px 8px;transition:border-color .2s,transform .1s,box-shadow .2s;display:flex}.group-card:active{transform:scale(.96)}.group-card.selected{border-color:var(--color-primary);background:#6c5ce70a;box-shadow:0 0 0 3px #6c5ce726}.group-name{color:var(--color-text);font-size:.95rem;font-weight:700}.group-preview{font-family:var(--font-japanese);color:#888;letter-spacing:2px;font-size:.85rem}.group-count{color:#aaa;font-size:.75rem}.start-btn{background:var(--color-primary);color:#fff;cursor:pointer;touch-action:manipulation;z-index:10;border:none;border-radius:32px;max-width:calc(100vw - 48px);padding:16px 48px;font-size:1.1rem;font-weight:700;transition:opacity .2s,transform .1s;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 4px 20px #6c5ce759}.start-btn:disabled{opacity:.4;cursor:default}.start-btn:not(:disabled):active{transform:translate(-50%)scale(.96)}.sound-btn{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:0 0;border:2px solid #e9ecef;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:border-color .2s,transform .1s,background .2s;display:flex}.sound-btn.normal{width:48px;height:48px;font-size:1.3rem}.sound-btn.small{width:32px;height:32px;font-size:.85rem}.sound-btn:active{transform:scale(.9)}.sound-btn:hover{border-color:var(--color-primary);background:#6c5ce70f}.flashcard-container{perspective:1000px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;width:min(80vw,320px);height:min(80vw,320px)}.flashcard{width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s;position:relative}.flashcard.flipped{transform:rotateY(180deg)}.flashcard-face{backface-visibility:hidden;border-radius:var(--radius);background:var(--color-card);box-shadow:var(--shadow);flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex;position:absolute;inset:0}.flashcard-back{background:var(--color-primary);transform:rotateY(180deg)}.flashcard-front .kana{font-family:var(--font-japanese);color:var(--color-text);font-size:clamp(4rem,15vw,7rem);line-height:1}.flashcard-front-bottom{flex-direction:column;align-items:center;gap:8px;display:flex}.flashcard-front .tap-hint{color:#aaa;letter-spacing:.05em;font-size:.85rem}.flashcard-back-row{align-items:center;gap:8px;display:flex}.flashcard-back .sound-btn{border-color:#ffffff4d}.flashcard-back .sound-btn:hover{background:#ffffff1a;border-color:#fff9}.flashcard-back .meaning{color:#ffffffd9;text-align:center;letter-spacing:.02em;font-size:clamp(1rem,4vw,1.3rem);font-weight:600}.flashcard-back .romaji{color:#fff;text-transform:uppercase;letter-spacing:.05em;font-size:clamp(2.5rem,10vw,4rem);font-weight:700}.flashcard-back .kana-small{font-family:var(--font-japanese);color:#ffffffb3;font-size:1.5rem}.flashcard-back .hints-area{flex-direction:column;align-items:center;gap:6px;max-width:280px;padding:0 20px;display:flex}.flashcard-back .pronunciation-hint{color:#fffffff2;text-align:center;font-size:1rem;font-weight:600;line-height:1.4}.flashcard-back .memory-hint{color:#ffffffb3;text-align:center;font-size:.95rem;font-style:italic;line-height:1.4}.progress-bar{flex-direction:column;gap:6px;width:100%;display:flex}.progress-track{background:#e9ecef;border-radius:4px;width:100%;height:8px;position:relative;overflow:hidden}.progress-fill{height:100%;transition:width .3s;position:absolute;top:0}.progress-fill.correct{background:var(--color-correct);left:0}.progress-fill.incorrect{background:var(--color-incorrect)}.progress-label{color:#888;text-align:center;font-size:.85rem}.practice-screen{flex-direction:column;align-items:center;min-height:100dvh;padding:16px;display:flex}.practice-top-bar{align-items:center;gap:12px;width:100%;max-width:400px;margin-bottom:16px;display:flex}.back-btn{color:var(--color-primary);cursor:pointer;touch-action:manipulation;white-space:nowrap;background:0 0;border:none;flex-shrink:0;padding:8px;font-size:1rem;font-weight:600}.practice-progress{flex:1}.hints-toggle{cursor:pointer;touch-action:manipulation;opacity:.5;background:0 0;border:2px solid #ddd;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.1rem;transition:border-color .2s,background .2s;display:flex}.hints-toggle.active{border-color:var(--color-primary);opacity:1;background:#6c5ce71a}.practice-card-area{flex:1;justify-content:center;align-items:center;min-height:0;display:flex}.practice-actions{opacity:0;pointer-events:none;gap:24px;padding:24px 0 32px;transition:opacity .25s;display:flex}.practice-actions.visible{opacity:1;pointer-events:auto}.action-btn{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border:none;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:80px;height:80px;transition:transform .1s;display:flex}.action-btn:active{transform:scale(.9)}.action-btn.correct{background:var(--color-correct);color:#fff}.action-btn.incorrect{background:var(--color-incorrect);color:#fff}.action-icon{font-size:1.5rem;font-weight:700;line-height:1}.action-label{text-transform:uppercase;letter-spacing:.05em;font-size:.7rem;font-weight:600}.mc-screen{flex-direction:column;align-items:center;min-height:100dvh;padding:16px;display:flex}.mc-prompt{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;display:flex}.mc-kana{font-family:var(--font-japanese);color:var(--color-text);font-size:clamp(5rem,20vw,9rem);line-height:1}.mc-choices{grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:360px;padding-bottom:32px;display:grid}.mc-choice{border-radius:var(--radius);background:var(--color-card);color:var(--color-text);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;text-transform:uppercase;letter-spacing:.05em;border:2px solid #e9ecef;padding:18px 12px;font-size:1.2rem;font-weight:700;transition:border-color .2s,background .2s,transform .1s,opacity .3s}.mc-choice:active{transform:scale(.96)}.mc-choice.correct{border-color:var(--color-correct);background:var(--color-correct);color:#fff}.mc-choice.incorrect{border-color:var(--color-incorrect);background:var(--color-incorrect);color:#fff}.mc-choice.dimmed{opacity:.3}.matching-screen{flex-direction:column;align-items:center;min-height:100dvh;padding:16px;display:flex}.matching-top-bar{justify-content:space-between;align-items:center;width:100%;max-width:400px;margin-bottom:24px;display:flex}.matching-progress{color:#888;font-size:.9rem;font-weight:600}.matching-grid{grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:400px;display:grid}@media (width>=500px){.matching-grid{grid-template-columns:repeat(4,1fr)}}.match-tile{background:var(--color-card);color:var(--color-text);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;text-align:center;border:2px solid #e9ecef;border-radius:12px;justify-content:center;align-items:center;min-height:56px;padding:16px 8px;font-size:1.1rem;font-weight:700;transition:border-color .2s,background .2s,transform .1s,opacity .3s;display:flex}.match-tile.kana-tile{font-family:var(--font-japanese);font-size:1.4rem}.match-tile:active:not(:disabled){transform:scale(.95)}.match-tile.selected{border-color:var(--color-primary);background:#6c5ce714;box-shadow:0 0 0 3px #6c5ce726}.match-tile.matched{border-color:var(--color-correct);opacity:.5;cursor:default;background:#00b8941a}.match-tile.wrong{border-color:var(--color-incorrect);background:#ff6b6b26;animation:.4s shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.speed-screen{flex-direction:column;align-items:center;min-height:100dvh;padding:16px;display:flex}.speed-top-bar{justify-content:space-between;align-items:center;width:100%;max-width:400px;margin-bottom:8px;display:flex}.speed-counter{color:#888;font-size:.9rem;font-weight:600}.speed-timer-bar{background:#e9ecef;border-radius:3px;width:100%;max-width:400px;height:6px;margin-bottom:16px;overflow:hidden}.speed-timer-fill{background:var(--color-primary);border-radius:3px;height:100%;transition:width 1s linear}.speed-timer-fill.urgent{background:var(--color-incorrect)}.speed-prompt{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;display:flex}.speed-kana{font-family:var(--font-japanese);color:var(--color-text);font-size:clamp(5rem,20vw,9rem);line-height:1}.speed-choices{grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:360px;padding-bottom:32px;display:grid}.speed-choice{border-radius:var(--radius);background:var(--color-card);color:var(--color-text);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;text-transform:uppercase;letter-spacing:.05em;border:2px solid #e9ecef;padding:18px 12px;font-size:1.2rem;font-weight:700;transition:border-color .15s,background .15s,transform .1s}.speed-choice:active{transform:scale(.96)}.speed-choice.correct{border-color:var(--color-correct);background:var(--color-correct);color:#fff}.speed-choice.incorrect{border-color:var(--color-incorrect);background:var(--color-incorrect);color:#fff}.typeit-screen{flex-direction:column;align-items:center;min-height:100dvh;padding:16px;display:flex}.typeit-prompt{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;display:flex}.typeit-kana{font-family:var(--font-japanese);color:var(--color-text);font-size:clamp(5rem,20vw,9rem);line-height:1}.typeit-form{flex-direction:column;align-items:center;gap:12px;width:100%;max-width:320px;padding-bottom:32px;display:flex}.typeit-input{border-radius:var(--radius);text-align:center;width:100%;color:var(--color-text);background:var(--color-card);letter-spacing:.05em;border:2px solid #e9ecef;outline:none;padding:16px;font-family:inherit;font-size:1.3rem;font-weight:600;transition:border-color .2s,background .2s}.typeit-input:focus{border-color:var(--color-primary)}.typeit-input.correct{border-color:var(--color-correct);background:#00b89414}.typeit-input.incorrect{border-color:var(--color-incorrect);background:#ff6b6b14}.typeit-answer{color:var(--color-incorrect);font-size:1rem}.typeit-answer strong{text-transform:uppercase}.typeit-submit{background:var(--color-primary);color:#fff;cursor:pointer;touch-action:manipulation;border:none;border-radius:32px;width:100%;padding:16px;font-size:1.05rem;font-weight:700;transition:opacity .2s,transform .1s;box-shadow:0 4px 16px #6c5ce74d}.typeit-submit:disabled{opacity:.4;cursor:default}.typeit-submit:not(:disabled):active{transform:scale(.96)}.reverse-screen{flex-direction:column;align-items:center;min-height:100dvh;padding:16px;display:flex}.reverse-prompt{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:8px;display:flex}.reverse-romaji{color:var(--color-primary);text-transform:uppercase;letter-spacing:.05em;font-size:clamp(3rem,12vw,5rem);font-weight:800;line-height:1}.reverse-label{color:#888;font-size:.9rem}.reverse-choices{grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:360px;padding-bottom:32px;display:grid}.reverse-choice{border-radius:var(--radius);background:var(--color-card);font-family:var(--font-japanese);color:var(--color-text);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;text-align:center;border:2px solid #e9ecef;padding:20px 12px;font-size:2rem;transition:border-color .2s,background .2s,transform .1s,opacity .3s}.reverse-choice:active{transform:scale(.96)}.reverse-choice.correct{border-color:var(--color-correct);background:var(--color-correct);color:#fff}.reverse-choice.incorrect{border-color:var(--color-incorrect);background:var(--color-incorrect);color:#fff}.reverse-choice.dimmed{opacity:.3}.results-screen{flex-direction:column;align-items:center;max-width:500px;min-height:100dvh;margin:0 auto;padding:48px 16px 32px;display:flex}.results-header{text-align:center;margin-bottom:32px}.results-emoji{margin-bottom:8px;font-size:3rem;display:block}.results-score{color:var(--color-text);margin:0;font-size:3rem;font-weight:800}.results-pct{color:#888;margin:4px 0 0;font-size:1.2rem}.missed-section{width:100%;margin-bottom:32px}.missed-section h2{color:var(--color-text);text-align:center;margin:0 0 12px;font-size:1.1rem}.missed-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;display:grid}.missed-card{background:var(--color-card);border:2px solid var(--color-incorrect);border-radius:12px;flex-direction:column;align-items:center;gap:2px;padding:12px 8px;display:flex}.missed-kana{font-family:var(--font-japanese);color:var(--color-text);font-size:1.5rem}.missed-romaji{color:var(--color-incorrect);font-size:.8rem;font-weight:600}.results-actions{flex-direction:column;gap:12px;width:100%;max-width:300px;margin-top:auto;padding-top:24px;display:flex}.results-btn{cursor:pointer;touch-action:manipulation;border:none;border-radius:32px;padding:16px;font-size:1.05rem;font-weight:700;transition:transform .1s}.results-btn:active{transform:scale(.96)}.results-btn.primary{background:var(--color-primary);color:#fff;box-shadow:0 4px 16px #6c5ce74d}.results-btn.secondary{color:var(--color-text);background:0 0;border:2px solid #ddd}.master-chart{flex-direction:column;align-items:center;width:100%;max-width:600px;margin:0 auto;padding:24px 16px 48px;display:flex}.chart-header{text-align:center;width:100%;margin-bottom:16px;position:relative}.chart-header .back-btn{color:var(--color-primary);cursor:pointer;touch-action:manipulation;background:0 0;border:none;padding:8px;font-size:1rem;font-weight:600;position:absolute;top:4px;left:0}.chart-header h1{color:var(--color-text);margin:0;font-size:1.75rem}.chart-tabs{background:#e9ecef;border-radius:12px;gap:4px;width:100%;max-width:300px;margin-bottom:24px;padding:4px;display:flex}.chart-tab{color:#888;cursor:pointer;touch-action:manipulation;background:0 0;border:none;border-radius:10px;flex:1;padding:10px 16px;font-size:.95rem;font-weight:600;transition:background .2s,color .2s}.chart-tab.active{background:var(--color-card);color:var(--color-primary);box-shadow:0 2px 8px #00000014}.chart-sub-tabs{gap:8px;margin-bottom:20px;display:flex}.chart-sub-tab{color:#888;cursor:pointer;touch-action:manipulation;background:0 0;border:2px solid #e9ecef;border-radius:20px;padding:6px 16px;font-size:.85rem;font-weight:600;transition:border-color .2s,color .2s,background .2s}.chart-sub-tab.active{border-color:var(--color-primary);color:var(--color-primary);background:#6c5ce70f}.chart-section{width:100%}.chart-section-title{display:none}.chart-group{margin-bottom:24px}.chart-group-actions{align-items:center;gap:8px;display:flex}.play-row-btn{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;width:32px;height:32px;color:var(--color-primary);background:0 0;border:1.5px solid #ddd;border-radius:50%;justify-content:center;align-items:center;font-size:.85rem;transition:border-color .2s,background .2s,transform .1s;display:flex}.play-row-btn:hover{border-color:var(--color-primary);background:#6c5ce70a}.play-row-btn:active{transform:scale(.9)}.play-row-btn.playing{border-color:var(--color-incorrect);color:var(--color-incorrect);background:#ff6b6b0f}.chart-group-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.chart-group-name{color:#888;text-transform:uppercase;letter-spacing:.05em;margin:0;font-size:1.05rem;font-weight:700}.flip-row-btn{color:var(--color-primary);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:0 0;border:1.5px solid #ddd;border-radius:16px;padding:6px 18px;font-size:.9rem;font-weight:600;transition:border-color .2s,background .2s,transform .1s}.flip-row-btn:hover{border-color:var(--color-primary);background:#6c5ce70a}.flip-row-btn:active{transform:scale(.95)}.chart-grid{grid-template-columns:repeat(5,1fr);gap:10px;display:grid}@media (width<=400px){.chart-grid{grid-template-columns:repeat(3,1fr)}}.mini-card-container{perspective:600px;aspect-ratio:1;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border-radius:12px;transition:box-shadow .2s,transform .2s}.mini-card-container.playing{box-shadow:0 0 0 3px var(--color-primary), 0 0 16px #6c5ce74d;transform:scale(1.05)}.mini-card{width:100%;height:100%;transform-style:preserve-3d;transition:transform .4s;position:relative}.mini-card.flipped{transform:rotateY(180deg)}.mini-face{backface-visibility:hidden;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:2px;display:flex;position:absolute;inset:0}.mini-front{background:var(--color-card);border:2px solid #e9ecef}.mini-back{background:var(--color-primary);gap:4px;padding:8px;position:relative;transform:rotateY(180deg)}.mini-kana{font-family:var(--font-japanese);color:var(--color-text);font-size:clamp(2rem,7vw,3rem);line-height:1}.mini-meaning{color:#ffffffd9;text-align:center;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:clamp(.65rem,2.5vw,.8rem);font-weight:600;line-height:1.1;overflow:hidden}.mini-romaji{color:#fff;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(1.6rem,6vw,2.2rem);font-weight:700;line-height:1}.mini-kana-small{font-family:var(--font-japanese);color:#ffffffb3;font-size:clamp(1.6rem,6vw,2.2rem);line-height:1}.mini-back .sound-btn{border-color:#ffffff4d;width:26px;height:26px;font-size:.7rem;position:absolute;top:4px;right:4px}.mini-back .sound-btn:hover{background:#ffffff1a;border-color:#fff9}:root{--color-primary:#6c5ce7;--color-correct:#00b894;--color-incorrect:#ff6b6b;--color-bg:#f5f6fa;--color-card:#fff;--color-text:#2d3436;--radius:16px;--shadow:0 4px 20px #00000014;--font-japanese:"Noto Sans JP", sans-serif}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}body{background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100dvh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}button{font-family:inherit}.app{min-height:100dvh}.fade-in{animation:.3s fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}