@import url(https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap);html{background:#f8fafc;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;height:100%;scroll-behavior:smooth;transition:background .25s ease-out}html.dark-mode{background:#0f172a}body{color:#0f172a;font-family:inherit;height:100%;line-height:1.6;padding:0;width:100%}body.dark-mode{background:#0f172a;color:#f8fafc}#root{align-items:flex-start;height:100%;min-height:100vh;width:100%}#root,.app-loading{display:flex;justify-content:center}.app-loading{align-items:center;background:linear-gradient(135deg,#f8fafc,#f8fafc);bottom:0;left:0;position:fixed;right:0;top:0;z-index:9999}.dark-mode .app-loading{background:linear-gradient(135deg,#0f172a,#1e293b)}.app-loading .loading-content{align-items:center;animation:fadeIn .5s ease-out;display:flex;flex-direction:column;text-align:center}.app-loading .loading-logo{align-items:center;display:flex;gap:.5rem;margin-bottom:2rem}.app-loading .loading-logo span{animation:bounce 2s ease-in-out infinite;font-size:3rem}.app-loading .loading-logo h1{color:#0f172a;font-size:2.5rem;font-weight:700;letter-spacing:-.025em;margin:0}.dark-mode .app-loading .loading-logo h1{color:#f8fafc}.app-loading .loading-spinner{animation:spin 1s linear infinite;border:3px solid #e2e8f0;border-radius:50%;border-top-color:#2563eb;height:3rem;margin-bottom:1rem;width:3rem}.dark-mode .app-loading .loading-spinner{border-color:#334155}.app-loading .loading-text{color:#475569;font-size:1.125rem;font-weight:500;margin:0}.dark-mode .app-loading .loading-text{color:#cbd5e1}*{box-sizing:border-box}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#f8fafc,#f8fafc);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0;min-height:100vh;transition:background .25s ease-out}body.dark-mode{background:linear-gradient(135deg,#0f172a,#1e293b)}.app{align-items:center;background:linear-gradient(135deg,#f8fafc,#f8fafc);display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden;padding:1rem;position:relative;transition:background .25s ease-out;width:100%}.app.dark-mode{background:linear-gradient(135deg,#0f172a,#1e293b)}.offline-banner,.pwa-install-banner,.pwa-update-banner{align-items:center;animation:slideDown .3s ease-out;display:flex;font-size:.875rem;font-weight:500;justify-content:center;left:0;padding:.75rem 1rem;position:fixed;right:0;top:0;z-index:1000}.offline-banner .install-content,.offline-banner .update-content,.pwa-install-banner .install-content,.pwa-install-banner .update-content,.pwa-update-banner .install-content,.pwa-update-banner .update-content{align-items:center;display:flex;gap:1rem;justify-content:space-between;max-width:600px;width:100%}.offline-banner .install-content .install-actions,.offline-banner .update-content .install-actions,.pwa-install-banner .install-content .install-actions,.pwa-install-banner .update-content .install-actions,.pwa-update-banner .install-content .install-actions,.pwa-update-banner .update-content .install-actions{align-items:center;display:flex;gap:.75rem}.offline-banner button,.pwa-install-banner button,.pwa-update-banner button{background:#2563eb;border:none;border-radius:12px;color:#fff;cursor:pointer;font-size:.875rem;font-weight:500;padding:.5rem 1rem;transition:all .15s ease-out}.offline-banner button:hover,.pwa-install-banner button:hover,.pwa-update-banner button:hover{background:#1d4ed8;transform:translateY(-1px)}.offline-banner button:focus,.pwa-install-banner button:focus,.pwa-update-banner button:focus{box-shadow:0 0 0 3px rgba(37,99,235,.3);outline:none}.pwa-update-banner{background:linear-gradient(135deg,#f59e0b,#fbbf24);border-bottom:1px solid #f59e0b;color:#fff}.pwa-update-banner button{background:#fff;color:#f59e0b}.pwa-update-banner button:hover{background:#f8fafc}.offline-banner{background:linear-gradient(135deg,#64748b,#94a3b8);border-bottom:1px solid #64748b;color:#fff}.pwa-install-banner{background:linear-gradient(135deg,#10b981,#34d399);border-bottom:1px solid #10b981;color:#fff}.pwa-install-banner button{background:#fff;color:#10b981}.pwa-install-banner button:hover{background:#f8fafc}.pwa-install-banner .dismiss-btn{align-items:center;background:transparent;border:1px solid hsla(0,0%,100%,.3);border-radius:50%;color:#fff;display:flex;font-size:.75rem;height:1.5rem;justify-content:center;min-width:1.5rem;padding:.25rem .5rem}.pwa-install-banner .dismiss-btn:hover{background:hsla(0,0%,100%,.1);border-color:hsla(0,0%,100%,.5);transform:scale(1.1)}.pwa-install-banner .dismiss-btn:focus{box-shadow:0 0 0 2px hsla(0,0%,100%,.3);outline:none}@keyframes slideDown{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}.header-content{justify-content:space-between;width:100%}.header-actions,.header-content{align-items:center;display:flex;position:relative;z-index:1}.header-actions{gap:1rem}.header{align-items:center;color:#fff;display:flex;font-size:2rem;font-weight:700;gap:.5rem;letter-spacing:-.025em;margin:0;position:relative;text-align:left;z-index:1}.custom-keyboard .keyboard-key{background:hsla(0,0%,100%,.1);border:2px solid hsla(0,0%,100%,.2);border-radius:50%;cursor:pointer;height:3rem;max-height:3rem;max-width:3rem;min-height:3rem;min-width:3rem;overflow:hidden;padding:0;position:relative;transition:all .25s ease-out;width:3rem;z-index:1}.custom-keyboard .keyboard-key:hover{background:hsla(0,0%,100%,.2);border-color:hsla(0,0%,100%,.4);transform:scale(1.05)}.custom-keyboard .keyboard-key:active{transform:scale(.95)}.custom-keyboard .keyboard-key:focus{box-shadow:0 0 0 3px hsla(0,0%,100%,.3);outline:none}.login-content{position:relative;text-align:center}.login-content .dismiss-login-btn{align-items:center;background:none;border:none;border-radius:50%;color:#475569;cursor:pointer;display:flex;font-size:1.25rem;height:2rem;justify-content:center;padding:.5rem;position:absolute;right:-1rem;top:-1rem;transition:all .25s ease-out;width:2rem}.dark-mode .login-content .dismiss-login-btn{color:#cbd5e1}.login-content .dismiss-login-btn:hover{background:#f1f5f9;color:#0f172a}.dark-mode .login-content .dismiss-login-btn:hover{background:#1e293b;color:#f8fafc}.login-content .dismiss-login-btn:focus{box-shadow:0 0 0 2px rgba(37,99,235,.3);outline:none}.login-content h3{color:#0f172a;font-size:1.5rem;font-weight:700;margin:0 0 1rem}.dark-mode .login-content h3{color:#f8fafc}.login-content p{color:#475569;font-size:1rem;margin:0 0 1.5rem}.dark-mode .login-content p{color:#cbd5e1}.login-content .login-btn{align-items:center;background:linear-gradient(135deg,#2563eb,#3b82f6);border:none;border-radius:16px;color:#fff;cursor:pointer;display:inline-flex;font-size:1rem;font-weight:600;gap:.5rem;padding:1rem 2rem;transition:all .25s ease-out}.login-content .login-btn:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);transform:translateY(-2px)}.login-content .login-btn:active{transform:translateY(0)}.login-content .login-btn:focus{box-shadow:0 0 0 3px rgba(37,99,235,.3);outline:none}.status-content{text-align:center}.status-content .status{background:transparent;border-radius:0;color:#0f172a;font-size:1.1rem;font-weight:500;padding:0;white-space:pre-line}.dark-mode .status-content .status{color:#f8fafc}.status-content .status-signin-btn{align-items:center;background:linear-gradient(135deg,#2563eb,#3b82f6);border:none;border-radius:16px;color:#fff;cursor:pointer;display:inline-flex;font-size:.875rem;font-weight:600;gap:.5rem;margin-top:1rem;padding:.75rem 1.5rem;transition:all .25s ease-out}.status-content .status-signin-btn:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);transform:translateY(-2px)}.status-content .status-signin-btn:active{transform:translateY(0)}.status-content .status-signin-btn:focus{box-shadow:0 0 0 3px rgba(37,99,235,.3);outline:none}.card.card--status.card--background-error .status-content .status,.card.card--status.card--background-primary .status-content .status,.card.card--status.card--background-success .status-content .status,.card.card--status.card--background-warning .status-content .status{color:#fff}.game-content{display:flex;flex-direction:column;gap:.75rem;justify-content:flex-start;min-height:500px}.game-content.ripple-wave-active .word .letter{animation:rippleWaveStaggered .6s ease-out forwards;animation-delay:0s;animation-delay:var(--ripple-delay,0s)}.word{align-items:center;display:flex;gap:.75rem;height:4rem;justify-content:center;transition:.25s ease-out}.word.current .letter{border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,.2)}.word.invalid{animation:shake .5s ease-in-out}.word.checking .letter{animation:loadingRippleStaggered 1.5s ease-in-out infinite;animation-delay:0s;animation-delay:var(--ripple-delay,0s);border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,.3)}.letter{align-items:center;background:#fff;border:2px solid #cbd5e1;border-radius:12px;color:#0f172a;cursor:default;display:flex;font-size:1.75rem;font-weight:700;height:4rem;justify-content:center;overflow:hidden;position:relative;text-transform:uppercase;transition:all .25s ease-out;width:4rem}.letter.exact,.letter.misplaced{animation:bounceElastic .6s cubic-bezier(.25,.46,.45,.94)}.letter.exact:first-child,.letter.misplaced:first-child{animation-delay:.08s}.letter.exact:nth-child(2),.letter.misplaced:nth-child(2){animation-delay:.16s}.letter.exact:nth-child(3),.letter.misplaced:nth-child(3){animation-delay:.24s}.letter.exact:nth-child(4),.letter.misplaced:nth-child(4){animation-delay:.32s}.letter.exact:nth-child(5),.letter.misplaced:nth-child(5){animation-delay:.4s}.letter.empty{background:#f8fafc;border-color:#e2e8f0;border-style:dashed;color:transparent}.letter.empty:after{background:#cbd5e1;border-radius:50%;content:"";height:1px;position:absolute;width:1px}.letter.exact{background:linear-gradient(135deg,#10b981,#34d399);border-color:#10b981;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1),0 0 20px rgba(16,185,129,.3);color:#fff;transform:scale(1.05)}.letter.exact:before{animation:shimmer 2s cubic-bezier(.4,0,.2,1) infinite;background:linear-gradient(90deg,transparent,transparent 20%,hsla(0,0%,100%,.15) 30%,hsla(0,0%,100%,.25) 40%,hsla(0,0%,100%,.15) 50%,transparent 60%,transparent);bottom:0;content:"";left:0;position:absolute;right:0;top:0}.letter.misplaced{background:linear-gradient(135deg,#f59e0b,#fbbf24);border-color:#f59e0b;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1),0 0 20px rgba(245,158,11,.3);color:#fff;transform:scale(1.05)}.letter.misplaced:before{animation:shimmer 2.5s cubic-bezier(.4,0,.2,1) infinite;background:linear-gradient(90deg,transparent,transparent 20%,hsla(0,0%,100%,.08) 30%,hsla(0,0%,100%,.15) 40%,hsla(0,0%,100%,.08) 50%,transparent 60%,transparent);bottom:0;content:"";left:0;position:absolute;right:0;top:0}.letter.current{animation:ripple 2s infinite;background:#2563eb;border-color:#2563eb;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1),0 0 20px rgba(37,99,235,.3);color:#fff;transform:scale(1.05)}.letter span{position:relative;transition:.15s ease-out}.dark-mode .letter{background:#1e293b;border-color:#334155;color:#f8fafc}.dark-mode .letter.empty{background:#1e293b;border-color:#475569}.dark-mode .letter.empty:after{background:#64748b}.dark-mode .letter.exact{color:#34d399}.dark-mode .letter.misplaced{color:#fbbf24}.stats-content{text-align:center}.stats-content h3{color:#0f172a;font-size:1.5rem;font-weight:700;margin:0 0 1.5rem}.dark-mode .stats-content h3{color:#f8fafc}.stats-content h4{color:#475569;font-size:1.1rem;font-weight:600;margin:2rem 0 1rem}.dark-mode .stats-content h4{color:#cbd5e1}.stats-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(4,1fr);margin-bottom:1rem}.stat-item{text-align:center}.stat-item .stat-number{color:#2563eb;font-size:2rem;font-weight:800;line-height:1}.stat-item .stat-label{color:#475569;font-size:.875rem;font-weight:500;margin-top:.25rem}.dark-mode .stat-item .stat-label{color:#cbd5e1}.guess-distribution{margin-top:1.5rem}.guess-distribution h4{color:#0f172a;font-size:1.1rem;font-weight:600;margin-bottom:1rem;text-align:center}.guess-distribution .guess-row{align-items:center;display:flex;gap:1rem;margin-bottom:.75rem}.guess-distribution .guess-row .guess-number{color:#475569;font-weight:600;text-align:center;width:1.5rem}.guess-distribution .guess-row .guess-bar{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:12px;flex:1 1;height:2rem;min-width:60px;overflow:hidden;position:relative}.guess-distribution .guess-row .guess-bar .guess-fill{background:linear-gradient(135deg,#10b981,#34d399);border-radius:12px;box-shadow:inset 0 1px 3px rgba(0,0,0,.1);height:100%;min-width:0;position:relative;transition:width .25s ease-out}.guess-distribution .guess-row .guess-bar .guess-fill:after{background:linear-gradient(45deg,transparent 30%,hsla(0,0%,100%,.1) 50%,transparent 70%);background-size:4px 4px;bottom:0;content:"";left:0;position:absolute;right:0;top:0}.guess-distribution .guess-row .guess-bar .guess-empty{color:#475569;font-size:.875rem;font-weight:500;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%)}.guess-distribution .guess-row .guess-count{color:#475569;font-weight:600;text-align:right;width:2rem}.dark-mode .guess-distribution h4{color:#f8fafc}.dark-mode .guess-distribution .guess-row .guess-count,.dark-mode .guess-distribution .guess-row .guess-number{color:#cbd5e1}.dark-mode .guess-distribution .guess-row .guess-bar{background:#1e293b;border-color:#475569}.dark-mode .guess-distribution .guess-row .guess-bar .guess-empty{color:#cbd5e1}.keyboard-wrapper{border-top:1px solid #e2e8f0;margin-top:1.5rem;padding-top:1.5rem;width:100%}.keyboard-wrapper .simple-keyboard.hg-theme-default{margin:0 auto;max-width:100%}.dark-mode .keyboard-wrapper{border-top-color:#334155}.keyboard-wrapper.ripple-wave-active .custom-keyboard .keyboard-row .keyboard-key{animation:keyboardRippleWave .6s ease-out forwards;animation-delay:.1s;animation-delay:calc(var(--ripple-delay, 0s) + .1s)}.simple-keyboard.hg-theme-default{background:transparent;border:none;border-radius:0;box-shadow:none;margin:0;padding:0;transition:all .25s ease-out}.simple-keyboard.hg-theme-default .hg-button{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 2px 0 rgba(0,0,0,.05);color:#334155;cursor:pointer;font-size:.9rem;font-weight:600;height:3rem;min-width:2.5rem;transition:all .15s ease-out;-webkit-user-select:none;-ms-user-select:none;user-select:none}.simple-keyboard.hg-theme-default .hg-button:hover{background:#e2e8f0;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);transform:translateY(-1px)}.simple-keyboard.hg-theme-default .hg-button:active{box-shadow:0 1px 2px 0 rgba(0,0,0,.05);transform:translateY(0)}.simple-keyboard.hg-theme-default .hg-button:focus{box-shadow:0 0 0 3px rgba(37,99,235,.3);outline:none}.simple-keyboard.hg-theme-default .found-letter{background:linear-gradient(135deg,#10b981,#34d399);border-color:#10b981;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);color:#fff}.simple-keyboard.hg-theme-default .found-letter:hover{background:linear-gradient(135deg,#34d399,#10b981);box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);transform:translateY(-1px)}.simple-keyboard.hg-theme-default .absent-letter{background:linear-gradient(135deg,#ef4444,#f87171);border-color:#ef4444;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);color:#fff}.simple-keyboard.hg-theme-default .absent-letter:hover{background:linear-gradient(135deg,#f87171,#ef4444);box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);transform:translateY(-1px)}.simple-keyboard.hg-theme-default .emphasis{animation:pulse 2s infinite;background:linear-gradient(135deg,#2563eb,#3b82f6);border-color:#2563eb;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1),0 0 20px rgba(37,99,235,.3);color:#fff}.simple-keyboard.hg-theme-default .emphasis:hover{background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1),0 0 30px rgba(37,99,235,.4);transform:translateY(-1px)}.dark-mode .simple-keyboard.hg-theme-default{background:transparent;border-color:transparent;box-shadow:none}.dark-mode .simple-keyboard.hg-theme-default .hg-button{background:#1e293b;border-color:#334155;color:#f8fafc}.dark-mode .simple-keyboard.hg-theme-default .hg-button:hover{background:#334155}@media(max-width:768px){.app{padding:.5rem}.header{font-size:1.75rem}.header-actions{gap:.75rem}.game-content{gap:.5rem;min-height:350px}.keyboard-wrapper{margin-top:1rem;padding-top:1rem}.letter{font-size:1.5rem;height:3.5rem;width:3.5rem}.word{gap:.5rem;height:3.5rem}.simple-keyboard.hg-theme-default{padding:0}.simple-keyboard.hg-theme-default .hg-button{font-size:.75rem;height:2.5rem;margin:.1rem;min-width:1.8rem}.simple-keyboard.hg-theme-default .hg-row{flex-wrap:wrap;justify-content:center}.simple-keyboard.hg-theme-default .hg-row:first-child .hg-button{font-size:.7rem;min-width:1.6rem}.simple-keyboard.hg-theme-default .hg-row:nth-child(2) .hg-button{font-size:.7rem;min-width:1.7rem}.simple-keyboard.hg-theme-default .hg-row:last-child .hg-button{font-size:.7rem;min-width:1.6rem}.stats-content h3{font-size:1.25rem}.stats-grid{gap:.75rem}.stat-item .stat-number{font-size:1.5rem}}@media(max-width:480px){.letter{font-size:1.25rem;height:3rem;width:3rem}.word{gap:.4rem;height:3rem}.header{font-size:1.5rem}.simple-keyboard.hg-theme-default .hg-button{font-size:.65rem;height:2.25rem;margin:.05rem;min-width:1.5rem}.simple-keyboard.hg-theme-default .hg-row:first-child .hg-button{font-size:.6rem;min-width:1.4rem}.simple-keyboard.hg-theme-default .hg-row:nth-child(2) .hg-button{font-size:.6rem;min-width:1.5rem}.simple-keyboard.hg-theme-default .hg-row:last-child .hg-button{font-size:.6rem;min-width:1.4rem}.header-actions{gap:.5rem}.stats-content h3{font-size:1.125rem}.stats-grid{gap:1rem;grid-template-columns:repeat(2,1fr)}.guess-distribution .guess-row{gap:.5rem}.guess-distribution .guess-row .guess-number{font-size:.875rem;width:1.25rem}.guess-distribution .guess-row .guess-count{font-size:.875rem;width:1.5rem}}.custom-keyboard{display:flex;flex-direction:column;gap:.5rem;margin:1rem auto;max-width:600px;padding:0 1rem}.custom-keyboard .keyboard-row{display:flex;gap:.25rem;justify-content:center}.custom-keyboard .keyboard-row:nth-child(2){margin:0 1rem}.custom-keyboard .keyboard-row:nth-child(3){margin:0 2rem}.custom-keyboard .keyboard-key{-webkit-tap-highlight-color:rgba(0,0,0,0);align-items:center;border-radius:.5rem;display:flex;font-size:.875rem;font-weight:600;height:3.5rem;justify-content:center;min-width:2.5rem;text-transform:uppercase;transition:all .2s ease}.custom-keyboard .keyboard-key:hover{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}.custom-keyboard .keyboard-key[aria-label=Backspace],.custom-keyboard .keyboard-key[aria-label=Submit]{font-size:.75rem;min-width:4rem}.custom-keyboard .keyboard-key.correct{background:#10b981;border-color:#10b981;color:#fff}.custom-keyboard .keyboard-key.present{background:#f59e0b;border-color:#f59e0b;color:#fff}.custom-keyboard .keyboard-key.absent{background:#ef4444;border-color:#ef4444;color:#fff}.custom-keyboard .keyboard-key.emphasis{animation:pulse .5s ease-in-out;background:#f59e0b;border-color:#f59e0b;color:#fff}.custom-keyboard .keyboard-key.current{animation:ripple 2s infinite;background:#2563eb;border-color:#2563eb;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1),0 0 20px rgba(37,99,235,.3);color:#fff;transform:scale(1.05)}.custom-keyboard .keyboard-key.default{background:#e2e8f0;border-color:#cbd5e1;color:#0f172a}.dark-mode .custom-keyboard .keyboard-key.default{background:#334155;border-color:#475569;color:#f8fafc}@media(max-width:768px){.custom-keyboard{gap:.375rem;padding:0 .5rem}.custom-keyboard .keyboard-row{gap:.125rem}.custom-keyboard .keyboard-row:nth-child(2){margin:0 .5rem}.custom-keyboard .keyboard-row:nth-child(3){margin:0 1rem}.custom-keyboard .keyboard-key{font-size:.75rem;height:3rem;min-width:2rem}.custom-keyboard .keyboard-key[aria-label=Backspace],.custom-keyboard .keyboard-key[aria-label=Submit]{font-size:.625rem;min-width:3rem}}.popup-overlay{align-items:center;animation:fadeIn .3s ease-out;background:rgba(0,0,0,.8);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.popup-modal{animation:scaleIn .3s ease-out;background:#fff;border-radius:24px;box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);max-height:90vh;overflow-y:auto;position:relative;width:90%}.dark-mode .popup-modal{background:#1e293b;box-shadow:0 20px 25px -5px rgba(0,0,0,.4),0 8px 10px -6px rgba(0,0,0,.4)}.popup-header{align-items:center;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;padding:2rem 2rem 1.5rem}.dark-mode .popup-header{border-bottom-color:#334155}.popup-title{flex:1 1}.popup-title h2{color:#0f172a;font-size:1.5rem;font-weight:700;margin:0}.dark-mode .popup-title h2{color:#f8fafc}.close-btn{align-items:center;background:none;border:none;border-radius:12px;color:#64748b;cursor:pointer;display:flex;flex-shrink:0;font-size:2rem;height:2.5rem;justify-content:center;padding:.25rem;transition:all .15s ease-out;width:2.5rem}.close-btn:hover{background:#f1f5f9;color:#334155}.dark-mode .close-btn:hover{background:#1e293b;color:#cbd5e1}.close-btn:focus{box-shadow:0 0 0 3px #3b82f6;outline:none}.popup-tabs-container{border-bottom:1px solid #e2e8f0;position:relative}.dark-mode .popup-tabs-container{border-bottom-color:#334155}.scroll-shadow{bottom:0;pointer-events:none;position:absolute;top:0;transition:opacity .15s ease-out;width:20px;z-index:1}.scroll-shadow.scroll-shadow-left{background:linear-gradient(90deg,rgba(0,0,0,.15) 0,transparent);left:0}.dark-mode .scroll-shadow.scroll-shadow-left{background:linear-gradient(90deg,rgba(0,0,0,.4) 0,transparent)}.scroll-shadow.scroll-shadow-right{background:linear-gradient(270deg,rgba(0,0,0,.15) 0,transparent);right:0}.dark-mode .scroll-shadow.scroll-shadow-right{background:linear-gradient(270deg,rgba(0,0,0,.4) 0,transparent)}.popup-tabs{display:flex;justify-content:flex-start;overflow-x:auto;scrollbar-color:#cbd5e1 transparent;scrollbar-width:thin}.dark-mode .popup-tabs{scrollbar-color:#475569 transparent}.popup-tabs::-webkit-scrollbar{height:4px}.popup-tabs::-webkit-scrollbar-track{background:transparent}.popup-tabs::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}.dark-mode .popup-tabs::-webkit-scrollbar-thumb{background:#475569}.popup-tabs::-webkit-scrollbar-thumb:hover{background:#94a3b8}.dark-mode .popup-tabs::-webkit-scrollbar-thumb:hover{background:#64748b}.popup-tabs .tab{background:none;border:none;border-bottom:3px solid transparent;color:#475569;cursor:pointer;flex-shrink:0;font-size:.875rem;font-weight:500;outline:none;padding:1rem 1.5rem;transition:all .15s ease-out;white-space:nowrap}.dark-mode .popup-tabs .tab{color:#cbd5e1}.popup-tabs .tab:hover{background:#f8fafc;color:#0f172a}.dark-mode .popup-tabs .tab:hover{background:#1e293b;color:#f8fafc}.popup-tabs .tab.active{background:#f8fafc;border-bottom-color:#2563eb;color:#2563eb}.dark-mode .popup-tabs .tab.active{background:#1e293b}.popup-tabs .tab:focus{outline:none}.popup-content{max-height:60vh;overflow-y:auto;padding:2rem}.popup-footer{border-top:1px solid #e2e8f0;padding:1.5rem 2rem}.dark-mode .popup-footer{border-top-color:#334155}@media(max-width:768px){.popup-modal{max-height:95vh;width:95%}.popup-header{padding:1.5rem 1.5rem 1rem}.popup-header .popup-title h2{font-size:1.25rem}.popup-tabs{justify-content:center}.popup-tabs .tab{font-size:.8rem;padding:.75rem 1rem}.popup-tabs-container.scrollable .popup-tabs{justify-content:flex-start}.popup-content{padding:1.5rem}.popup-footer{padding:1rem 1.5rem}}@media(max-width:480px){.popup-header{padding:1rem 1rem .75rem}.popup-header .popup-title h2{font-size:1.125rem}.popup-tabs-container .popup-tabs{flex-direction:row;overflow-x:auto}.popup-tabs-container .popup-tabs .tab{border-bottom:3px solid transparent;border-right:none;font-size:.75rem;padding:.5rem .75rem;white-space:nowrap}.popup-tabs-container .popup-tabs .tab.active{border-bottom-color:#2563eb;border-right-color:transparent}.scroll-shadow{display:block}.popup-content{padding:1rem}}.user-info{align-items:center;display:flex;gap:1rem;margin-bottom:2rem}.user-avatar{border:3px solid #2563eb;border-radius:50%;height:4rem;object-fit:cover;width:4rem}.user-details h3{color:#0f172a;font-size:1.5rem;font-weight:700;margin:0 0 .25rem}.dark-mode .user-details h3{color:#f8fafc}.user-details p{color:#475569;font-size:.875rem;margin:0 .125rem}.dark-mode .user-details p{color:#cbd5e1}.user-details p.member-since{font-size:.75rem;opacity:.8}.stats-content .stats-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:2rem}.stats-content .stat-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:1.5rem;text-align:center;transition:all .15s ease-out}.dark-mode .stats-content .stat-card{background:#1e293b;border-color:#334155}.stats-content .stat-card:hover{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);transform:translateY(-2px)}.stats-content .stat-card .stat-number{color:#2563eb;font-size:2rem;font-weight:800;line-height:1;margin-bottom:.5rem}.stats-content .stat-card .stat-label{color:#475569;font-size:.875rem;font-weight:500}.dark-mode .stats-content .stat-card .stat-label{color:#cbd5e1}.progress-section h3{color:#0f172a;font-size:1.25rem;font-weight:600;margin:0 0 1.5rem}.dark-mode .progress-section h3{color:#f8fafc}.progress-section .progress-item{margin-bottom:1.5rem}.progress-section .progress-item .progress-header{color:#475569;display:flex;font-size:.875rem;justify-content:space-between;margin-bottom:.5rem}.dark-mode .progress-section .progress-item .progress-header{color:#cbd5e1}.progress-section .progress-item .progress-bar{background:#e2e8f0;border-radius:12px;height:.75rem;overflow:hidden}.dark-mode .progress-section .progress-item .progress-bar{background:#334155}.progress-section .progress-item .progress-bar .progress-fill{background:linear-gradient(135deg,#2563eb,#3b82f6);border-radius:12px;height:100%;transition:width .25s ease-out}.achievements-content .achievement-category{margin-bottom:2rem}.achievements-content .achievement-category h3{color:#0f172a;font-size:1.25rem;font-weight:600;margin:0 0 1rem}.dark-mode .achievements-content .achievement-category h3{color:#f8fafc}.achievements-content .achievements-grid{grid-gap:1rem;display:grid;gap:1rem}.achievements-content .achievement-badge{align-items:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;display:flex;gap:1rem;padding:1rem;transition:all .15s ease-out}.dark-mode .achievements-content .achievement-badge{background:#1e293b;border-color:#334155}.achievements-content .achievement-badge.earned{background:linear-gradient(135deg,#10b981,#34d399);border-color:#10b981;color:#fff}.achievements-content .achievement-badge.earned .achievement-date,.achievements-content .achievement-badge.earned .achievement-description,.achievements-content .achievement-badge.earned .achievement-title{color:#fff}.achievements-content .achievement-badge:hover{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);transform:translateY(-2px)}.achievements-content .achievement-badge .achievement-icon{flex-shrink:0;font-size:2rem}.achievements-content .achievement-badge .achievement-info{flex:1 1}.achievements-content .achievement-badge .achievement-info .achievement-title{color:#0f172a;font-weight:600;margin-bottom:.25rem}.dark-mode .achievements-content .achievement-badge .achievement-info .achievement-title{color:#f8fafc}.achievements-content .achievement-badge .achievement-info .achievement-description{color:#475569;font-size:.875rem;margin-bottom:.5rem}.dark-mode .achievements-content .achievement-badge .achievement-info .achievement-description{color:#cbd5e1}.achievements-content .achievement-badge .achievement-info .achievement-date{color:#475569;font-size:.75rem;opacity:.8}.dark-mode .achievements-content .achievement-badge .achievement-info .achievement-date{color:#cbd5e1}.achievements-content .no-achievements{padding:3rem 1rem;text-align:center}.achievements-content .no-achievements .no-achievements-icon{font-size:4rem;margin-bottom:1rem}.achievements-content .no-achievements h3{color:#0f172a;margin:0 0 .5rem}.dark-mode .achievements-content .no-achievements h3{color:#f8fafc}.achievements-content .no-achievements p{color:#475569}.dark-mode .achievements-content .no-achievements p{color:#cbd5e1}.loading-state{text-align:center}.sign-out-btn{background:#ef4444;border:none;border-radius:12px;color:#fff;cursor:pointer;font-weight:500;padding:.75rem 2rem;transition:all .15s ease-out}.sign-out-btn:hover{background:#f87171;transform:translateY(-1px)}.popup-footer{text-align:left}@media(max-width:768px){.user-info{flex-direction:column;text-align:center}.stats-grid{grid-template-columns:repeat(2,1fr)}.achievement-badge{flex-direction:column;text-align:center}.achievement-badge .achievement-icon{font-size:1.5rem}.popup-footer{text-align:center}}@media(max-width:480px){.stats-grid{grid-template-columns:1fr}}.leaderboard-title{display:flex;flex-direction:column;gap:.5rem}.leaderboard-title span{color:#0f172a;font-size:1.75rem;font-weight:700}.dark-mode .leaderboard-title span{color:#f8fafc}.leaderboard-title .user-rank{align-items:center;display:flex;gap:.5rem}.leaderboard-title .user-rank .rank-label{color:#475569;font-size:.875rem;font-weight:500}.dark-mode .leaderboard-title .user-rank .rank-label{color:#cbd5e1}.leaderboard-title .user-rank .rank-number{background:#2563eb;border-radius:12px;color:#fff;font-size:.875rem;font-weight:600;min-width:2rem;padding:.25rem .5rem;text-align:center}.loading-state{align-items:center;color:#475569;display:flex;flex-direction:column;justify-content:center;padding:3rem}.dark-mode .loading-state{color:#cbd5e1}.loading-state .loading-spinner{animation:spin 1s linear infinite;border:3px solid #e2e8f0;border-radius:50%;border-top-color:#2563eb;height:3rem;margin-bottom:1rem;width:3rem}.dark-mode .loading-state .loading-spinner{border-color:#334155}.loading-state p{font-size:1rem;margin:0}.error-state{align-items:center;color:#475569;display:flex;flex-direction:column;justify-content:center;padding:3rem;text-align:center}.dark-mode .error-state{color:#cbd5e1}.error-state p{font-size:1rem;margin:0 0 1rem}.error-state .retry-btn{background:#2563eb;border:none;border-radius:12px;color:#fff;cursor:pointer;font-weight:500;padding:.75rem 1.5rem;transition:all .25s ease-out}.error-state .retry-btn:hover{background:#1d4ed8;transform:translateY(-1px)}.error-state .retry-btn:focus{box-shadow:0 0 0 3px #3b82f6;outline:none}.leaderboard-list{gap:1rem}.empty-state,.leaderboard-list{display:flex;flex-direction:column}.empty-state{align-items:center;color:#475569;justify-content:center;padding:3rem;text-align:center}.dark-mode .empty-state{color:#cbd5e1}.empty-state .empty-icon{font-size:3rem;margin-bottom:1rem}.empty-state h3{color:#0f172a;font-size:1.25rem;font-weight:600;margin:0 0 .5rem}.dark-mode .empty-state h3{color:#f8fafc}.empty-state p{font-size:1rem;margin:0}.leaderboard-item{align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:16px;display:flex;gap:1.5rem;padding:1.5rem;transition:all .25s ease-out}.dark-mode .leaderboard-item{background:#1e293b;border-color:#334155}.leaderboard-item:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);transform:translateY(-2px)}.dark-mode .leaderboard-item:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,.4),0 4px 6px -4px rgba(0,0,0,.4)}.leaderboard-item:first-child{background:linear-gradient(135deg,gold,#ffed4e);border-color:#fbbf24}.dark-mode .leaderboard-item:first-child{background:linear-gradient(135deg,#92400e,#a16207);border-color:#d97706}.leaderboard-item:nth-child(2){background:linear-gradient(135deg,silver,#e5e7eb);border-color:#9ca3af}.dark-mode .leaderboard-item:nth-child(2){background:linear-gradient(135deg,#374151,#4b5563);border-color:#6b7280}.leaderboard-item:nth-child(3){background:linear-gradient(135deg,#cd7f32,#d97706);border-color:#b45309}.dark-mode .leaderboard-item:nth-child(3){background:linear-gradient(135deg,#78350f,#92400e);border-color:#a16207}.rank-section{align-items:center;display:flex;justify-content:center;min-width:3rem}.rank-section .rank-icon{color:#0f172a;font-size:1.5rem;font-weight:700}.dark-mode .rank-section .rank-icon{color:#f8fafc}.user-section{align-items:center;display:flex;flex:1 1;gap:1rem}.user-section .user-avatar{border:2px solid #2563eb;border-radius:50%;height:3rem;object-fit:cover;width:3rem}.user-section .user-info .user-name{color:#0f172a;font-size:1.125rem;font-weight:600;margin:0 0 .25rem}.dark-mode .user-section .user-info .user-name{color:#f8fafc}.user-section .user-info .user-stats{display:flex;gap:1rem}.user-section .user-info .user-stats .stat{color:#475569;font-size:.875rem}.dark-mode .user-section .user-info .user-stats .stat{color:#cbd5e1}.metric-section{align-items:center;display:flex;flex-direction:column;min-width:6rem;text-align:center}.metric-section .metric-value{color:#2563eb;font-size:1.5rem;font-weight:700;margin-bottom:.25rem}.metric-section .metric-label{color:#475569;font-size:.75rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase}.dark-mode .metric-section .metric-label{color:#cbd5e1}.leaderboard-footer .leaderboard-note{color:#475569;font-size:.875rem;margin:0}.dark-mode .leaderboard-footer .leaderboard-note{color:#cbd5e1}.leaderboard-footer .leaderboard-note .metric-note{color:#2563eb;font-weight:500}.dark-mode .leaderboard-footer .leaderboard-note .metric-note{color:#3b82f6}@media(max-width:768px){.leaderboard-title span{font-size:1.5rem}.leaderboard-title .user-rank .rank-label{font-size:.8rem}.leaderboard-title .user-rank .rank-number{font-size:.8rem;padding:.2rem .4rem}.leaderboard-item{gap:1rem;padding:1rem}.leaderboard-item .user-section .user-avatar{height:2.5rem;width:2.5rem}.leaderboard-item .user-section .user-info .user-name{font-size:1rem}.leaderboard-item .user-section .user-info .user-stats{flex-direction:column;gap:.25rem}.leaderboard-item .user-section .user-info .user-stats .stat{font-size:.8rem}.leaderboard-item .metric-section{min-width:4rem}.leaderboard-item .metric-section .metric-value{font-size:1.25rem}.leaderboard-item .metric-section .metric-label{font-size:.7rem}}.about-content .about-section,.about-content .instruction-section,.instructions-content .about-section,.instructions-content .instruction-section{margin-bottom:2rem}.about-content .about-section:last-child,.about-content .instruction-section:last-child,.instructions-content .about-section:last-child,.instructions-content .instruction-section:last-child{margin-bottom:0}.about-content .about-section h3,.about-content .instruction-section h3,.instructions-content .about-section h3,.instructions-content .instruction-section h3{color:#0f172a;font-size:1.25rem;font-weight:600;margin:0 0 1rem}.dark-mode .about-content .about-section h3,.dark-mode .about-content .instruction-section h3,.dark-mode .instructions-content .about-section h3,.dark-mode .instructions-content .instruction-section h3{color:#f8fafc}.about-content .about-section p,.about-content .instruction-section p,.instructions-content .about-section p,.instructions-content .instruction-section p{color:#475569;line-height:1.6;margin:0 0 1rem}.dark-mode .about-content .about-section p,.dark-mode .about-content .instruction-section p,.dark-mode .instructions-content .about-section p,.dark-mode .instructions-content .instruction-section p{color:#cbd5e1}.color-examples{display:flex;flex-direction:column;gap:1rem}.color-example{align-items:center;background:#f8fafc;border-radius:12px;display:flex;gap:1rem;padding:1rem}.dark-mode .color-example{background:#1e293b}.letter-example{align-items:center;border-radius:12px;color:#fff;display:flex;font-size:1.5rem;font-weight:700;height:3rem;justify-content:center;width:3rem}.letter-example.correct{background:#10b981}.letter-example.misplaced{background:#f59e0b}.letter-example.incorrect{background:#64748b}.color-description{color:#475569;flex:1 1}.dark-mode .color-description{color:#cbd5e1}.color-description strong{color:#0f172a;font-weight:600}.dark-mode .color-description strong{color:#f8fafc}.features-list,.goals-list,.tips-list{color:#475569;margin:0;padding-left:1.5rem}.dark-mode .features-list,.dark-mode .goals-list,.dark-mode .tips-list{color:#cbd5e1}.features-list li,.goals-list li,.tips-list li{line-height:1.6;margin-bottom:.5rem}.features-list li:last-child,.goals-list li:last-child,.tips-list li:last-child{margin-bottom:0}.features-list li strong,.goals-list li strong,.tips-list li strong{color:#0f172a;font-weight:600}.dark-mode .features-list li strong,.dark-mode .goals-list li strong,.dark-mode .tips-list li strong{color:#f8fafc}.developer-info{align-items:center;background:#f8fafc;border-radius:12px;display:flex;gap:1rem;padding:1rem}.dark-mode .developer-info{background:#1e293b}.developer-avatar{align-items:center;background:#2563eb;border-radius:50%;display:flex;font-size:2rem;height:4rem;justify-content:center;width:4rem}.developer-details h4{color:#0f172a;font-size:1.125rem;font-weight:600;margin:0 0 .5rem}.dark-mode .developer-details h4{color:#f8fafc}.developer-details p{color:#475569;font-size:.875rem;margin:0}.dark-mode .developer-details p{color:#cbd5e1}.contact-text{color:#475569;font-size:.875rem;margin:1rem 0 .75rem}.dark-mode .contact-text{color:#cbd5e1}.contact-icons{gap:1rem;margin-top:.75rem}.contact-icon,.contact-icons{display:flex;justify-content:center}.contact-icon{align-items:center;background:#f1f5f9;border-radius:50%;font-size:1.125rem;height:2.5rem;text-decoration:none;transition:all .15s ease-out;width:2.5rem}.dark-mode .contact-icon{background:#1e293b}.contact-icon:hover{background:#2563eb;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);transform:translateY(-2px)}.dark-mode .contact-icon:hover{background:#2563eb;box-shadow:0 4px 6px -1px rgba(0,0,0,.4),0 2px 4px -2px rgba(0,0,0,.4)}.contact-icon span{color:#0f172a;transition:color .15s ease-out}.dark-mode .contact-icon span{color:#f8fafc}.contact-icon:hover span{color:#fff}@media(max-width:768px){.color-example{align-items:flex-start;flex-direction:column;gap:.75rem}.developer-info{flex-direction:column;text-align:center}}@media(max-width:480px){.tech-stack{grid-template-columns:1fr}}.header-icon{align-items:center;background:hsla(0,0%,100%,.1);border:2px solid hsla(0,0%,100%,.2);border-radius:50%;cursor:pointer;display:flex;height:3rem;justify-content:center;max-height:3rem;max-width:3rem;min-height:3rem;min-width:3rem;overflow:hidden;padding:0;position:relative;transition:all .25s ease-out;width:3rem;z-index:1}.header-icon:hover{background:hsla(0,0%,100%,.2);border-color:hsla(0,0%,100%,.4);transform:scale(1.05)}.header-icon:active{transform:scale(.95)}.header-icon:focus{box-shadow:0 0 0 3px hsla(0,0%,100%,.3);outline:none}.header-icon-emoji{align-items:center;color:#fff;display:flex;font-size:1.25rem;justify-content:center;line-height:1}.header-icon-image{border-radius:50%;height:100%;object-fit:cover;width:100%}@media(max-width:768px){.header-icon{height:2.75rem;max-height:2.75rem;max-width:2.75rem;min-height:2.75rem;min-width:2.75rem;width:2.75rem}.header-icon-emoji{font-size:1rem}}@keyframes ripple{0%{box-shadow:0 0 0 0 rgba(37,99,235,.3);transform:scale(1)}50%{box-shadow:0 0 0 8px rgba(37,99,235,.1);transform:scale(1.05)}to{box-shadow:0 0 0 0 rgba(37,99,235,0);transform:scale(1)}}@keyframes bounceElastic{0%{transform:scale(1)}25%{transform:scale(1.15)}50%{transform:scale(.92)}75%{transform:scale(1.08)}to{transform:scale(1.02)}}@keyframes bounce{0%,20%,53%,80%,to{transform:translateZ(0)}40%,43%{transform:translate3d(0,-8px,0)}70%{transform:translate3d(0,-4px,0)}90%{transform:translate3d(0,-2px,0)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes rippleWave{0%{box-shadow:0 0 0 0 rgba(37,99,235,.4);opacity:0;transform:scale(.8)}50%{box-shadow:0 0 0 8px rgba(37,99,235,.2);opacity:1;transform:scale(1.1)}to{box-shadow:0 0 0 0 rgba(37,99,235,0);opacity:1;transform:scale(1)}}@keyframes rippleWaveStaggered{0%{box-shadow:0 0 0 0 rgba(37,99,235,.3);filter:brightness(.8);opacity:0;transform:scale(.8)}50%{box-shadow:0 0 0 6px rgba(37,99,235,.15);filter:brightness(1.2);opacity:1;transform:scale(1.1)}75%{box-shadow:0 0 0 3px rgba(37,99,235,.1);filter:brightness(1.1);opacity:1;transform:scale(.95)}to{box-shadow:0 0 0 0 rgba(37,99,235,0);filter:brightness(1);opacity:1;transform:scale(1)}}@keyframes keyboardRippleWave{0%{box-shadow:0 0 0 0 rgba(37,99,235,.4);filter:brightness(.7);opacity:0;transform:scale(.8)}50%{box-shadow:0 0 0 8px rgba(37,99,235,.2);filter:brightness(1.3);opacity:1;transform:scale(1.15)}75%{box-shadow:0 0 0 4px rgba(37,99,235,.15);filter:brightness(1.15);opacity:1;transform:scale(.92)}to{box-shadow:0 0 0 0 rgba(37,99,235,0);filter:brightness(1);opacity:1;transform:scale(1)}}@keyframes loadingRipple{0%{box-shadow:0 0 0 0 rgba(37,99,235,.4);opacity:1;transform:scale(1)}25%{box-shadow:0 0 0 4px rgba(37,99,235,.3);opacity:.9;transform:scale(1.02)}50%{box-shadow:0 0 0 8px rgba(37,99,235,.2);opacity:.8;transform:scale(1.05)}75%{box-shadow:0 0 0 4px rgba(37,99,235,.1);opacity:.9;transform:scale(1.02)}to{box-shadow:0 0 0 0 rgba(37,99,235,0);opacity:1;transform:scale(1)}}@keyframes loadingRippleStaggered{0%{box-shadow:0 0 0 0 rgba(37,99,235,.4);filter:brightness(1);opacity:1;transform:scale(1)}25%{box-shadow:0 0 0 4px rgba(37,99,235,.3);filter:brightness(1.1);opacity:.9;transform:scale(1.02)}50%{box-shadow:0 0 0 8px rgba(37,99,235,.2);filter:brightness(1.2);opacity:.8;transform:scale(1.05)}75%{box-shadow:0 0 0 4px rgba(37,99,235,.1);filter:brightness(1.1);opacity:.9;transform:scale(1.02)}to{box-shadow:0 0 0 0 rgba(37,99,235,0);filter:brightness(1);opacity:1;transform:scale(1)}}.card{background:#fff;border:1px solid #e2e8f0;border-radius:24px;box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);overflow:hidden;position:relative;transition:all .25s ease-out;width:100%}.dark-mode .card{background:#1e293b;border-color:#334155;box-shadow:0 20px 25px -5px rgba(0,0,0,.4),0 8px 10px -6px rgba(0,0,0,.4)}.card.card--header{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}.card.card--header,.dark-mode .card.card--header{background:linear-gradient(135deg,#2563eb,#1d4ed8);border-color:#2563eb}.card.card--header:before{animation:shimmer 3.5s cubic-bezier(.4,0,.2,1) infinite;background:linear-gradient(90deg,transparent,transparent 20%,hsla(0,0%,100%,.06) 30%,hsla(0,0%,100%,.12) 40%,hsla(0,0%,100%,.06) 50%,transparent 60%,transparent);bottom:0;content:"";left:0;position:absolute;right:0;top:0}.card.card--login{background:#fff;border-color:#e2e8f0}.dark-mode .card.card--login{background:#1e293b;border-color:#334155}.card.card--status{background:#fff;border-color:#e2e8f0}.card.card--status.card--status-win{animation:scaleIn .5s ease-out;background:linear-gradient(135deg,#10b981,#34d399);border-color:#10b981;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1),0 0 20px rgba(16,185,129,.3)}.card.card--status.card--status-lose{background:linear-gradient(135deg,#ef4444,#f87171);border-color:#ef4444}.card.card--status.card--status-invalid{animation:shake .5s ease-in-out;background:linear-gradient(135deg,#f59e0b,#fbbf24);border-color:#f59e0b}.card.card--status.card--status-loading{background:linear-gradient(135deg,#2563eb,#3b82f6);border-color:#2563eb}.dark-mode .card.card--status{background:#1e293b;border-color:#334155}.card.card--game{background:#fff;border-color:#e2e8f0;min-height:500px}.card.card--game.card--padding-normal{padding:1.5rem 1rem}.dark-mode .card.card--game{background:#1e293b;border-color:#334155}.card.card--stats{background:#fff;border-color:#e2e8f0}.dark-mode .card.card--stats{background:#1e293b;border-color:#334155}.card.card--padding-compact{padding:1rem 1.5rem}.card.card--padding-normal{padding:2rem}.card.card--padding-large{padding:2.5rem}.card.card--shadow-sm{box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}.dark-mode .card.card--shadow-sm{box-shadow:0 1px 2px 0 rgba(0,0,0,.3)}.card.card--shadow-md{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}.dark-mode .card.card--shadow-md{box-shadow:0 4px 6px -1px rgba(0,0,0,.4),0 2px 4px -2px rgba(0,0,0,.4)}.card.card--shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}.dark-mode .card.card--shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.4),0 4px 6px -4px rgba(0,0,0,.4)}.card.card--shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1)}.dark-mode .card.card--shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.4),0 8px 10px -6px rgba(0,0,0,.4)}.card.card--background-surface{background:#fff}.dark-mode .card.card--background-surface{background:#1e293b}.card.card--background-primary{background:linear-gradient(135deg,#2563eb,#1d4ed8)}.card.card--background-success{background:linear-gradient(135deg,#10b981,#34d399)}.card.card--background-warning{background:linear-gradient(135deg,#f59e0b,#fbbf24)}.card.card--background-error{background:linear-gradient(135deg,#ef4444,#f87171)}.card.card--border{border:1px solid #e2e8f0}.dark-mode .card.card--border{border-color:#334155}.card.card--no-border{border:none}.card:focus-within{box-shadow:0 0 0 3px rgba(37,99,235,.3),0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);outline:none}.dark-mode .card:focus-within{box-shadow:0 0 0 3px rgba(37,99,235,.3),0 20px 25px -5px rgba(0,0,0,.4),0 8px 10px -6px rgba(0,0,0,.4)}@media(max-width:768px){.card--padding-normal{padding:1.5rem}.card--padding-large{padding:2rem}.card--game{min-height:350px}.card--game.card--padding-normal{padding:1rem .75rem}}@media(max-width:480px){.card--padding-normal{padding:1rem}.card--padding-large{padding:1.5rem}.card--game{min-height:300px}.card--game.card--padding-normal{padding:.75rem .5rem}}@keyframes shimmer{0%{opacity:0;transform:translateX(-120%) skewX(-15deg)}20%{opacity:1}80%{opacity:1}to{opacity:0;transform:translateX(120%) skewX(-15deg)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes shake{0%,to{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-2px)}20%,40%,60%,80%{transform:translateX(2px)}}
/*# sourceMappingURL=main.b445d629.css.map*/