:root{--bg: #2e1a2e;--surface: #4a2848;--surface-hover: #5e3660;--border: #6a3868;--text: #f0e0ef;--text-muted: #c8a0c0;--accent: #e8a0bf;--accent-strong: #ca3d84;--pencil: #5ca8cc;--danger: #6e2040;--tap: 44px;--footer-h: 28px}*{margin:0;padding:0;box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.loading,.error,.disconnected{font-size:1.2rem;padding:2rem;text-align:center}.error{color:#e06080}.disconnected{color:var(--accent)}.room-ended{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem;text-align:center;color:var(--accent)}.music-btn,.room-menu-btn,.shuffle-btn,.room-menu-item{padding:.3rem .8rem;font-size:.8rem;font-weight:600;background:var(--surface);color:var(--accent);border:1px solid var(--border);border-radius:6px;cursor:pointer}.music-btn,.room-menu-btn{position:relative;padding:.3rem .5rem;font-size:.9rem;line-height:1}.music-btn:before,.room-menu-btn:before{content:"";position:absolute;top:50%;left:50%;width:var(--tap);height:var(--tap);transform:translate(-50%,-50%)}@media(min-height:840px)and (max-width:899px),(min-height:701px)and (min-width:900px){.music-btn,.room-menu-btn{min-width:var(--tap);min-height:var(--tap);padding:calc((var(--tap) - 2px - 1.1rem) / 2) .5rem;font-size:1.1rem}}.start-btn,.new-game-btn{padding:.6rem 1.5rem;font-size:1rem;font-weight:600;color:#fff;border:none;border-radius:6px;cursor:pointer;min-height:var(--tap)}.start-btn{background:var(--accent-strong)}.new-game-btn{background:#aa52aa}.start-btn:disabled,.new-game-btn:disabled{opacity:.5;cursor:not-allowed}@media(hover:hover){.music-btn:hover,.room-menu-btn:hover,.copy-link-btn:hover,.room-menu-item:hover,.shuffle-btn:hover:not(:disabled){background:var(--surface-hover)}.start-btn:enabled:hover{background:#b73275}.new-game-btn:enabled:hover{background:#9a489a}}.music-btn,.room-menu-btn,.room-menu-item,.shuffle-btn,.start-btn,.new-game-btn{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.site-footer{min-height:var(--footer-h);line-height:var(--footer-h);text-align:center;font-size:.75rem;color:var(--text-muted)}.site-footer a{color:inherit;text-decoration:none}.site-footer a:hover{color:var(--accent);text-decoration:underline}.site-footer a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}.lobby{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:var(--gutter);text-align:center}.lobby-field{display:flex;flex-direction:column;gap:.3rem;font-size:.9rem;font-weight:600;color:var(--text-muted)}.lobby-field input{min-height:var(--tap);width:min(18rem,80vw);padding:0 .75rem;font-size:1rem;text-align:center;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:6px}.lobby-name-row{display:flex;align-items:flex-end;gap:.5rem;width:min(18rem,80vw)}.lobby-name-row .lobby-field{flex:1;min-width:0;text-align:left}.lobby-name-row .lobby-field input{width:auto}.lobby-line{color:var(--accent)}.shuffle-btn{flex:none;min-height:var(--tap)}.shuffle-btn:disabled{opacity:.5;cursor:not-allowed}.game-header{display:flex;align-items:center}.game-title{font-weight:700;color:var(--accent);text-align:center}.early-access{align-self:normal;line-height:125%;color:var(--text-muted);text-align:center;max-width:28ch}.room-chip{display:inline-flex;align-items:baseline;margin-top:1rem;gap:.4rem;font-size:1.5rem;font-weight:600;color:var(--text-muted);white-space:nowrap}.room-link{display:inline-flex;align-items:center;gap:.35rem}.room-clock{font-variant-numeric:tabular-nums}.room-code{font-family:ui-monospace,Cascadia Mono,Menlo,monospace;font-size:1rem;font-weight:600;letter-spacing:.15em;color:var(--accent);-webkit-user-select:all;user-select:all}.phase-info{font-size:1rem;color:var(--text-muted)}.waiting-hint{font-size:.8rem;color:var(--text-muted);text-align:center;max-width:18ch}.music-btn--silent:after{content:"";position:absolute;left:50%;top:50%;width:1.1em;height:2px;border-radius:1px;background:currentColor;transform:translate(-50%,-50%) rotate(-45deg)}.room-menu{margin:auto;padding:0;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text)}.room-menu::backdrop{background:#0000008c}.room-menu-panel{display:grid;gap:.5rem;padding:1rem;min-width:min(18rem,80vw)}.room-menu-item{min-height:var(--tap)}.room-menu-question{font-size:.8rem;color:var(--text-muted)}.room-menu-item--danger{background:var(--danger);color:#fff}@media(hover:hover){.room-menu-item--danger:hover{background:#8a2850}}.copy-link-btn{position:relative;display:inline-flex;padding:0;border:0;background:none;color:var(--accent);font-size:inherit;line-height:1;cursor:pointer}.copy-link-btn svg{width:1em;height:1em}.copy-link-btn:before{content:"";position:absolute;top:0;left:0;width:24px;height:24px}@media(hover:hover){.copy-link-btn:hover{background:var(--surface-hover)}}.sudoku-board{display:grid;grid-template-columns:repeat(9,var(--cell));grid-template-rows:repeat(9,var(--cell));background:#3a1e3a;border:2px solid var(--accent)}.cell-wrapper{border:1px solid #5a3058}.cell-wrapper.cell--box-left{border-left:2px solid var(--accent)}.cell-wrapper.cell--box-top{border-top:2px solid var(--accent)}.cell-wrapper.cell--box-right{border-right:2px solid var(--accent)}.cell-wrapper.cell--box-bottom{border-bottom:2px solid var(--accent)}.sudoku-board--celebrating .cell{animation:cell-finish .6s ease-out calc(var(--wave) * 45ms) both}@keyframes cell-finish{40%{transform:scale(1.08);background:color-mix(in srgb,var(--player, var(--accent)) 40%,transparent)}}@media(prefers-reduced-motion:reduce){.sudoku-board--celebrating .cell{animation:none}.sudoku-board--celebrating{animation:board-finish .8s ease-out both}@keyframes board-finish{40%{filter:brightness(1.3)}}}.cell{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:clamp(.95rem,calc(var(--cell) * .42),1.25rem);cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--bg)}.cell{touch-action:manipulation;-webkit-tap-highlight-color:transparent}@media(hover:hover){.cell:hover{background:var(--surface)}}.cell:active{background:var(--surface)}.cell--given{font-weight:700;background:#3a2240;color:var(--text)}.cell.cell--selected{background:#5c2a5c}.cell.cell--selected-pencil{background:#2a4a5c;box-shadow:inset 0 0 0 2px var(--pencil)}.cell.cell--conflict{background:var(--danger)}.pencil-marks{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:100%;height:100%;pointer-events:none}.pencil-mark{display:flex;align-items:center;justify-content:center;font-size:clamp(.5rem,calc(var(--cell) * .22),.55rem);line-height:1;color:#9a7098}.number-pad-wrapper{display:flex;flex-direction:column;align-items:center;gap:.5rem}.pencil-mode-label{font-size:.85rem;font-weight:600;color:var(--pencil);letter-spacing:.05em}.number-pad{display:grid;border:2px solid transparent;border-radius:8px;transition:border-color .15s,background .15s}.number-pad--pencil{border-color:var(--pencil);background:#2a4a5c4d}.number-pad button{font-weight:600;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:6px;cursor:pointer}.number-pad button:disabled{opacity:.4;cursor:not-allowed}.number-pad .erase-btn{background:var(--danger)}.number-pad,.number-pad button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.number-pad,.number-pad button{-webkit-user-select:none;user-select:none}@media(hover:hover){.number-pad button:hover:not(:disabled){background:var(--surface-hover)}.number-pad .erase-btn:hover:not(:disabled){background:#882850}}.number-pad button:active:not(:disabled){background:var(--surface-hover)}.number-pad .erase-btn:active:not(:disabled){background:#882850}.number-pad .pencil-btn{background:#3a2850}@media(hover:hover){.number-pad .pencil-btn:hover:not(:disabled){background:#4a3868}}.number-pad .pencil-btn:active:not(:disabled){background:#4a3868}.number-pad .pencil-btn[aria-pressed=true],.number-pad .pencil-btn[aria-pressed=true]:hover,.number-pad .pencil-btn[aria-pressed=true]:active{background:var(--pencil);color:var(--bg);border-color:var(--pencil)}.number-pad button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media(prefers-reduced-motion:reduce){.number-pad{transition:none}}.players-container{display:flex;flex-direction:column;align-items:center;gap:.5rem}.players-list{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}.player-badge{display:flex;align-items:center;gap:.4rem;padding:.25rem .75rem;border-radius:12px;font-size:.8rem;font-weight:600;color:var(--bg);background-color:var(--player)}.player-badge--away{background-color:transparent;color:var(--player);border:1px dashed currentColor;padding:calc(.25rem - 1px) calc(.75rem - 1px)}.player-badge--me{outline:2px solid var(--text);outline-offset:1px}.player-avatar{width:1.2rem;height:1.2rem;border-radius:50%;object-fit:cover}.player-name{max-width:5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-tag{flex:none;white-space:nowrap}:root{--gutter: clamp(.5rem, 2vw, 2rem);--gutter-y: clamp(.25rem, 1.5vh, 1.5rem);--cell-min: 31px;--cell-max: 50px;--board-min: calc(var(--cell-min) * 9 + 4px);--board-max: calc(var(--cell-max) * 9 + 4px);--shell-gap: .25rem}.app{display:grid;container-type:size;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(min-content,1fr) auto;align-items:center;justify-items:center;gap:var(--shell-gap);height:100vh;height:100dvh;padding:max(var(--gutter-y),env(safe-area-inset-top)) max(var(--gutter),env(safe-area-inset-right)) max(var(--gutter-y),env(safe-area-inset-bottom)) max(var(--gutter),env(safe-area-inset-left))}.site-footer{justify-self:stretch}.sudoku-game{--row-gap: 1rem;--board-row: minmax( calc(var(--board-min) + var(--row-gap)), calc(min(var(--board-max), 100cqw, 100%) + var(--row-gap)) );display:grid;align-self:stretch;width:100%;max-width:1100px;row-gap:0;column-gap:1rem;align-items:center;justify-items:center;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto auto minmax(0,1fr)}.sudoku-game:has(.sudoku-board){grid-template-rows:auto minmax(0,1fr) auto auto var(--board-row) auto auto minmax(0,1fr)}.game-area{display:contents}.game-header,.left-sidebar,.game-main,.right-sidebar,.players-container{width:100%;min-width:0}.left-sidebar,.game-main,.right-sidebar,.players-container{margin-top:var(--row-gap)}.game-header{grid-row:1}.sudoku-game>.room-chip{grid-row:3;margin-top:var(--row-gap)}.left-sidebar{grid-row:4}.left-sidebar:empty{display:none}.players-container{grid-row:5}.sudoku-game:not(:has(.sudoku-board)) .game-main{display:none}.sudoku-game:not(:has(.sudoku-board)) .right-sidebar{display:contents}.sudoku-game:not(:has(.sudoku-board)) .left-sidebar{flex-direction:column;flex-wrap:nowrap}.sudoku-game:not(:has(.sudoku-board)) :is(.room-code,.copy-link-btn){font-size:1.5rem}.sudoku-game:has(.sudoku-board) .game-main{grid-row:5}.sudoku-game:has(.sudoku-board) .right-sidebar{grid-row:6}.sudoku-game:has(.sudoku-board) .players-container{grid-row:7}.game-header,.left-sidebar{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center}.game-header{gap:.5rem 1rem}.header-lead,.header-controls{display:contents}.left-sidebar{gap:2rem .75rem}.right-sidebar{display:flex;flex-direction:column;align-items:center;justify-content:center}.game-main{container-type:size;display:grid;place-items:center;justify-self:stretch;align-self:stretch}.game-main:has(.sudoku-board){min-height:var(--board-min)}.sudoku-board{--cell: max( var(--cell-min), (min(100cqw, 100cqh, var(--board-max)) - 4px) / 9 )}.number-pad-wrapper{width:min(100%,var(--board-max))}.number-pad{width:100%;max-width:none;grid-template-columns:repeat(9,minmax(0,1fr));gap:3px;padding:3px}.number-pad button{min-height:var(--tap);padding:0 .25rem;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.number-pad .erase-btn,.number-pad .pencil-btn,.number-pad .freebie-btn{grid-column:span 3}.game-title{font-size:clamp(1.25rem,6vmin,2.5rem)}.players-list,.player-badge{min-width:0;max-width:100%}@media(min-height:840px)and (max-width:899px){.game-header :is(.game-title,.early-access){flex:0 0 100%}.game-title{font-size:clamp(1.25rem,9vmin,2.5rem)}.early-access{max-width:none}.sudoku-game:has(.sudoku-board) .players-container{margin-top:2.5rem}}@media(min-height:400px){.game-header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:1.5rem;position:relative;z-index:0;width:auto;justify-self:stretch;margin-inline:calc(50% - 50vw);padding:.5rem var(--gutter)}.game-header:before{content:"";position:absolute;z-index:-1;top:calc(-1 * var(--gutter-y));bottom:0;left:0;width:100%;background:color-mix(in srgb,var(--surface) 45%,var(--bg));border-bottom:1px solid var(--border)}.game-header .header-lead{grid-area:1 / 1;display:flex;align-items:center;gap:1rem}.game-header .room-chip{grid-area:1 / 2;justify-self:end;margin-top:0}.game-header .header-controls{grid-area:1 / 3;display:flex;align-items:center;gap:1rem}.game-header .early-access{max-width:none;white-space:nowrap}.early-access-more{display:none}}@media(min-width:600px)and (min-height:601px){.game-header{column-gap:1.5rem;position:relative;z-index:0;width:auto;justify-self:stretch;margin-inline:calc(50% - 50vw);padding:.5rem var(--gutter)}.game-header:before{content:"";position:absolute;z-index:-1;top:calc(-1 * var(--gutter-y));bottom:0;left:0;width:100%;background:color-mix(in srgb,var(--surface) 45%,var(--bg));border-bottom:1px solid var(--border)}}@media(min-width:800px)and (min-height:601px){@media(min-width:1200px){.game-header{grid-template-columns:1fr auto 1fr}.game-header .room-chip{justify-self:center}.game-header .header-controls{justify-self:end}}@media(min-width:1600px){.early-access-more{display:inline}}}@media(min-width:900px)and (min-height:601px){.sudoku-game{--row-gap: 1rem}.sudoku-game:has(.sudoku-board){grid-template-columns:minmax(min-content,1fr) minmax(0,var(--board-max)) minmax(180px,2fr);grid-template-rows:auto minmax(0,1fr) var(--board-row) auto minmax(0,1fr)}.left-sidebar{flex-direction:column;flex-wrap:nowrap;white-space:nowrap}.waiting-hint{white-space:normal}.sudoku-game:has(.sudoku-board) :is(.left-sidebar,.right-sidebar){margin-top:0}.sudoku-game:has(.sudoku-board) .game-header{grid-area:1 / 1 / 2 / -1}.sudoku-game:has(.sudoku-board) .left-sidebar{grid-area:3 / 1}.sudoku-game:has(.sudoku-board) .game-main{grid-area:3 / 2}.sudoku-game:has(.sudoku-board):has(.left-sidebar:empty) .game-main{grid-area:3 / 1 / 4 / 3}.sudoku-game:has(.sudoku-board) .right-sidebar{grid-area:3 / 3}.sudoku-game:has(.sudoku-board) .players-container{grid-area:4 / 1 / 5 / -1}.number-pad-wrapper{width:min(100%,280px)}.number-pad{grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;padding:.4rem}.number-pad button{padding:.6rem;font-size:1.1rem;white-space:normal;overflow:visible;text-overflow:clip}.number-pad .erase-btn,.number-pad .pencil-btn,.number-pad .freebie-btn{grid-column:auto;padding-left:.25rem;padding-right:.25rem}@media(max-width:1023.98px){.number-pad .erase-btn,.number-pad .pencil-btn,.number-pad .freebie-btn{grid-column:span 3;padding:.5rem .25rem}}}@media(orientation:landscape)and (max-height:600px){.app:has(.sudoku-board){grid-template-rows:minmax(min-content,1fr) var(--footer-h)}.sudoku-game:has(.sudoku-board){--side: max( var(--board-min), min( var(--board-max), 100cqh - var(--footer-h) - var(--shell-gap), (min(100cqw, 1100px) - 2.75rem) / 2 ) );grid-template-columns:minmax(var(--board-min),1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto auto minmax(0,1fr);column-gap:.75rem;align-self:center;min-height:var(--side);padding:0 1rem}.sudoku-game:has(.sudoku-board) .game-title{white-space:nowrap}.sudoku-game:has(.sudoku-board) .room-chip{font-size:1rem}.sudoku-game:has(.new-game-btn,.waiting-hint) .number-pad{display:none}.sudoku-game:has(.sudoku-board) .players-list{align-self:stretch;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}.sudoku-game:has(.sudoku-board) .player-badge:first-child{margin-left:auto}.sudoku-game:has(.sudoku-board) .player-badge:last-child{margin-right:auto}.sudoku-game:has(.sudoku-board) .game-main{grid-area:1 / 1 / -1 / 2;justify-self:end;width:min(100%,var(--side));margin-top:0}.sudoku-game:has(.sudoku-board) .game-header,.sudoku-game:has(.sudoku-board) .left-sidebar,.sudoku-game:has(.sudoku-board) .right-sidebar,.sudoku-game:has(.sudoku-board) .players-container{justify-self:start;width:min(100%,var(--side))}.sudoku-game:has(.sudoku-board) .game-header{grid-area:1 / 2;margin-inline:0}.sudoku-game:has(.sudoku-board)>.room-chip{grid-area:3 / 2;margin-top:0}.sudoku-game:has(.sudoku-board) .left-sidebar{grid-area:4 / 2}.sudoku-game:has(.sudoku-board) .right-sidebar{grid-area:5 / 2}}@media(max-height:700px)and (max-width:899px),(orientation:landscape)and (max-height:600px){:root{--gutter: .5rem;--gutter-y: .125rem}.sudoku-game{--row-gap: 1rem}.left-sidebar{gap:1.5rem .5rem}.game-title{font-size:1.25rem}.early-access,.pencil-mode-label{display:none}.player-badge{flex:none;max-width:none}.lobby{gap:.5rem;padding:0 var(--gutter)}}