* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: monospace;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

html {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
}

body {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
}

@media screen and (orientation: portrait) {
  .joystick {
    overflow: hidden !important;
  }
  .joystick-body {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
  }
  .joystick-body-left, .joystick-body-right {
    width: 100%;
    height: 90%;
  }
  .joystick-body-center {
    height: 30%;
  }
  .joystick-body-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5px;
    overflow: hidden;
  }
  .joystick-body-left-frame {
    margin: auto;
    padding: 5px;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  .joystick-body-left-frame-trigger {
    width: 100%;
    height: 100%;
    margin: auto;
    border-radius: 100%;
    filter: drop-shadow(0 0 2px black) !important;
    transform: rotate(90deg);
  }
  .joystick-body-left-frame-trigger-btn {
    fill: #393939;
    stroke: #ffffff;
    stroke-width: 0.1px;
    transition: 0.5ms ease-in-out all;
  }
  .joystick-body-left-frame-trigger-btn.push-ArrowUp {
    transform: translateY(-5px);
    transition: 0.2s ease-in-out all;
  }
  .joystick-body-left-frame-trigger-btn.push-ArrowUp + polygon {
    fill: rgb(0, 255, 191);
    stroke-width: 1px;
    transition: 0.2s ease-in-out all;
  }
  .joystick-body-left-frame-trigger-btn.push-ArrowRight {
    transform: translateX(5px);
    transition: 0.2s ease-in-out all;
  }
  .joystick-body-left-frame-trigger-btn.push-ArrowRight + polygon {
    fill: rgb(0, 255, 191);
    stroke-width: 1px;
    transition: 0.2s ease-in-out all;
  }
  .joystick-body-left-frame-trigger-btn.push-ArrowDown {
    transform: translateY(5px);
    transition: 0.2s ease-in-out all;
  }
  .joystick-body-left-frame-trigger-btn.push-ArrowDown + polygon {
    fill: rgb(0, 255, 191);
    stroke-width: 1px;
    transition: 0.2s ease-in-out all;
  }
  .joystick-body-left-frame-trigger-btn.push-ArrowLeft {
    transform: translateX(-5px);
    transition: 0.2s ease-in-out all;
  }
  .joystick-body-left-frame-trigger-btn.push-ArrowLeft + polygon {
    fill: rgb(0, 255, 191);
    stroke-width: 1px;
    transition: 0.2s ease-in-out all;
  }
  .joystick-body-left-frame-trigger-arrow {
    filter: drop-shadow(0 0 1px rgb(0, 0, 0)) !important;
    stroke-width: 4px;
    fill: rgb(21, 21, 21);
  }
  .joystick-body-left-frame-trigger-overlay {
    filter: drop-shadow(0 0 1px black) !important;
    fill: rgba(0, 0, 0, 0);
  }
  .joystick-body-center {
    display: flex;
    flex-direction: row;
  }
  .joystick-body-center-top, .joystick-body-center-bottom {
    height: 100%;
    width: 50%;
  }
  .joystick-body-center-top {
    display: flex;
    flex-direction: column;
    order: 2;
    gap: 10px;
  }
  .joystick-body-center-top-left, .joystick-body-center-top-right {
    height: 100%;
    width: -moz-fit-content;
    width: fit-content;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: auto;
    transform: rotate(90deg);
  }
  .joystick-body-center-top-left-btn, .joystick-body-center-top-right-btn {
    width: 50px;
    height: 20px;
    background-color: #333;
    box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.559);
    border-radius: 1rem;
    margin: 0 auto 10px auto;
  }
  .joystick-body-center-top-left-btn.triggered, .joystick-body-center-top-right-btn.triggered {
    animation-name: triggerPOCEffect;
    animation-duration: 0.3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  .joystick-body-center-top-left-label, .joystick-body-center-top-right-label {
    text-align: center;
    margin-bottom: 10px;
  }
  .joystick-body-center-bottom {
    display: flex;
    flex-direction: row;
    order: 1;
    position: relative;
  }
  .joystick-body-center-bottom-left, .joystick-body-center-bottom-right {
    height: 100%;
    width: 50%;
    transform: rotate(90deg);
  }
  .joystick-body-center-bottom-left-btn, .joystick-body-center-bottom-right-btn {
    width: 50px;
    height: 50px;
    background-color: #333;
    box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.559);
    border-radius: 100%;
    margin: 0 auto 10px auto;
  }
  .joystick-body-center-bottom-left-btn.triggered, .joystick-body-center-bottom-right-btn.triggered {
    animation-name: triggerPOCEffect;
    animation-duration: 0.3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  .joystick-body-center-bottom-left-label, .joystick-body-center-bottom-right-label {
    text-align: center;
    margin-bottom: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 0.7rem;
  }
  .joystick-body-center-bottom-left-label > p > span, .joystick-body-center-bottom-right-label > p > span {
    font-size: 2rem;
    vertical-align: middle;
  }
  .joystick-body-center-bottom-left-label > p > a, .joystick-body-center-bottom-right-label > p > a {
    text-decoration: none;
    color: #1d1d1d;
  }
  .joystick-body-center-bottom-left {
    order: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: -moz-fit-content;
    height: fit-content;
    margin: auto;
  }
  .joystick-body-center-bottom-right {
    order: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: -moz-fit-content;
    height: fit-content;
    margin: auto;
  }
  .joystick-body-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
  }
  .joystick-body-right-frame {
    height: 89%;
    width: 99%;
    margin: auto;
    padding: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .joystick-body-right-frame-trigger {
    background-color: rgba(255, 255, 255, 0);
    width: 100%;
    height: -moz-fit-content;
    height: fit-content;
    margin: auto;
    border-radius: 100%;
    transform: rotate(90deg);
  }
  .joystick-body-right-frame-trigger-button {
    position: relative !important;
  }
  .joystick-body-right-frame-trigger-button-background {
    fill: #333 !important;
    stroke: #d8d8d8;
    stroke-width: 2px;
  }
  .joystick-body-right-frame-trigger-button-background.triggered {
    animation-name: triggerEffect;
    animation-duration: 0.3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  .joystick-body-right-frame-trigger-button-name {
    font-size: 1.2rem;
    font-weight: bold;
    filter: drop-shadow(0 0 1.5px black) !important;
    stroke-width: 1;
  }
  .joystick-body-right-frame-trigger-button-glassy {
    fill: url(#btnGlassCircle);
  }
  .joystick-body-right-frame-trigger-button-overlay {
    fill: rgba(0, 0, 0, 0);
  }
}
@media screen and (orientation: landscape) {
  .joystick {
    overflow: hidden !important;
  }
  .joystick-body {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    overflow: hidden !important;
  }
  .joystick-body-left, .joystick-body-right {
    height: 100%;
    width: 90%;
  }
  .joystick-body-center {
    width: 20%;
  }
  .joystick-body-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5px;
    overflow: hidden;
  }
  .joystick-body-left-frame {
    height: 99%;
    width: 99%;
    margin: auto;
    padding: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .joystick-body-left-frame-trigger {
    width: 100%;
    height: -moz-fit-content;
    height: fit-content;
    margin: auto;
    border-radius: 100%;
    filter: drop-shadow(0 0 2px black) !important;
  }
  .joystick-body-left-frame-trigger-btn {
    fill: #393939;
    stroke: #ffffff;
    stroke-width: 0.1px;
    transition: 0.5ms ease-in-out all;
  }
  .joystick-body-left-frame-trigger-btn.push-ArrowUp {
    transform: translateY(-5px);
    transition: 0.2s ease-in-out all;
  }
  .joystick-body-left-frame-trigger-btn.push-ArrowUp + polygon {
    fill: rgb(0, 255, 191);
    stroke-width: 1px;
    transition: 0.2s ease-in-out all;
  }
  .joystick-body-left-frame-trigger-btn.push-ArrowRight {
    transform: translateX(5px);
    transition: 0.2s ease-in-out all;
  }
  .joystick-body-left-frame-trigger-btn.push-ArrowRight + polygon {
    fill: rgb(0, 255, 191);
    stroke-width: 1px;
    transition: 0.2s ease-in-out all;
  }
  .joystick-body-left-frame-trigger-btn.push-ArrowDown {
    transform: translateY(5px);
    transition: 0.2s ease-in-out all;
  }
  .joystick-body-left-frame-trigger-btn.push-ArrowDown + polygon {
    fill: rgb(0, 255, 191);
    stroke-width: 1px;
    transition: 0.2s ease-in-out all;
  }
  .joystick-body-left-frame-trigger-btn.push-ArrowLeft {
    transform: translateX(-5px);
    transition: 0.2s ease-in-out all;
  }
  .joystick-body-left-frame-trigger-btn.push-ArrowLeft + polygon {
    fill: rgb(0, 255, 191);
    stroke-width: 1px;
    transition: 0.2s ease-in-out all;
  }
  .joystick-body-left-frame-trigger-arrow {
    filter: drop-shadow(0 0 1px rgb(0, 0, 0)) !important;
    stroke-width: 4px;
    fill: rgb(21, 21, 21);
  }
  .joystick-body-left-frame-trigger-overlay {
    filter: drop-shadow(0 0 1px black) !important;
    fill: rgba(0, 0, 0, 0);
  }
  .joystick-body-center {
    display: flex;
    flex-direction: column;
  }
  .joystick-body-center-top, .joystick-body-center-bottom {
    width: 100%;
    height: 50%;
  }
  .joystick-body-center-top {
    display: flex;
    flex-direction: row;
    order: 1;
    gap: 10px;
  }
  .joystick-body-center-top-left, .joystick-body-center-top-right {
    height: 100%;
    width: 50%;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  .joystick-body-center-top-left-btn, .joystick-body-center-top-right-btn {
    width: 50px;
    height: 20px;
    background-color: #333;
    box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.559);
    border-radius: 1rem;
    margin: 0 auto 10px auto;
  }
  .joystick-body-center-top-left-btn.triggered, .joystick-body-center-top-right-btn.triggered {
    animation-name: triggerPOCEffect;
    animation-duration: 0.3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  .joystick-body-center-top-left-label, .joystick-body-center-top-right-label {
    text-align: center;
    margin-bottom: 10px;
  }
  .joystick-body-center-bottom {
    display: flex;
    flex-direction: column;
    order: 2;
  }
  .joystick-body-center-bottom-left, .joystick-body-center-bottom-right {
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .joystick-body-center-bottom-left-btn, .joystick-body-center-bottom-right-btn {
    width: 50px;
    height: 50px;
    background-color: #333;
    box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.559);
    border-radius: 100%;
    margin: 0 auto 10px auto;
  }
  .joystick-body-center-bottom-left-btn.triggered, .joystick-body-center-bottom-right-btn.triggered {
    animation-name: triggerPOCEffect;
    animation-duration: 0.3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  .joystick-body-center-bottom-left-label, .joystick-body-center-bottom-right-label {
    text-align: center;
    margin-bottom: 10px;
    font-size: 0.7rem;
  }
  .joystick-body-center-bottom-left-label > p > span, .joystick-body-center-bottom-right-label > p > span {
    font-size: 2rem;
    vertical-align: middle;
  }
  .joystick-body-center-bottom-left-label > p > a, .joystick-body-center-bottom-right-label > p > a {
    text-decoration: none;
    color: #1d1d1d;
  }
  .joystick-body-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
  }
  .joystick-body-right-frame {
    height: 99%;
    width: 99%;
    margin: auto;
    padding: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .joystick-body-right-frame-trigger {
    background-color: rgba(255, 255, 255, 0);
    width: 100%;
    height: -moz-fit-content;
    height: fit-content;
    margin: auto;
    border-radius: 100%;
  }
  .joystick-body-right-frame-trigger-button {
    position: relative !important;
  }
  .joystick-body-right-frame-trigger-button-background {
    fill: #333 !important;
    stroke: #d8d8d8;
    stroke-width: 2px;
  }
  .joystick-body-right-frame-trigger-button-background.triggered {
    animation-name: triggerEffect;
    animation-duration: 0.3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  .joystick-body-right-frame-trigger-button-name {
    font-size: 1.2rem;
    font-weight: bold;
    filter: drop-shadow(0 0 1.5px black) !important;
    stroke-width: 1;
  }
  .joystick-body-right-frame-trigger-button-glassy {
    fill: url(#btnGlassCircle);
  }
  .joystick-body-right-frame-trigger-button-overlay {
    fill: rgba(0, 0, 0, 0);
  }
}
.joystick {
  overflow: hidden !important;
}
.joystick-body {
  overflow: hidden !important;
}

@keyframes triggerEffect {
  0% {
    filter: drop-shadow(0 0 2px black);
    fill: #333 !important;
    transform: scale(1) !important;
    stroke-width: 2px;
  }
  50% {
    filter: drop-shadow(0 0 0 black);
    fill: #0e0e0e !important;
    transform: scale(1.2) !important;
    stroke-width: 0;
  }
  100% {
    filter: drop-shadow(0 0 2px black);
    fill: #333 !important;
    transform: scale(1) !important;
    stroke-width: 2px;
  }
}
@keyframes triggerPOCEffect {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}
@media screen and (prefers-color-scheme: light) {
  body {
    background-color: white;
  }
}
@media screen and (prefers-color-scheme: dark) {
  .joystick {
    background-color: #1d1d1d;
  }
  .joystick-body-left-frame-trigger {
    filter: drop-shadow(0 0 5px rgb(0, 0, 0)) !important;
  }
  .joystick-body-left-frame-trigger-btn {
    fill: #a3a3a3;
    stroke: #1e1e1e;
  }
  .joystick-body-left-frame-trigger-btn.push-ArrowUp + polygon {
    fill: rgb(238, 255, 0);
  }
  .joystick-body-left-frame-trigger-btn.push-ArrowRight + polygon {
    fill: rgb(238, 255, 0);
  }
  .joystick-body-left-frame-trigger-btn.push-ArrowDown + polygon {
    fill: rgb(238, 255, 0);
  }
  .joystick-body-left-frame-trigger-btn.push-ArrowLeft + polygon {
    fill: rgb(238, 255, 0);
  }
  .joystick-body-left-frame-trigger-arrow {
    fill: rgb(0, 0, 0);
  }
  .joystick-body-center {
    color: #797979;
  }
  .joystick-body-center-top-left-btn, .joystick-body-center-top-right-btn {
    background-color: #a3a3a3;
    box-shadow: 0 0 5px 3px rgb(0, 0, 0);
  }
  .joystick-body-center-top-left-btn.triggered, .joystick-body-center-top-right-btn.triggered {
    animation-name: triggerPOCEffect;
    animation-duration: 0.3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  .joystick-body-center-bottom-left-btn, .joystick-body-center-bottom-right-btn {
    background-color: #a3a3a3;
    box-shadow: 0 0 5px 3px rgb(0, 0, 0);
  }
  .joystick-body-center-bottom-left-btn.triggered, .joystick-body-center-bottom-right-btn.triggered {
    animation-name: triggerPOCEffect;
    animation-duration: 0.3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  .joystick-body-center-bottom-left-label > p > a, .joystick-body-center-bottom-right-label > p > a {
    color: #a3a3a3 !important;
  }
  .joystick-body-right-frame-trigger {
    background-color: rgba(255, 255, 255, 0);
  }
  .joystick-body-right-frame-trigger-button-background {
    fill: #969696 !important;
    stroke: #000000;
  }
  .joystick-body-right-frame-trigger-button-background.triggered {
    animation-name: triggerEffect;
    animation-duration: 0.3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  .joystick-body-right-frame-trigger-button-background#R {
    fill: rgb(0, 138, 85) !important;
  }
  .joystick-body-right-frame-trigger-button-background#A {
    fill: rgb(190, 139, 0) !important;
  }
  .joystick-body-right-frame-trigger-button-background#T {
    fill: rgb(0, 136, 154) !important;
  }
  .joystick-body-right-frame-trigger-button-background#J {
    fill: rgb(134, 0, 0) !important;
  }
  .joystick-body-right-frame-trigger-button-glassy {
    fill: url(#btnGlassCircle);
  }
  .joystick-body-right-frame-trigger-button-overlay {
    fill: rgba(0, 0, 0, 0);
  }
}/*# sourceMappingURL=index.css.map */