:root{font-family:Inter,system-ui,-apple-system,sans-serif;color-scheme:dark;color:#e0e0e0;background-color:#121212;--primary-glow: rgba(100, 108, 255, .5);--primary-color: #646cff;--secondary-color: #535bf2;--grid-line: #333;--cell-bg: #1e1e1e;--cell-text: #fff;--border-radius: 12px;--glass-bg: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1)}body{margin:0;display:flex;justify-content:center;align-items:center;min-height:100vh;min-width:320px;background:radial-gradient(circle at 50% 0%,#2a2a35,#121212 70%)}#app{display:flex;flex-direction:column;align-items:center;gap:2rem;padding:2rem;width:100%;max-width:500px}h1{font-size:3rem;margin:0;background:-webkit-linear-gradient(45deg,var(--primary-color),#00d2ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 10px rgba(100,108,255,.3));text-align:center;line-height:1.2}.sudoku-container{width:100%;aspect-ratio:1 / 1;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--border-radius);padding:1rem;box-shadow:0 8px 32px #0000005e;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.sudoku-grid{display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);width:100%;height:100%;border:2px solid #555;border-radius:4px}.cell{background:var(--cell-bg);border:1px solid var(--grid-line);display:flex;justify-content:center;align-items:center;font-size:1.5rem;font-weight:600;color:var(--cell-text);transition:all .3s ease}.cell:nth-child(3n){border-right:2px solid #555}.cell:nth-child(9n){border-right:none}.sudoku-grid .cell:nth-child(n+19):nth-child(-n+27),.sudoku-grid .cell:nth-child(n+46):nth-child(-n+54){border-bottom:2px solid #555}.cell.active{color:#00d2ff;text-shadow:0 0 8px rgba(0,210,255,.8)}.cell:hover{background:#646cff33;cursor:default}.play-button{background:linear-gradient(90deg,var(--primary-color) 0%,var(--secondary-color) 100%);color:#fff;border:none;border-radius:30px;padding:1rem 3rem;font-size:1.25rem;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:2px;box-shadow:0 4px 15px #646cff66;transition:transform .2s,box-shadow .2s;outline:none}.play-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #646cff99}.play-button:active{transform:translateY(1px);box-shadow:0 2px 10px #646cff66}@media (max-width: 400px){h1{font-size:2.2rem}.cell{font-size:1.2rem}.sudoku-container{padding:.5rem}}.input-group{width:100%;max-width:300px;margin-bottom:.5rem}.username-input{width:100%;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:8px;padding:1rem;font-size:1.1rem;color:#fff;outline:none;transition:border-color .2s,box-shadow .2s;box-sizing:border-box;text-align:center}.username-input::placeholder{color:#fff6}.username-input:focus{border-color:var(--primary-color);box-shadow:0 0 10px #646cff4d}.play-button:disabled{background:#333;color:#777;cursor:not-allowed;box-shadow:none;transform:none}.lobby-container{display:flex;flex-direction:column;align-items:center;gap:2rem;width:100%;max-width:600px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--border-radius);padding:3rem 2rem;box-shadow:0 8px 32px #0000005e;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.highlight{color:var(--primary-color);text-shadow:0 0 10px rgba(100,108,255,.5)}.subtitle{font-size:1.5rem;color:#ccc;margin-top:-1rem;font-weight:400}.difficulty-options{display:flex;flex-direction:column;gap:1rem;width:100%;margin-bottom:1rem}@media (min-width: 600px){.difficulty-options{flex-direction:row}}.diff-btn{flex:1;background:#0003;border:2px solid transparent;border-radius:12px;padding:1.5rem 1rem;color:#fff;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;gap:.5rem}.diff-btn h3{margin:0;font-size:1.25rem;font-weight:600}.diff-btn p{margin:0;font-size:.9rem;color:#999}.diff-btn:hover{background:#646cff1a;transform:translateY(-2px)}.diff-btn.active{background:#646cff33;border-color:var(--primary-color);box-shadow:0 0 15px #646cff4d}.diff-btn[data-level=easy].active{border-color:#4caf50;box-shadow:0 0 15px #4caf5066}.diff-btn[data-level=easy].active h3{color:#4caf50}.diff-btn[data-level=hard].active{border-color:#f44336;box-shadow:0 0 15px #f4433666}.diff-btn[data-level=hard].active h3{color:#f44336}.waiting-indicator{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-top:1rem;color:#ccc}.spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.1);border-left-color:var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.guest-joined{margin-top:1rem;padding:1rem 2rem;background:#4caf501a;border:1px solid rgba(76,175,80,.3);border-radius:8px;color:#4caf50;text-align:center}.guest-joined strong{color:#fff}.hidden{display:none!important}.invite-section{display:flex;flex-direction:column;width:100%;background:#0003;padding:1.5rem;border-radius:12px;margin-bottom:1rem}.copy-link-container{display:flex;gap:.5rem;margin-top:.5rem}.copy-link-container input{flex:1;background:#0006;border:1px solid var(--glass-border);border-radius:6px;padding:.5rem 1rem;color:#888;font-family:monospace}.secondary-btn{background:#333;color:#fff;border:1px solid #444;border-radius:6px;padding:.5rem 1rem;cursor:pointer;transition:background .2s}.secondary-btn:hover{background:#444}.game-page{display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:100%;max-width:520px;padding:1.5rem;box-sizing:border-box}.game-header{display:flex;justify-content:space-between;align-items:center;width:100%;gap:1rem}.game-title{font-size:1.25rem;margin:0;background:-webkit-linear-gradient(45deg,var(--primary-color),#00d2ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;white-space:nowrap}.player-badge{display:flex;align-items:center;gap:.4rem;font-size:.9rem;font-weight:600;color:#ccc}.player-dot{width:10px;height:10px;border-radius:50%;display:inline-block}.host-dot{background:var(--primary-color);box-shadow:0 0 6px var(--primary-color)}.guest-dot{background:#00d2ff;box-shadow:0 0 6px #00d2ff}.game-grid-container{box-sizing:border-box}.cell.given{color:#fff;font-weight:700}.cell.selected{background:#646cff59!important;border-color:var(--primary-color)!important;border-width:2px!important;box-shadow:inset 0 0 0 2px var(--primary-color),0 0 10px #646cff80;animation:cell-pulse 1.2s ease-in-out infinite;z-index:1;position:relative}@keyframes cell-pulse{0%,to{box-shadow:inset 0 0 0 2px var(--primary-color),0 0 8px #646cff66}50%{box-shadow:inset 0 0 0 2px var(--primary-color),0 0 18px #646cffb3}}.game-hint{font-size:.85rem;color:#666;margin:0}.turn-banner{width:100%;padding:.75rem 1.5rem;border-radius:8px;text-align:center;font-weight:600;font-size:1rem;transition:background .3s,color .3s}.turn-banner.my-turn{background:#646cff33;border:1px solid rgba(100,108,255,.5);color:#a0a8ff}.turn-banner.opponent-turn{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:#888}.player-badge.me span:last-child{text-decoration:underline;text-underline-offset:3px}.number-pad{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;width:100%}.num-btn{background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#fff;font-size:1.3rem;font-weight:600;padding:.75rem 0;cursor:pointer;transition:background .2s,transform .1s}.num-btn:hover{background:#646cff40}.num-btn:active{transform:scale(.95)}.clear-btn{color:#f44336;border-color:#f443364d}.player-info{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem}.player-info.align-right{align-items:flex-end}.player-info.me .score-badge{color:var(--primary-color)}.score-badge{font-size:1.1rem;font-weight:700;color:#888;letter-spacing:.5px}.score-badge span{font-size:1.4rem}.turn-banner.urgent{animation:timer-pulse .5s ease-in-out infinite}.turn-banner.my-turn.urgent{background:#f4433633;border-color:#f4433680;color:#f44336}.turn-banner.opponent-turn.urgent{border-color:#f443364d;color:#b71c1c}@keyframes timer-pulse{0%,to{opacity:1}50%{opacity:.7}}.score-badge{position:relative}.score-anim{position:absolute;top:-20px;right:-20px;font-size:1.2rem;font-weight:700;animation:float-up-fade 1s forwards ease-out;pointer-events:none}.score-anim.positive{color:#4caf50}.score-anim.negative{color:#f44336}@keyframes float-up-fade{0%{transform:translateY(0);opacity:1}to{transform:translateY(-30px);opacity:0}}.player-stats{display:flex;gap:.5rem;margin-top:2px}.stat-pill{font-size:.8rem;padding:2px 6px;border-radius:10px;background:#ffffff0d;font-weight:600;display:flex;align-items:center;gap:3px}.stat-pill.correct{color:#4caf50;border:1px solid rgba(76,175,80,.2)}.stat-pill.wrong{color:#f44336;border:1px solid rgba(244,67,54,.2)}.center-header{display:flex;flex-direction:column;align-items:center}.global-timer{font-family:monospace;font-size:1.4rem;font-weight:700;color:var(--primary-color);background:#0000004d;padding:4px 12px;border-radius:6px;margin-top:4px}.global-timer.urgent{color:#f44336;animation:timer-pulse .5s ease-in-out infinite}.error-shake{animation:shake .4s cubic-bezier(.36,.07,.19,.97) both;background-color:#f4433633!important;color:#f44336!important}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}.share-actions{display:flex;gap:1rem;justify-content:center;margin-top:1rem}.icon-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:12px;color:#fff;cursor:pointer;padding:12px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.icon-btn:hover{background:#fff3;border-color:var(--primary-color);transform:translateY(-2px);box-shadow:0 4px 12px #6366f14d}.icon-btn:active{transform:translateY(0)}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;opacity:1;transition:opacity .3s ease}.modal.hidden{opacity:0;pointer-events:none}.modal-content{background:#1a1a2e;padding:2rem;border-radius:16px;border:1px solid rgba(255,255,255,.1);text-align:center;position:relative;box-shadow:0 10px 30px #00000080;transform:translateY(0);transition:transform .3s ease}.modal.hidden .modal-content{transform:translateY(20px)}.modal-content h3{margin-top:0;margin-bottom:1.5rem;color:var(--primary-color)}.close-modal{position:absolute;top:10px;right:15px;font-size:24px;color:#888;cursor:pointer;transition:color .2s}.close-modal:hover{color:#fff}#qr-canvas{border-radius:8px;padding:8px;background:#fff}.countdown-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;display:flex;justify-content:center;align-items:center;transition:opacity .5s ease-out}.countdown-overlay.hidden{opacity:0;pointer-events:none}.countdown-content{text-align:center;color:#fff;animation:pop-in .5s cubic-bezier(.175,.885,.32,1.275) forwards}#countdown-text{font-size:8rem;margin:0;font-weight:800;color:var(--primary-color);text-shadow:0 4px 30px rgba(100,108,255,.5)}.countdown-content p{font-size:2rem;margin-top:-1rem;text-transform:uppercase;letter-spacing:2px;color:#ccc}@keyframes pop-in{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.game-over-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0006;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:900;display:flex;justify-content:center;align-items:flex-start;padding-top:2rem;transition:opacity .5s ease-out}.game-over-overlay.hidden{opacity:0;pointer-events:none}.game-over-content{background:#1e1e1ed9;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.15);border-radius:24px;padding:2.5rem;text-align:center;box-shadow:0 16px 48px #0009;animation:slide-up .5s cubic-bezier(.175,.885,.32,1.275) forwards;max-width:90vw;width:380px}.game-over-content h1{font-size:3rem;color:var(--primary-color);margin:0;margin-bottom:.5rem}.go-reason{color:#aaa;font-size:1.2rem;margin-top:0;margin-bottom:2rem}.go-stats{display:flex;align-items:center;justify-content:space-around;background:#0006;border-radius:12px;padding:1.5rem}.go-player{display:flex;flex-direction:column;align-items:center;gap:.5rem}.go-player h3{margin:0;font-size:1.2rem;color:#ddd}.go-score{font-size:2.5rem;font-weight:800;color:#fff}.go-divider{font-size:1.2rem;font-weight:700;color:#666;padding:0 1.5rem}@keyframes slide-up{0%{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}