:root{--sand:#f2d7a2;--sun:#ff9a3c;--sea:#3fd0c9;--ink:#081418}*{box-sizing:border-box}html,body{background:var(--ink);color:#f4efe6;height:100%;margin:0;font-family:Avenir Next,Segoe UI,system-ui,sans-serif;overflow:hidden}canvas{display:block}#landing{z-index:10;justify-content:center;align-items:center;transition:opacity .8s;display:flex;position:fixed;inset:0;overflow-y:auto}#landing.gone{opacity:0;pointer-events:none}#landing .bg{background:url(/keyart.webp) center / cover no-repeat, radial-gradient(circle at 30% 30%, #1c4b52, var(--ink));animation:40s ease-in-out infinite alternate drift;position:fixed;inset:-4%}#landing .vignette{background:radial-gradient(#0000 30%,#040a0cd9 100%),linear-gradient(#040a0c1a,#040a0cd9 75%);position:fixed;inset:0}@keyframes drift{0%{transform:scale(1)translate(0)}to{transform:scale(1.06)translate(-1%,-1%)}}main{text-align:center;width:min(920px,92vw);padding:4vh 0;position:relative}.logo{filter:drop-shadow(0 12px 40px #000000b3);width:min(620px,86vw)}.tagline{color:var(--sand);text-shadow:0 2px 12px #000;margin:.4rem 0 1.6rem;font-size:1.15rem;line-height:1.5}.loader{width:min(420px,80vw);margin:0 auto 1.4rem}.loader .bar{background:#ffffff1f;border-radius:3px;height:6px;overflow:hidden}.loader .bar span{background:linear-gradient(90deg, var(--sea), var(--sun));width:0;height:100%;transition:width .25s;display:block}.loader .label{opacity:.8;margin-top:.5rem;font-size:.85rem}.loader.done{display:none}.actions{flex-direction:column;align-items:center;gap:.8rem;margin-bottom:1.8rem;display:flex}.hidden{display:none!important}button{font:inherit;cursor:pointer;letter-spacing:.08em;text-transform:uppercase;border:0;border-radius:999px;transition:transform .15s,box-shadow .15s,opacity .15s}button:hover:not(:disabled){transform:translateY(-2px)}button:disabled{opacity:.55;cursor:default}.primary{color:#1a0d02;background:linear-gradient(135deg, #ffd27a, var(--sun));padding:1.05rem 3.2rem;font-size:1.15rem;font-weight:700;box-shadow:0 10px 40px #ff8c2873}.secondary{color:#f4efe6;background:#ffffff14;border:1px solid #ffffff40;padding:.7rem 2rem;font-size:.9rem}.check{opacity:.85;cursor:pointer;font-size:.85rem}.controls{text-align:left;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;font-size:.85rem;display:grid}.controls>div{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#061012a6;border:1px solid #ffffff14;border-radius:14px;padding:.9rem 1.2rem}.controls h3{letter-spacing:.15em;text-transform:uppercase;color:var(--sea);margin:0 0 .4rem;font-size:.8rem}.controls ul{margin:0;padding-left:1rem;line-height:1.7}.controls b{color:var(--sand);font-weight:600}.tip{opacity:.6;margin-top:1.2rem;font-size:.8rem}#hud{pointer-events:none;z-index:5;position:fixed;inset:0}#hud-sub{text-align:center;opacity:0;background:#0000008c;border-radius:8px;max-width:70vw;padding:.5rem 1rem;font-size:1.25rem;transition:opacity .3s;position:absolute;bottom:9%;left:50%;transform:translate(-50%)}#hud-sub.on{opacity:1}#hud-sub b{color:var(--sun)}#hud-hint{color:var(--sand);opacity:0;background:#06141699;border:1px solid #3fd0c966;border-radius:999px;padding:.45rem 1.1rem;font-size:1rem;transition:opacity .3s;position:absolute;top:6%;left:50%;transform:translate(-50%)}#hud-hint.on{opacity:1}#hud-ammo{color:var(--sand);text-shadow:0 2px 8px #000;font-size:1.6rem;font-weight:700;position:absolute;bottom:4%;right:3%}#crosshair{background:#fffc;border-radius:50%;width:6px;height:6px;margin:-3px 0 0 -3px;position:absolute;top:50%;left:50%;box-shadow:0 0 4px #000}
