html,body,#app{width:100%;height:100%}
#app{position:relative;display:block;background:#090b0e}
.topbar{position:absolute;z-index:8;top:0;left:0;right:0;height:64px;border:0;background:linear-gradient(180deg,rgba(5,6,8,.94),rgba(5,6,8,.54) 72%,transparent)}
.brand{padding:4px 9px;border:1px solid rgba(255,255,255,.12);border-radius:9px;background:rgba(9,11,14,.7);box-shadow:0 8px 28px rgba(0,0,0,.35)}
.tools{padding:4px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(9,11,14,.7);box-shadow:0 8px 28px rgba(0,0,0,.35)}
.game-shell{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;display:block}
.stage{position:absolute;inset:0;width:100%;height:100%;background-color:#090b0e;background-image:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.02) 45%,rgba(0,0,0,.15)),url("../assets/machine-room-approved.png");background-size:cover;background-position:center center}
.stage::before,.stage::after{display:none}
.hud{position:absolute;z-index:7;top:70px;left:50%;transform:translateX(-50%);width:min(620px,calc(100% - 24px));height:56px;border:1px solid rgba(255,255,255,.13);border-radius:10px;overflow:hidden;background:rgba(9,11,14,.76);box-shadow:0 10px 32px rgba(0,0,0,.44);backdrop-filter:blur(7px)}
.hud div{background:transparent}
.run-status{z-index:6;top:136px;left:50%;right:auto;width:min(620px,calc(100% - 32px));transform:translateX(-50%)}
.section-progress{z-index:6;left:50%;right:auto;width:min(620px,calc(100% - 32px));transform:translateX(-50%);bottom:18px}
canvas{z-index:2}
.panel{z-index:9}
.message{z-index:8}
@media(max-width:560px){.topbar{height:58px}.brand{background:rgba(9,11,14,.82)}.tools{background:rgba(9,11,14,.82)}.hud{top:62px;height:52px}.run-status{top:122px}.run-status span{background:rgba(9,11,14,.84)}.panel{top:56%;width:min(92%,390px)}}
@media(max-height:650px){.topbar{height:52px}.hud{top:54px;height:46px}.run-status{top:106px}.section-progress{bottom:8px}.panel{top:55%;max-height:calc(100% - 118px)}}