.name-flip-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;z-index:2000;padding:var(--spacing-lg)}.name-flip-modal{background:var(--background-secondary);border:2px solid var(--border);border-radius:var(--radius-lg);padding:var(--spacing-2xl);max-width:900px;width:100%;max-height:90vh;overflow-y:auto;scrollbar-width:none;position:relative;box-shadow:0 15px 35px rgba(0,0,0,.5)}.name-flip-modal.active{max-width:1200px}.name-flip-modal::-webkit-scrollbar{display:none}.flip-intro{text-align:center}.flip-intro .intro-icon{font-size:4rem;margin-bottom:1rem}.flip-intro h2{font-size:2rem;color:var(--text-primary);margin-bottom:.5rem}.flip-intro .intro-description{color:var(--text-secondary);font-size:1.1rem;margin-bottom:1.5rem;max-width:500px;margin-left:auto;margin-right:auto}.previous-best{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:linear-gradient(135deg,rgba(255,215,0,.1),rgba(255,183,197,.1));border:2px solid rgba(255,215,0,.3);border-radius:var(--radius-lg);margin-bottom:1.5rem;color:var(--text-primary);font-weight:600}.previous-best .best-icon{font-size:1.25rem}.flip-intro .intro-rules{background:var(--surface);border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:2rem;text-align:left;max-width:400px;margin-left:auto;margin-right:auto}.flip-intro .intro-rules h3{margin:0 0 1rem;color:var(--accent)}.flip-intro .intro-rules ul{list-style:none;padding:0;margin:0}.flip-intro .intro-rules li{padding:.5rem 0;color:var(--text-secondary)}.intro-actions{gap:1rem}.flip-header,.intro-actions{display:flex;justify-content:center}.flip-header{align-items:center;gap:2rem;margin-bottom:1.5rem;padding:1rem;background:var(--surface);border-radius:var(--radius-lg)}.best-display,.progress-display,.timer-display{display:flex;align-items:center;gap:.5rem}.timer-display.counting-up .timer-value{font-size:1.5rem;font-weight:700;color:var(--sakura-pink);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.progress-display .progress-value{font-size:1.25rem;font-weight:600;color:var(--accent)}.best-display .best-value{font-size:1rem;color:gold;font-weight:600}.best-icon,.progress-icon,.timer-icon{font-size:1.25rem}.flip-input-container{display:flex;align-items:center;justify-content:center;margin-bottom:var(--spacing-xl);position:relative}.flip-input{width:200px;padding:.75rem 1rem;font-size:1.25rem;font-weight:600;text-align:center;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-lg);color:var(--text-primary);transition:border-color .15s ease}.flip-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(244,63,94,.2)}.flip-input::placeholder{color:var(--text-secondary);font-weight:400}.match-indicator{position:absolute;right:15px;top:50%;transform:translateY(-50%);padding:0;background:transparent;color:var(--accent);font-weight:700;font-size:1.25rem;animation:fadeIn .2s ease;white-space:nowrap;pointer-events:none}@keyframes fadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.flip-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));grid-gap:.75rem;gap:.75rem;margin-bottom:1.5rem}.flip-card{cursor:pointer;aspect-ratio:1;contain:layout style paint}.flip-card-inner{position:relative;width:100%;height:100%}.flip-card.flipped .flip-card-front{display:none}.flip-card.flipped .flip-card-back{visibility:visible}.flip-card-back,.flip-card-front{width:100%;height:100%;border-radius:var(--radius-md);display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid var(--border)}.flip-card-front{background:var(--surface)}.flip-card-back,.flip-card:not(.flipped):hover .flip-card-front{border-color:var(--accent)}.flip-card-back{background:var(--surface-hover);visibility:hidden;position:absolute;top:0;left:0}.card-character{font-size:1.75rem;font-family:var(--font-family-jp);color:var(--text-primary)}.flip-card-back .card-character{font-size:1.25rem}.card-romanization{font-size:.7rem;color:var(--accent);font-weight:600;margin-top:.125rem}.card-check{position:absolute;top:.25rem;right:.25rem;font-size:.75rem;color:var(--accent)}.card-mystery{font-size:2rem;color:var(--text-secondary);opacity:.5}.flip-card.just-matched .flip-card-back{animation:matchPop .2s ease}@keyframes matchPop{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}.flip-exit-btn{position:absolute;top:var(--spacing-md);right:var(--spacing-md);background:var(--surface);border:1px solid var(--border);color:var(--text-secondary);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);font-size:.875rem;cursor:pointer;transition:all var(--transition-base)}.flip-exit-btn:hover{background:var(--surface-hover);color:var(--text-primary)}.flip-results{text-align:center}.new-record-banner{background:linear-gradient(135deg,gold,#ff9500);color:#000;padding:1rem 2rem;border-radius:var(--radius-lg);font-size:1.5rem;font-weight:700;margin-bottom:1.5rem;animation:pulse .5s ease-in-out infinite alternate}@keyframes pulse{0%{transform:scale(1)}to{transform:scale(1.02)}}.flip-results h2{font-size:1.75rem;color:var(--text-primary)}.final-time,.flip-results h2{margin-bottom:1.5rem}.time-big{font-size:4rem;font-weight:700;color:var(--sakura-pink);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.time-label{color:var(--text-secondary);font-size:1rem}.best-time-display{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:var(--surface);border-radius:var(--radius-lg);margin-bottom:1.5rem}.best-time-display .best-icon{font-size:1.25rem}.best-time-display .best-label{color:var(--text-secondary)}.best-time-display .best-value{font-weight:700;color:gold}.flip-stats{display:flex;justify-content:center;gap:2rem;margin-bottom:2rem}.flip-stat{text-align:center}.flip-stat .stat-value{font-size:1.5rem;font-weight:700;color:var(--accent)}.flip-stat .stat-label{font-size:.875rem;color:var(--text-secondary)}.result-actions{display:flex;gap:1rem;justify-content:center}@media (max-width:768px){.name-flip-modal{padding:1.5rem}.flip-header{gap:1rem;flex-wrap:wrap}.flip-card-grid{grid-template-columns:repeat(auto-fill,minmax(55px,1fr));gap:.5rem}.card-character{font-size:1.5rem}.time-big{font-size:3rem}.intro-actions,.result-actions{flex-direction:column}}