html,body{margin:0;height:100%;background:#06303f;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;font-family:system-ui,-apple-system,Segoe UI,sans-serif}
#wrap{position:relative;margin:0 auto;height:100%}
canvas{display:block;width:100%;height:100%}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(4,40,52,.78);color:#fff;text-align:center;padding:20px;box-sizing:border-box}
.hidden{display:none!important}
h1{font-size:44px;margin:0;color:#ffd84a;text-shadow:3px 3px 0 #0b5d3b}
h2{font-size:32px;margin:0;color:#ffd84a}
.sub{margin:0 0 10px;color:#bdf3d8}
.big{font-size:40px;font-weight:800;margin:0}
.help{font-size:13px;color:#cfe;max-width:320px;line-height:1.5}
.screen button{font-size:20px;font-weight:700;min-width:200px;padding:12px 20px;border:0;border-radius:14px;background:#2fbf71;color:#fff;box-shadow:0 4px 0 #17784a;cursor:pointer}
.screen button:active{transform:translateY(2px);box-shadow:0 2px 0 #17784a}
#pauseBtn{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:40px;height:34px;border:0;border-radius:10px;background:rgba(0,0,0,.35);color:#fff;font-weight:900;font-size:16px}