*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#071b24;color:#f3e8cc;font-family:Georgia,serif}canvas,.vignette{position:fixed;inset:0;width:100%;height:100%}.vignette{pointer-events:none;background:radial-gradient(ellipse,transparent 35%,#03101695 100%)}header{position:absolute;top:30px;left:38px;right:38px;display:flex;justify-content:space-between;align-items:start}.brand{font-size:24px;letter-spacing:6px}.brand span{display:block;font:9px system-ui;letter-spacing:4px;margin-top:10px;color:#b0c9c9}button{color:#f3e8cc;cursor:pointer;border:1px solid #bca57255;background:#0a252cbb;font:10px system-ui;letter-spacing:2px;padding:13px 17px;touch-action:none}button:hover{background:#bfa16b33}button:focus-visible{outline:2px solid #ffe0a0}.hud{position:absolute;top:115px;left:38px;right:38px;display:flex;justify-content:space-between;pointer-events:none}.hud small{display:block;font:9px system-ui;letter-spacing:2px;color:#9ab9bc;margin-bottom:10px}.hud strong{font-size:13px;letter-spacing:3px;font-weight:normal}.chapter{text-align:center}.meter{width:120px;height:4px;background:#68838744}.meter i{display:block;height:100%;background:#e7bc74;width:0;transition:width .1s}.coordinates{position:absolute;left:38px;bottom:92px;font:9px/2 system-ui;letter-spacing:2px;color:#759899}.controls{position:absolute;bottom:50px;left:50%;transform:translateX(-50%);display:flex;gap:10px}.controls button{font-size:16px;min-width:50px}.controls #beam{font-size:10px;padding:16px 27px}footer{position:absolute;bottom:20px;width:100%;text-align:center;font:9px system-ui;letter-spacing:2px;color:#8aa9ac}#overlay{position:fixed;inset:0;display:grid;place-items:center;background:#02131abb;backdrop-filter:blur(5px)}.card{max-width:600px;text-align:center;padding:36px}.eyebrow{font:9px system-ui;letter-spacing:4px;color:#d5b67b}h1{font-size:clamp(38px,6vw,65px);font-weight:normal;line-height:1.04;margin:24px 0;color:#f3e8cc}p{font:15px/1.8 Georgia;color:#b8ceca}.rules{font:11px/1.9 system-ui;color:#91adaa;margin:24px 0}#start{background:#d8b577;color:#14272a;border:0;width:100%;padding:18px;font-weight:600}#start span{float:right}.card>small{display:block;font:9px system-ui;letter-spacing:1px;color:#789697;margin-top:20px}#toast{position:absolute;top:185px;width:100%;text-align:center;color:#e6c98c;font:11px system-ui;letter-spacing:2px}@media(max-width:600px){header{top:20px;left:20px;right:20px}.brand{font-size:17px}.hud{top:95px;left:20px;right:20px}.hud small{font-size:7px;letter-spacing:1px}.hud strong{font-size:10px;letter-spacing:1px}.meter{width:65px}.coordinates{display:none}footer{font-size:7px;letter-spacing:.5px}.card{padding:25px}.controls{bottom:48px;width:max-content}}
#overlay{background:linear-gradient(#03171cd9,#03171ceb),url('./assets/cover.webp') center/cover}