* { box-sizing:border-box; }

html, body { min-height:100%; margin:0; background:#080b16; color:#f1f3ff; font-family:'Crimson Text', serif; }
body { min-height:100vh; overflow:auto; background:radial-gradient(circle at 50% 0%, #222b55 0, #080b16 58%, #03040a 100%); }

.SudokuPage { display:flex; justify-content:center; align-items:center; width:100%; min-height:100dvh; margin:0 auto; padding:.5rem; text-align:center; overflow:hidden; }
.SudokuView { width:620px; transform-origin:top center; }
#game-title { margin:0; color:#ffffff; font-family:'Cinzel', serif; font-size:clamp(2rem, 10vw, 3.5rem); letter-spacing:.08em; text-shadow:0 0 24px #9b7dff; }
#game-subtitle { margin:.6em 0 1.6em; color:#c2b6ff; font-size:1.2rem; font-style:italic; }

.SudokuPanel { padding:1.25em; border:1px solid #7661dc; border-radius:14px; background:rgba(12, 15, 35, .88); box-shadow:0 0 30px rgba(115, 86, 255, .18); }
.SudokuOptions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.45em .9em; margin:0 0 .75em; padding:.4em; border:0; color:#bbb5dc; font-family:'Cinzel',serif; font-size:.7rem; }
.SudokuOptions legend { margin:0; padding:0 .25em; color:#c2b6ff; }
.SudokuOptionGroup { display:flex; gap:.4em; align-items:center; }
.SudokuOptionGroup label { display:inline-flex; align-items:center; gap:.2em; cursor:pointer; }
.SudokuOptionGroup input { width:.8rem; height:.8rem; margin:0; accent-color:#ffd166; }
.SudokuOptionGroup label:focus-within { color:#ffd166; }
.SudokuToolbar { display:flex; align-items:center; justify-content:space-between; gap:.5em; color:#bbb5dc; font-family:'Cinzel', serif; font-size:.75rem; }
.SudokuToolbarLeft { display:flex; flex-direction:column; align-items:flex-start; gap:.15em; }
.SudokuToolbar strong { color:#ffffff; font-size:1.05rem; }
#gameStatus { color:#c2b6ff; font-size:.85rem; }

.SudokuGrid { display:grid; grid-template-columns:repeat(9, 1fr); width:min(500px, 100%); margin:1.5em auto; border:2px solid #ff9f1c; background:#ff9f1c; gap:0; }
.SudokuCell { display:block; width:100%; aspect-ratio:1; min-width:0; border:0; border-right:1px solid #9b7dff; border-bottom:1px solid #9b7dff; background:#151936; color:#62d6ff; cursor:pointer; font-family:'Cinzel', serif; font-size:clamp(.9rem, 4.6vw, 1.8rem); font-weight:700; line-height:1; padding:0; text-align:center; text-shadow:0 0 8px rgba(98, 214, 255, .7); }
.SudokuCell.given { appearance:none; background:#252951; color:#ffffff; cursor:default; opacity:1; -webkit-text-fill-color:#ffffff; text-shadow:0 0 4px rgba(255, 255, 255, .35); }
.SudokuCell.selected { background:#3a3970; box-shadow:inset 0 0 0 2px #62d6ff; }
.SudokuCell.error { background:#db1f62; color:#ffffff; text-shadow:none; }
.SudokuCell.correct { background:#087a3e; }
.SudokuGrid.solved .SudokuCell.correct { appearance:none; background:#087a3e; color:#ffffff; opacity:1; -webkit-text-fill-color:#ffffff; text-shadow:none; }
.SudokuCell:focus-visible { outline:2px solid #ffd166; outline-offset:-3px; z-index:1; }
.SudokuGrid.size-9 .SudokuCell:nth-child(3n) { border-right:2px solid #ff9f1c; }
.SudokuGrid.size-9 .SudokuCell:nth-child(9n) { border-right:0; }
.SudokuGrid.size-9 .SudokuCell:nth-child(n+19):nth-child(-n+27), .SudokuGrid.size-9 .SudokuCell:nth-child(n+46):nth-child(-n+54) { border-bottom:2px solid #ff9f1c; }
.SudokuGrid.size-9 .SudokuCell:nth-child(n+73):nth-child(-n+81) { border-bottom:0; }
.SudokuGrid.size-4 { grid-template-columns:repeat(4,1fr); width:min(360px,100%); }
.SudokuGrid.size-4 .SudokuCell:nth-child(2n) { border-right:2px solid #ff9f1c; }
.SudokuGrid.size-4 .SudokuCell:nth-child(4n) { border-right:0; }
.SudokuGrid.size-4 .SudokuCell:nth-child(n+5):nth-child(-n+8) { border-bottom:2px solid #ff9f1c; }
.SudokuGrid.size-4 .SudokuCell:nth-child(n+13):nth-child(-n+16) { border-bottom:0; }
.SudokuGrid.size-6 { grid-template-columns:repeat(6,1fr); width:min(440px,100%); }
.SudokuGrid.size-6 .SudokuCell:nth-child(3n) { border-right:2px solid #ff9f1c; }
.SudokuGrid.size-6 .SudokuCell:nth-child(6n) { border-right:0; }
.SudokuGrid.size-6 .SudokuCell:nth-child(n+7):nth-child(-n+12), .SudokuGrid.size-6 .SudokuCell:nth-child(n+19):nth-child(-n+24) { border-bottom:2px solid #ff9f1c; }
.SudokuGrid.size-6 .SudokuCell:nth-child(n+31):nth-child(-n+36) { border-bottom:0; }
.SudokuGrid.size-12 { grid-template-columns:repeat(12,1fr); width:min(620px,100%); }
.SudokuGrid.size-12 .SudokuCell:nth-child(4n) { border-right:2px solid #ff9f1c; }
.SudokuGrid.size-12 .SudokuCell:nth-child(12n) { border-right:0; }
.SudokuGrid.size-12 .SudokuCell:nth-child(n+25):nth-child(-n+36), .SudokuGrid.size-12 .SudokuCell:nth-child(n+61):nth-child(-n+72), .SudokuGrid.size-12 .SudokuCell:nth-child(n+97):nth-child(-n+108) { border-bottom:2px solid #ff9f1c; }
.SudokuGrid.size-12 .SudokuCell:nth-child(n+133):nth-child(-n+144) { border-bottom:0; }

.SudokuActions { display:flex; justify-content:space-between; align-items:center; gap:.35em; width:100%; flex-wrap:nowrap; }
.GameButton, .QuitButton { border:1px solid #9b7dff; border-radius:6px; background:#24214a; color:#ffffff; cursor:pointer; font-family:'Cinzel', serif; padding:.6em 1em; text-decoration:none; }
.FullscreenButton { display:grid; flex:0 0 2.4rem; width:2.4rem; height:2.25rem; place-items:center; padding:0; border:1px solid #9b7dff; border-radius:6px; background:#24214a; color:#ffffff; cursor:pointer; font-size:1.35rem; line-height:1; }
.FullscreenButton[hidden] { display:none; }
.FullscreenButton.active .FullscreenEnterIcon { display:none; }
.FullscreenExitIcon { display:none; font-size:1.7rem; }
.FullscreenButton.active .FullscreenExitIcon { display:block; }
.SecondaryGameButton { border-color:#7661dc; background:transparent; color:#c2b6ff; }
.GameButton:hover, .GameButton:focus-visible, .FullscreenButton:hover, .FullscreenButton:focus-visible, .QuitButton:hover, .QuitButton:focus-visible { outline:2px solid #ffd166; outline-offset:3px; }
.QuitButton { display:inline-grid; flex:0 0 2.4rem; width:2.4rem; height:2.25rem; place-items:center; margin:0; background:transparent; color:#c2b6ff; font-size:1.35rem; padding:0; }
.GameHelp { margin-top:1.5em; color:rgba(225, 224, 245, .7); font-size:1.05rem; line-height:1.4; }

@media (max-width:600px) { .SudokuPage { padding:.25rem; align-items:flex-start; } .SudokuView { margin-top:0; } #game-subtitle { display:block; margin:.2em 0 .65em; font-size:.95rem; } .GameHelp { display:none; } #game-title { font-size:clamp(1.8rem,9vw,2.8rem); } .SudokuToolbar { font-size:.65rem; } .SudokuPanel { padding:.75em; } .SudokuOptions { gap:.25em .55em; font-size:.6rem; } .SudokuGrid { margin:1em auto; } .SudokuGrid.size-12 .SudokuCell { font-size:clamp(.48rem,2.7vw,.8rem); } .SudokuActions { justify-content:space-between; gap:.3em; width:100%; } .SudokuActions .GameButton { min-width:0; padding:.4em .45em; font-size:.65rem; } .SudokuActions .FullscreenButton, .SudokuActions .QuitButton { flex-basis:2rem; width:2rem; height:2rem; font-size:1.15rem; } }

@media (orientation:landscape) and (max-height:700px) { #game-subtitle, .GameHelp { display:none; } .SudokuPage { justify-content:center; align-items:flex-start; padding:.25rem; } .SudokuView { transform-origin:top center; } .SudokuPanel { padding:.7em; } .SudokuGrid { margin:.8em auto; } .SudokuActions { gap:.4em; } .GameButton, .QuitButton { padding:.4em .6em; } .SudokuGrid.size-12 .SudokuCell { font-size:.62rem; } }