/* clip prevents hidden Web keyboard inputs from scrolling the canvas and shifting touch coordinates. */
:root{color-scheme:dark;--cyan:#67d3e8;--cyan-hi:#a8f0ff;--gold:#e4c791;--line:#ffffff17;--muted:#a9b8c6;font-family:"Segoe UI","Noto Sans",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;background:#060a12;color:#eef4f8}
*{box-sizing:border-box}
html,body{overflow:clip}
body{margin:0;height:100dvh;display:flex;flex-direction:column}
header{height:calc(52px + env(safe-area-inset-top,0px));flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(6px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right)) 6px max(16px,env(safe-area-inset-left));background:#060a12;border-bottom:1px solid var(--line);font-size:14px;font-weight:600}
header span{font-weight:800;letter-spacing:.14em;font-size:13px}
a{color:#c9d5df;text-decoration:none;display:inline-flex;align-items:center;min-height:40px}
a:hover{color:var(--cyan-hi)}
small{color:var(--muted);font-weight:600}
button{font:inherit;font-weight:700;cursor:pointer;min-height:40px;padding:8px 16px;border:1px solid var(--line);border-radius:8px;background:#ffffff0a;color:#eef4f8}
button:hover{background:#ffffff14;border-color:#7fd8ec40}
button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
#game{position:relative;flex:1;min-height:0;background:#0b1018}
/* Invisible geometry probe lets the engine read CSS safe insets without eval. */
#safe-area-probe{position:fixed;inset:0;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
#canvas{height:100%}
#canvas{display:block;width:100%;height:100%;outline:none;touch-action:none}
#loading{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:max(24px,env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px));overflow:auto;background:radial-gradient(ellipse at 50% 55%,#060a12a6,#060a12d9 75%),url('/assets/hero-key-art.webp') center/cover no-repeat}
#loading img{width:min(320px,62vw);max-height:140px;object-fit:contain;filter:drop-shadow(0 10px 30px #0009)}
h1{font-size:clamp(26px,4vw,44px);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:1.1;margin:22px 0 8px}
p{max-width:540px;line-height:1.6;color:#c9d6e1}
#start{min-height:56px;margin:18px;padding:14px 40px;border:0;border-radius:0;font-size:17px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#06202a;background:linear-gradient(180deg,var(--cyan-hi),var(--cyan) 55%,#3fa9c4);clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);box-shadow:inset 0 -3px 0 #0003}
#start:hover{filter:brightness(1.12)}
progress{width:min(420px,80vw);height:10px;margin:16px;appearance:none;border:1px solid var(--line);border-radius:999px;background:#0b131e;overflow:hidden;accent-color:var(--cyan)}
progress::-webkit-progress-bar{background:#0b131e}
progress::-webkit-progress-value{background:linear-gradient(90deg,#3fa9c4,var(--cyan-hi))}
progress::-moz-progress-bar{background:linear-gradient(90deg,#3fa9c4,var(--cyan-hi))}
[hidden]{display:none!important}
#status{min-height:24px;color:var(--muted)}
#game:fullscreen{width:100vw;height:100dvh}
@media(max-width:600px){header{font-size:12px}header span{display:none}header button{padding:6px 12px}}
@media(max-height:450px){#loading img{display:none}h1{margin:8px}#start{margin:6px;min-height:48px}p{margin:6px}}