/* Etapa 3 · Gravidade real: camada WebGL, controle de gravidade e leitura de distorção */
#gl{position:fixed;inset:0;width:100%;height:100%;display:block}
canvas#sky{mix-blend-mode:screen}
.gbar{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:0 max(20px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 18px) max(20px,env(safe-area-inset-left,0px));pointer-events:none;opacity:0;transition:opacity .8s .3s;z-index:5}
body.vortex .gbar{opacity:1}
body.vortex .gctl{pointer-events:auto}
body.closing .gbar{opacity:0;transition-delay:0s}
.gctl{display:flex;align-items:center;gap:12px;font:400 9px var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:#4a474f;cursor:pointer;transition:color .4s}
.gctl b,.gdist b{font:500 10px var(--f-mono);letter-spacing:.08em;color:#6d6870;font-variant-numeric:tabular-nums;min-width:4ch}
.gdist{display:flex;flex-direction:column;align-items:flex-end;gap:5px;font:400 9px var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:#45424a;text-align:right}
#grav{-webkit-appearance:none;appearance:none;width:clamp(90px,14vw,160px);height:18px;background:transparent;margin:0;cursor:pointer}
#grav::-webkit-slider-runnable-track{height:1px;background:linear-gradient(90deg,rgba(255,236,214,.35) var(--p,60%),rgba(255,236,214,.08) var(--p,60%))}
#grav::-moz-range-track{height:1px;background:rgba(255,236,214,.08)}
#grav::-moz-range-progress{height:1px;background:rgba(255,236,214,.35)}
#grav::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:9px;height:9px;border-radius:50%;background:#2a282d;border:1px solid rgba(255,236,214,.25);margin-top:-4px;transition:background .3s,box-shadow .3s}
#grav::-moz-range-thumb{width:9px;height:9px;border-radius:50%;background:#2a282d;border:1px solid rgba(255,236,214,.25)}
.gctl:hover,.gctl:focus-within{color:#9a8d7c}
.gctl:hover #grav::-webkit-slider-thumb,#grav:focus-visible::-webkit-slider-thumb{background:var(--ember);box-shadow:0 0 12px rgba(255,185,121,.6)}
.gctl:hover #grav::-moz-range-thumb{background:var(--ember)}
#grav:focus-visible{outline:1px solid var(--ember);outline-offset:4px}
@media (max-width:900px){.hint.v{bottom:calc(env(safe-area-inset-bottom,0px) + 60px)}}
@media (max-width:520px){.gctl>span{display:none}.gdist span{font-size:8px;letter-spacing:.14em}}