.flashcard-container{cursor:pointer;width:100%;max-width:520px;height:420px;margin:0 auto;animation:.6s ease-out fadeInUp}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.flashcard{perspective:1200px;width:100%;height:100%;position:relative}.flashcard-front,.flashcard-back{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);width:100%;height:100%;box-shadow:var(--shadow-md);backface-visibility:hidden;justify-content:center;align-items:center;transition:transform .5s,box-shadow .2s,border-color .2s;display:flex;position:absolute;overflow:hidden}.flashcard-front{transform:rotateY(0)}.flashcard-back{transform:rotateY(180deg)}.flashcard.flipped .flashcard-front{transform:rotateY(-180deg)}.flashcard.flipped .flashcard-back{transform:rotateY(0)}.flashcard-container:hover .flashcard-front,.flashcard-container:hover .flashcard-back{border-color:var(--color-border-strong);box-shadow:var(--shadow-lg)}.flashcard-container:focus,.flashcard-container:focus .flashcard-front,.flashcard-container:focus .flashcard-back,.flashcard-front:focus,.flashcard-back:focus{outline:none}.character{font-family:var(--font-jp);color:var(--color-ink);-webkit-user-select:none;user-select:none;font-size:10rem;font-weight:400}.romaji{font-family:var(--font-ui);color:var(--color-ink);-webkit-user-select:none;user-select:none;letter-spacing:.02em;font-size:5.5rem;font-weight:600}.audio-button{background:var(--color-accent);cursor:pointer;z-index:10;width:56px;height:56px;box-shadow:var(--shadow-sm);color:#fff;border:none;border-radius:50%;justify-content:center;align-items:center;transition:background .2s,box-shadow .2s;display:flex;position:absolute;bottom:24px;right:24px}.audio-button svg{width:32px;height:32px}.audio-button:hover{background:var(--color-accent-hover);box-shadow:var(--shadow-md)}.audio-button:active{transform:scale(.97)}.audio-button:focus{outline:none}@media (max-width:768px){.flashcard-container{max-width:90%;height:350px}.character{font-size:8rem}.romaji{font-size:4.5rem}}@media (max-width:480px){.flashcard-container{height:300px}.character{font-size:6rem}.romaji{font-size:3.5rem}}@media (prefers-reduced-motion:reduce){.flashcard-front,.flashcard-back{transition:none}.flashcard:not(.flipped) .flashcard-back,.flashcard.flipped .flashcard-front{visibility:hidden}}
.deck-selector{flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:10px;animation:.8s ease-out .2s both fadeIn;display:flex;position:relative}.deck-selector-accordion-header{display:none}.deck-selector-buttons{flex-wrap:wrap;justify-content:center;gap:10px;width:100%;display:flex}.deck-button{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-ui);color:var(--color-ink);box-shadow:var(--shadow-sm);white-space:nowrap;align-items:center;gap:6px;padding:8px 14px;font-size:.85rem;font-weight:500;transition:all .2s;display:flex}.deck-button:hover{background:var(--color-surface-hover);border-color:var(--color-border-strong);box-shadow:var(--shadow-md)}.deck-button:focus{outline:none}.deck-button.active{background:var(--color-accent);border-color:var(--color-accent);color:#fff;box-shadow:var(--shadow-sm)}.deck-label{font-weight:600}.deck-example{font-family:var(--font-jp);opacity:.8;font-size:1rem}@media (max-width:768px){.deck-selector{flex-direction:column;gap:0;margin-bottom:16px}.deck-selector-accordion-header{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;width:100%;font-family:var(--font-ui);color:var(--color-ink);box-shadow:var(--shadow-sm);justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;transition:all .2s;display:flex}.deck-selector-accordion-header:hover{background:var(--color-surface-hover);border-color:var(--color-border-strong)}.deck-selector-label{color:var(--color-ink);text-align:left;flex:1;font-size:.85rem;font-weight:500}.deck-selector-current-container{align-items:center;gap:8px;display:flex}.deck-selector-current-label{color:var(--color-accent);font-size:.95rem;font-weight:600}.deck-selector-current-example{font-family:var(--font-jp);color:var(--color-accent);font-size:1.1rem}.deck-selector-arrow{width:20px;height:20px;color:var(--color-ink-muted);flex-shrink:0;transition:transform .3s}.deck-selector-arrow.open{transform:rotate(180deg)}.deck-selector-buttons{grid-template-columns:1fr 1fr;gap:8px;max-height:0;margin-top:8px;transition:max-height .3s;display:none;overflow:hidden}.deck-selector-buttons.open{max-height:400px;display:grid}.deck-button{justify-content:center;gap:6px;width:100%;padding:12px;font-size:.85rem}.deck-button-individual{grid-column:1/-1}.deck-example{font-size:.95rem}}