/* Completion animation modal */
.completion-modal { position: fixed; inset: 0; background: rgba(0,0,0,85%); display: none; justify-content: center; align-items: center; z-index: 10000; opacity: 0; transition: opacity 0.3s ease; }
.completion-modal.show { display: flex; opacity: 1; }
.completion-content { background: #fff; border-radius: 1rem; padding: 3rem 2rem; text-align: center; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); max-width: 90vw; max-height: 90vh; overflow: hidden; }

.completion-stats { margin-bottom: 2rem; }
.completion-stats-values { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.completion-stats-values span { font-size: 2rem; font-weight: 700; color: #1f2937; }
.completion-stats-labels { display: flex; justify-content: center; align-items: center; gap: 1rem; font-size: 0.875rem; color: #6b7280; font-weight: 500; }
.completion-divider { color: #d1d5db !important; font-weight: 400 !important; }

.completion-text { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: #1f2937; line-height: 1.2; display: flex; justify-content: center; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.completion-letter { display: inline-flex; align-items: center; justify-content: center; margin: 0.125rem; border-radius: 0.25rem; border: 1px solid #d1d5db; font-family: 'JetBrains Mono', monospace; font-weight: 500; text-align: center; position: relative; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.1); flex-shrink: 0; width: 3rem; height: 3rem; font-size: 2rem; color: #1f2937; opacity: 0; transform: scale(0.8); }
.completion-letter.typing { animation: typing-appear 0.1s ease-out forwards; }
.completion-letter.typed { animation: key-press 0.3s ease-out forwards; opacity: 1; transform: scale(1); background: #dcfce7; border-color: #16a34a; color: #15803d; }
.completion-space { background: #f8fafc; border: 1px solid #cbd5e1; width: 3rem; }
.completion-space.typed { background: #dcfce7; border-color: #16a34a; }
.completion-space.typing::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1rem; height: 0.125rem; background: #6b7280; border-radius: 0.0625rem; }

@keyframes typing-appear { 0%{ opacity:0; transform:scale(0.8);} 100%{ opacity:1; transform:scale(1);} }
@keyframes key-press { 0%{ transform:scale(1) translateY(0); background:#fff; border-color:#d1d5db; box-shadow:0 1px 3px rgba(0,0,0,0.1);} 30%{ transform:scale(0.95) translateY(2px); background:#dbeafe; border-color:#3b82f6; box-shadow:0 0 0 2px rgba(59,130,246,0.2), inset 0 1px 2px rgba(0,0,0,0.1);} 60%{ transform:scale(1.05) translateY(-1px); background:#dcfce7; border-color:#16a34a; box-shadow:0 0 0 3px rgba(34,197,94,0.3), 0 2px 4px rgba(0,0,0,0.15);} 100%{ transform:scale(1) translateY(0); background:#dcfce7; border-color:#16a34a; color:#15803d; box-shadow:0 1px 3px rgba(0,0,0,0.1);} }

@media (max-width: 768px) { .completion-content{ padding:2rem 1.5rem; } .completion-stats-values span{ font-size:1.5rem; } .completion-text{ font-size:2rem; gap:0.1rem; } .completion-letter{ width:2rem; height:2rem; font-size:1.25rem; margin: 0.0625rem; } .completion-space{ width:2rem; } }
@media (max-width: 480px) { .completion-content{ padding:1.5rem 1rem; } .completion-stats-values span{ font-size:1.25rem; } .completion-stats-labels{ font-size:0.8125rem; } .completion-text{ font-size:1.5rem; } .completion-letter{ width:1.5rem; height:1.5rem; font-size:1rem; margin:0.0625rem; } .completion-space{ width:1.5rem; } }