.portebla-ui{pointer-events:auto;background:var(--portebla-panel-bg);box-sizing:border-box;z-index:9999;justify-content:space-around;align-items:center;width:100%;height:100%;padding:20px 40px;display:flex;position:absolute;top:0;left:0}.portebla-panel{pointer-events:auto;justify-content:center;align-items:center;display:flex}.portebla-ui.layout-landscape{box-sizing:border-box;grid-template:"left space."1fr"left space center""left space right""left space."1fr/auto 1fr auto;place-items:center;width:100%;height:100%;padding:0 40px;display:grid}.portebla-ui.layout-landscape .portebla-left{grid-area:left}.portebla-ui.layout-landscape .portebla-right{grid-area:right}.portebla-ui.layout-landscape .portebla-center{grid-area:center;margin-top:0;margin-bottom:20px}.portebla-ui.layout-portrait{grid-template:"space space"1fr"left right""center center"/1fr 1fr;align-content:end;justify-items:center;row-gap:20px;padding:20px 20px 60px;display:grid}@media (aspect-ratio<=1){.portebla-ui.layout-auto{grid-template-columns:1fr 1fr;grid-template-areas:"left right""center center";align-content:center;justify-items:center;row-gap:20px;display:grid}}.portebla-left{grid-area:left}.portebla-right{grid-area:right}.portebla-center{pointer-events:auto;grid-area:center;justify-content:center;align-items:center;margin-top:10px;display:flex}.portebla-ui.mode-full.layout-portrait{grid-template:"space"45fr"touchcanvas"45fr/1fr;align-content:space-evenly;row-gap:20px;padding:20px 20px 40px;display:grid}.portebla-ui.mode-full.layout-landscape{grid-template:"space touchcanvas"1fr/1fr 1fr;align-content:stretch;column-gap:20px;padding:20px;display:grid}.portebla-ui.mode-full .portebla-touch-canvas{background:var(--portebla-panel-bg);pointer-events:auto;border-radius:15px;grid-area:touchcanvas;width:100%;height:100%;position:relative;overflow:hidden;box-shadow:0 10px 20px #00000080}.portebla-ui.mode-full .portebla-touch-container{width:100%;height:100%;position:absolute;top:0;left:0}.portebla-orientation-warning{z-index:999999;color:#fff;text-align:center;background:#000000f2;flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100vh;font-family:sans-serif;display:none;position:fixed;top:0;left:0}.portebla-warning-content{flex-direction:column;align-items:center;gap:20px;display:flex}.portebla-warning-content svg{width:64px;height:64px;animation:2s ease-in-out infinite rotatePhone}@keyframes rotatePhone{0%{transform:rotate(0)}50%{transform:rotate(90deg)}to{transform:rotate(0)}}@media (orientation:portrait){.portebla-ui.layout-landscape .portebla-panel,.portebla-ui.layout-landscape .portebla-center{display:none!important}.portebla-orientation-warning.layout-landscape{display:flex}}@media (orientation:landscape){.portebla-ui.layout-portrait .portebla-panel,.portebla-ui.layout-portrait .portebla-center{display:none!important}.portebla-orientation-warning.layout-portrait{display:flex}}.portebla-joystick-base{background:var(--portebla-joy-base);touch-action:none;border:2px solid #fff3;border-radius:50%;width:120px;height:120px;position:relative}.portebla-joystick-thumb{background:var(--portebla-joy-thumb);pointer-events:none;border-radius:50%;width:50px;height:50px;transition:transform 50ms ease-out;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 2px 4px #ffffff4d,0 4px 8px #00000080}.portebla-button-cluster{width:140px;height:140px;position:relative}.portebla-btn{background:var(--portebla-btn-bg);width:50px;height:50px;color:var(--portebla-btn-text);-webkit-user-select:none;user-select:none;touch-action:none;cursor:pointer;border-radius:50%;justify-content:center;align-items:center;font-size:1.2rem;font-weight:700;display:flex;position:absolute;box-shadow:inset 0 -4px #0003,0 4px 6px #0000004d}.portebla-btn:active,.portebla-btn.active{background:var(--portebla-btn-active);transform:translateY(2px);box-shadow:inset 0 2px 4px #0006,0 1px 2px #0000004d}.portebla-btn-top,.portebla-btn-left{color:#432275;background:#afa8e8}.portebla-btn-bottom,.portebla-btn-right{color:#afa8e8;background:#432275}.portebla-btn-top{top:0;left:45px}.portebla-btn-bottom{bottom:0;left:45px}.portebla-btn-left{top:45px;left:0}.portebla-btn-right{top:45px;right:0}.portebla-dpad{touch-action:none;width:140px;height:140px;transition:transform .1s cubic-bezier(.2,0,0,1);position:relative}.portebla-dpad:active{transform:scale(.97)}.dpad-svg{width:100%;height:100%;overflow:visible}.dpad-btn{fill:var(--portebla-btn-active);opacity:0;cursor:pointer;pointer-events:all;transition:opacity .1s ease-out}.dpad-btn:active,.dpad-btn.active{opacity:.65}.portebla-menu-buttons{align-items:flex-end;gap:20px;display:flex}.portebla-menu-btn-wrapper{flex-direction:column;align-items:center;gap:8px;display:flex}.portebla-menu-btn{cursor:pointer;touch-action:none;background:#333;border-radius:8px;width:44px;height:14px;transition:background .1s,transform .1s;transform:rotate(-20deg);box-shadow:inset 0 2px 4px #00000080,0 2px #ffffff26}.portebla-menu-btn:active,.portebla-menu-btn.active{background:var(--portebla-btn-bg);box-shadow:inset 0 2px 6px #000c}.portebla-menu-label{color:#432275;letter-spacing:1px;text-transform:uppercase;-webkit-user-select:none;user-select:none;font-size:.6rem;font-weight:700}:root{--portebla-bg:#ccc;--portebla-panel-bg:transparent;--portebla-btn-bg:#8c7ae6;--portebla-btn-active:#9c88ff;--portebla-btn-text:#2f3640;--portebla-joy-base:#0000001a;--portebla-joy-thumb:#2f3640;--lightningcss-light:initial;--lightningcss-dark: ;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#000;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}body{flex-direction:column;justify-content:center;place-items:center;min-width:320px;margin:0;display:flex}header{flex-direction:row;justify-content:center;width:100%;display:flex}#main{flex-direction:column;justify-content:flex-start;align-items:center;width:300px;height:90vh;margin:0 auto;padding-top:5vh;display:flex}#game{z-index:10;rotate:0deg;box-shadow:0 0 10px 5px #4bb40e80}#gamepad{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);width:250px;height:250px;margin-top:1em;display:grid}.gridItem{color:#fff;justify-content:center;align-items:center;font-size:2rem;display:flex}.gamePadButton{cursor:pointer;z-index:10;background-color:#0000;border:2px solid #adff2f;border-radius:50%;width:75px;height:75px;box-shadow:0 0 20px 5px #4bb40e80}#message{z-index:10000;text-align:center;pointer-events:none;background-color:#000;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100vh;display:flex;position:absolute}.portebla-ui{pointer-events:none!important}.portebla-panel,.portebla-center{pointer-events:auto!important}