index.css

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

@font-face {
  font-family: "emerald";
  src: url("/fonts/pokemon-emerald-pro.ttf") format("truetype");
}

@font-face {
  font-family: "pkmnems";
  src: url("/fonts/pkmnems.ttf") format("truetype");
}

html {
  touch-action: none;
}

html[data-window-style="RED_ORANGE"] {
  --color-base: #6b5a73;
  --color-light: #DD5748;
  --color-dark: #7E4955;
}

html[data-window-style="TEAL"] {
  --color-base: #6b5a73;
  --color-light: #48DDAA;
  --color-dark: #4D7574;
}

html[data-window-style="LIGHT_GRAY"] {
  --color-base: #6b5a73;
  --color-light: #C5C5C5;
  --color-dark: #766D7E;
}

html[data-window-style="GOLDENROD"] {
  --color-base: #6b5a73;
  --color-light: #EBC07C;
  --color-dark: #836C66;
}

html[data-window-style="MEDIUM_GRAY"] {
  --color-base: #686868;
  --color-light: #E8E8E8;
  --color-dark: #919191;
}

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;
  align-items: center;
}

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

/*
  Supports automatic vertical centering

  Condition factorized to deduce CSS rules:
  true if (isLandscape && !isMobile() && !hasTouchscreen() || (hasTouchscreen() && !isTouchControlsEnabled))
*/

/* isLandscape && !isMobile() && !hasTouchscreen() */
@media (orientation: landscape) and (pointer: fine) {
  #app {
    align-items: center;
  }
}

@media (pointer: coarse) {
  /* hasTouchscreen() && !isTouchControlsEnabled */
  body:has(> #touchControls.visible) #app {
    align-items: start;
  }

  body:has(> #touchControls.visible) #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([data-configuring]) #apadPreviousTab,
#touchControls:is([data-configuring]) #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([data-configuring]):not([data-ui-mode="STARTER_SELECT"]) #apadOpenFilters,
#touchControls:not([data-configuring]):not([data-ui-mode="STARTER_SELECT"], [data-ui-mode="RUN_INFO"]) #apadCycleForm,
#touchControls:not([data-configuring]):not([data-ui-mode="STARTER_SELECT"], [data-ui-mode="RUN_INFO"]) #apadCycleShiny,
#touchControls:not([data-configuring]):not([data-ui-mode="STARTER_SELECT"]) #apadCycleNature,
#touchControls:not([data-configuring]):not([data-ui-mode="STARTER_SELECT"], [data-ui-mode="RUN_INFO"]) #apadCycleAbility,
#touchControls:not([data-configuring]):not([data-ui-mode="STARTER_SELECT"]) #apadCycleGender,
#touchControls:not([data-configuring]):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 */
}