@font-face{font-family:Rubik;src:url(/fonts/Rubik-Bold.ttf) format("truetype");font-weight:400 700;font-style:normal;font-display:swap}@font-face{font-family:DSEG7 Classic;src:url(/fonts/DSEG7Classic-Bold.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}:root{--bg: #f2f2f7;--bg2: #f2f2f7;--panel: #ffffff;--panel-blur: none;--text: #1c1c1e;--muted: #8e8e93;--accent: #0a84ff;--on-accent: #ffffff;--danger: #ff5c5c;--selected: #ddeaff;--border: #dfe0e5;--counter-bg: #1c1c1e;--radius: 14px;--shadow: 0 2px 6px rgba(60, 62, 74, .14);--hud-btn: clamp(36px, 11vw, 46px);--hud-icon: clamp(20px, 6.1vw, 26px);--hud-gap: clamp(4px, 1.5vw, 10px);--hud-pad: clamp(6px, 2vw, 14px);--hud-counter-pad: clamp(4px, 1.2vw, 10px);--hud-counter-font: clamp(13px, 4.2vw, 20px);--hud-counter-min: clamp(42px, 12vw, 74px);--app-h: 100vh;--safe-top: env(safe-area-inset-top, 0px)}@supports (height: 100dvh){:root{--app-h: 100dvh}}@media(display-mode:standalone){html{min-height:calc(100% + var(--safe-top))}}*{box-sizing:border-box}html,body{margin:0;height:100%;background:linear-gradient(160deg,var(--bg),var(--bg2));color:var(--text);font-family:Rubik,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overscroll-behavior:none;touch-action:manipulation}#board{position:fixed;top:0;left:0;width:100%;height:var(--app-h);display:block;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}#ui{touch-action:manipulation;position:fixed;top:0;left:0;right:0;height:var(--app-h);pointer-events:none;display:flex;flex-direction:column}#ui>*{pointer-events:auto}.hud[hidden]{display:none}.hud{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--hud-gap);padding:max(var(--hud-pad),env(safe-area-inset-top)) max(var(--hud-pad),env(safe-area-inset-right)) var(--hud-pad) max(var(--hud-pad),env(safe-area-inset-left));background:transparent}.hud-cluster{display:flex;align-items:center;gap:var(--hud-gap);min-width:0}.hud-left{justify-self:start}.hud-center{justify-self:center}.hud-right{justify-self:end}.hud-btn,.hud-smiley{touch-action:manipulation;font:inherit;color:var(--text);background:var(--panel);backdrop-filter:var(--panel-blur);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:0;cursor:pointer;flex:none;width:var(--hud-btn);height:var(--hud-btn)}.hud-btn.active,.hud-btn:active,.hud-smiley:active{border-color:var(--accent);background:var(--selected);box-shadow:none}.hud-smiley{font-size:var(--hud-icon);line-height:1}.hud-icon-btn{display:inline-flex;align-items:center;justify-content:center}.hud-icon-btn svg{display:block;width:var(--hud-icon);height:var(--hud-icon)}.hud-counter{font-family:DSEG7 Classic,Courier New,monospace;font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:clamp(1px,.4vw,2px);color:var(--danger);background:var(--counter-bg);border:1px solid var(--counter-bg);border-radius:10px;padding-inline:var(--hud-counter-pad);min-width:var(--hud-counter-min);height:var(--hud-btn);font-size:var(--hud-counter-font);display:flex;align-items:center;justify-content:center}.menu[hidden]{display:none}.menu{flex:1;min-height:0;width:min(520px,92vw);margin-inline:auto;padding:max(24px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px}.menu-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column}.menu-body>.menu-list{margin-block:auto}.menu-back .menu-entry-label{color:var(--muted)}.menu-header{display:flex;align-items:center;gap:4px;--menu-header-btn: clamp(32px, 10vw, 40px);--menu-header-actions: calc(2 * var(--menu-header-btn) + 4px)}.menu-header:before{content:"";flex:none;width:var(--menu-header-actions)}.menu-header-actions{flex:none;display:flex;justify-content:flex-end;align-items:center;gap:4px;width:var(--menu-header-actions)}.menu-title{flex:1;min-width:0;margin:0 0 2px;text-align:center;font-size:clamp(19px,6.4vw,28px);overflow-wrap:break-word}.menu-header-btn{flex:none;touch-action:manipulation;display:inline-flex;align-items:center;justify-content:center;width:var(--menu-header-btn);height:var(--menu-header-btn);padding:0;font:inherit;color:var(--muted);background:none;border:0;border-radius:999px;cursor:pointer}.menu-header-btn svg{display:block;width:60%;height:60%}.menu-header-btn:hover,.menu-header-btn:active{color:var(--accent);background:var(--selected)}.menu-subtitle{margin:0 0 8px;text-align:center;color:var(--muted);font-size:14px}.menu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.menu-entry{touch-action:manipulation;width:100%;text-align:left;font:inherit;color:var(--text);background:var(--panel);backdrop-filter:var(--panel-blur);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px 18px;cursor:pointer;display:flex;flex-direction:row;align-items:center;gap:14px}.menu-entry-text{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}.menu-entry-icon{flex:none;width:38px;height:38px;display:block}.menu-entry-icon svg{display:block;width:100%;height:100%}.menu-entry:active{background:var(--selected);border-color:var(--accent)}.menu-entry-label{font-weight:600;font-size:17px}.menu-entry-hint{color:var(--muted);font-size:13px}.menu-entry.menu-submenu{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}.menu-entry-chevron{color:var(--muted);font-size:22px;line-height:1;flex:none}.menu-difficulty{display:flex;gap:8px;justify-content:center}.difficulty-btn{touch-action:manipulation;flex:1;font:inherit;color:var(--text);background:var(--panel);backdrop-filter:var(--panel-blur);border:1px solid var(--border);border-radius:999px;box-shadow:var(--shadow);padding:12px;cursor:pointer}.difficulty-btn.active{border-color:var(--accent);background:var(--selected);color:var(--accent);font-weight:700}.menu.settings-open .menu-difficulty{display:none}.menu.settings-open .menu-body>.menu-list{margin-block:0}.settings-heading{margin:18px 0 8px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.settings-heading:first-of-type{margin-top:10px}.settings-static{cursor:default}.settings-link{text-decoration:none;justify-content:space-between}.settings-value{color:var(--muted);font-variant-numeric:tabular-nums}.settings-status:empty{display:none}.settings-update,.settings-toggle,.settings-theme,.settings-cell-style{justify-content:space-between}.cell-swatch{flex:none;display:grid;grid-template-columns:repeat(2,1fr);width:38px;height:38px;border-radius:9px;overflow:hidden;background:#b7b2ab}.cell-swatch-tile{background:#96703c}.cell-swatch-tile.open{background:#b3aba1}.cell-swatch[data-cell-style=classic]{gap:1px;padding:1px}.cell-swatch[data-cell-style=classic] .cell-swatch-tile{border:3px solid;border-color:#b78d4d #6b4f28 #6b4f28 #b78d4d}.cell-swatch[data-cell-style=classic] .cell-swatch-tile.open{border-width:2px;border-color:#8d8781 #d6cfc6 #d6cfc6 #8d8781}.cell-swatch[data-cell-style=flat]{gap:5px;padding:3px;background:var(--panel)}.cell-swatch[data-cell-style=flat] .cell-swatch-tile{background:#ef9f3d}.cell-swatch[data-cell-style=flat] .cell-swatch-tile.open{background:#fbe3ca}.cell-swatch[data-cell-style=soft]{gap:3px;padding:2px}.cell-swatch[data-cell-style=soft] .cell-swatch-tile{border-radius:7px;background:radial-gradient(circle at 32% 26%,#cf9142,#9a6a2c)}.cell-swatch[data-cell-style=soft] .cell-swatch-tile.open{background:radial-gradient(circle at 68% 74%,#ded6cb,#a49d94)}.cell-swatch[data-cell-style=gloss]{gap:2px;padding:2px}.cell-swatch[data-cell-style=gloss] .cell-swatch-tile{border-radius:4px;background:radial-gradient(circle at 50% 50%,#ffb552 0 12%,#b06f1c 92%)}.cell-swatch[data-cell-style=gloss] .cell-swatch-tile.open{background:radial-gradient(circle at 50% 50%,#fdf1e4 0 12%,#d8bfa5 92%)}.sound-swatch{flex:none;display:flex;align-items:flex-end;gap:3px;box-sizing:border-box;width:38px;height:38px;padding:5px 4px;border:1px solid var(--border);border-radius:9px;background:var(--panel)}.sound-swatch-bar{flex:1;border-radius:1.5px;background:var(--accent)}.sound-swatch[data-sound=off] .sound-swatch-bar{background:var(--muted);opacity:.5}.theme-swatch{position:relative;flex:none;width:38px;height:38px;border:1px solid;border-radius:9px;overflow:hidden}.theme-swatch-card{position:absolute;left:5px;top:8px;width:27px;height:13px;border-radius:3px}.theme-swatch-dot{position:absolute;left:5px;bottom:6px;width:9px;height:9px;border-radius:999px}.settings-check{flex:none;width:18px;text-align:center;font-weight:700;color:var(--accent)}.menu-entry.settings-theme.active,.menu-entry.settings-cell-style.active{border-color:var(--accent)}.settings-switch{flex:none;position:relative;width:44px;height:26px;border-radius:999px;background:var(--border);transition:background .12s ease}.settings-switch:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:999px;background:var(--panel);box-shadow:0 1px 2px #0000004d;transition:transform .12s ease}.settings-toggle.on .settings-switch{background:var(--accent)}.settings-toggle.on .settings-switch:after{transform:translate(18px)}@media(prefers-reduced-motion:reduce){.settings-switch,.settings-switch:after{transition:none}}.settings-footer{margin:20px 0 0;text-align:center;font-size:12px;color:var(--muted)}.best-row{justify-content:space-between;gap:10px}.best-times{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}.best-time{padding:2px 8px;border-radius:999px;background:var(--bg);border:1px solid var(--border);color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}.best-time.best{color:var(--text);border-color:var(--accent)}.best-empty{margin:24px 0 0;text-align:center;font-size:14px;line-height:1.5;color:var(--muted)}.menu.settings-open .menu-body>.menu-list.best-clear-row{margin-top:26px}.settings-danger{justify-content:center;color:var(--danger);font-weight:600}.settings-danger.armed{border-color:var(--danger)}.dialog-backdrop{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));background:#00000059;opacity:0;transition:opacity .16s ease}.dialog-backdrop.open{opacity:1}.dialog{position:relative;width:min(340px,100%);max-height:100%;overflow-y:auto;padding:22px 20px 18px;text-align:center;background:var(--panel);backdrop-filter:var(--panel-blur);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);transform:translateY(8px) scale(.97);transition:transform .16s ease,opacity .16s ease}.dialog-backdrop.open .dialog{transform:none}.dialog-medal{display:block;font-size:44px;line-height:1}.dialog-title{margin:10px 0 2px;font-size:20px}.dialog-subtitle{margin:0;color:var(--muted);font-size:14px}.score-list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}.score-row{display:flex;align-items:baseline;gap:8px;padding:8px 12px;border-radius:10px;background:var(--bg);border:1px solid transparent;color:var(--muted)}.score-row.current{background:var(--selected);border-color:var(--accent);color:var(--text)}.score-medal{flex:none;font-size:15px}.score-value{margin-left:auto;display:inline-flex;align-items:baseline;gap:2px}.score-time{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}.score-unit{font-size:13px}.score-when{flex:none;width:62px;text-align:right;font-size:12px}.dialog-actions{display:flex;gap:8px;margin-top:18px}.dialog-btn{flex:1;touch-action:manipulation;padding:11px 12px;font:inherit;font-weight:600;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:10px;cursor:pointer}.dialog-btn.dialog-primary{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}.dialog-close{position:absolute;top:6px;right:8px;touch-action:manipulation;width:32px;height:32px;padding:0;font:inherit;font-size:22px;line-height:1;color:var(--muted);background:none;border:0;border-radius:999px;cursor:pointer}.dialog-close:hover,.dialog-close:active{color:var(--text)}@media(prefers-reduced-motion:reduce){.dialog-backdrop,.dialog{transition:none}}@media(max-height:700px){.menu-entry{padding:9px 14px;gap:10px}.menu-entry-icon{width:30px;height:30px}}
