:root{font-family:Avenir Next,Avenir,ui-rounded,system-ui,sans-serif;color:var(--panel-text);background:var(--table-bottom);--table-top: #181410;--table-bottom: #080706;--chassis: #d1c4a3;--chassis-edge: #645033;--panel: #e0d6ba;--panel-text: #09251b;--primary-text: #0e291f;--secondary-text: #33483b;--chrome: #b58c4a}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{background:radial-gradient(120% 90% at 50% 38%,rgb(255 244 214 / .16),transparent 68%),repeating-linear-gradient(0deg,transparent 0 114px,rgb(64 42 16 / .09) 114px 116px,rgb(255 244 219 / .07) 116px 118px,transparent 118px 121px),linear-gradient(var(--table-top),var(--table-bottom));touch-action:manipulation;overscroll-behavior:none}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;background:repeating-linear-gradient(0deg,transparent 0 6px,rgb(120 82 38 / .1) 6px 6.5px,transparent 6.5px 9px)}body:after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.045' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");background-size:150px 150px,340px 340px}button,input,select{font:inherit}input,select,textarea{font-size:16px}button{cursor:pointer}[hidden]{display:none!important}.game-shell{height:var(--app-height, 100svh);width:min(100%,1024px);margin:auto;padding:max(clamp(5px,1dvh,6px),env(safe-area-inset-top)) 8px max(clamp(5px,1dvh,8px),env(safe-area-inset-bottom));display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(4px,.8dvh,6px);overflow:hidden}.instrument-panel{background:var(--panel);color:var(--panel-text);border:1px solid var(--chassis-edge);box-shadow:inset 0 1px #ffffff5c,0 3px 9px #00000047}.hud{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:8px}.readout{display:flex;flex-direction:column;line-height:1;border-radius:15px;min-width:0;overflow:hidden;container-type:inline-size}.score-readout{grid-column:1;padding:clamp(5px,1dvh,7px) 18px clamp(6px,1.2dvh,9px)}.record-readout{grid-column:3;padding:6px 15px 7px;border-radius:12px;align-items:flex-end;align-self:start}.readout-label{font-size:15px;font-weight:700;letter-spacing:.12em;color:var(--secondary-text);white-space:nowrap}.readout-label small{font-size:15px;margin-left:6px;opacity:.75}.readout strong{font-size:clamp(20px,22cqw,74px);font-weight:650;letter-spacing:-.05em;font-variant-numeric:tabular-nums;white-space:nowrap}.record-readout strong{font-size:clamp(16px,26cqw,37px)}.brand{align-self:center;display:flex;flex-direction:column;align-items:center;letter-spacing:.18em;font-size:11px;color:var(--chrome);opacity:.8}.brand small{margin-top:3px}.timer-readout{grid-column:2;justify-self:center;align-self:center;display:flex;flex-direction:column;align-items:center;line-height:1.1;color:var(--secondary-text);opacity:.82;pointer-events:none}.timer-readout .readout-label{text-align:center;opacity:.8}.timer-readout strong{font-size:clamp(20px,3.1vw,30px);font-weight:400;letter-spacing:0;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--secondary-text)}.timer-readout.expiring{opacity:1}.timer-readout.expiring strong{color:#9a3126}.board-stage{min-height:0;position:relative}#game-canvas{width:100%;height:100%;display:block;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.bottom-controls{display:flex;justify-content:space-between;align-items:end;gap:12px;min-width:0}.preview-panel{min-height:clamp(46px,6.5dvh,52px);border-radius:12px;padding:clamp(5px,1dvh,7px) 14px;display:flex;align-items:center;gap:16px;min-width:0;flex:1 1 auto}.preview-panel>div:first-child{display:flex;flex-direction:column;font-size:14px;font-weight:700;letter-spacing:.1em;flex:0 0 auto}.preview-panel small{font-size:14px;opacity:.72}.preview-balls{display:flex;flex-wrap:nowrap;gap:7px;min-width:0;overflow:hidden}.preview-ball{position:relative;flex:0 1 30px;aspect-ratio:1;min-width:12px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 3px 3px 5px #ffffff3d,0 2px 4px #00000057}.preview-symbol{width:100%;height:100%}.frame-button{width:clamp(48px,7.7dvh,58px);height:clamp(48px,7.7dvh,58px);border-radius:50%;border:2px solid var(--chrome);background:var(--panel-text);display:grid;place-content:center;gap:5px;box-shadow:inset 0 0 0 3px #ffffff0f,0 3px 9px #0000005c}.frame-button span{width:25px;height:3px;background:var(--chrome);border-radius:2px}.overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:24px;background:#0000007a}.scrim{position:absolute;inset:0;border:0;background:transparent}.modal{position:relative;width:min(92vw,500px);max-height:min(86dvh,760px);overflow:auto;border-radius:20px;padding:26px;display:flex;flex-direction:column;gap:12px}.modal h2{margin:0;letter-spacing:.08em}.translation{margin:-10px 0 6px;opacity:.58}.modal button,.modal input,.modal select{min-height:46px;border-radius:9px;border:1px solid rgb(0 0 0 / .18);padding:9px 12px;background:#ffffff47;color:inherit}.modal button:disabled{opacity:.35;cursor:default}.modal button.primary{background:var(--panel-text);color:var(--panel)}.modal .danger{color:#882e27}.modal-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.modal-heading button{min-height:38px}.form-panel label{display:grid;grid-template-columns:1fr minmax(140px,52%);align-items:center;gap:12px;min-height:48px;border-bottom:1px solid rgb(0 0 0 / .12)}.form-panel label.toggle{grid-template-columns:1fr auto}.form-panel input[type=checkbox]{width:26px;height:26px;min-height:0;accent-color:var(--panel-text)}.modal-heading .ghost{background:transparent;border-color:#00000047;opacity:.82}.game-over-name{display:flex;flex-direction:column;gap:7px;text-align:left}.game-over-name input{text-align:center}.about{line-height:1.45;opacity:.68}.leaderboard-status{margin:0;font-size:14px;line-height:1.35;opacity:.7;text-align:center}.leaderboard-list{list-style:none;padding:0;margin:0;min-height:140px}.leaderboard-list li{display:grid;grid-template-columns:35px 1fr auto;gap:10px;padding:10px 4px;border-bottom:1px solid rgb(0 0 0 / .12)}.rank{opacity:.55}.empty-state{text-align:center;opacity:.6;margin:50px 0}.game-over-panel{text-align:center}.game-over-panel>strong{font-size:42px}.dev-diagnostics{position:fixed;z-index:50;top:122px;right:15px;display:flex;gap:4px;align-items:center;padding:4px;border-radius:7px;background:#000000b8;color:#fff;font:10px ui-monospace,monospace}.dev-diagnostics button{font:inherit;padding:4px}@media(max-width:600px){.game-shell{padding-inline:7px}.brand{display:none}.preview-panel{gap:8px;padding-inline:10px}.preview-balls{gap:4px}.preview-ball{flex-basis:25px}.frame-button{width:52px;height:52px}}