*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,sans-serif;background:#f5f5f5;color:#1a1a1a;min-height:100vh;display:flex;align-items:center;justify-content:center}.lobby{background:#fff;border-radius:12px;padding:2rem;width:100%;max-width:400px;box-shadow:0 4px 24px #00000014}.lobby h1{font-size:1.8rem;margin-bottom:.5rem;text-align:center}.lobby h1 em{color:#3498db;font-style:italic}.join-prompt{background:#eaf4fb;border:1px solid #cfe6f7;border-radius:6px;padding:.5rem .7rem;font-size:.85rem;color:#2c3e50;line-height:1.4}@keyframes join-pulse{0%,to{box-shadow:0 0 #3498db80}50%{box-shadow:0 0 0 7px #3498db00}}.lobby-form button[type=submit].pulse{animation:join-pulse 1.2s ease-in-out infinite}.lobby-tagline{font-size:.95rem;color:#7f8c8d;text-align:center;margin-bottom:1.5rem;line-height:1.4}.lobby-tagline em{color:#3498db;font-style:italic}.recent-rooms{margin-bottom:1.5rem}.recent-rooms-heading{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:#999;margin-bottom:.5rem}.recent-rooms-list{list-style:none;display:flex;flex-direction:column;gap:.4rem}.recent-room{display:flex;gap:.3rem}.recent-room-open{flex:1;display:flex;flex-direction:column;align-items:flex-start;padding:.5rem .7rem;background:#f7f9fa;border:1px solid #e3e8ec;border-radius:8px;cursor:pointer;text-align:left}.recent-room-open:hover{background:#eef4f8}.recent-room-name{font-weight:600;color:#2c3e50;font-size:.9rem}.recent-room-code{font-size:.72rem;color:#95a5a6}.recent-room-forget{width:34px;background:#f7f9fa;border:1px solid #e3e8ec;border-radius:8px;color:#b0b8bf;font-size:1.2rem;line-height:1;cursor:pointer}.recent-room-forget:hover{background:#fdecea;color:#e74c3c}.lobby-name-label{display:flex;flex-direction:column;gap:.25rem;font-size:.9rem;margin-bottom:1.25rem}.lobby-name-label input{padding:.5rem;border:1.5px solid #ddd;border-radius:6px;font-size:1rem}.lobby-tabs{display:flex;gap:.5rem;margin-bottom:1.5rem}.lobby-tabs button{flex:1;padding:.5rem;border:2px solid #ddd;background:none;border-radius:6px;cursor:pointer;font-size:1rem}.lobby-tabs button.active{border-color:#3498db;color:#3498db;font-weight:600}.lobby-form{display:flex;flex-direction:column;gap:.75rem}.lobby-form label{display:flex;flex-direction:column;gap:.25rem;font-size:.9rem}.lobby-form label.lobby-checkbox{flex-direction:row;align-items:center;gap:.5rem;cursor:pointer}.lobby-form label.lobby-checkbox input{width:auto}.lobby-form input[type=text],.lobby-form input[type=password],.lobby-form select{padding:.5rem;border:1.5px solid #ddd;border-radius:6px;font-size:1rem}.lobby-form button[type=submit]{padding:.75rem;background:#3498db;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:1rem;font-weight:600}.lobby-form button[type=submit]:disabled{opacity:.6;cursor:not-allowed}.error{color:#e74c3c;font-size:.9rem;margin-top:.5rem}.game{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1rem}.brand-home{align-self:flex-start;background:none;border:none;padding:0;cursor:pointer;font-size:1rem;font-weight:700;color:#2c3e50}.brand-home em{color:#3498db;font-style:italic}.brand-home:hover{text-decoration:underline}.game-header{display:flex;align-items:center;gap:.75rem 1rem;width:100%;justify-content:space-between;flex-wrap:wrap}.game-header-title{display:flex;flex-direction:column}.game-header-title h2{font-size:1.3rem;line-height:1.1}.room-code{font-size:.75rem;color:#999}.game-header-buttons{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.game-header button{padding:.4rem .8rem;background:#3498db;color:#fff;border:none;border-radius:6px;cursor:pointer}.game-header .game-menu-button{background:#34495e}.game-header .name-editor{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem;background:#f0f3f5;color:#34495e;border:1px solid #dde3e8;border-radius:999px;font-size:.85rem;cursor:pointer}.game-header .name-editor:hover{background:#e7edf1}.name-editor-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}.name-editor-input{padding:.35rem .6rem;border:1.5px solid #3498db;border-radius:999px;font-size:.85rem;width:150px}.game-menu{position:relative}.game-menu-button{display:inline-flex;align-items:center;justify-content:center;width:38px;height:34px;padding:0;font-size:1.2rem;line-height:1;background:#34495e;color:#fff;border:none;border-radius:6px;cursor:pointer}.game-menu-panel{position:absolute;right:0;top:calc(100% + .4rem);z-index:10;background:#fff;border:1px solid #e0e0e0;border-radius:10px;box-shadow:0 6px 24px #00000026;padding:.5rem;width:260px}.game-menu-section{padding:.4rem .3rem}.game-menu-section+.game-menu-section{border-top:1px solid #eee}.game-menu-section h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:#999;margin-bottom:.4rem}.game-menu-action{display:block;width:100%;text-align:left;padding:.5rem .6rem;margin-bottom:.3rem;background:#f7f9fa;border:1px solid #e3e8ec;border-radius:6px;font-size:.9rem;color:#1a1a1a;cursor:pointer}.game-menu-action:not(:disabled):hover{background:#eef4f8}.game-menu-action:disabled{opacity:.45;cursor:not-allowed}.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:.45rem .6rem;font-size:.9rem;cursor:pointer}.toggle-slider{position:relative;width:42px;height:24px;flex-shrink:0}.toggle-slider input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.toggle-track{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:999px;background:#cbd2d8;transition:background .15s}.toggle-track:after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0000004d;transition:transform .15s}.toggle-slider input:checked+.toggle-track{background:#2ecc71}.toggle-slider input:checked+.toggle-track:after{transform:translate(18px)}.toggle-slider input:focus-visible+.toggle-track{outline:2px solid #3498db;outline-offset:2px}.sudoku-grid{border-collapse:collapse;box-shadow:0 2px 12px #0000001f}.sudoku-cell{width:clamp(32px,10vw,52px);height:clamp(32px,10vw,52px);text-align:center;vertical-align:middle;font-size:clamp(1rem,4vw,1.4rem);cursor:pointer;border:1px solid #ccc;-webkit-user-select:none;user-select:none}.sudoku-cell:nth-child(3n){border-right:2.5px solid #555}tr:nth-child(3n) .sudoku-cell{border-bottom:2.5px solid #555}.sudoku-cell.given{font-weight:700;color:#1a1a1a;background:#dce1e6}.sudoku-cell.player-placed{font-weight:500}.sudoku-cell.selected{background:#d6eaf8}.sudoku-cell.highlighted{background:#eaf4fb}.sudoku-cell.conflict,.sudoku-cell.incorrect{background:#fde8e8;color:#e74c3c!important}.sudoku-notes{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:100%;height:100%;font-size:clamp(.55rem,1.8vw,.7rem);font-weight:500;color:#666;line-height:1}.sudoku-note-slot{display:flex;align-items:center;justify-content:center}.hint{font-size:.8rem;color:#888;text-align:center;padding:0 1rem}.player-list{display:flex;align-items:center;gap:.6rem;font-size:.9rem}.player-list-empty{color:#999;font-style:italic}.player-list-label{color:#555}.player-list-chips{display:flex;gap:.3rem}.player-chip{display:inline-flex;align-items:center;justify-content:center;min-width:32px;max-width:140px;height:24px;padding:0 .6rem;border-radius:12px;color:#fff;font-size:.8rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 1px 2px #00000026}.player-chip-self{outline:2px solid rgba(255,255,255,.9);outline-offset:-3px}.center{display:flex;justify-content:center;align-items:center;height:200px}.number-pad-wrapper{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%;max-width:480px}.notes-mode-toggle{padding:.4rem 1rem;background:#ecf0f1;border:1.5px solid #bdc3c7;border-radius:8px;font-size:.85rem;font-weight:600;color:#555;cursor:pointer;transition:background .15s,border-color .15s,color .15s}.notes-mode-toggle.active{background:#34495e;border-color:#34495e;color:#fff}.number-pad{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem;width:100%;padding:0 .5rem}.number-pad.notes-mode .number-pad-button:not(.clear){font-size:.85rem}.number-pad-button{min-height:48px;font-size:1.3rem;font-weight:600;color:#1a1a1a;background:#fff;border:1.5px solid #ccc;border-radius:8px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .1s,transform .05s}.number-pad-button:not(:disabled):hover{background:#eaf4fb}.number-pad-button:not(:disabled):active{background:#d6eaf8;transform:scale(.97)}.number-pad-button:disabled{opacity:.45;cursor:not-allowed}.number-pad-button.clear{background:#fdf2f2;border-color:#f5c2c2;color:#c0392b}.number-pad-button.clear:not(:disabled):hover{background:#fbe2e2}.win-card-wrap{display:flex;flex-direction:column;align-items:center;gap:.75rem}.win-card{background:linear-gradient(160deg,#fff,#eef7f1);border:1px solid #d6e8dd;border-radius:16px;padding:1.25rem 1.5rem;width:300px;max-width:92vw;box-shadow:0 8px 30px #0000001f;display:flex;flex-direction:column;align-items:center;gap:.75rem}.win-card-badge{font-size:1.5rem;font-weight:800;color:#27ae60}.win-card-room{font-size:1rem;font-weight:600;color:#34495e}.win-card-grid{display:grid;grid-template-columns:repeat(9,1fr);width:198px;height:198px;gap:1px;background:#34495e;border:2px solid #34495e;border-radius:4px;overflow:hidden}.win-card-cell{display:flex;align-items:center;justify-content:center;background:#fff;font-size:.8rem;color:#2c3e50}.win-card-cell.given{background:#eceff1;font-weight:700}.win-card-cell:nth-child(9n+3),.win-card-cell:nth-child(9n+6){border-right:2px solid #34495e}.win-card-cell:nth-child(n+19):nth-child(-n+27),.win-card-cell:nth-child(n+46):nth-child(-n+54){border-bottom:2px solid #34495e}.win-card-players{display:flex;flex-direction:column;align-items:center;gap:.4rem}.win-card-players-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:#95a5a6}.win-card-chips{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center}.win-card-chip{padding:.2rem .6rem;border-radius:999px;background:#7f8c8d;color:#fff;font-size:.8rem;font-weight:600}.win-card-cta{display:flex;flex-direction:column;align-items:center;gap:.1rem;margin-top:.25rem}.win-card-cta-line{font-size:.85rem;color:#7f8c8d}.win-card-cta-url{font-size:.95rem;font-weight:700;color:#3498db}.win-card-share{padding:.5rem 1.75rem;background:#27ae60;color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer}.win-card-share:hover{background:#229954}