:root{--stage-width: min(63vh, 100%, (100dvh - 14rem) * .85);--ink: #1c1a17;--paper: #f4f1ea;--muted: #6f675c;--scrim: #1c1a1759;--delta-up: #006b5a;--delta-down: #a33d00;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:var(--paper);color:var(--ink);font:16px/1.4 system-ui,-apple-system,Segoe UI,sans-serif;overscroll-behavior:none}#app{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.5rem,2vh,1.5rem);padding:clamp(.5rem,2vw,1.5rem);padding-bottom:max(clamp(.5rem,2vw,1.5rem),env(safe-area-inset-bottom))}.hud{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;width:100%;max-width:var(--stage-width);container-type:inline-size}.hud-title{display:flex;align-items:center;gap:.5rem;min-width:0;max-width:25%}@container (max-width: 54rem){.hud-title{flex-direction:column;align-items:flex-start;gap:.2rem}}.hud h1{margin:0;font-size:clamp(1.5rem,4vmin,2.2rem);font-weight:600;letter-spacing:.01em;line-height:1.1}.mode-badge{flex-shrink:0;padding:.15rem .6rem;border-radius:8px;font-size:.75rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}.hud-info{color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;margin:0 0 0 auto;max-width:70%}.hud-info strong{color:var(--ink)}.hud-info-chunk{display:inline-block;white-space:nowrap}.hud-info-chunk[hidden]{display:none}@keyframes currency-pulse{0%{transform:scale(1)}35%{transform:scale(1.3)}to{transform:scale(1)}}#currency-balance.pulse{display:inline-block;animation:currency-pulse .4s ease}.board-wrap{position:relative;width:var(--stage-width);aspect-ratio:1}canvas{display:block;width:100%;height:100%;border-radius:4px;touch-action:none}.board-placeholder{position:absolute;inset:0;border-radius:4px;background:var(--muted)}.tutorial-caption{display:grid;gap:.5rem;width:var(--stage-width);padding:.75rem 1rem;border-radius:8px;text-align:center;background:var(--paper);box-shadow:0 4px 14px #0002}.tutorial-caption[hidden]{display:none}.tutorial-caption p{margin:0;font-weight:600}.tutorial-caption-actions{display:flex;justify-content:center;gap:.5rem}.colors-wrap{display:flex;flex-direction:column;align-items:center;gap:clamp(.5rem,2vh,1.5rem);width:var(--stage-width)}.colors{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.4rem,1.5vw,.75rem);width:var(--stage-width)}.color{aspect-ratio:1;border:2px solid transparent;border-radius:8px;cursor:pointer;min-height:44px;display:grid;place-items:center;font:inherit;font-size:clamp(.95rem,4vmin,1.6rem);font-weight:700;line-height:1;transition:transform .08s ease}.color:hover:not(:disabled){transform:translateY(-2px)}.color:focus-visible{outline:3px solid var(--ink);outline-offset:2px}.color:disabled{cursor:default;opacity:.35}.hud-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(.35rem,1.5vw,.75rem);width:max-content;max-width:calc(100vw - 2rem)}.hud-button{flex-shrink:0;min-height:44px;padding:0 .85rem;border:2px solid var(--ink);border-radius:8px;background:none;color:var(--ink);font:inherit;font-weight:600;cursor:pointer;transition:transform .08s ease}.hud-button:hover:not(:disabled){transform:translateY(-2px)}.hud-button:focus-visible{outline:3px solid var(--ink);outline-offset:2px}.hud-button:disabled{cursor:default;opacity:.35}.overlay{position:absolute;inset:0;display:grid;place-content:center;padding:1rem;border-radius:4px;background:var(--scrim)}.overlay[hidden]{display:none}.overlay-card{display:grid;gap:.75rem;padding:1.5rem 2rem;border-radius:10px;text-align:center;background:var(--paper);box-shadow:0 10px 34px #0003}#how-to-play-overlay .overlay-card{max-width:32rem;max-height:85dvh;overflow-y:auto}#how-to-play-close,#settings-close,#game-modes-close,#changelog-close,#share-result,#time-attack-start-button{justify-self:center}#game-modes-overlay .overlay-card{max-width:28rem}#time-attack-start-overlay .overlay-card{max-width:24rem}.checkbox-row{display:flex;align-items:center;justify-self:center;gap:.5rem;color:var(--muted);text-align:left;cursor:pointer;font-weight:700}.checkbox-row input{accent-color:var(--ink)}#settings-overlay .overlay-card,#changelog-overlay .overlay-card{max-width:26rem;max-height:85dvh;overflow-y:auto}.keybindings{display:grid;gap:.5rem;text-align:left}.keybindings h3{margin:0;font-size:1rem;text-align:center}.keybindings-list{display:grid;gap:.4rem;margin:0;padding:0;list-style:none}.keybindings-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:.6rem}.keybindings-key{min-width:1.6rem;padding:.15rem .4rem;border:1px solid var(--muted);border-radius:4px;text-align:center;font:inherit;font-size:.85rem}.keybindings-rebind{min-height:32px;padding:0 .6rem;font-size:.85rem}.changelog-list{display:grid;gap:.6rem;margin:0;padding:0;list-style:none;text-align:left}.changelog-row{display:grid;gap:.15rem}.changelog-title{font-size:.9rem}.changelog-date{margin:0;font-size:.75rem;color:var(--muted)}.changelog-body{margin:0;font-size:.85rem;color:var(--muted)}.version-label{margin:-.5rem 0 0;font-size:.8rem;color:var(--muted)}.account{display:grid;gap:.5rem}.account h3{margin:0;font-size:1rem;text-align:center}.account-status{margin:0;font-size:.9rem;text-align:center}.account-actions{display:flex;justify-content:center;gap:.5rem}.new-badge{margin-left:.35rem;padding:.05rem .4rem;border-radius:6px;background:var(--ink);color:var(--paper);font-size:.65rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;vertical-align:.1em}.ranking-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.ranking-tab[aria-pressed=true]{background:var(--ink);color:var(--paper)}.ranking-status{margin:0;font-size:.9rem;text-align:center}.ranking-list{display:grid;gap:.35rem;margin:0;padding:0;list-style:none;text-align:left}.ranking-row{display:grid;grid-template-columns:2.5ch 1fr auto;gap:.75rem;align-items:baseline}.ranking-row.has-delta{grid-template-columns:2.5ch 4.5ch 1fr auto}.ranking-delta{font-size:.8rem;font-variant-numeric:tabular-nums;white-space:nowrap}.ranking-delta.is-up{color:var(--delta-up);font-weight:700}.ranking-delta.is-down{color:var(--delta-down);font-weight:700}.ranking-delta.is-same,.ranking-delta.is-new{color:var(--muted)}.ranking-rank{text-align:right;color:var(--muted)}.ranking-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ranking-score{font-weight:600;font-variant-numeric:tabular-nums}.ranking-row.is-self .ranking-name{font-weight:700}.language{display:grid;gap:.5rem}.language h3{margin:0;font-size:1rem;text-align:center}.language-options{display:flex;justify-content:center;gap:.5rem}.language-option[aria-pressed=true]{background:var(--ink);color:var(--paper)}.theme{display:grid;gap:.5rem}.theme h3{margin:0;font-size:1rem;text-align:center}.theme-options{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.time-attack-endless-settings{display:grid;gap:.5rem}.time-attack-endless-settings h3{margin:0;font-size:1rem;text-align:center}.theme-option[aria-pressed=true]{background:var(--ink);color:var(--paper)}.game-modes{display:flex;justify-content:center;gap:1rem}.game-mode-choice{display:flex;flex-direction:column;align-items:center;gap:.5rem;max-width:12rem}.game-mode-option{padding:1rem 1.75rem;font-size:1.05rem}.game-mode-option[aria-pressed=true]{background:var(--ink);color:var(--paper)}.game-mode-description,.continue-hint{margin:0;color:var(--muted);font-size:.85rem;line-height:1.35}.continue-hint strong{color:var(--ink)}.points-earned{margin:0 0 .5rem;font-size:.85rem;font-weight:600}.overlay h2{margin:0;font-size:1.5rem}.overlay p{margin:0;color:var(--muted)}.overlay-action{justify-self:center;padding:.6rem 1.4rem;min-height:44px;border:2px solid var(--ink);border-radius:8px;background:none;color:var(--ink);font:inherit;font-weight:600;cursor:pointer}.overlay-action.primary{background:var(--ink);color:var(--paper)}.overlay-action:focus-visible{outline:3px solid var(--ink);outline-offset:2px}.overlay-action:disabled{cursor:default;opacity:.35}.more,.signature a{color:var(--muted);font-size:.8rem;text-decoration-color:color-mix(in srgb,var(--muted) 40%,transparent);text-underline-offset:3px}.more:hover,.signature a:hover{color:var(--ink);text-decoration-color:currentColor}.signature{width:var(--stage-width);text-align:center;color:var(--muted);font-size:.8rem}@media(orientation:landscape){.board-wrap.tutorial-board{width:min(40vh,100%)}}@media(orientation:landscape)and (max-height:40rem){#app{--stage-width: min(63vh, 100%);display:grid;grid-template-columns:auto auto;grid-template-areas:"hud     hud" "board   colors" "caption caption" "sig     sig";justify-content:center;align-content:center;column-gap:clamp(.75rem,2vw,1.5rem)}.hud{grid-area:hud;width:auto;max-width:none}.tutorial-caption{grid-area:caption;width:auto}.board-wrap{grid-area:board;width:min(63vh,55vw)}.board-wrap.tutorial-board{width:min(36vh,36vw)}.tutorial-caption{padding:.5rem .75rem}#app:has(.tutorial-board){grid-template-areas:"hud     hud" "board   colors" "caption colors" "sig     sig"}#app:has(.tutorial-board) .board-wrap{justify-self:center}#app:has(.tutorial-board) .tutorial-caption{width:min(40vw,22rem)}.colors-wrap{grid-area:colors;justify-content:center;gap:.5rem;width:auto}.colors{grid-template-columns:repeat(2,1fr);align-content:center;width:auto}.color{width:clamp(44px,8vh,64px)}.hud-buttons{display:grid;grid-template-columns:repeat(2,auto);width:auto}.hud-button{min-height:32px;padding:0 .6rem;font-size:.9rem}.signature{grid-area:sig}}@media(orientation:portrait)and (max-height:40rem){#app{gap:clamp(.35rem,1.5vh,1rem)}.hud{gap:.5rem}.hud-info{font-size:.85rem}.hud-button{min-height:36px;padding:0 .6rem;font-size:.85rem}.colors-wrap{gap:clamp(.35rem,1.5vh,1rem)}}@media(orientation:portrait)and (max-height:46rem){.board-wrap.tutorial-board{width:min(40vh,60%)}}@media(prefers-reduced-motion:reduce){.color{transition:none}#currency-balance.pulse{animation:none}}