:root{--bg:#1b2770;--grid-bg:#253494;--grid-border:#4a62cc;--empty-cell:#2c3ea8;--cell-border:#3a52c0;--col-red:#ff5252;--col-orange:#ff7043;--col-yellow:#ffd740;--col-green:#69f0ae;--col-blue:#64b5f6;--col-purple:#ce93d8;--col-cyan:#4dd0e1;--text-ui:#fff;--text-dim:#ffffff80;--overlay-bg:#0f1650ed;--overlay-text:#fff;--overlay-sub:#ffffffa6}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);touch-action:none;width:100%;height:100%;overflow:hidden}canvas{touch-action:none;display:block}#hook-overlay,#cta-overlay{z-index:40;background:var(--overlay-bg);touch-action:auto;justify-content:center;align-items:center;display:none;position:fixed;inset:0}#hook-overlay.open,#cta-overlay.open{display:flex}.hook-panel{background:var(--bg);border:1px solid var(--grid-border);text-align:center;border-radius:18px;flex-direction:column;gap:16px;width:min(300px,86vw);padding:28px 24px;display:flex}.hook-title{color:var(--overlay-text);font:700 22px/1.25 system-ui,sans-serif}.hook-btn{background:var(--grid-bg);width:100%;height:48px;color:var(--text-ui);cursor:pointer;-webkit-tap-highlight-color:transparent;border:none;border-radius:12px;font:700 16px system-ui,sans-serif}.hook-btn.accent{background:var(--col-blue);color:#0b1230}.hook-btn:active{transform:scale(.97)}