*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top,#233f75,#09142b 70%);color:#f3f7ff;font-family:system-ui,Arial,sans-serif}main{max-width:850px;margin:auto;padding:12px}header,.hud,.controls{display:flex;justify-content:space-between;align-items:center;gap:10px}header{padding:12px 6px;font-size:18px}.hud{background:#182a4b;border-radius:12px;padding:12px;margin:7px 0;font-weight:700}canvas{width:100%;height:auto;display:block;border:2px solid #4e76b0;border-radius:18px;background:#8bd4ff;touch-action:none}.controls{margin-top:12px}button{background:linear-gradient(#ffe879,#ff9d2d);border:0;border-radius:12px;padding:14px;color:#24233a;font-weight:800;cursor:pointer;flex:1}button:active{transform:scale(.97)}p{text-align:center;min-height:42px}footer{text-align:center;color:#a8b7d5;font-size:12px;padding:12px}@media(max-width:520px){header{font-size:14px}.hud{font-size:13px}button{font-size:12px;padding:12px 4px}}
#viewport{height:min(68vw,570px);min-height:380px;position:relative;overflow:hidden;border:2px solid #4e76b0;border-radius:18px;touch-action:none;background:linear-gradient(#78c5f8,#d8f3ff)}#viewport canvas{height:100%;width:100%;border:0;border-radius:0}#viewport .overlay{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:#07182ac9;color:white;padding:20px}#viewport .overlay h1{font-size:clamp(26px,5vw,42px);margin:0 0 12px}#viewport .overlay p{margin:0}

/* Build 005: the grid overlay must obey the hidden attribute. */
#viewport .overlay[hidden]{display:none!important;pointer-events:none!important}
#viewport .overlay:not([hidden]){z-index:5}