.leaderboard{background:var(--card-bg);border:1px solid var(--border-color);border-radius:.75rem;padding:1rem;width:100%}.leaderboard-title{font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:.75rem;text-align:center}.loading,.empty{text-align:center;color:var(--text-secondary);font-size:.875rem;padding:1rem}.leaderboard-list{display:flex;flex-direction:column;gap:.375rem;max-height:200px;overflow-y:auto}.leaderboard-entry{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;background:var(--bg-color);border-radius:.5rem;font-size:.875rem}.leaderboard-entry.highlight{background:#6366f133;border:1px solid var(--primary-color)}.leaderboard-entry .rank{color:var(--text-secondary);font-weight:600;width:2rem}.leaderboard-entry .nickname{flex:1;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leaderboard-entry .score{color:var(--success-color);font-weight:600}@media (max-width: 479px){.leaderboard{padding:.75rem}.leaderboard-title{font-size:.875rem;margin-bottom:.5rem}.leaderboard-list{max-height:180px;gap:.25rem}.leaderboard-entry{padding:.375rem .5rem;gap:.5rem;font-size:.75rem}.leaderboard-entry .rank{width:1.5rem;font-size:.75rem}}.landing-screen{display:flex;justify-content:center;align-items:center;height:100%;padding:1rem;overflow:hidden}.landing-screen .card{text-align:center;width:100%;max-width:400px}.landing-screen .title{font-size:var(--title-size);font-weight:800;background:linear-gradient(135deg,var(--primary-color),#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}.landing-screen .subtitle{color:var(--text-secondary);margin-bottom:var(--spacing-lg)}.nickname-form{display:flex;flex-direction:column;gap:1rem}.input-group{text-align:left}.input-group label{display:block;font-size:.875rem;color:var(--text-secondary);margin-bottom:.5rem}.input-wrapper{position:relative;display:flex;align-items:center;background:var(--bg-color);border:1px solid var(--border-color);border-radius:.5rem;overflow:hidden}.input-wrapper:focus-within{border-color:var(--primary-color);box-shadow:0 0 0 2px #6366f133}.input-wrapper input{flex:1;padding:.75rem 1rem;background:transparent;border:none;color:var(--text-primary);font-size:1rem;outline:none;min-height:var(--btn-min-height)}.status-container{width:1.5rem;text-align:center;flex-shrink:0}.input-wrapper .status{font-size:1rem}.input-wrapper .status.checking{color:var(--text-secondary)}.input-wrapper .status.available{color:var(--success-color)}.input-wrapper .status.taken{color:var(--danger-color)}.error-text{color:var(--danger-color);font-size:.875rem;margin-top:.25rem}.generate-btn{padding:.5rem .75rem;margin:.25rem;background:var(--primary-color);color:#fff;border:none;border-radius:.375rem;font-size:.875rem;font-weight:500;cursor:pointer;white-space:nowrap;transition:background .2s;min-height:36px;flex-shrink:0}.generate-btn:hover{background:var(--primary-hover)}.generate-btn:disabled{opacity:.5;cursor:not-allowed}.play-btn{width:100%;font-size:1.125rem;padding:1rem;margin-top:.5rem;min-height:48px}.bottom-buttons{display:flex;gap:.75rem;margin-top:1rem}.bottom-buttons .btn{flex:1}.leaderboard-card{display:flex;flex-direction:column;gap:1rem}.leaderboard-card .title{margin-bottom:.5rem}.leaderboard-card .back-btn{margin-top:.5rem}@media (max-width: 479px){.landing-screen .card{padding:1rem}.nickname-form{gap:.75rem}.input-wrapper input{padding:.75rem .5rem;min-width:0;width:100%;max-width:calc(100% - 90px)}.status-container{width:1rem}.generate-btn{padding:.375rem .5rem;font-size:.75rem}.bottom-buttons{flex-direction:column}.bottom-buttons .btn{width:100%}}.timer-bar{width:100%;height:2rem;background:var(--bg-color);border-radius:1rem;overflow:hidden;position:relative;border:1px solid var(--border-color)}.timer-fill{height:100%;border-radius:1rem;transition:background-color .3s ease}.timer-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:600;font-size:.875rem;color:var(--text-primary);text-shadow:0 1px 2px rgba(0,0,0,.5)}.fireworks-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000;overflow:hidden}.firework-particle{position:absolute;left:var(--start-x);top:var(--start-y);width:var(--size);height:var(--size);background:var(--color);border-radius:50%;box-shadow:0 0 10px var(--color),0 0 20px var(--color);animation:firework-explode 1s ease-out forwards}@keyframes firework-explode{0%{transform:translate(-50%,-50%) scale(0);opacity:1}20%{transform:translate(-50%,-50%) scale(1);opacity:1}to{left:var(--end-x);top:var(--end-y);transform:translate(-50%,-50%) scale(.3);opacity:0}}.game-screen{display:flex;flex-direction:column;align-items:center;padding:1rem;height:100%;gap:.75rem;overflow:hidden}.game-header{display:flex;justify-content:space-between;width:100%;max-width:400px}.stat{display:flex;flex-direction:column;align-items:center;background:var(--card-bg);padding:.75rem 1.5rem;border-radius:.75rem;border:1px solid var(--border-color)}.stat-label{font-size:.75rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.stat-value{font-size:1.5rem;font-weight:700;color:var(--text-primary)}.round-score{font-size:1.25rem;font-weight:700;padding:.5rem 1rem;border-radius:.5rem;animation:fadeIn .3s ease-out}.round-score.positive{color:var(--success-color);background:#22c55e1a}.round-score.zero{color:var(--text-secondary);background:#94a3b81a}.game-screen .timer-bar{width:100%;max-width:400px}.letter-display{display:flex;justify-content:center;align-items:center;width:var(--letter-box-size);height:var(--letter-box-size);background:linear-gradient(135deg,var(--primary-color),#a855f7);border-radius:1rem;transition:all .2s ease;flex-shrink:0}.letter-display.feedback-valid{background:linear-gradient(135deg,var(--success-color),#16a34a);box-shadow:0 0 30px #22c55e80}.letter-display.feedback-invalid{background:linear-gradient(135deg,var(--danger-color),#dc2626);box-shadow:0 0 30px #ef444480;animation:shake .3s ease-in-out}.letter-display.feedback-repeated{background:linear-gradient(135deg,var(--warning-color),#d97706);box-shadow:0 0 30px #f59e0b80;animation:shake .3s ease-in-out}.letter{font-size:var(--letter-font-size);font-weight:800;color:#fff;text-shadow:0 4px 8px rgba(0,0,0,.3)}.word-form{width:100%;max-width:400px}.input-row{display:flex;gap:.75rem;transition:all .2s ease}.input-row.feedback-valid input{border-color:var(--success-color);background:#22c55e1a}.input-row.feedback-invalid input{border-color:var(--danger-color);background:#ef44441a}.input-row.feedback-repeated input{border-color:var(--warning-color);background:#f59e0b1a}.input-row input{flex:1;padding:1rem;background:var(--card-bg);border:2px solid var(--border-color);border-radius:.5rem;color:var(--text-primary);font-size:1.125rem;transition:all .2s ease;min-height:48px}.input-row input:focus{border-color:var(--primary-color);box-shadow:0 0 0 2px #6366f133}.input-row input::placeholder{color:var(--text-secondary)}.submit-btn{padding:1rem 1.5rem;font-size:1rem;min-height:48px;flex-shrink:0}.level-indicator{display:flex;gap:.5rem;padding:.5rem}.level-dot{width:12px;height:12px;border-radius:50%;background:var(--border-color);transition:all .3s ease}.level-dot.completed{background:var(--success-color)}.level-dot.current{background:var(--primary-color);box-shadow:0 0 10px var(--primary-color);transform:scale(1.2)}.stop-btn{margin-top:.5rem;padding:.5rem 1.5rem;font-size:.875rem}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-5px)}40%,80%{transform:translate(5px)}}@media (max-width: 479px){.game-screen{padding:.5rem;gap:.5rem}.stat{padding:.5rem 1rem}.stat-value{font-size:1.25rem}.round-score{font-size:1rem;padding:.375rem .75rem}.input-row{gap:.5rem}.input-row input{padding:.75rem;font-size:1rem}.submit-btn{padding:.75rem .875rem;font-size:.875rem}.stop-btn{padding:.375rem 1rem;font-size:.75rem}.level-dot{width:10px;height:10px}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000;padding:1rem}.modal{background:var(--card-bg);border-radius:1rem;padding:1.5rem;width:100%;max-width:400px;border:1px solid var(--border-color);animation:fadeIn .2s ease-out}.modal h3{font-size:1.25rem;font-weight:600;margin-bottom:.5rem;color:var(--text-primary)}.modal-description{color:var(--text-secondary);font-size:.875rem;margin-bottom:1rem}.no-words,.success-message{color:var(--text-secondary);margin-bottom:1.5rem}.word-list{display:flex;flex-direction:column;gap:.5rem;max-height:200px;overflow-y:auto;margin-bottom:1.5rem}.word-option{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;background:var(--bg-color);border-radius:.5rem;cursor:pointer;transition:background .2s}.word-option:hover{background:var(--border-color)}.word-option input[type=checkbox]{width:1.25rem;height:1.25rem;accent-color:var(--primary-color);cursor:pointer}.word-option span{font-family:monospace;font-size:1rem;color:var(--text-primary)}.modal-actions{display:flex;gap:.75rem;justify-content:flex-end}.modal-actions .btn{padding:.5rem 1rem}@media (max-width: 479px){.modal-overlay{padding:.5rem;align-items:flex-end}.modal{padding:1rem;border-radius:1rem 1rem 0 0;max-width:100%}.modal h3{font-size:1.125rem}.modal-description{font-size:.8rem}.word-list{max-height:150px;margin-bottom:1rem}.word-option{padding:.625rem .75rem;min-height:44px}.word-option input[type=checkbox]{width:1.5rem;height:1.5rem}.modal-actions{flex-direction:column;gap:.5rem}.modal-actions .btn{width:100%;min-height:44px;justify-content:center}}.end-screen{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1rem;height:100%;overflow-y:auto}.results-card{width:100%;max-width:400px;text-align:center;padding:1rem;flex-shrink:0}.end-screen .title{font-size:1.75rem;font-weight:700;margin-bottom:1rem;background:linear-gradient(135deg,var(--primary-color),#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.final-stats{display:flex;justify-content:center;gap:2rem;margin-bottom:1rem}.final-stat{display:flex;flex-direction:column;align-items:center}.final-stat-value{font-size:2rem;font-weight:800;color:var(--text-primary)}.final-stat-label{font-size:.875rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.word-history{margin-bottom:1rem}.word-history h3{font-size:.875rem;font-weight:600;color:var(--text-secondary);margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.05em}.word-history-list{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;max-height:100px;overflow-y:auto}.history-entry{display:flex;align-items:center;gap:.5rem;background:var(--bg-color);padding:.375rem .75rem;border-radius:2rem;font-size:.875rem}.history-word{font-family:monospace;color:var(--text-primary)}.history-score{color:var(--success-color);font-weight:600}.action-buttons{display:flex;flex-direction:column;gap:.5rem}.action-buttons .btn{width:100%}.end-screen .leaderboard{width:100%;max-width:400px}@media (max-width: 479px){.end-screen{padding:.5rem;gap:.75rem}.results-card{padding:.75rem}.end-screen .title{font-size:1.5rem;margin-bottom:.75rem}.final-stats{gap:1rem;margin-bottom:.75rem}.final-stat-value{font-size:1.5rem}.final-stat-label{font-size:.75rem}.word-history h3{font-size:.75rem;margin-bottom:.5rem}.word-history-list{max-height:80px;gap:.375rem}.history-entry{padding:.25rem .5rem;font-size:.75rem;gap:.375rem}.action-buttons .btn{min-height:44px}}.instructions-screen{display:flex;justify-content:center;align-items:flex-start;height:100%;padding:1rem;overflow-y:auto}.instructions-screen .card{width:100%;max-width:500px}.instructions-screen .title{font-size:1.75rem;font-weight:700;text-align:center;margin-bottom:1rem;color:var(--primary-color)}.instructions-content{display:flex;flex-direction:column;gap:1rem}.instruction-section h2{font-size:1.125rem;font-weight:600;color:var(--text-primary);margin-bottom:.5rem}.instruction-section p{color:var(--text-secondary);line-height:1.6}.instruction-section ul{list-style:none;padding:0}.instruction-section li{color:var(--text-secondary);padding:.25rem 0 .25rem 1.5rem;position:relative;line-height:1.5}.instruction-section li:before{content:"•";color:var(--primary-color);position:absolute;left:0}.instruction-section strong{color:var(--text-primary)}.level-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}.level-list span{background:var(--bg-color);padding:.25rem .75rem;border-radius:1rem;font-size:.875rem;color:var(--text-secondary)}.scoring-formula{margin-top:.75rem;padding:.75rem 1rem;background:var(--bg-color);border-radius:.5rem;text-align:center}.scoring-formula code{font-family:monospace;font-size:.9rem;color:var(--primary-color)}.scoring-examples{display:flex;flex-direction:column;gap:.5rem;margin-top:.75rem}.scoring-examples .example{display:grid;grid-template-columns:1fr auto auto;gap:1rem;align-items:center;background:var(--bg-color);padding:.5rem 1rem;border-radius:.5rem}.scoring-examples .word{font-family:monospace;font-size:1rem;color:var(--text-primary)}.scoring-examples .rarity{font-size:.75rem;color:var(--text-secondary);background:var(--card-bg);padding:.125rem .5rem;border-radius:.25rem}.scoring-examples .score{color:var(--success-color);font-weight:600;min-width:60px;text-align:right}@media (max-width: 479px){.instructions-screen .card{padding:1rem}.instructions-screen .title{font-size:1.5rem}.instructions-content{gap:.75rem}.instruction-section h2{font-size:1rem}.instruction-section p,.instruction-section li{font-size:.875rem;line-height:1.5}.scoring-examples .example{grid-template-columns:1fr;gap:.25rem;padding:.5rem .75rem}.scoring-examples .word{font-size:.9rem}.scoring-examples .rarity{justify-self:start}.scoring-examples .score{text-align:left}.scoring-formula{padding:.5rem .75rem}.scoring-formula code{font-size:.8rem}.level-list span{font-size:.75rem;padding:.25rem .5rem}}.admin-screen{display:flex;justify-content:center;align-items:center;height:100%;padding:1rem;overflow:hidden}.admin-card{width:100%;max-width:500px;max-height:90vh;display:flex;flex-direction:column;overflow-y:auto}.admin-card .title{font-size:2rem;font-weight:700;color:var(--text-primary);margin-bottom:.5rem}.admin-card .subtitle{color:var(--text-secondary);margin-bottom:1.5rem}.admin-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.admin-header .title{margin-bottom:0}.btn-sm{padding:.5rem 1rem;font-size:.875rem}.login-form{display:flex;flex-direction:column;gap:1rem;margin-bottom:1rem}.login-form .input-group input{width:100%;padding:.75rem 1rem;background:var(--bg-color);border:1px solid var(--border-color);border-radius:.5rem;color:var(--text-primary);font-size:1rem}.login-form .input-group input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px #6366f133}.error-text{color:var(--danger-color);font-size:.875rem}.message{color:var(--success-color);font-size:.875rem;margin-bottom:1rem;padding:.5rem;background:#22c55e1a;border-radius:.375rem;text-align:center}.loading,.empty-state{color:var(--text-secondary);text-align:center;padding:2rem}.words-toolbar{display:flex;justify-content:space-between;align-items:center;padding:.75rem;background:var(--bg-color);border-radius:.5rem;margin-bottom:.75rem}.select-all{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem;color:var(--text-secondary)}.selected-count{font-size:.875rem;color:var(--text-secondary)}.words-list{display:flex;flex-direction:column;gap:.25rem;max-height:300px;overflow-y:auto;margin-bottom:1rem;padding:.5rem;background:var(--bg-color);border-radius:.5rem}.word-item{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;cursor:pointer;border-radius:.375rem;transition:background .15s}.word-item:hover{background:#6366f11a}.word-item input[type=checkbox]{width:1.125rem;height:1.125rem;cursor:pointer}.word-text{font-size:1rem;color:var(--text-primary)}.approve-btn{width:100%;margin-bottom:.75rem}.admin-section{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border-color)}.section-title{font-size:1rem;font-weight:600;color:var(--text-secondary);margin-bottom:.75rem}.analytics-section{margin-top:0;padding-top:0;border-top:none}.analytics-stats{display:flex;gap:1rem}.analytics-stat{flex:1;display:flex;flex-direction:column;align-items:center;padding:1rem;background:var(--bg-color);border-radius:.5rem}.analytics-value{font-size:2rem;font-weight:700;color:var(--primary-color)}.analytics-label{font-size:.75rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-top:.25rem}.btn-warning{width:100%;padding:.75rem 1.5rem;background:#f59e0b;color:#fff;border:none;border-radius:.5rem;font-size:1rem;font-weight:500;cursor:pointer;transition:background .2s,opacity .2s}.btn-warning:hover{background:#d97706}.btn-warning:disabled{opacity:.5;cursor:not-allowed}.btn-danger{width:100%;padding:.75rem 1.5rem;background:var(--danger-color);color:#fff;border:none;border-radius:.5rem;font-size:1rem;font-weight:500;cursor:pointer;transition:background .2s,opacity .2s}.btn-danger:disabled{opacity:.5;cursor:not-allowed}.back-btn{width:100%;margin-top:1rem}.test-results{margin-top:1rem;font-size:.875rem}.test-summary{padding:.75rem;border-radius:.5rem;font-weight:600;margin-bottom:.75rem}.test-summary.success{background:#22c55e26;color:var(--success-color)}.test-summary.failure{background:#ef444426;color:var(--danger-color)}.test-suite{margin-bottom:.5rem;padding:.5rem;background:var(--bg-color);border-radius:.375rem}.suite-header{font-weight:500;color:var(--text-primary)}.suite-header .success{color:var(--success-color)}.suite-header .failure{color:var(--danger-color)}.test-failure{margin-top:.5rem;padding:.5rem;background:#ef44441a;border-radius:.25rem;border-left:3px solid var(--danger-color)}.test-failure .test-name{display:block;color:var(--danger-color);font-weight:500}.test-failure .test-error{display:block;color:var(--text-secondary);font-size:.75rem;margin-top:.25rem;font-family:monospace}@media (max-width: 479px){.admin-screen{align-items:flex-start;overflow-y:auto}.admin-card{max-height:none;padding:1rem}.admin-card .title{font-size:1.5rem}.admin-card .subtitle{margin-bottom:1rem}.admin-header{flex-direction:column;align-items:flex-start;gap:.75rem}.admin-header .btn-sm{width:100%;text-align:center}.words-toolbar{flex-direction:column;gap:.5rem;align-items:stretch}.words-list{max-height:200px}.login-form .input-group input,.btn-warning,.btn-danger{min-height:44px}.test-summary{font-size:.75rem;padding:.5rem}.suite-header{font-size:.875rem}.test-failure{padding:.375rem}.test-failure .test-name{font-size:.75rem}.test-failure .test-error{font-size:.65rem}}*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color: #6366f1;--primary-hover: #4f46e5;--success-color: #22c55e;--warning-color: #f59e0b;--danger-color: #ef4444;--bg-color: #0f172a;--card-bg: #1e293b;--text-primary: #f8fafc;--text-secondary: #94a3b8;--border-color: #334155;--title-size: 2rem;--letter-box-size: 80px;--letter-font-size: 3rem;--spacing-lg: 1rem;--btn-min-height: 44px}html,body{height:100%;overflow-x:hidden}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-color);color:var(--text-primary)}#root{height:100%;display:flex;flex-direction:column;overflow-x:hidden}button{cursor:pointer;font-family:inherit;border:none;transition:all .2s ease}input{font-family:inherit;border:none;outline:none}.container{max-width:600px;margin:0 auto;padding:1rem;width:100%;height:100%;overflow-x:hidden}.card{background:var(--card-bg);border-radius:1rem;padding:1.5rem;border:1px solid var(--border-color)}.btn{padding:.75rem 1.5rem;border-radius:.5rem;font-weight:600;font-size:1rem;min-height:var(--btn-min-height)}.btn-primary{background:var(--primary-color);color:#fff}.btn-primary:hover{background:var(--primary-hover)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:transparent;color:var(--text-secondary);border:1px solid var(--border-color)}.btn-secondary:hover{background:var(--border-color);color:var(--text-primary)}.btn-danger{background:var(--danger-color);color:#fff}.btn-danger:hover{background:#dc2626}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}.shake{animation:shake .5s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .3s ease-out}@media (min-width: 480px){:root{--title-size: 2.5rem;--letter-box-size: 100px;--letter-font-size: 3.5rem;--spacing-lg: 1.5rem}}@media (min-width: 768px){:root{--title-size: 3rem;--letter-box-size: 120px;--letter-font-size: 4rem;--spacing-lg: 2rem}}