/* The actual lettering is engraved in the 3D model; these matching native
   controls provide keyboard, touch and non-WebGL access to every segment. */
#gateway-controls{position:fixed;inset:0;z-index:72;pointer-events:none}
#gateway-controls[hidden],.gateway-return[hidden]{display:none!important}
.gateway-mode .fallback-message{display:none}
.fallback-message{position:static;transform:none;margin-top:20px;width:min(420px,100%);line-height:1.6}
.fallback-message button{display:block;margin-top:12px;padding:10px 14px;background:#163949;border:1px solid #7bbdcc;color:#e3faff;pointer-events:auto;cursor:pointer}
#gateway-controls [data-gateway]{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;text-decoration:none;border:1px solid #8ae4f27a;background:linear-gradient(125deg,#214456,#081a2c);border-radius:12px;color:#dff9ff;padding:10px 16px;cursor:pointer;touch-action:manipulation;min-height:44px}
#gateway-controls strong{font:600 18px var(--sans,Arial,sans-serif);letter-spacing:.09em;text-transform:uppercase}
#gateway-controls span{font:9px var(--mono);letter-spacing:.08em;color:#a7c9d6}
body.gateway-3d-ready #gateway-controls [data-gateway]{background:transparent;border:0;border-radius:45%;padding:0;color:transparent;box-shadow:none}
body.gateway-3d-ready #gateway-controls [data-gateway]>*{opacity:0}
body.gateway-3d-ready #gateway-controls [data-gateway]:focus-visible{outline:2px solid #d1ffff;outline-offset:4px;background:#73dcf916;box-shadow:0 0 24px #56def055}
body:not(.gateway-3d-ready) #gateway-controls [data-gateway]{width:240px}
body:not(.gateway-3d-ready) #gateway-controls [data-gateway=hosting]{top:40%}
body:not(.gateway-3d-ready) #gateway-controls [data-gateway=offers]{top:53%}
body:not(.gateway-3d-ready) #gateway-controls [data-gateway=studio]{top:66%}
body.gateway-mode .universe-intro{left:0;right:0;top:20px;text-align:center;max-width:none;pointer-events:none}
body.gateway-mode .universe-intro .section-label{font-size:9px;margin-bottom:12px;letter-spacing:.2em}
body.gateway-mode .universe-intro h1{font-size:clamp(28px,3vw,40px);margin-bottom:12px;line-height:1.1}
body.gateway-mode .universe-intro p{max-width:none!important;font-size:12px;margin:0;color:#a4bfce}
body.gateway-mode .universe-help{display:none}
.gateway-return{display:flex;align-items:center;justify-content:center;gap:7px;min-width:44px;min-height:44px;border:1px solid #88cfe54a;background:#0a1d2dde;color:#afd0de;padding:8px 12px;font:10px var(--mono);cursor:pointer;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.gateway-return svg{width:17px;height:17px}
.gateway-return:hover,.gateway-return:focus-visible{color:#efffff;border-color:#b5f4ff}
@media(max-width:760px){
 body.gateway-mode .universe-intro{top:55px;left:15px;right:15px}
 body.gateway-mode .universe-intro h1{font-size:27px}
 body.gateway-mode .universe-intro .section-label{font-size:7px}
 body.gateway-mode .universe-intro p{display:block;font-size:11px}
 .gateway-return{padding:7px;min-height:43px}.gateway-return>span:last-child{display:none}
 body.explore-mode .universe-switcher{gap:6px}
 body.explore-mode .scene-mode-toggle{padding-inline:10px;gap:7px}
 body.explore-mode .ring-controls{gap:4px}
 body.explore-mode .ring-controls button{padding:9px;min-width:36px}
}
@media(max-width:760px) and (max-height:620px){
 body.gateway-mode .universe-intro{top:32px}
 body.gateway-mode .universe-intro h1{font-size:23px;margin-bottom:8px}
 body.gateway-mode .universe-intro .section-label{margin-bottom:9px;font-size:6px}
 body.gateway-mode .universe-intro p{font-size:10px}
 body:not(.gateway-3d-ready) #gateway-controls [data-gateway]{min-height:50px;padding:7px 12px}
 #gateway-controls strong{font-size:15px}
}
@media(min-width:761px) and (max-width:1000px) and (max-height:520px){
 body.gateway-mode .universe-intro{top:10px;left:20px;right:20px;text-align:left}
 body.gateway-mode .universe-intro h1{font-size:23px}
 body.gateway-mode .universe-intro .section-label,body.gateway-mode .universe-intro p{display:none}
 .gateway-return{min-height:34px}.gateway-return>span:last-child{display:none}
 body:not(.gateway-3d-ready) #gateway-controls{display:flex;align-items:center;justify-content:center;gap:12px}
 body:not(.gateway-3d-ready) #gateway-controls [data-gateway]{position:static;transform:none;width:210px}
}
