@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;700&family=Manrope:wght@400;500;800&display=swap";:root{--bg-color: #0b1326;--surface-low: #131b2e;--surface-high: #222a3d;--surface-highest: #2d3449;--primary: #ffffff;--primary-glow: #00fbfb;--secondary-glow: #b600f8;--text-muted: #b9cac9;--accent-cyan: #00fbfb;--accent-purple: #b600f8;--glass-bg: rgba(45, 52, 73, .4);--glass-border: rgba(58, 74, 73, .2);--success: #00ff88;--danger: #ff0055;--warning: #ffcc00}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Manrope,system-ui,-apple-system,sans-serif;background-color:var(--bg-color);background-image:radial-gradient(at 0% 0%,hsla(253,16%,7%,1) 0,transparent 50%),radial-gradient(at 50% 0%,hsla(225,39%,30%,.3) 0,transparent 50%),radial-gradient(at 100% 0%,hsla(339,49%,30%,.3) 0,transparent 50%);color:var(--primary);min-height:100vh;overflow-x:hidden}.glass{background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:20px;box-shadow:0 8px 32px #0000005e}.dashboard{padding:2rem;max-width:1400px;margin:0 auto;width:100%}.dash-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;flex-wrap:wrap;gap:1.5rem}.dash-header h1{font-family:Space Grotesk,sans-serif;font-size:2.5rem;background:linear-gradient(to right,#fff,var(--accent-cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.dash-header h1 span{display:block;font-size:.9rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:2px}.main-display{display:grid;grid-template-columns:1fr 1.5fr;gap:2rem;align-items:start}.current-ball-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;text-align:center;position:relative}.ball-orb{width:280px;height:280px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#ffffff 0%,var(--primary-glow) 20%,var(--accent-purple) 70%,#000 100%);box-shadow:0 0 60px #00fbfb66,inset 0 0 20px #ffffff80;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;transition:all .5s cubic-bezier(.175,.885,.32,1.275);border:4px solid rgba(255,255,255,.1)}.ball-orb.empty{background:var(--surface-low);box-shadow:inset 0 0 20px #00000080;border:2px dashed var(--surface-highest)}.game-settings{display:flex;flex-direction:column;padding:1rem 1.5rem;min-width:300px}.setting-item{display:flex;flex-direction:column;gap:.5rem}.setting-item label{font-size:.75rem;text-transform:uppercase;color:var(--accent-cyan);font-weight:800;letter-spacing:1px}.setting-item select{background:var(--surface-low);border:1px solid var(--glass-border);color:#fff;padding:.8rem;border-radius:8px;font-family:inherit;font-weight:600;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 1rem center;background-size:1em}.mode-verify{margin:1rem 0;padding:.5rem;background:rgba(0,251,251,.1);border-radius:8px;border:1px dashed var(--accent-cyan)}.mode-display-player{font-size:.8rem;color:var(--text-muted);margin-top:.2rem}.mode-display-player strong{color:var(--accent-cyan)}.ball-grid{display:grid;grid-template-columns:repeat(15,1fr);gap:.5rem;padding:1.5rem}.grid-ball{width:100%;aspect-ratio:1;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:700;background:var(--surface-low);color:var(--text-muted);transition:all .3s cubic-bezier(.4,0,.2,1);border:1px solid var(--glass-border)}.grid-ball.active{background:var(--accent-cyan);color:var(--bg-color);box-shadow:0 0 20px var(--accent-cyan);transform:scale(1.15);z-index:10;border-color:#fff}.controls{display:flex;gap:1rem;align-items:center}.auto-controls{display:flex;gap:1.5rem;align-items:center;padding:.8rem 1.5rem}.auto-controls span{font-size:.9rem;font-weight:600;color:var(--accent-cyan)}.switch{position:relative;display:inline-block;width:50px;height:24px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#333;transition:.4s}.slider.round{border-radius:34px}.slider.round:before{position:absolute;content:"";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:var(--accent-cyan)}input:checked+.slider:before{transform:translate(26px)}input[type=range]{cursor:pointer}button{padding:.8rem 1.5rem;border-radius:12px;font-weight:700;cursor:pointer;transition:all .3s ease;border:none;font-size:.9rem;text-transform:uppercase;letter-spacing:1px}.btn-primary{background:linear-gradient(135deg,var(--accent-cyan),var(--accent-purple));color:#fff;box-shadow:0 4px 15px #00fbfb4d}.btn-primary:hover:not(:disabled){transform:translateY(-2px) scale(1.02);box-shadow:0 6px 20px #00fbfb80}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:var(--surface-high);border:1px solid var(--glass-border);color:#fff}.btn-sm{padding:.4rem .8rem;font-size:.75rem}.history-bar{margin-top:2rem;padding:1.5rem;display:flex;gap:1.2rem;overflow-x:auto;scrollbar-width:none}.history-item{min-width:50px;height:50px;border-radius:50%;background:var(--surface-high);display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;border:1px solid var(--glass-border);font-size:.9rem}.history-item:first-child{background:var(--accent-cyan);color:var(--bg-color);transform:scale(1.2);box-shadow:0 0 15px var(--accent-cyan)}.player-page{padding:2rem 1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;width:100%}.player-setup{max-width:450px;width:100%;padding:3rem;text-align:center;animation:fade-in-up .6s cubic-bezier(.23,1,.32,1)}@keyframes fade-in-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.player-setup h2{font-family:Space Grotesk,sans-serif;font-size:2.2rem;margin-bottom:2.5rem;background:linear-gradient(135deg,#fff,var(--accent-cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-1px}.setup-desc{color:var(--text-muted);margin-top:-1.5rem;margin-bottom:2rem;font-size:.95rem;line-height:1.4}.input-group{margin-bottom:2rem;text-align:left}.input-group label{display:block;font-size:.8rem;text-transform:uppercase;color:var(--accent-cyan);font-weight:800;margin-bottom:.8rem;letter-spacing:2px;padding-left:.5rem}.input-group input{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--glass-border);border-radius:12px;padding:1rem 1.2rem;color:#fff;font-family:inherit;font-size:1.1rem;transition:all .3s ease;outline:none}.input-group input:focus{background:rgba(255,255,255,.1);border-color:var(--accent-cyan);box-shadow:0 0 15px #00fbfb33}.input-group input::placeholder{color:#ffffff4d}.player-setup .btn-primary{width:100%;padding:1.2rem;font-size:1.1rem;margin-top:1rem}.player-header{width:100%;max-width:600px;padding:1.5rem 2rem;display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.card-carousel{display:flex;flex-direction:column;gap:2.5rem;width:100%;max-width:450px;padding:2rem 1rem 8rem}.bingo-card{width:100%;padding:1.5rem;position:relative}.bingo-card.disabled{opacity:.6;filter:grayscale(.5);pointer-events:none}.card-header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem}.card-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.card-header-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.5rem;color:var(--accent-cyan);font-family:Space Grotesk,sans-serif}.card-cell{background:var(--surface-low);aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-weight:700;cursor:pointer;border-radius:8px;font-size:1.4rem;transition:all .2s cubic-bezier(.4,0,.2,1);border:1px solid var(--glass-border)}.card-cell.marked{background:linear-gradient(135deg,var(--accent-purple),#4a0080);color:#fff;box-shadow:inset 0 0 10px #00000080;border-color:#fff3}.card-cell.matching{border:3px solid var(--accent-cyan);animation:pulse-border 1.5s infinite}@keyframes pulse-border{0%{box-shadow:0 0 0 var(--accent-cyan)}50%{box-shadow:0 0 15px var(--accent-cyan)}to{box-shadow:0 0 0 var(--accent-cyan)}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.85);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{padding:3rem;text-align:center;max-width:500px;width:90%;border:2px solid var(--accent-cyan)}.modal-content h2{font-family:Space Grotesk,sans-serif;font-size:2rem;margin-bottom:1rem;color:var(--accent-cyan)}.modal-actions{display:flex;gap:1rem;justify-content:center;margin-top:2rem}.status-toast,.winner-toast{position:fixed;top:100px;left:50%;transform:translate(-50%);padding:1.2rem 2.5rem;z-index:100;animation:slide-down .4s cubic-bezier(.175,.885,.32,1.275)}@keyframes slide-down{0%{transform:translate(-50%,-100%);opacity:0}to{transform:translate(-50%);opacity:1}}.status-toast{border-color:var(--accent-cyan);color:var(--accent-cyan);font-weight:700}.winner-celebration h1{font-size:3rem;margin-bottom:1rem}.rainbow-text{background:linear-gradient(to right,#ef5350,#f48fb1,#7e57c2,#2196f3,#26c6da,#43a047,#eeff41,#f9a825,#ff5722);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:rainbow-animation 5s linear infinite;background-size:200% 100%}@keyframes rainbow-animation{0%{background-position:0% 50%}to{background-position:100% 50%}}.winner-name{font-size:2.5rem;margin-bottom:2rem;font-weight:800}.hint{color:var(--text-muted);font-size:.9rem;font-style:italic;margin-top:1rem}@media (max-width: 900px){.main-display{grid-template-columns:1fr}.ball-grid{grid-template-columns:repeat(8,1fr)}.dash-header h1{font-size:1.8rem}}@media (max-width: 500px){.ball-grid{grid-template-columns:repeat(5,1fr)}.ball-orb{width:200px;height:200px}.ball-number{font-size:6rem}}
