:root{--game-max-width: 480px;--shell-min-width: 380px}html,body{min-height:100dvh}body{margin:0;display:flex;justify-content:center;background:var(--game-shell-backdrop, var(--bg, #0c141c))}.game-shell{position:relative;width:clamp(min(var(--shell-min-width),100%),var(--shell-computed-width, 100%),min(var(--game-max-width),100%));max-width:var(--game-max-width);min-height:100dvh;margin:0 auto;display:flex;flex-direction:column;overflow:hidden;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}@media (min-width: 481px){.game-shell{box-shadow:0 0 0 1px var(--border-strong, rgba(255, 255, 255, .15))}}@media (orientation: landscape){:root{--game-max-width: 1400px;--puzz-sidebar-landscape-width: 300px;--puzz-row-gap: 16px;--puzz-row-padding-x: 20px}.puzz-main-row{flex-direction:row!important;align-items:stretch;justify-content:center!important;padding:0 var(--puzz-row-padding-x)!important;box-sizing:border-box;gap:var(--puzz-row-gap)!important}.puzz-sidebar{order:2;flex:0 1 auto;width:fit-content;min-width:120px;max-width:var(--puzz-sidebar-landscape-width)!important;height:var(--puzz-sidebar-computed-height, auto)!important;max-height:100%!important;overflow-y:auto}.puzz-board-area{order:1;flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0}}.puzz-min-hit-area{position:relative}.puzz-min-hit-area:after{content:"";position:absolute;top:50%;right:50%;bottom:50%;left:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}:root{--color-background: #0c141c;--color-surface: #111c26;--color-surface-raised: #1b2c3a;--color-primary: #5eb8e8;--color-secondary: #00cec9;--color-accent: #fdcb6e;--color-success: #4caf6f;--color-danger: #d9534f;--color-warning: #f39c12;--color-text: #e9f1f6;--color-text-muted: #7594a6;--color-border: #243b4d}:root{--bg: var(--color-background);--panel: var(--color-surface);--panel-raised: var(--color-surface-raised);--ink: var(--color-text);--dim: var(--color-text-muted);--accent: var(--color-primary);--good: var(--color-success);--bad: var(--color-danger);--border: var(--color-border);--slice-idle-outer: var(--panel-raised);--slice-cell-border: var(--panel);--slice-cell-inner-off: #c1352f;--slice-cell-inner-on: #3f8f5c;--slice-dot-fill-unvisited: #12100e;--slice-dot-fill-visited: #fbfaf6;--slice-dot-ring-unvisited: #fbfaf6;--slice-dot-ring-visited: #12100e;--slice-path-line: #fbfaf6}*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--ink);font-family:Space Grotesk,system-ui,-apple-system,sans-serif}#pageContainer{display:flex;flex-direction:column;height:100dvh;gap:10px}#header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:14px;padding-block:10px;padding-inline:16px;border-bottom:1px solid var(--border);overflow:hidden}.brand{display:flex;align-items:baseline;gap:10px;min-width:0;text-decoration:none;color:inherit;touch-action:manipulation}.brand:hover h1{color:var(--accent)}#header h1{font-family:Space Grotesk,system-ui,-apple-system,sans-serif;font-weight:700;font-size:1.4rem;margin:0;letter-spacing:-.01em}#topbar{display:flex;align-items:center;gap:4px;flex-shrink:0}#topbar .puzz-nav-toggle{font-size:1.2rem;padding-block:8px;padding-inline:14px;border-radius:999px;border:1px solid transparent;background:transparent;color:var(--dim);cursor:pointer;transition:color .15s,border-color .15s}#topbar .puzz-nav-toggle:hover{background:transparent;color:var(--ink)}.puzz-nav-wrap{position:relative}.puzz-nav-menu{position:fixed;min-width:168px;background:#111c26;border:1px solid #243b4d;border-radius:12px;box-shadow:0 12px 32px #00000073;padding:6px;display:none;flex-direction:column;gap:2px;z-index:60}.puzz-nav-menu.show{display:flex}.puzz-nav-menu button{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:8px;background:transparent;border:none;color:#e9f1f6;font-family:inherit;font-size:.9rem;font-weight:600;cursor:pointer;white-space:nowrap}.puzz-nav-menu button:hover,.puzz-nav-menu button:focus-visible{background:#1b2c3a}#footer{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:10px 16px;border-top:1px solid var(--border)}.footer-brand{display:flex;flex-direction:column;align-items:center;line-height:1.2;text-decoration:none}.footer-line1{font-weight:700;font-size:.75rem;letter-spacing:-.01em;color:var(--ink)}.footer-brand:hover .footer-line1{color:var(--accent)}.box-title{font-size:20px;font-weight:700;letter-spacing:.02em}.puzzle-meta{font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:.04em}#main{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;gap:10px;padding:10px 12px 0}#board-area{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden}#boardWrap{position:relative;display:flex}#board{width:min(100%,640px);height:auto;aspect-ratio:1 / 1;touch-action:manipulation;cursor:pointer}#controlBar{flex:0 0 auto;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:10px 12px}.control-row{display:flex;align-items:center;justify-content:space-between;gap:10px}#dotsDisplay{font-size:14px;color:var(--dim)}#dotsDisplay b{color:var(--ink);font-variant-numeric:tabular-nums}.box-header-buttons{display:flex;gap:8px}.win-status{display:none;color:var(--good);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.win-status.visible{display:inline}.difficulty-group{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}.difficulty-group button{background:var(--panel-raised);color:var(--dim);border:none;border-right:1px solid var(--border);padding:7px 12px;font-size:12px;font-weight:600;cursor:pointer}.difficulty-group button:last-child{border-right:none}.difficulty-group button:hover{color:var(--ink)}.difficulty-group button.active{background:var(--accent);color:var(--color-background)}.tool-btn{background:var(--panel-raised);color:var(--ink);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:13px;font-weight:600;cursor:pointer}.tool-btn:hover{border-color:var(--accent)}.tool-btn:active{transform:translateY(1px)}.tool-btn:disabled{opacity:.4;cursor:not-allowed}.control-reset-btn{color:var(--bad)}.modal-backdrop{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;align-items:center;justify-content:center;padding:16px;z-index:70}.modal-backdrop.show{display:flex}.modal{position:relative;width:100%;max-width:320px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:20px;text-align:center}.modal-x{position:absolute;top:10px;right:10px;background:transparent;border:none;color:var(--dim);font-size:16px;cursor:pointer;padding:4px}.modal-x:hover{color:var(--ink)}.modal h2{margin:0 0 4px;font-size:19px;font-weight:700}.modal-copy{margin:0 0 16px;color:var(--dim);font-size:13px;line-height:1.5}.modal-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);margin-bottom:8px}.modal-label-spaced{margin-top:16px}.grid-size-row{display:flex;align-items:center;gap:12px}.grid-size-row input[type=range]{flex:1 1 auto;-moz-appearance:none;appearance:none;-webkit-appearance:none;height:4px;border-radius:999px;background:var(--border);cursor:pointer}.grid-size-row input[type=range]::-webkit-slider-thumb{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);border:2px solid var(--panel);box-shadow:0 0 0 1px var(--border);cursor:pointer}.grid-size-row input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);border:2px solid var(--panel);box-shadow:0 0 0 1px var(--border);cursor:pointer}.grid-size-value{flex:0 0 auto;min-width:3.4em;text-align:right;font-size:13px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}.modal-actions{margin-top:18px}.modal-actions .primary{width:100%;background:var(--accent);color:var(--color-background);border:none;border-radius:8px;padding:10px 14px;font-size:14px;font-weight:700;cursor:pointer}.modal-actions .primary:hover{filter:brightness(1.08)}.placeholder-page{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;max-width:440px;margin:0 auto;padding:24px 16px}.placeholder-icon{font-size:2.4rem;line-height:1}.placeholder-title{margin:0;font-size:22px;font-weight:700;letter-spacing:.01em}.placeholder-body{margin:0;color:var(--dim);font-size:14px;line-height:1.55}.placeholder-btn{margin-top:8px;text-decoration:none;display:inline-block}