index.css

/* Global */
:root {
  --color-base: hsl(0, 0%, 55%);
  --color-light: hsl(0, 0%, 90%);
  --color-dark: hsl(0, 0%, 10%);
}

html {
  touch-action: none;
}

body {
  margin: 0;
  display:flex;
  flex-direction: column;
  align-items: center;
  background: #484050;
}

@media (display-mode: fullscreen) {
  body {
    background: #000000;
  }
}

#app {
  display: flex;
  justify-content: center;
}

#app > div:first-child {
  transform-origin: top !important;
}

#layout:fullscreen #dpad, #layout:fullscreen {
  bottom: 6rem;
}

input:-internal-autofill-selected {
  -webkit-background-clip: text;
  background-clip: text;
}

/* Need adjust input font-size */
input {
  font-size: 3.2rem;
}

.hidden {
  display: none !important;
}


input:-internal-autofill-selected {
  -webkit-background-clip: text;
  background-clip: text;
}

/* Touch Controls: */

#touchControls {
  --text-shadow-size: 0.65vh;
  --controls-size: 10vh;
  --touch-control-opacity: 0.6;

  --controls-padding: 1rem;

  --controls-size-with-padding: calc(var(--controls-size) + var(--controls-padding));
  --controls-size-with-wide-padding: calc(var(--controls-size) *1.2 + var(--controls-padding));
  --control-group-extra-size: calc(var(--controls-size) * 0.8);
  --control-group-extra-wide-size: calc(var(--controls-size) * 1.2);

  --control-group-extra-2-offset: calc(var(--controls-size-with-padding) + (var(--controls-size) - var(--control-group-extra-size)) / 2);
  --control-group-extra-1-offset: calc(var(--controls-padding) + (var(--controls-size) - var(--control-group-extra-size)) / 2);

  --small-control-size: calc(var(--controls-size) / 3);
  --rect-control-size: calc(var(--controls-size) * 0.74);

  font-family: 'emerald';
  font-size: var(--controls-size);
  text-shadow: var(--color-dark) var(--text-shadow-size) var(--text-shadow-size);
  color: var(--color-light);
}

@media (orientation: landscape) {
  #touchControls {
    --controls-size: 20vh;
    --text-shadow-size: 1.3vh;
    --small-button-offset: 4vh;
  }
}

#touchControls:not(.visible) {
  display: none;
}

#touchControls .active {
  opacity: var(--touch-control-opacity);
}

.control-group {
  position: fixed;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  width: var(--controls-size);
}

.control-group-dpad {
  width: calc(2 * var(--controls-size));
  height: calc(2 * var(--controls-size));
}

.control-group-extra {
  width: var(--control-group-extra-size);
  height: var(--control-group-extra-size);
}

/* Hide buttons on specific UIs */

/* Show #apadPreviousTab and #apadNextTab only in settings, except in touch configuration panel */
#touchControls:not([data-ui-mode^='SETTINGS']) #apadPreviousTab,
#touchControls:not([data-ui-mode^='SETTINGS']) #apadNextTab,
#touchControls:is(.config-mode) #apadPreviousTab,
#touchControls:is(.config-mode) #apadNextTab {
  display: none;
}

/* Show #apadInfo only in battle */
#touchControls:not([data-ui-mode='COMMAND']):not([data-ui-mode='FIGHT']):not([data-ui-mode='BALL']):not([data-ui-mode='TARGET_SELECT']) #apadInfo {
  display: none;
}

/* Show #apadStats only in battle and shop */
#touchControls:not([data-ui-mode='COMMAND']):not([data-ui-mode='FIGHT']):not([data-ui-mode='BALL']):not([data-ui-mode='TARGET_SELECT']):not([data-ui-mode='MODIFIER_SELECT']) #apadStats {
  display: none;
}

/* Show cycle buttons only on STARTER_SELECT and on touch configuration panel */
#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadOpenFilters,
#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT'], [data-ui-mode='RUN_INFO']) #apadCycleForm,
#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT'], [data-ui-mode='RUN_INFO']) #apadCycleShiny,
#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadCycleNature,
#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT'], [data-ui-mode='RUN_INFO']) #apadCycleAbility,
#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadCycleGender,
#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadCycleVariant {
 display: none;
}

/* Configuration toolbar */

#configToolbar {
  width: 100%;
  position: fixed;
  top: 1rem;
  left: 0;
  z-index: 9;
  user-select: none;
}

#configToolbar .column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10%;
  padding: 0 var(--controls-padding);
}

#configToolbar .button-row {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
}

#configToolbar .info-row {
  display: flex;
  justify-content: flex-start;
  width: 100%;
}

#configToolbar .button {
  z-index: 3;
  background-color: var(--color-base);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 10%;
  height: var(--small-control-size);
  font-size: var(--small-control-size);
  border-radius: 8px;
  padding: 2px 8px;
  text-shadow: var(--color-dark) calc(var(--text-shadow-size) / 3) calc(var(--text-shadow-size) / 3);
}

#configToolbar .button:active {
  opacity: var(--touch-control-opacity)
}

#configToolbar .orientation-label {
  font-size: var(--small-control-size);
  text-shadow: var(--color-dark) calc(var(--text-shadow-size) / 3) calc(var(--text-shadow-size) / 3);
}

/* dpad */
#dpad {
  z-index: 3;
  opacity: 0.8;
}

#dpad svg {
  width: calc(2 * var(--controls-size));
  height: calc(2 * var(--controls-size));
  fill: var(--color-base);
}

/* apad buttons */

.apad-button {
  background-color: var(--color-base);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 0;
  bottom: 0;
  width: var(--controls-size);
  height: var(--controls-size);
  opacity: 0.8;
  border-radius: 8px;
}

.apad-small {
  width: var(--small-control-size);
  height: var(--small-control-size);
}

.apad-label {
  user-select: none;
  height: 100%;
  margin-right: -2px;
}

.apad-small > .apad-label {
  font-size: var(--small-control-size);
  text-shadow: var(--color-dark) calc(var(--text-shadow-size) / 3) calc(var(--text-shadow-size) / 3);
}

.apad-rectangle {
  text-align: center;
  width: var(--rect-control-size);
  height: var(--small-control-size);
}

.apad-square {
  width: var(--small-control-size);
  height: var(--small-control-size);
}

.apad-circle {
  width: var(--controls-size);
  height: var(--controls-size);
  border-radius: 50%;
}

/* Defaults:*/

#control-group-dpad {
  left: var(--controls-padding);
  bottom: var(--controls-padding);
}

#control-group-action {
  right: var(--controls-padding);
  bottom: var(--controls-size-with-padding);
}

#control-group-cancel {
  right: var(--controls-size-with-wide-padding);
  bottom: var(--controls-padding);
}

#control-group-extra-1 {
  right: var(--control-group-extra-1-offset);
  bottom: var(--control-group-extra-1-offset);
}

#control-group-extra-2 {
  width: var(--control-group-extra-wide-size);
  right: var(--control-group-extra-2-offset);
  bottom: var(--control-group-extra-2-offset);
}

/* Layout */

#layout:fullscreen #dpad, #layout:fullscreen #apad {
  bottom: 6rem;
}

input:-internal-autofill-selected {
  -webkit-background-clip: text;
  background-clip: text;
}
#banner {
  display: none;
  position: absolute;
  top: 33.2%;
  left: 0;
  text-align: center;
  z-index: 1000; /* Ensures the banner is on top of other elements */
  & > img {
    opacity: 50%;
  }
}

#tnc-links {
  font-size: xx-small;
  position: relative;
}

a {
  color: #328cea;
  margin-right: 4px;
  margin-left: 4px;
}

/* Firefox old*/
@-moz-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

@-webkit-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
/* IE */
@-ms-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
/* Opera and prob css3 final iteration */
@keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
.blink-image {
    -moz-animation: blink normal 4s infinite ease-in-out; /* Firefox */
    -webkit-animation: blink normal 4s infinite ease-in-out; /* Webkit */
    -ms-animation: blink normal 4s infinite ease-in-out; /* IE */
    animation: blink normal 4s infinite ease-in-out; /* Opera and prob css3 final iteration */
}