.card{background:#1e293b;border-radius:12px;box-shadow:0 2px 8px #0000004d;cursor:pointer;transition:all .3s ease;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border:3px solid transparent;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;box-sizing:border-box}.card:hover{transform:translateY(-4px);box-shadow:0 4px 16px #00000080}@media (max-width: 600px){.card{border-radius:8px}.card:hover{transform:none}.card:active{transform:scale(.95)}}.card.selected{border-color:#60a5fa;background:#2d3f51;transform:scale(1.05)}.card.animating{animation:cardSuccess .6s ease-in-out}@keyframes cardSuccess{0%{transform:scale(1.05)}50%{transform:scale(1.2) rotate(5deg)}to{transform:scale(0) rotate(15deg);opacity:0}}.card-shape{width:100%;height:100%}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);padding:20px;overflow-y:auto}.modal-content{background:linear-gradient(135deg,#1e293b,#0f172a);border-radius:16px;max-width:500px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #00000080;border:2px solid rgba(96,165,250,.3)}.modal-content.modal-large{max-width:600px}@media (max-width: 600px){.modal-overlay{padding:40px 12px 12px;align-items:flex-start}.modal-content{max-height:calc(100vh - 80px);border-radius:12px}.modal-content.modal-large{max-width:100%}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px 32px;border-bottom:1px solid rgba(255,255,255,.1);position:sticky;top:0;background:linear-gradient(135deg,#1e293b,#0f172a);z-index:1}.modal-header h2{margin:0;color:#f1f5f9;font-size:1.75rem}@media (max-width: 600px){.modal-header{padding:16px 20px}.modal-header h2{font-size:1.4rem}}.close-btn{background:none;border:none;color:#cbd5e1;font-size:2.5rem;line-height:1;cursor:pointer;padding:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all .3s ease}.close-btn:hover{background:#ffffff1a;color:#f1f5f9}.modal-body{padding:32px}@media (max-width: 600px){.modal-body{padding:20px}}.modal-body h3{color:#f1f5f9;margin-top:24px;margin-bottom:12px;font-size:1.25rem}.modal-body p{color:#cbd5e1;line-height:1.6;margin-bottom:16px}.modal-body ul{color:#cbd5e1;line-height:1.8;margin:16px 0;padding-left:24px}.modal-body li{margin-bottom:8px}.modal-body strong{color:#f1f5f9}.time-range-selector{display:flex;gap:8px;margin-bottom:24px;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:16px}.time-range-btn{flex:1;padding:10px 16px;font-size:.95rem;font-weight:500;border:2px solid rgba(96,165,250,.3);border-radius:8px;background:#ffffff0d;color:#cbd5e1;cursor:pointer;transition:all .3s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.time-range-btn:hover{background:#ffffff1a;border-color:#60a5fa80;color:#f1f5f9}.time-range-btn.active{background:linear-gradient(135deg,#d81159,#60a5fa);border-color:#60a5fa;color:#fff;font-weight:600}@media (max-width: 600px){.time-range-selector{flex-direction:column;gap:8px}.time-range-btn{font-size:.9rem;padding:12px 16px}}.loading,.error{text-align:center;color:#cbd5e1;padding:40px 20px}.error{color:#f87171}.no-scores{text-align:center;color:#94a3b8;font-style:italic;margin:40px 0}.highscore-entries{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}.highscore-entry{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:16px;padding:12px 16px;background:#ffffff0d;border-radius:8px;transition:all .3s ease}.highscore-entry:hover{background:#ffffff14;transform:translate(4px)}.highscore-entry.rank-1{background:linear-gradient(90deg,#fbb13c33,#ffffff0d);border-left:3px solid #FBB13C}.highscore-entry.rank-2{background:linear-gradient(90deg,#cbd5e126,#ffffff0d);border-left:3px solid #cbd5e1}.highscore-entry.rank-3{background:linear-gradient(90deg,#d8115926,#ffffff0d);border-left:3px solid #D81159}.highscore-entry .rank{font-weight:700;font-size:1.25rem;color:#94a3b8;text-align:center}.highscore-entry.rank-1 .rank,.highscore-entry.rank-2 .rank,.highscore-entry.rank-3 .rank{color:#f1f5f9}.highscore-entry .name{color:#f1f5f9;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.highscore-entry .time{color:#60a5fa;font-weight:600;font-size:1.1rem;font-variant-numeric:tabular-nums}.modal-content::-webkit-scrollbar{width:8px}.modal-content::-webkit-scrollbar-track{background:#ffffff0d;border-radius:4px}.modal-content::-webkit-scrollbar-thumb{background:#60a5fa4d;border-radius:4px}.modal-content::-webkit-scrollbar-thumb:hover{background:#60a5fa80}.completion-time{text-align:center;font-size:1.25rem;color:#cbd5e1;margin-bottom:32px}.highscore-modal-content{padding:40px}.highscore-modal-content h2{margin:0 0 16px;color:#f1f5f9;font-size:2rem;text-align:center}.highscore-modal-content form{display:flex;flex-direction:column;gap:16px}.highscore-modal-content label{color:#f1f5f9;font-size:1rem;font-weight:500}.highscore-modal-content input{padding:12px 16px;font-size:1rem;border:2px solid rgba(96,165,250,.3);border-radius:8px;background:#ffffff0d;color:#f1f5f9;transition:all .3s ease}.highscore-modal-content input:focus{outline:none;border-color:#60a5fa;background:#ffffff14}.modal-buttons{display:flex;gap:12px;margin-top:8px}.submit-btn,.cancel-btn{flex:1;padding:12px 24px;font-size:1rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}@media (max-width: 600px){.highscore-modal-content{padding:24px}.highscore-modal-content h2{font-size:1.6rem}.completion-time{font-size:1.1rem}.submit-btn,.cancel-btn{padding:14px 20px;font-size:1rem}}.submit-btn{background:linear-gradient(135deg,#d81159,#60a5fa);color:#fff}.submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #d8115966}.submit-btn:disabled{opacity:.5;cursor:not-allowed}.cancel-btn{background:#ffffff1a;color:#cbd5e1}.cancel-btn:hover{background:#ffffff26}.game-container{width:100%;height:100%;margin:0 auto;padding:20px;overflow:hidden;display:flex;flex-direction:column}.game-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:20px;flex-shrink:0}.game-header h1{font-size:2.5rem;color:#fff;margin:0;font-weight:700;background:linear-gradient(135deg,#d81159,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.game-stats{display:flex;gap:30px}.stat{display:flex;flex-direction:column;align-items:center}.stat-label{font-size:.875rem;color:#94a3b8;font-weight:500}.stat-value{font-size:1.5rem;color:#f1f5f9;font-weight:700}.header-buttons{display:flex;gap:12px;align-items:center}.header-btn{padding:12px 20px;font-size:1rem;font-weight:600;color:#f1f5f9;background:#ffffff1a;border:2px solid rgba(96,165,250,.3);border-radius:8px;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.header-btn:hover{background:#ffffff26;border-color:#60a5fa;transform:translateY(-2px);box-shadow:0 4px 12px #60a5fa4d}.new-game-btn{padding:12px 24px;font-size:1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#d81159,#10b981);border:none;border-radius:8px;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px #d811594d}.new-game-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #d8115966}.new-game-btn:active,.header-btn:active{transform:translateY(0)}.message{text-align:center;font-size:1.1rem;font-weight:600;color:#f1f5f9;padding:12px;margin-bottom:12px;background:#ffffff1a;border-radius:8px;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);flex-shrink:0}.game-board{flex-shrink:0}@media (max-width: 600px){.game-container{padding:8px}.game-header{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:12px}.game-header h1{text-align:center;font-size:2rem}.game-stats{justify-content:space-between;flex-wrap:wrap;gap:16px}.stat{flex:1;min-width:calc(50% - 8px)}.stat-label{font-size:.75rem}.stat-value{font-size:1.25rem}.header-buttons{flex-direction:row;width:100%}.header-btn,.new-game-btn{flex:1;padding:10px 16px;font-size:.9rem}.message{font-size:.95rem;padding:10px;margin-bottom:8px}}@media (max-width: 400px){.game-header h1{font-size:1.75rem}.game-board{gap:8px}.stat-label{font-size:.7rem}.stat-value{font-size:1.1rem}.header-btn,.new-game-btn{padding:8px 12px;font-size:.85rem}}*{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#1a1a2e,#16213e)}#root{width:100%;height:100%;overflow:hidden}.App{width:100%;height:100%;padding:20px;overflow:hidden}@media (max-width: 600px){.App{padding:8px}}