:root{color-scheme:dark;font-family:system-ui,sans-serif;--main-bg-color: #20203f;--border-color: #797990;--text-color: #e0d8f0;--accent: #8870e0;--accent-done: #b8a0d0;--text-on-accent: #fff;--surface-raised: #28284a}html{touch-action:manipulation}body{margin:0;background:var(--main-bg-color);color:var(--text-color);touch-action:manipulation}#app{display:grid;place-items:center;min-height:100vh;padding:1rem;box-sizing:border-box}.home{display:grid;gap:.75rem;justify-items:stretch;min-width:16rem}.home h1{text-align:center}.menu{display:grid;gap:.6rem;justify-items:stretch;width:min(90vw,22rem)}.menu h1{text-align:center;margin:0 0 .5rem}.menu-version{text-align:right;font-size:.7rem;opacity:.45;margin-top:.5rem;cursor:pointer}.menu-version:hover{opacity:.7}.menu-item{padding:.75rem;border:1px solid color-mix(in srgb,var(--border-color) 25%,transparent);border-radius:.5rem;background:color-mix(in srgb,var(--border-color) 6%,transparent);text-align:center}.menu-item:disabled{opacity:.4;cursor:default}.list-screen,.settings-screen,.stats-screen,.manual-screen{width:min(92vw,40rem);display:grid;gap:.75rem;align-content:start}.list-header{display:flex;align-items:baseline;gap:1rem}.list-header h1{margin:0;flex:1}.list-items{display:grid;gap:.35rem;max-height:80vh;overflow-y:auto}.list-item{text-align:left;padding:.6rem .75rem;border:1px solid color-mix(in srgb,var(--border-color) 20%,transparent);border-radius:.375rem;background:none}.list-item.selected{background:color-mix(in srgb,var(--border-color) 14%,transparent);font-weight:600}.settings-list{display:grid;gap:.5rem}.settings-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.4rem 0;border-bottom:1px solid color-mix(in srgb,var(--border-color) 12%,transparent)}.settings-row select{font:inherit;padding:.25rem}.stats-cards{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}.stats-card{border:1px solid color-mix(in srgb,var(--border-color) 20%,transparent);border-radius:.5rem;padding:.6rem .75rem}.stats-card h2{margin:0 0 .4rem;font-size:1rem}.stats-card p{margin:.15rem 0;font-size:.9rem}.manual-body{line-height:1.5}.manual-body h2{margin-top:1.4rem}button{font:inherit;padding:.5rem .75rem;cursor:pointer;background:color-mix(in srgb,var(--border-color) 10%,transparent);color:var(--text-color);border:1px solid color-mix(in srgb,var(--border-color) 25%,transparent);border-radius:.375rem}.play{display:grid;gap:.75rem;width:min(90vw,480px)}.play-header{display:flex;justify-content:space-between;align-items:center;gap:1rem}.board{width:100%;aspect-ratio:1 / 1;touch-action:none}.pad,.pad-view{display:grid;gap:.5rem}.pad-view[hidden],.hint-pane[hidden]{display:none}.phone-pad{display:grid;gap:.5rem;border-radius:.375rem;padding:.25rem}.phone-row{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.5fr;gap:.5rem}.phone-pad.pencil-mode .pbtn-digit{font-size:.8em;opacity:.85}.digit-pad{display:grid;grid-template-columns:repeat(9,1fr);gap:.5rem}.digit-pad.pencil-mode .pbtn-digit{font-size:.8em;opacity:.85}.pencil-pad{display:grid;grid-template-columns:repeat(9,1fr);gap:.5rem;opacity:.85}.action-row{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem}.pbtn{font:inherit;padding:1rem .25rem;cursor:pointer;border:1px solid color-mix(in srgb,var(--border-color) 30%,transparent);border-radius:.375rem;background:color-mix(in srgb,var(--border-color) 6%,transparent)}.pbtn-sel{background:var(--accent);color:var(--text-on-accent)}.pbtn-done{background:var(--accent-done);color:var(--main-bg-color)}.pbtn-dis{opacity:.4;cursor:default}.hint-pane{display:grid;gap:.5rem}.hint-text{max-height:40vh;overflow-y:auto;padding:.5rem;border:1px solid color-mix(in srgb,var(--border-color) 25%,transparent);border-radius:.375rem;line-height:1.4}.hint-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:.25rem}.popup-menu{display:grid;min-width:12rem;max-width:calc(100vw - 1rem);background:var(--surface-raised);color:var(--text-color);border:1px solid color-mix(in srgb,var(--border-color) 35%,transparent);border-radius:.5rem;box-shadow:0 4px 16px #0000004d;padding:.25rem;z-index:10}.popup-menu button{text-align:left;border:none;background:none;border-radius:.25rem}.popup-menu button:hover{background:color-mix(in srgb,var(--border-color) 12%,transparent)}@media(min-width:900px){.play{width:min(90vw,620px)}}.app-dialog{max-width:24rem;background:var(--surface-raised);color:var(--text-color);border:1px solid var(--border-color);border-radius:.5rem;padding:1rem}.dialog-buttons{display:flex;gap:.5rem;margin-top:.75rem}.dialog-buttons.dialog-list{flex-direction:column}.app-dialog .busy{margin:0}.update-banner{position:fixed;top:0;left:0;right:0;z-index:1000;align-items:center;justify-content:center;gap:.75rem;padding:.5rem 1rem;background:var(--surface-raised);color:var(--text-color);font-size:.875rem;border-bottom:1px solid color-mix(in srgb,var(--border-color) 25%,transparent)}.update-banner:not([hidden]){display:flex}.update-banner button{padding:.25rem .75rem;border:1px solid color-mix(in srgb,var(--border-color) 35%,transparent);border-radius:.25rem;background:color-mix(in srgb,var(--border-color) 10%,transparent);color:inherit;font:inherit;cursor:pointer}.update-banner button:hover{background:color-mix(in srgb,var(--border-color) 20%,transparent)}