:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--window-bg:#242424;--headerbar-bg:#2e3436;--headerbar-border:#1b1f20;--surface-bg:#353535;--text:#eeeeec;--text-dim:#a8acae;--hover:#ffffff14;--active:#ffffff29;--accent:#3584e4;--accent-text:#fff;--focus:#78aeed;--trough:#3d3d3d;font-family:system-ui,Cantarell,Segoe UI,sans-serif;font-size:15px;line-height:1.35}*,:before,:after{box-sizing:border-box}:focus-visible{outline:2px solid var(--focus);outline-offset:2px}[hidden]{display:none!important}html,body{background:var(--window-bg);height:100%;color:var(--text);margin:0;overflow:hidden}.app{flex-direction:column;height:100%;min-height:0;margin:0 auto;display:flex}.headerbar{background:var(--headerbar-bg);border-bottom:1px solid var(--headerbar-border);-webkit-user-select:none;user-select:none;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;min-height:46px;padding:4px 8px;display:grid;box-shadow:inset 0 -1px #ffffff08}.hb-title{text-align:center;flex-direction:column;grid-column:2;align-items:center;line-height:1.1;display:flex}.hb-title-text{font-weight:700}.hb-subtitle{color:var(--text-dim);min-height:1em;font-size:.8em}.hb-end{grid-column:3;justify-content:flex-end;align-items:center;gap:6px;display:flex}.headerbar>#new-game{justify-self:start}.hb-button,.hb-icon-button{font:inherit;color:var(--text);cursor:pointer;background:#ffffff0f;border:1px solid #ffffff14;border-radius:8px;min-height:28px;padding:4px 12px}.hb-icon-button{place-items:center;width:34px;padding:4px;display:inline-grid}.hb-button:hover,.hb-icon-button:hover,.hb-icon-button[aria-expanded=true]{background:var(--hover)}.hb-button:active,.hb-icon-button:active{background:var(--active)}.menu{background:var(--surface-bg);min-width:200px;color:var(--text);border:1px solid #0006;border-radius:10px;margin:0;padding:6px;position:fixed;inset:52px 8px auto auto;box-shadow:0 8px 24px #00000073}.menu-item{width:100%;font:inherit;text-align:left;color:inherit;cursor:pointer;background:0 0;border:0;border-radius:6px;align-items:center;gap:8px;padding:6px 10px;display:flex}.menu-item:hover,.menu-item:focus-visible{background:var(--hover)}.menu-check{text-align:center;width:1em;display:inline-block}.menu-volume{align-items:center;gap:8px;padding:6px 10px 6px calc(18px + 1em);display:flex}.menu-volume label{white-space:nowrap}.menu-slider{accent-color:currentColor;cursor:pointer;flex:auto;min-width:0;margin:0}.menu-volume output{text-align:right;font-variant-numeric:tabular-nums;min-width:3ch}.menu-item[aria-checked=true] .menu-check:before{content:"✓"}.menu-separator{border:0;border-top:1px solid #ffffff1a;margin:6px 4px}.status{align-items:center;gap:10px;min-height:48px;padding:8px 12px;display:flex}.progress{background:var(--trough);border-radius:999px;flex:auto;height:22px;position:relative;overflow:hidden}.progress-fill{background:var(--accent);border-radius:999px;width:0;transition:width .12s linear;position:absolute;inset:0 auto 0 0}.progress-text{color:var(--accent-text);text-shadow:0 1px 1px #0006;white-space:nowrap;place-items:center;font-size:.9em;font-weight:700;display:grid;position:absolute;inset:0}.score-caption{margin-left:auto}.score{font-variant-numeric:tabular-nums;text-align:right;min-width:6ch;font-size:1.2em;font-weight:700}.status>.score-caption+.score{margin-left:0}.stage{flex-direction:column;flex:1 1 0;justify-content:center;align-items:center;min-height:0;padding:0 12px;display:flex}.game-frame{flex:1 1 0;align-self:stretch;place-items:center;width:100%;min-height:0;display:grid}.game-frame canvas{cursor:pointer;touch-action:none;border-radius:4px;display:block;box-shadow:0 0 0 1px #00000080}.welcome{flex-direction:column;align-items:center;gap:18px;width:100%;max-width:420px;padding:24px 0;display:flex}.welcome-head{align-items:center;gap:12px;display:flex}.welcome-head h1{margin:0;font-size:1.5em}.board-size{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 12px;display:flex}.board-size-label{color:var(--text-dim)}.size-field{align-items:center;gap:6px;display:flex}.size-field input{width:4.5em;font:inherit;font-variant-numeric:tabular-nums;text-align:center;color:var(--text);background:var(--window-bg);border:1px solid #ffffff1f;border-radius:8px;padding:4px 6px}.size-times{color:var(--text-dim)}.mode-list{flex-direction:column;gap:12px;width:100%;padding:0 12px;display:flex}.mode-card{width:100%;font:inherit;text-align:left;color:var(--text);cursor:pointer;background:#ffffff0a;border:1px solid #ffffff14;border-radius:12px;flex-direction:column;align-items:flex-start;gap:6px;padding:12px 16px;display:flex}.mode-card:hover{background:var(--hover)}.mode-card:active{background:var(--active)}.mode-title{font-size:1.05em;font-weight:700}.mode-desc{color:var(--text-dim);font-size:.9em}.controls{color:var(--text-dim);text-align:center;margin:0;padding:6px 12px 10px;font-size:.8em;line-height:1.4}.dialog{background:var(--surface-bg);width:min(92vw,360px);color:var(--text);border:1px solid #00000080;border-radius:14px;padding:0;box-shadow:0 16px 40px #0000008c}.dialog-wide{width:min(92vw,520px)}.dialog-about{text-align:center;width:min(92vw,380px)}.dialog::backdrop{background:#00000073}.dialog-form{flex-direction:column;gap:12px;margin:0;padding:20px 22px;display:flex}.dialog-title{margin:0;font-size:1.25em}.dialog-message{margin:0}.dialog-message.small{color:var(--text-dim);font-size:.85em}.about-logo{align-self:center}.dialog-actions{justify-content:flex-end;gap:8px;margin-top:6px;display:flex}.btn{font:inherit;min-width:84px;color:var(--text);cursor:pointer;background:#ffffff1a;border:1px solid #ffffff14;border-radius:8px;padding:6px 14px}.btn:hover{background:#ffffff29}.btn-primary{color:var(--accent-text);background:var(--accent);border-color:#0000}.btn-primary:hover{background:#4a93ed}.field{flex-direction:column;gap:6px;display:flex}.field-inline{flex-direction:row;align-items:center;gap:10px}.field input,.field select{font:inherit;color:var(--text);background:var(--window-bg);border:1px solid #ffffff1f;border-radius:8px;padding:6px 10px}.scores-table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%}.scores-table th,.scores-table td{text-align:left;border-bottom:1px solid #ffffff14;padding:6px 8px}.scores-table th{color:var(--text-dim);font-weight:600}.scores-table .num{text-align:right}.scores-table tr.highlight td{color:gold;font-weight:700}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (max-width:520px){.controls{font-size:.75em}}
