*,:before,:after{box-sizing:border-box;margin:0}body{background-color:#000;font-family:"Press Start 2P",system-ui;font-size:1.3cqw;font-style:normal;font-weight:400}h1{font-size:2.2em}p{font-size:1em}#wrapper{background-color:#000;justify-content:center;align-items:center;width:100%;max-width:none;height:100vh;display:flex;container-type:size}#wrapper-inner{aspect-ratio:256/173;width:100cqw;max-width:177.778cqh;max-height:100%;position:relative;container-type:inline-size}#background{z-index:1;width:100%;height:100%;image-rendering:pixelated;display:block}#viewport{z-index:2;color:#fff;background-color:#000;width:56.4%;height:69.3%;position:absolute;top:13.9%;left:21.8%}.viewport{perspective:600px;background:#000;border:4px solid #333;justify-content:center;align-items:center;width:480px;height:320px;display:flex;overflow:hidden}.btn{color:#fff;cursor:pointer;text-transform:uppercase;background-color:#28282c;border-radius:10px;padding:1em 2em .8em;font-family:"Press Start 2P",system-ui;font-size:.85em}.bottom-controls .btn:has(.button-icon){padding:0}.bottom-controls{justify-content:space-around;width:56.4%;display:flex;position:absolute;bottom:5%;left:21.8%}.controls{position:absolute}.side-controls{bottom:45%}.left-controls{left:5%}.right-controls{right:5%}.button-icon{height:3em;padding:0}.monster{width:23cqw;position:absolute;bottom:0}.hide{opacity:0}@keyframes pixel-shake{0%{transform:translate(0)}20%{transform:translate(-3px,1px)}40%{transform:translate(3px,-2px)}60%{transform:translate(-2px,-1px)}80%{transform:translate(2px,2px)}to{transform:translate(0)}}#viewport.isshaking{animation:.25s ease-in-out infinite pixel-shake}.text-frame{text-align:center;flex-direction:column;justify-content:center;height:100%;display:flex}