@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600&family=Inter:wght@300;400;500&display=swap');
*{box-sizing:border-box}html,body,#game{margin:0;width:100%;height:100%;overflow:hidden;background:#02080d;color:#e7f0ee;font-family:Inter,system-ui,sans-serif}canvas{display:block;width:100%;height:100%;cursor:default}.interactive canvas{cursor:pointer}
.game-ui{position:fixed;inset:0;pointer-events:none}.topbar{pointer-events:auto;position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:14px;padding:14px 20px;background:linear-gradient(#061218dd,transparent);font-size:10px;letter-spacing:.13em}.back{color:#8ba4aa;text-decoration:none;margin-right:auto}.engine{color:#63c7cd}.topbar label{display:flex;align-items:center;gap:7px;color:#7f999f}.topbar select,.topbar button{border:1px solid #35505a;background:#091a21cc;color:#cad9d9;padding:7px 9px;font:500 10px Inter;letter-spacing:.08em;text-transform:uppercase}
.objective{position:absolute;top:70px;left:50%;transform:translate(-50%,-8px);padding:10px 18px;border-left:2px solid #e58b43;background:#07151bcb;color:#b9ccce;font-size:12px;opacity:0;transition:.4s}.objective.show{opacity:1;transform:translate(-50%,0)}
.hotspot{position:absolute;transform:translate(-50%,-125%);padding:8px 12px;background:#07151be8;border:1px solid #4f7379;opacity:0;transition:.15s;white-space:nowrap}.hotspot:after{content:"";position:absolute;left:50%;top:100%;height:22px;border-left:1px solid #78c6c6}.hotspot.show{opacity:1}.hotspot b,.hotspot small{display:block}.hotspot b{font:500 15px "Barlow Condensed";letter-spacing:.06em}.hotspot small{color:#e99851;font-size:9px;text-transform:uppercase;margin-top:2px;letter-spacing:.1em}
.subtitle{position:absolute;bottom:11%;left:50%;max-width:min(700px,80vw);transform:translate(-50%,12px);background:#02080dcc;border-left:2px solid #e88a43;padding:13px 20px;font-size:15px;opacity:0;transition:.25s}.subtitle.show{opacity:1;transform:translate(-50%,0)}
.skip{pointer-events:auto;position:absolute;bottom:22px;right:24px;border:0;border-bottom:1px solid #537078;background:none;color:#8ca4a9;padding:8px;font:500 10px Inter;letter-spacing:.12em;text-transform:uppercase}.debug{position:absolute;left:12px;bottom:12px;background:#02080ddd;color:#71d1b1;padding:9px 12px;font:11px/1.5 monospace;white-space:pre;display:none}.debug.show{display:block}
.fade{position:absolute;inset:0;background:#030a0f;display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity 1.4s;z-index:5}.fade.show{opacity:1;visibility:visible}.fade div{text-align:center}.fade small{display:block;color:#e58d47;font-size:10px;letter-spacing:.28em}.fade strong{font:600 clamp(70px,14vw,180px)/1 "Barlow Condensed";letter-spacing:.06em}
@media(max-width:700px){.topbar .engine,.topbar label span,#quality{display:none}.objective{width:80%;text-align:center}.subtitle{font-size:13px}.topbar{padding:10px}}