@font-face {
  font-family: "Pokemon FireRed";
  src: url("assets/fonts/pokemon-fire-red.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #eef4f8;
  --ink: #202020;
  --muted: #202020;
  --panel: #ffffff;
  --line: #cbd7df;
  --accent: #2b74c7;
  --accent-dark: #194e8c;
  --danger: #d94d3f;
  --warn: #e0a92e;
  --good: #3c9f5d;
  --shadow: 0 10px 28px rgb(48 78 99 / 16%);
  --game-text: #202020;
  --game-text-shadow-color: #d8d8d8;
  --game-text-shadow: 2px 0 0 var(--game-text-shadow-color), 0 2px 0 var(--game-text-shadow-color), 2px 2px 0 var(--game-text-shadow-color);
  --game-text-dark: #ffffff;
  --game-text-dark-shadow-color: #685870;
  --game-text-dark-shadow: 2px 0 0 var(--game-text-dark-shadow-color), 0 2px 0 var(--game-text-dark-shadow-color), 2px 2px 0 var(--game-text-dark-shadow-color);
  --game-font: "Pokemon FireRed", "Andale Mono", "Courier New", ui-monospace, monospace;
  font-family: var(--game-font);
  font-synthesis: none;
  -webkit-font-smoothing: none;
  text-rendering: geometricPrecision;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #000;
  color: var(--game-text);
  text-shadow: var(--game-text-shadow);
}

button {
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--game-text);
  cursor: pointer;
  font: inherit;
  font-weight: 400;
  text-shadow: var(--game-text-shadow);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.app-shell {
  display: grid;
  grid-template-columns: 837px;
  justify-content: start;
  gap: 18px;
  min-height: 100vh;
  padding: 18px 0 18px calc((100vw - 836px) / 2);
}

.battle-stage,
.command-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.battle-stage {
  position: relative;
  display: grid;
  grid-template-rows: 61px 526px 112px;
  width: 837px;
  overflow: visible;
}

.battle-stage.is-earthquake {
  will-change: transform;
  transform: translate(var(--shake-x, 0px), var(--shake-y, 0px));
}


.top-bar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 61px;
  padding: 12px;
  border-bottom: 0;
  transform: translateY(-20px);
}

.top-bar button {
  display: none;
  padding: 9px 12px;
}

#new-battle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#turn-counter {
  display: none;
  margin-left: auto;
  color: var(--game-text);
  font-weight: 400;
}

.arena {
  position: relative;
  top: -54px;
  overflow: hidden;
  min-height: 526px;
  background: #8ee981;
}

.battle-background {
  position: absolute;
  left: 0;
  top: 30px;
  z-index: 0;
  width: 835px;
  height: 496px;
  object-fit: cover;
  object-position: center;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  user-select: none;
}

.move-animation-canvas,
.firered-background-canvas {
  position: absolute;
  left: 0;
  top: 30px;
  display: block;
  width: 835px;
  height: 496px;
  opacity: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
}

.firered-background-canvas {
  z-index: 1;
}

.move-animation-canvas {
  z-index: 3;
}

.firered-background-canvas.is-active,
.move-animation-canvas.is-active {
  display: block;
  opacity: 1;
  visibility: visible;
}

.firered-background-canvas:not(.is-active),
.move-animation-canvas:not(.is-active) {
  display: none;
  visibility: hidden;
}

.battle-base {
  position: absolute;
  z-index: 1;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  user-select: none;
}

.pokemon-count {
  position: absolute;
  z-index: 3;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  user-select: none;
}

.pokemon-count-frame {
  position: absolute;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.player-count .pokemon-count-frame {
  left: 0;
  top: 33px;
  width: 147px;
  height: 11px;
}

.opponent-count .pokemon-count-frame {
  left: 0;
  top: 31px;
  width: 146px;
  height: 13px;
}

.party-balls {
  position: absolute;
  inset: 0;
}

.party-balls::before {
  position: absolute;
  top: 0;
  display: block;
  height: 26px;
  background-repeat: no-repeat;
  background-size: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  content: "";
}

.player-party-balls::before {
  left: 31px;
  width: 107px;
  background-image: url("assets/new-ui/user-pokeballs-healthy.png");
}

.opponent-party-balls::before {
  left: 9px;
  width: 107px;
  background-image: url("assets/new-ui/opponent-pokeballs-healthy.png");
}

.party-ball {
  position: absolute;
  display: none;
  width: 28px;
  height: 26px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.party-ball.is-fainted {
  display: block;
}

.opponent-party-balls .party-ball-1 {
  left: 9px;
  top: 0;
  background-image: url("assets/new-ui/opponent-pokeballs-fainted.png");
  background-position: 0 0;
}

.opponent-party-balls .party-ball-2 {
  left: 48px;
  top: 0;
  background-image: url("assets/new-ui/opponent-pokeballs-fainted.png");
  background-position: -39px 0;
}

.opponent-party-balls .party-ball-3 {
  left: 88px;
  top: 0;
  background-image: url("assets/new-ui/opponent-pokeballs-fainted.png");
  background-position: -79px 0;
}

.player-party-balls .party-ball-1 {
  left: 31px;
  top: 0;
  background-image: url("assets/new-ui/user-pokeballs-fainted.png");
  background-position: 0 0;
}

.player-party-balls .party-ball-2 {
  left: 70px;
  top: 0;
  background-image: url("assets/new-ui/user-pokeballs-fainted.png");
  background-position: -39px 0;
}

.player-party-balls .party-ball-3 {
  left: 110px;
  top: 0;
  background-image: url("assets/new-ui/user-pokeballs-fainted.png");
  background-position: -79px 0;
}

.opponent-count {
  left: 3px;
  top: 171px;
  width: 112px;
  height: 28px;
}

.player-count {
  left: 713px;
  top: 338px;
  width: 112px;
  height: 27px;
}

.opponent-base {
  left: 272px;
  top: 141px;
  width: 696px;
  height: 186px;
}

.player-base {
  left: -43px;
  top: 445px;
  width: 466px;
  height: 126px;
}

.combatant {
  position: absolute;
  display: block;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.combatant.enemy {
  left: 0;
  top: 0;
}

.combatant.player {
  left: 0;
  top: 0;
}

.sprite {
  position: absolute;
  display: grid;
  place-items: end center;
}

.pokemon-sprite {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.pokemon-release-silhouette {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: #f49aef;
  -webkit-mask-image: var(--release-image);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: var(--release-image);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  transform-origin: var(--release-origin-x) var(--release-origin-y);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
}

.pokemon-release-pixels {
  position: absolute;
  left: var(--release-origin-x);
  top: var(--release-origin-y);
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.pokemon-release-flash {
  position: absolute;
  z-index: 2;
  left: var(--release-origin-x);
  top: var(--release-origin-y);
  width: 54px;
  height: 54px;
  opacity: 0;
  background: #fff8f0;
  clip-path: polygon(50% 0, 61% 31%, 88% 12%, 72% 39%, 100% 50%, 70% 61%, 88% 88%, 60% 72%, 50% 100%, 40% 72%, 12% 88%, 30% 60%, 0 50%, 31% 39%, 12% 12%, 40% 30%);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 0 #f49aef) drop-shadow(5px 0 0 #f49aef) drop-shadow(-5px 0 0 #f49aef) drop-shadow(0 5px 0 #f49aef) drop-shadow(0 -5px 0 #f49aef);
  pointer-events: none;
}

.player-throw-ball,
.enemy-throw-ball {
  position: absolute;
  z-index: 4;
  display: block;
  width: 44px;
  height: 44px;
  opacity: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
}

.player-throw-ball {
  left: 276px;
  top: 460px;
}

.player-throw-ball img,
.player-throw-ball-half {
  position: absolute;
  display: block;
  width: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.player-throw-ball img {
  inset: 0;
  height: 100%;
}

.player-throw-ball-half {
  left: 0;
  height: 50%;
  opacity: 0;
  background-image: url("assets/new-ui/pokeball-throw-out.png");
  background-repeat: no-repeat;
  background-size: 44px 44px;
}

.player-throw-ball-top {
  top: 0;
  background-position: left top;
}

.player-throw-ball-bottom {
  bottom: 0;
  background-position: left bottom;
}

.enemy-throw-ball {
  left: 761px;
  top: 248px;
}

.release-pixel {
  position: absolute;
  left: -3px;
  top: -1px;
  width: 15px;
  height: 4px;
  background: #f8b818;
  box-shadow: 0 3px 0 #fffdf0;
  transform-origin: 3px 2px;
  image-rendering: pixelated;
}

.release-pixel-1 { --ray-x: 2px; --ray-y: -118px; --ray-r: 90deg; }
.release-pixel-2 { --ray-x: 68px; --ray-y: -92px; --ray-r: 24deg; }
.release-pixel-3 { --ray-x: 118px; --ray-y: -48px; --ray-r: 0deg; }
.release-pixel-4 { --ray-x: 130px; --ray-y: 16px; --ray-r: -38deg; }
.release-pixel-5 { --ray-x: 94px; --ray-y: 80px; --ray-r: 0deg; }
.release-pixel-6 { --ray-x: 40px; --ray-y: 116px; --ray-r: 56deg; }
.release-pixel-7 { --ray-x: -16px; --ray-y: 126px; --ray-r: 90deg; }
.release-pixel-8 { --ray-x: -84px; --ray-y: 94px; --ray-r: 0deg; }
.release-pixel-9 { --ray-x: -126px; --ray-y: 38px; --ray-r: 90deg; }
.release-pixel-10 { --ray-x: -116px; --ray-y: -30px; --ray-r: 38deg; }
.release-pixel-11 { --ray-x: -70px; --ray-y: -90px; --ray-r: 0deg; }
.release-pixel-12 { --ray-x: -20px; --ray-y: -104px; --ray-r: -48deg; }

.combatant.is-move-animated .sprite {
  animation: none;
}

@keyframes player-idle-bounce {
  0%,
  49.99%,
  100% {
    transform: translateY(0);
  }

  50%,
  99.99% {
    transform: translateY(1px);
  }
}

.combatant.is-hit .pokemon-sprite {
  animation: hit-flash 560ms steps(1, end);
}

.combatant.enemy.is-fainting .pokemon-sprite {
  animation: enemy-faint-sink 900ms steps(18, end) forwards;
}

.combatant.player.is-fainting .pokemon-sprite {
  animation: player-faint-drop 900ms steps(18, end) forwards;
}

.combatant.enemy.is-fainted .pokemon-sprite {
  opacity: 0;
  transform: translateY(142px);
}

.combatant.player.is-fainted .pokemon-sprite {
  opacity: 0;
  transform: translateY(184px);
}

@keyframes hit-flash {
  0%,
  16%,
  32%,
  48%,
  64%,
  80%,
  100% {
    opacity: 1;
  }

  8%,
  24%,
  40%,
  56%,
  72%,
  88% {
    opacity: 0;
  }
}

@keyframes enemy-faint-sink {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  72% {
    opacity: 1;
    transform: translateY(102px);
  }

  100% {
    opacity: 0;
    transform: translateY(142px);
  }
}

@keyframes player-faint-drop {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  72% {
    opacity: 1;
    transform: translateY(134px);
  }

  100% {
    opacity: 0;
    transform: translateY(184px);
  }
}

.enemy .sprite {
  left: 484px;
  top: 41px;
  width: 237px;
  height: 235px;
}

.enemy .status-card {
  left: 3px;
  top: 43px;
  width: 370px;
  height: 108px;
}

.player .sprite {
  left: 111px;
  top: 340px;
  width: 191px;
  height: 187px;
}

.player .status-card {
  left: 499px;
  top: 385px;
  width: 336px;
  height: 119px;
}

.status-card {
  position: absolute;
  color: var(--game-text);
  font-family: var(--game-font);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  image-rendering: pixelated;
  filter: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.status-card::after {
  display: none;
  position: absolute;
  width: 48px;
  height: 29px;
  background-repeat: no-repeat;
  background-size: 48px 29px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  content: "";
}

.enemy-hud {
  padding: 0;
  background-image: url("assets/opponent-hp-bar-new-psd.png");
}

.player-hud {
  padding: 0;
  background-image: url("assets/player-hp-bar-new-psd.png");
}

.enemy-hud::after {
  left: 251px;
  top: 25px;
  background-image: url("assets/opponent-level-psd.png");
}

.player-hud::after {
  left: 277px;
  top: 24px;
  background-image: url("assets/player-level-psd.png");
}

.hud-name {
  display: block;
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  color: var(--game-text);
  font-size: 40px;
  line-height: 1;
  text-shadow: var(--game-text-shadow);
  text-transform: uppercase;
}

.enemy-hud .hud-name {
  left: 26px;
  top: 23px;
  max-width: 110px;
}

.player-hud .hud-name {
  left: 50px;
  top: 17px;
  max-width: 130px;
}

.hud-level {
  display: none;
  position: absolute;
  align-items: baseline;
  gap: 1px;
  color: var(--game-text);
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
}

.hud-level-image {
  position: absolute;
  display: block;
  left: var(--hud-level-x);
  top: var(--hud-level-y);
  width: var(--hud-level-width);
  height: var(--hud-level-height);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  user-select: none;
}

.hud-name-image {
  position: absolute;
  left: var(--hud-name-x);
  top: var(--hud-name-y);
  display: block;
  width: var(--hud-name-width);
  height: var(--hud-name-height);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  user-select: none;
}

.enemy-hud .hud-level {
  right: 15px;
  top: 25px;
}

.player-hud .hud-level {
  right: 18px;
  top: 35px;
}

.gender {
  font-size: 11px;
  font-weight: 400;
}

.gender.male {
  color: var(--game-text);
}

.gender.female {
  color: var(--game-text);
}

.lv-mark {
  display: none;
  font-size: 11px;
  transform: translateY(-1px);
}

.hp-track {
  position: absolute;
  width: 104px;
  height: 6px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #050505;
}

.hp-fill {
  width: var(--hp);
  height: 100%;
  background: var(--hp-color);
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / 18%);
  transition: width 760ms steps(38, end);
}

.hp-row {
  position: static;
}

.enemy-hud .hp-track {
  left: 144px;
  top: 62px;
  width: 175px;
  height: 12px;
}

.player-hud .hp-track {
  left: 155px;
  top: 54px;
  width: 155px;
  height: 10px;
}

.hp-number-line {
  display: none;
  position: absolute;
  align-items: baseline;
  gap: 3px;
  margin: 0;
  padding: 0;
  color: var(--game-text);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
}

.player-hud .hp-number-line {
  display: none;
  right: 20px;
  top: 76px;
}

.hp-slash {
  color: var(--game-text);
  font-size: 12px;
}

.status-row {
  min-height: 14px;
  margin-top: 2px;
  color: var(--game-text);
  font-size: 10px;
  font-weight: 400;
}

.hud-status-icon {
  position: absolute;
  display: block;
  width: 42px;
  height: 17px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.enemy-hud .hud-status-icon {
  left: 22px;
  top: 66px;
}

.player-hud .hud-status-icon {
  left: 51px;
  top: 55px;
}

.message-box {
  position: relative;
  top: -54px;
  width: 835px;
  min-height: 112px;
  padding: 0;
  border-top: 0;
  background: transparent;
  color: var(--game-text);
  font-family: var(--game-font);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.25px;
  line-height: 1.45;
}

.top-bar button {
  color: var(--game-text-dark);
  text-shadow: var(--game-text-dark-shadow);
}

.battle-command-overlay,
.battle-command-bar,
.battle-command-options,
.battle-command-icon {
  position: absolute;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  user-select: none;
}

.battle-command-overlay {
  left: 0;
  top: 0;
  width: 561px;
  height: 112px;
}

.battle-command-prompt {
  position: absolute;
  display: block;
  left: 30px;
  top: 26px;
  width: 114px;
  height: 59px;
  color: var(--game-text-dark);
  font-family: var(--game-font);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.25px;
  line-height: 1;
  text-shadow: var(--game-text-dark-shadow);
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

.battle-command-prompt span {
  position: absolute;
  display: block;
  white-space: nowrap;
}

.battle-command-prompt-lead {
  left: 0;
  top: 0;
}

.battle-command-prompt-name-line,
.battle-command-prompt-do-line {
  left: 0;
  top: 34px;
}

.battle-command-prompt-do-line {
  display: none;
}

.battle-command-menu {
  position: absolute;
  left: 283px;
  top: 0;
  width: 278px;
  height: 112px;
}

.battle-command-bar {
  left: 0;
  top: 0;
  width: 278px;
  height: 112px;
}

.battle-command-options {
  left: 52px;
  top: 30px;
  width: 173px;
  height: 58px;
}

.battle-command-icon {
  left: var(--cursor-x, 21px);
  top: var(--cursor-y, 28px);
  width: 14px;
  height: 23px;
}

.battle-command-hitbox {
  position: absolute;
  width: 96px;
  height: 32px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  text-shadow: none;
  padding: 0;
}

.battle-command-hitbox[data-command="fight"] {
  left: 26px;
  top: 24px;
}

.battle-command-hitbox[data-command="bag"] {
  left: 156px;
  top: 24px;
}

.battle-command-hitbox[data-command="pokedex"] {
  left: 26px;
  top: 58px;
}

.battle-command-hitbox[data-command="run"] {
  left: 156px;
  top: 58px;
}

.battle-fight-menu {
  position: absolute;
  display: none;
  left: 0;
  top: 0;
  width: 561px;
  height: 112px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  user-select: none;
}

.fight-move-cursor {
  position: absolute;
  display: none;
  left: var(--move-cursor-x, 23px);
  top: var(--move-cursor-y, 28px);
  z-index: 2;
  width: 14px;
  height: 23px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  user-select: none;
}

.battle-text-menu {
  position: absolute;
  display: none;
  left: 0;
  top: 0;
  width: 561px;
  height: 112px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  user-select: none;
}

.battle-text-line {
  position: absolute;
  display: none;
  left: 24px;
  top: 20px;
  width: 500px;
  color: var(--game-text-dark);
  font-family: var(--game-font);
  font-size: 22px;
  line-height: 1.35;
  text-shadow: var(--game-text-dark-shadow);
  z-index: 1;
  pointer-events: none;
}

.fight-move-list {
  position: absolute;
  display: none;
  left: 52px;
  top: 24px;
  width: 292px;
  height: 78px;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 30px;
  column-gap: 18px;
  row-gap: 5px;
  color: var(--game-text);
  font-family: var(--game-font);
  font-size: 21px;
  line-height: 1;
  image-rendering: pixelated;
  pointer-events: auto;
  z-index: 1;
}

.fight-move-details {
  position: absolute;
  display: none;
  left: 394px;
  top: 29px;
  z-index: 1;
  width: 148px;
  height: 64px;
  color: var(--game-text);
  font-family: var(--game-font);
  font-size: 18px;
  line-height: 1;
  text-shadow: var(--game-text-shadow);
  pointer-events: none;
  user-select: none;
}

.fight-move-details span {
  position: absolute;
  display: block;
  max-width: 148px;
  overflow: hidden;
  white-space: nowrap;
}

.fight-move-pp {
  left: 0;
  top: 0;
}

.fight-move-type {
  left: 0;
  top: 37px;
}

.fight-move-button {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--game-text);
  font: inherit;
  font-weight: 400;
  text-align: left;
}

.fight-move-button:focus-visible {
  outline: 1px solid #4f4f4f;
  outline-offset: -2px;
}

.fight-move-button:disabled {
  opacity: 0.45;
}

.fight-move-name {
  overflow: hidden;
  white-space: nowrap;
}

.fight-move-name.is-compact {
  font-size: 13px;
}

.fight-back-button {
  position: absolute;
  display: none;
  left: 498px;
  top: 73px;
  z-index: 3;
  width: 33px;
  height: 14px;
  padding: 0;
  border: 0;
  background: transparent url("assets/new-ui/fight-back-button.png") 0 0 / 33px 14px no-repeat;
  color: transparent;
  cursor: pointer;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.message-box[data-opened-command="fight"] .battle-command-overlay,
.message-box[data-opened-command="fight"] .battle-command-prompt,
.message-box[data-opened-command="fight"] .battle-command-menu {
  display: none;
}

.message-box[data-opened-command="fight"] .battle-fight-menu,
.message-box[data-opened-command="fight"] .fight-move-cursor {
  display: block;
}

.message-box[data-opened-command="fight"] .fight-move-list {
  display: block;
}

.message-box[data-opened-command="fight"] .fight-back-button {
  display: block;
}

.message-box[data-opened-command="fight"] .fight-move-details {
  display: block;
}

.message-box[data-opened-command="text"] .battle-command-overlay,
.message-box[data-opened-command="text"] .battle-command-prompt,
.message-box[data-opened-command="text"] .battle-command-menu,
.message-box[data-opened-command="text"] .battle-fight-menu,
.message-box[data-opened-command="text"] .fight-move-cursor,
.message-box[data-opened-command="text"] .fight-move-list,
.message-box[data-opened-command="text"] .fight-back-button,
.message-box[data-opened-command="text"] .fight-move-details {
  display: none;
}

.message-box[data-opened-command="text"] .battle-text-menu,
.message-box[data-opened-command="text"] .battle-text-line {
  display: block;
}

.mini-paint-animation {
  position: absolute;
  left: 561px;
  top: 533px;
  z-index: 4;
  width: 274px;
  height: 112px;
  overflow: hidden;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  user-select: none;
}

.mini-paint-animation img {
  position: absolute;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  user-select: none;
}

.mini-paint-back {
  inset: 0;
  width: 274px;
  height: 112px;
}

.mini-paint-canvas {
  left: 143px;
  top: 35px;
  width: 80px;
  height: 77px;
}

.mini-paint-frame {
  opacity: 0;
  animation-duration: 2500ms;
  animation-iteration-count: infinite;
  animation-timing-function: steps(1, end);
}

.mini-paint-smear-1 {
  left: 82px;
  top: 53px;
  width: 69px;
  height: 59px;
  animation-name: mini-smear-1;
}

.mini-paint-smear-2 {
  left: 84px;
  top: 54px;
  width: 74px;
  height: 58px;
  animation-name: mini-smear-2;
}

.mini-paint-smear-3 {
  left: 80px;
  top: 53px;
  width: 70px;
  height: 59px;
  animation-name: mini-smear-3;
}

.mini-paint-r-start {
  left: 161px;
  top: 81px;
  width: 44px;
  height: 13px;
  animation-name: mini-r-start;
}

.mini-paint-r-mid {
  left: 156px;
  top: 66px;
  width: 54px;
  height: 28px;
  animation-name: mini-r-mid;
}

.mini-paint-r-end {
  left: 156px;
  top: 41px;
  width: 54px;
  height: 53px;
  animation-name: mini-r-end;
}

.mini-paint-bang-1 {
  left: 98px;
  top: 31px;
  width: 32px;
  height: 29px;
  animation-name: mini-bang-1;
}

.mini-paint-bang-2 {
  left: 98px;
  top: 19px;
  width: 32px;
  height: 29px;
  animation-name: mini-bang-2;
}

@keyframes mini-smear-1 {
  0%,
  19% {
    opacity: 1;
  }

  20%,
  100% {
    opacity: 0;
  }
}

@keyframes mini-smear-2 {
  0%,
  19%,
  39%,
  100% {
    opacity: 0;
  }

  20%,
  38% {
    opacity: 1;
  }
}

@keyframes mini-smear-3 {
  0%,
  38%,
  100% {
    opacity: 0;
  }

  39%,
  99% {
    opacity: 1;
  }
}

@keyframes mini-r-start {
  0%,
  19%,
  29%,
  100% {
    opacity: 0;
  }

  20%,
  28% {
    opacity: 1;
  }
}

@keyframes mini-r-mid {
  0%,
  29%,
  38%,
  100% {
    opacity: 0;
  }

  30%,
  37% {
    opacity: 1;
  }
}

@keyframes mini-r-end {
  0%,
  38%,
  100% {
    opacity: 0;
  }

  39%,
  99% {
    opacity: 1;
  }
}

@keyframes mini-bang-1 {
  0%,
  59%,
  79%,
  100% {
    opacity: 0;
  }

  60%,
  78% {
    opacity: 1;
  }
}

@keyframes mini-bang-2 {
  0%,
  79%,
  100% {
    opacity: 0;
  }

  80%,
  99% {
    opacity: 1;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.command-panel {
  display: none;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
}

.tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line);
}

.tab {
  border-radius: 0;
  background: transparent;
  color: var(--game-text);
  padding: 14px 8px;
}

.tab.active {
  background: #e6f0fb;
  color: var(--game-text);
}

.panel {
  display: none;
  min-height: 0;
  padding: 14px;
  overflow: auto;
}

.panel.active {
  display: block;
}

.moves-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.move-button,
.team-button {
  display: grid;
  gap: 5px;
  width: 100%;
  min-height: 92px;
  padding: 12px;
  border: 1px solid var(--line);
  background: #f8fbfd;
  color: var(--game-text);
  text-align: left;
}

.move-button:hover:not(:disabled),
.team-button:hover:not(:disabled) {
  border-color: var(--accent);
  background: #edf6ff;
}

.move-name,
.team-name {
  font-size: 16px;
  font-weight: 400;
}

.move-meta,
.team-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--game-text);
  font-size: 12px;
  font-weight: 400;
}

.type-pill,
.status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  background: var(--type-color);
  color: var(--game-text);
  font-size: 12px;
  font-weight: 400;
}

.status-pill {
  background: #6c5a95;
}

.team-list {
  display: grid;
  gap: 10px;
}

.team-button.active {
  border-color: var(--accent-dark);
  background: #e6f0fb;
}

.battle-log {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 22px;
  color: var(--game-text);
}

.battle-log li {
  line-height: 1.35;
}

@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .battle-stage {
    grid-template-rows: auto 410px auto;
  }

  .command-panel {
    min-height: 360px;
  }

  .combatant {
    grid-template-columns: 110px minmax(160px, 1fr);
  }

  .sprite {
    width: 110px;
    height: 110px;
    font-size: 46px;
  }

  .combatant.enemy {
    right: 3%;
  }

  .combatant.player {
    left: 3%;
  }

  .battle-base {
    width: 346px;
    height: 93px;
  }

  .opponent-base {
    right: 0;
    top: 33%;
  }

  .player-base {
    left: -6%;
  }
}

/* New 1061x607 Photoshop-authored battle composition. */
body {
  min-width: 1101px;
  background: #f7f7f7;
}

.app-shell {
  grid-template-columns: 1061px;
  min-height: 100vh;
  padding: 57px 0 56px;
  padding-left: calc(50% - 530px);
  justify-content: start;
}

.battle-stage {
  display: grid;
  grid-template-rows: 495px 112px;
  width: 1061px;
  height: 607px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.top-bar {
  position: absolute;
  left: 982px;
  top: 568px;
  width: 63px;
  height: 23px;
  padding: 0;
  transform: none;
}

#new-battle {
  width: 63px;
  height: 23px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent url("assets/new-ui/reset-button.png") 0 0 / 63px 23px no-repeat;
  color: transparent;
  box-shadow: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

#new-battle:hover {
  background: transparent url("assets/new-ui/reset-button.png") 0 0 / 63px 23px no-repeat;
}

#new-battle:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -3px;
}

.reset-icon {
  display: none;
  width: 14px;
  height: 14px;
  margin: auto;
  fill: currentColor;
  shape-rendering: crispEdges;
}

.reset-label {
  display: none;
  color: #ffffff;
  font-family: var(--game-font);
  font-size: 22px;
  line-height: 23px;
  letter-spacing: -0.4px;
  text-align: center;
  text-shadow: 2px 2px 0 #1d5798;
}

.arena {
  top: 0;
  width: 1061px;
  min-height: 495px;
  height: 495px;
  background: #e6f5e8;
}

.battle-background,
.move-animation-canvas,
.firered-background-canvas {
  left: 0;
  top: 0;
  width: 1061px;
  height: 495px;
}

.battle-base {
  display: none;
}

.sprite,
.enemy .sprite,
.player .sprite {
  left: var(--sprite-x);
  top: var(--sprite-y);
  width: var(--sprite-width);
  height: var(--sprite-height);
}

.enemy .status-card {
  left: 17px;
  top: 45px;
  width: 367px;
  height: 107px;
}

.player .status-card {
  left: 583px;
  top: 339px;
  width: 364px;
  height: 129px;
}

.enemy-hud {
  background-image: url("assets/new-ui/opponent-hud.png");
}

.player-hud {
  background-image: url("assets/new-ui/player-hud.png");
}

.enemy-hud .hud-name {
  left: 22px;
  top: 17px;
  max-width: none;
}

.player-hud .hud-name {
  left: 51px;
  top: 11px;
  max-width: none;
}

.hud-name {
  width: max-content;
  overflow: visible;
  transform: scaleX(var(--hud-name-scale, 1));
  transform-origin: left top;
}

.hud-name-copy {
  pointer-events: none;
}

.hud-level {
  display: block;
  font-size: 40px;
  line-height: 1;
  text-shadow: var(--game-text-shadow);
}

.enemy-hud .hud-level {
  left: 245px;
  right: auto;
  top: 17px;
  width: 96px;
}

.player-hud .hud-level {
  left: 261px;
  right: auto;
  top: 11px;
  width: 100px;
}

.hud-level-copy {
  pointer-events: none;
}

.enemy-hud .hp-track {
  left: 144px;
  top: 62px;
  width: 175px;
  height: 12px;
}

.player-hud .hp-track {
  left: 167px;
  top: 58px;
  width: 168px;
  height: 10px;
}

.message-box {
  top: 0;
  width: 561px;
  min-height: 112px;
  height: 112px;
}

.battle-command-overlay,
.battle-text-menu,
.battle-fight-menu {
  width: 561px;
  height: 112px;
}

.battle-command-menu {
  left: 283px;
  width: 278px;
}

.battle-command-options {
  display: none;
}

.battle-command-hitbox {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 104px;
  height: 30px;
  padding: 0;
  color: var(--game-text);
  font-size: 40px;
  letter-spacing: -0.4px;
  line-height: 1;
  text-shadow: var(--game-text-shadow);
}

.battle-command-hitbox[data-command="fight"] {
  left: 42px;
  top: 17px;
}

.battle-command-hitbox[data-command="bag"] {
  left: 181px;
  top: 17px;
}

.battle-command-hitbox[data-command="pokedex"] {
  left: 42px;
  top: 55px;
}

.battle-command-hitbox[data-command="run"] {
  left: 181px;
  top: 55px;
}

.battle-command-prompt {
  left: 28px;
  top: 22px;
  width: 210px;
  height: 60px;
  font-size: 40px;
  letter-spacing: -0.4px;
}

.battle-command-prompt-name-line,
.battle-command-prompt-do-line {
  top: 31px;
}

.fight-move-cursor {
  width: 14px;
  height: 23px;
}

.fight-move-list {
  left: 31px;
  top: 23px;
  width: 329px;
  height: 78px;
  font-size: 35px;
  letter-spacing: -0.875px;
}

.fight-move-button {
  position: absolute;
  left: 0;
  top: 0;
  width: 164px;
  height: 34px;
}

.fight-move-button:nth-child(2) {
  left: 172px;
}

.fight-move-button:nth-child(3) {
  top: 43px;
}

.fight-move-button:nth-child(4) {
  left: 172px;
  top: 42px;
}

.fight-back-button {
  left: 498px;
  top: 73px;
  width: 33px;
  height: 14px;
  background-size: 33px 14px;
}

.fight-move-details {
  left: 393px;
  top: 0;
  width: 158px;
  height: 70px;
  font-size: 35px;
  letter-spacing: -0.875px;
}

.fight-move-pp {
  left: 0;
  top: 19px;
}

.fight-move-type-label {
  left: 0;
  top: 60px;
}

.fight-move-type,
.fight-move-category {
  position: absolute;
  width: 32px;
  height: 14px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.fight-move-type {
  left: 64px;
  top: 73px;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 14px;
}

.fight-move-type img {
  display: block;
  width: 32px;
  height: 14px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.fight-move-category {
  left: 105px;
  top: 26px;
}

.battle-text-line {
  left: 28px;
  top: 19px;
  width: 510px;
  height: 82px;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.4px;
  white-space: nowrap;
}

.battle-text-line span {
  position: absolute;
  left: 0;
  display: block;
}

.battle-text-line span:first-child {
  top: 0;
}

.battle-text-line span:nth-child(2) {
  top: 36px;
}

.battle-text-line[data-layout] {
  top: 19px;
}

.info-overlay {
  position: absolute;
  left: 561px;
  top: 495px;
  z-index: 2;
  display: block;
  width: 500px;
  height: 112px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  user-select: none;
}

.pokeball-vs {
  position: absolute;
  left: 798px;
  top: 544px;
  z-index: 7;
  display: block;
  width: 28px;
  height: 20px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  user-select: none;
}

.pokemon-count {
  position: absolute;
  height: 28px;
  z-index: 6;
}

.player-count {
  left: 654px;
  top: 537px;
  width: 112px;
  height: 27px;
}

.opponent-count {
  left: 857px;
  top: 536px;
  width: 112px;
  height: 28px;
}

.riki-intro {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.riki-intro img {
  position: absolute;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.riki-trainer {
  left: 723px;
  top: 36px;
  width: 128px;
  height: 274px;
  opacity: 0;
  transform: translateX(400px);
  transition: transform 720ms steps(36, end), opacity 1ms linear;
}

.arena[data-intro-phase="field-enter"] .riki-trainer,
.arena[data-intro-phase="trainer-enter"] .riki-trainer,
.arena[data-intro-phase="trainer-hold"] .riki-trainer {
  opacity: 1;
}

.arena[data-intro-phase="field-enter"] .riki-trainer {
  transform: translateX(-1200px);
  transition: none;
}

.arena[data-intro-phase="trainer-enter"] .riki-trainer,
.arena[data-intro-phase="trainer-hold"] .riki-trainer {
  transform: translateX(0);
}

.arena[data-intro-phase="trainer-enter"] .riki-trainer {
  transition: transform 1040ms steps(52, end), opacity 1ms linear;
}

.arena[data-intro-phase="trainer-exit"] .riki-trainer {
  opacity: 1;
  transform: translateX(400px);
  transition: transform 320ms steps(16, end), opacity 1ms linear 320ms;
}

.arena[data-intro-phase="trainer-return-right"] .riki-trainer {
  opacity: 1;
  transform: translateX(400px);
  transition: none;
}

.arena[data-intro-phase="field-enter"] .combatant.enemy,
.arena[data-intro-phase="trainer-enter"] .combatant.enemy,
.arena[data-intro-phase="trainer-hold"] .combatant.enemy {
  opacity: 0;
}

.arena[data-enemy-release-phase="pixels"] .enemy .status-card,
.arena[data-enemy-release-phase="silhouette"] .enemy .status-card,
.arena[data-enemy-release-phase="waiting"] .enemy .status-card,
.arena[data-enemy-release-phase="throw"] .enemy .status-card,
.arena[data-enemy-release-phase="open-1"] .enemy .status-card,
.arena[data-enemy-release-phase="open-2"] .enemy .status-card {
  opacity: 0;
}

.arena[data-enemy-release-phase="pixels"] .enemy .pokemon-sprite,
.arena[data-enemy-release-phase="silhouette"] .enemy .pokemon-sprite,
.arena[data-enemy-release-phase="waiting"] .enemy .pokemon-sprite,
.arena[data-enemy-release-phase="throw"] .enemy .pokemon-sprite,
.arena[data-enemy-release-phase="open-1"] .enemy .pokemon-sprite,
.arena[data-enemy-release-phase="open-2"] .enemy .pokemon-sprite {
  opacity: 0;
}

.arena[data-enemy-release-phase="throw"] .enemy-throw-ball {
  content: url("assets/trainer/riki-ball-1.png");
  opacity: 1;
  animation: enemy-pokeball-throw 360ms steps(12, end) both;
}

.arena[data-enemy-release-phase="open-1"] .enemy-throw-ball {
  content: url("assets/trainer/riki-ball-2.png");
  opacity: 1;
  animation: enemy-pokeball-open-first 60ms steps(2, end) both;
}

.arena[data-enemy-release-phase="open-2"] .enemy-throw-ball {
  content: url("assets/trainer/riki-ball-3.png");
  opacity: 1;
  animation: enemy-pokeball-open 60ms steps(2, end) both;
}

.arena[data-enemy-release-phase="silhouette"] .enemy .pokemon-release-silhouette {
  animation: pokemon-release-pop 260ms steps(7, end) both;
}

.arena[data-enemy-release-phase="fade"] .enemy .pokemon-release-silhouette {
  animation: pokemon-release-fade 240ms steps(4, end) both;
}

.arena[data-enemy-release-phase="fade"] .enemy .pokemon-sprite {
  animation: pokemon-release-clarify 240ms steps(4, end) both;
}

.is-battle-intro .arena:not([data-intro-phase="player-throw"]):not([data-intro-phase="ready"]) .combatant.player {
  opacity: 0;
}

.arena[data-player-release-phase="throw"] .player-throw-ball {
  opacity: 1;
  animation: player-pokeball-throw 560ms steps(14, end) both;
}

.arena[data-player-release-phase="open"] .player-throw-ball {
  opacity: 1;
  animation: player-pokeball-open 140ms steps(4, end) both;
}

.arena[data-player-release-phase="open"] .player-throw-ball-closed {
  animation: player-pokeball-closed-flash 140ms steps(4, end) both;
}

.arena[data-player-release-phase="open"] .player-throw-ball-half {
  opacity: 1;
}

.arena[data-player-release-phase="open"] .player-throw-ball-top {
  animation: player-pokeball-top-open 140ms steps(4, end) both;
}

.arena[data-player-release-phase="open"] .player-throw-ball-bottom {
  animation: player-pokeball-bottom-open 140ms steps(4, end) both;
}

.arena[data-player-release-phase="throw"] .player .status-card,
.arena[data-player-release-phase="open"] .player .status-card,
.arena[data-player-release-phase="waiting"] .player .status-card,
.arena[data-player-release-phase="pixels"] .player .status-card,
.arena[data-player-release-phase="silhouette"] .player .status-card {
  opacity: 0;
}

.arena[data-player-release-phase="throw"] .player .pokemon-sprite,
.arena[data-player-release-phase="open"] .player .pokemon-sprite,
.arena[data-player-release-phase="waiting"] .player .pokemon-sprite,
.arena[data-player-release-phase="pixels"] .player .pokemon-sprite,
.arena[data-player-release-phase="silhouette"] .player .pokemon-sprite {
  opacity: 0;
}

.arena[data-player-release-phase="silhouette"] .player .pokemon-release-silhouette {
  animation: pokemon-release-pop 260ms steps(7, end) both;
}

.arena[data-player-release-phase="fade"] .player .pokemon-release-silhouette {
  animation: pokemon-release-fade 240ms steps(4, end) both;
}

.arena[data-player-release-phase="fade"] .player .pokemon-sprite {
  animation: pokemon-release-clarify 240ms steps(4, end) both;
}

.arena[data-player-release-phase="pixels"] .player .pokemon-release-pixels,
.arena[data-player-release-phase="silhouette"] .player .pokemon-release-pixels,
.arena[data-player-release-phase="fade"] .player .pokemon-release-pixels {
  opacity: 1;
}

.arena[data-player-release-phase="pixels"] .player .release-pixel,
.arena[data-player-release-phase="silhouette"] .player .release-pixel,
.arena[data-player-release-phase="fade"] .player .release-pixel {
  animation: pokemon-release-ray 520ms steps(6, end) both;
}

.arena[data-player-release-phase="pixels"] .player .pokemon-release-flash,
.arena[data-player-release-phase="silhouette"] .player .pokemon-release-flash,
.arena[data-player-release-phase="fade"] .player .pokemon-release-flash {
  animation: pokemon-release-flash 140ms steps(4, end) both;
}

.arena[data-enemy-release-phase="recall"] .enemy .status-card {
  opacity: 0;
}

.arena[data-enemy-release-phase="recall"] .enemy .pokemon-sprite {
  animation: pokemon-recall-vanish 980ms steps(12, end) both;
  transform-origin: var(--release-origin-x) var(--release-origin-y);
}

.arena[data-enemy-release-phase="pixels"] .enemy .pokemon-release-pixels,
.arena[data-enemy-release-phase="silhouette"] .enemy .pokemon-release-pixels,
.arena[data-enemy-release-phase="fade"] .enemy .pokemon-release-pixels {
  opacity: 1;
}

.arena[data-enemy-release-phase="pixels"] .enemy .release-pixel,
.arena[data-enemy-release-phase="silhouette"] .enemy .release-pixel,
.arena[data-enemy-release-phase="fade"] .enemy .release-pixel {
  animation: pokemon-release-ray 520ms steps(6, end) both;
}

.arena[data-enemy-release-phase="pixels"] .enemy .pokemon-release-flash,
.arena[data-enemy-release-phase="silhouette"] .enemy .pokemon-release-flash,
.arena[data-enemy-release-phase="fade"] .enemy .pokemon-release-flash {
  animation: pokemon-release-flash 140ms steps(4, end) both;
}

@keyframes pokemon-release-pop {
  0% {
    opacity: 1;
    transform: scale(0.06);
  }

  42% {
    opacity: 1;
    transform: scale(0.52);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes player-pokeball-throw {
  0% {
    opacity: 1;
    transform: translate(-110px, -38px) rotate(0deg);
  }

  20% {
    transform: translate(-82px, -67px) rotate(180deg);
  }

  40% {
    transform: translate(-55px, -84px) rotate(360deg);
  }

  58% {
    transform: translate(-32px, -88px) rotate(540deg);
  }

  78% {
    transform: translate(-12px, -55px) rotate(720deg);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(900deg);
  }
}

@keyframes player-pokeball-closed-flash {
  0%, 24.99% {
    opacity: 1;
    filter: brightness(1);
  }

  25%, 49.99% {
    opacity: 1;
    filter: brightness(2.4);
  }

  50%, 100% {
    opacity: 0;
    filter: brightness(3);
  }
}

@keyframes player-pokeball-top-open {
  0%, 24.99% { transform: translateY(0); filter: brightness(1.8); }
  25%, 49.99% { transform: translateY(-4px); filter: brightness(2.4); }
  50%, 74.99% { transform: translateY(-8px); filter: brightness(3); }
  75%, 100% { opacity: 0; transform: translateY(-12px); filter: brightness(3); }
}

@keyframes player-pokeball-bottom-open {
  0%, 24.99% { transform: translateY(0); filter: brightness(1.8); }
  25%, 49.99% { transform: translateY(4px); filter: brightness(2.4); }
  50%, 74.99% { transform: translateY(8px); filter: brightness(3); }
  75%, 100% { opacity: 0; transform: translateY(12px); filter: brightness(3); }
}

@keyframes enemy-pokeball-throw {
  0% {
    opacity: 1;
    transform: translate(62px, -118px) rotate(0deg);
  }

  28% {
    transform: translate(48px, -94px) rotate(-180deg);
  }

  55% {
    transform: translate(30px, -62px) rotate(-360deg);
  }

  80% {
    transform: translate(11px, -24px) rotate(-540deg);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(-630deg);
  }
}

@keyframes enemy-pokeball-open-first {
  0% {
    opacity: 1;
    transform: translateY(-1px) scale(1);
    filter: brightness(1.1);
  }

  100% {
    opacity: 1;
    transform: translateY(-2px) scale(1.08);
    filter: brightness(1.7);
  }
}

@keyframes player-pokeball-open {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
  }

  55% {
    opacity: 1;
    transform: scale(1.12);
    filter: brightness(2.3);
  }

  100% {
    opacity: 0;
    transform: scale(0.72);
    filter: brightness(3);
  }
}

@keyframes enemy-pokeball-open {
  0% {
    opacity: 1;
    transform: translateY(-4px) scale(1.08);
    filter: brightness(1.7);
  }

  100% {
    opacity: 0;
    transform: translateY(-4px) scale(1.22);
    filter: brightness(3);
  }
}

@keyframes pokemon-release-flash {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.28) rotate(0deg);
  }

  42% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.45) rotate(45deg);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.1) rotate(90deg);
  }
}

@keyframes pokemon-release-fade {
  0% {
    opacity: 1;
  }

  35% {
    opacity: 0.8;
  }

  68% {
    opacity: 0.45;
  }

  100% {
    opacity: 0;
  }
}

@keyframes pokemon-release-clarify {
  0% {
    opacity: 0.15;
    filter: brightness(1.24) saturate(0.58);
  }

  35% {
    opacity: 0.48;
    filter: brightness(1.14) saturate(0.76);
  }

  68% {
    opacity: 0.82;
    filter: brightness(1.05) saturate(0.92);
  }

  100% {
    opacity: 1;
    filter: none;
  }
}

@keyframes pokemon-release-ray {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(var(--ray-r)) scaleX(0.35);
  }

  12% {
    opacity: 1;
  }

  68% {
    opacity: 1;
    transform: translate(var(--ray-x), var(--ray-y)) rotate(var(--ray-r)) scaleX(1);
  }

  100% {
    opacity: 0;
    transform: translate(var(--ray-x), var(--ray-y)) rotate(var(--ray-r)) scaleX(1);
  }
}

@keyframes pokemon-recall-vanish {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: none;
  }

  45% {
    opacity: 0.62;
    transform: scale(0.72);
    filter: brightness(1.35) saturate(0.62);
  }

  100% {
    opacity: 0;
    transform: scale(0.12);
    filter: brightness(1.8) saturate(0.3);
  }
}

.is-battle-intro .pokeball-vs {
  visibility: hidden;
}

.is-battle-intro .message-box {
  visibility: visible;
}

.is-battle-intro .battle-command-overlay {
  display: block;
  visibility: visible;
}

.is-battle-intro .message-box[data-opened-command="text"] .battle-command-overlay {
  display: none;
}

.is-battle-intro .message-box[data-opened-command="text"] .battle-text-menu,
.is-battle-intro .message-box[data-opened-command="text"] .battle-text-line,
.is-battle-outro .message-box[data-opened-command="text"] .battle-text-menu,
.is-battle-outro .message-box[data-opened-command="text"] .battle-text-line {
  display: block;
  visibility: visible;
}

.is-battle-intro .battle-command-prompt,
.is-battle-intro .battle-command-menu,
.is-battle-intro .battle-fight-menu,
.is-battle-intro .fight-move-cursor,
.is-battle-intro .fight-move-list,
.is-battle-intro .fight-back-button,
.is-battle-intro .fight-move-details,
.is-battle-intro .message-box:not([data-opened-command="text"]) .battle-text-menu,
.is-battle-intro .message-box:not([data-opened-command="text"]) .battle-text-line {
  visibility: hidden;
}

.mini-paint-animation {
  display: none;
}

/* new crop.psd: 1280x720 document, centered 1081x720 game composition. */
body {
  min-width: 1081px;
  background: #f7f7f7;
}

.app-shell {
  grid-template-columns: 1081px;
  min-height: 720px;
  padding: 0 0 0 calc(50% - 540px);
}

.battle-stage {
  grid-template-rows: 504px 216px;
  width: 1081px;
  height: 720px;
  overflow: hidden;
}

.top-bar,
.info-overlay,
.pokeball-vs {
  display: none;
}

.pokemon-count {
  display: block;
  opacity: 0;
  visibility: hidden;
  transition:
    transform 260ms steps(8, end),
    opacity 120ms steps(2, end),
    visibility 0ms linear 260ms;
  will-change: transform, opacity;
}

.player-count {
  left: 891px;
  top: 277px;
  width: 147px;
  height: 44px;
  transform: translateX(180px);
}

.opponent-count {
  left: 59px;
  top: 206px;
  width: 146px;
  height: 44px;
  transform: translateX(-180px);
}

.battle-stage[data-count-player="enter"] .player-count,
.battle-stage[data-count-player="hold"] .player-count,
.battle-stage[data-count-enemy="enter"] .opponent-count,
.battle-stage[data-count-enemy="hold"] .opponent-count {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition:
    transform 260ms steps(8, end),
    opacity 120ms steps(2, end),
    visibility 0ms;
}

.battle-stage[data-count-player="exit"] .player-count {
  opacity: 0;
  visibility: visible;
  transform: translateX(180px);
  transition:
    transform 260ms steps(8, end),
    opacity 160ms steps(2, end) 100ms,
    visibility 0ms;
}

.battle-stage[data-count-enemy="exit"] .opponent-count {
  opacity: 0;
  visibility: visible;
  transform: translateX(-180px);
  transition:
    transform 260ms steps(8, end),
    opacity 160ms steps(2, end) 100ms,
    visibility 0ms;
}

.arena {
  top: 0;
  width: 1081px;
  min-height: 504px;
  height: 504px;
}

.battle-base {
  display: block;
  transition: transform 1040ms steps(52, end);
  will-change: transform;
}

.opponent-base {
  left: 503px;
  top: 206px;
  width: 578px;
  height: 154px;
}

.player-base {
  left: 17px;
  top: 436px;
  width: 540px;
  height: 68px;
}

.arena[data-intro-phase="field-enter"] .opponent-base {
  transform: translateX(-1200px);
  transition: none;
}

.arena[data-intro-phase="field-enter"] .player-base {
  transform: translateX(1100px);
  transition: none;
}

.arena[data-move-animation="psychic"] .battle-base,
.arena[data-move-animation="thunder"] .battle-base,
.arena[data-move-animation="blizzard"] .battle-base {
  opacity: 0;
}

.battle-background,
.move-animation-canvas,
.firered-background-canvas {
  left: 0;
  top: 0;
  width: 1081px;
  height: 504px;
}

.enemy .status-card {
  left: 59px;
  top: 69px;
  width: 449px;
  height: 131px;
}

.player .status-card {
  left: 568px;
  top: 332px;
  width: 470px;
  height: 166px;
}

.arena[data-player-release-phase="idle"] .combatant.player:not(.is-move-animated):not(.is-fainting):not(.is-fainted) > .sprite,
.arena[data-player-release-phase="idle"] .combatant.player:not(.is-move-animated):not(.is-fainting):not(.is-fainted) > .status-card {
  animation: player-idle-bounce 480ms steps(1, end) infinite;
}

.selection-screen {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 80;
  width: 1081px;
  height: 722px;
  overflow: hidden;
  background: #fff;
}

.selection-screen[hidden] {
  display: none;
}

.selection-screen img {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  user-select: none;
}

.selection-screen-bg,
.selection-box-bg,
.selection-picker,
.selection-name,
.selection-selected-boxes,
.selection-icon-button,
.selection-chosen-icon,
.selection-party-label,
.selection-b-button,
.selection-start-button {
  position: absolute;
}

.selection-screen-bg {
  left: 0;
  top: 0;
  width: 1081px;
  height: 722px;
  pointer-events: none;
}

.selection-box-bg {
  left: 320px;
  top: 7px;
  width: 619px;
  height: 110px;
  pointer-events: none;
}

.selection-icon-list,
.selection-chosen-list {
  position: absolute;
  inset: 0;
}

.selection-chosen-list {
  pointer-events: none;
}

.selection-icon-button,
.selection-b-button,
.selection-start-button {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
  cursor: pointer;
}

.selection-icon-button.is-selected {
  opacity: 0.45;
}

.selection-icon-button img,
.selection-b-button img,
.selection-start-button img,
.selection-chosen-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
}

.selection-picker {
  z-index: 5;
  width: 43px;
  height: 46px;
  pointer-events: none;
}

.selection-name {
  z-index: 4;
  pointer-events: none;
}

.selection-selected-boxes {
  z-index: 1;
  left: 44px;
  top: 135px;
  width: 180px;
  height: 576px;
  pointer-events: none;
}

.selection-chosen-icon {
  z-index: 2;
  object-fit: contain;
}

.selection-party-label {
  left: 44px;
  top: 88px;
  z-index: 3;
  width: 174px;
  height: 37px;
  pointer-events: none;
}

.selection-b-button {
  left: 229px;
  top: 676px;
  z-index: 3;
  width: 92px;
  height: 35px;
}

.selection-start-button {
  left: 942px;
  top: 679px;
  z-index: 3;
  width: 130px;
  height: 33px;
}

.title-screen {
  position: absolute;
  inset: 0;
  z-index: 100;
  width: 1080px;
  height: 720px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
  outline: 0;
  text-shadow: none;
}

.title-screen[hidden] {
  display: none;
}

.title-screen-canvas {
  display: block;
  width: 1080px;
  height: 720px;
  image-rendering: auto;
  pointer-events: none;
  user-select: none;
}

.prof-intro-screen {
  position: absolute;
  inset: 0;
  z-index: 90;
  width: 1081px;
  height: 720px;
  overflow: hidden;
  background: #e4f1ee;
  cursor: pointer;
  text-shadow: none;
  outline: 0;
}

.prof-intro-screen[hidden] {
  display: none;
}

.prof-intro-screen img {
  position: absolute;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  user-select: none;
}

.prof-intro-background {
  left: 0;
  top: -50px;
  width: 1081px;
  height: 721px;
}

.prof-intro-riki {
  left: 437px;
  top: 26px;
  width: 204px;
  height: 443px;
}

.prof-intro-text-menu {
  left: 0;
  top: 504px;
  width: 1079px;
  height: 216px;
}

.prof-intro-message {
  position: absolute;
  z-index: 2;
  left: 56px;
  display: none;
  width: 970px;
  color: var(--game-text-dark);
  font-family: var(--game-font);
  font-size: 73px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.4px;
  white-space: nowrap;
  text-shadow: var(--game-text-dark-shadow);
  transform: scaleX(1.04);
  transform-origin: left top;
  pointer-events: none;
}

.prof-intro-screen[data-message="0"] [data-prof-message="0"],
.prof-intro-screen[data-message="1"] [data-prof-message="1"],
.prof-intro-screen[data-message="2"] [data-prof-message="2"],
.prof-intro-screen[data-message="3"] [data-prof-message="3"],
.prof-intro-screen[data-message="4"] [data-prof-message="4"],
.prof-intro-screen[data-message="5"] [data-prof-message="5"] {
  display: block;
}

.prof-intro-message-1 {
  top: 539px;
  transform: scaleX(1.0387);
}

.prof-intro-message-2 {
  top: 542px;
  transform: scaleX(1.0472);
}

.prof-intro-message-3 {
  top: 539px;
}

.prof-intro-message-3 span,
.prof-intro-message-4 span {
  position: absolute;
  left: 0;
  display: block;
}

.prof-intro-message-3 span:first-child,
.prof-intro-message-4 span:first-child {
  top: 0;
}

.prof-intro-message-3 span:nth-child(2),
.prof-intro-message-4 span:nth-child(2) {
  top: 70px;
}

.prof-intro-message-4 {
  top: 538px;
}

.prof-intro-message-4 span:first-child {
  transform: scaleX(0.9989);
  transform-origin: left top;
}

.prof-intro-message-4 span:nth-child(2) {
  top: 71px;
  letter-spacing: -0.32px;
}

.prof-intro-message-5 {
  top: 539px;
  transform: scaleX(1.0377);
}

.prof-intro-message-6 {
  top: 539px;
}

.prof-intro-clicker {
  left: 974px;
  top: 646px;
  z-index: 3;
  width: 56px;
  height: 34px;
  animation: prof-intro-clicker-bounce 560ms steps(1, end) infinite;
}

.battle-outro-clicker {
  position: absolute;
  left: 974px;
  top: 646px;
  z-index: 25;
  display: block;
  width: 56px;
  height: 34px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  user-select: none;
  animation: prof-intro-clicker-bounce 560ms steps(1, end) infinite;
}

.battle-outro-clicker[hidden] {
  display: none;
}

.battle-outro-reset {
  position: absolute;
  left: 945px;
  top: 646px;
  z-index: 26;
  display: block;
  width: 92px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
  cursor: pointer;
}

.battle-outro-reset[hidden] {
  display: none;
}

.battle-outro-reset img {
  display: block;
  width: 92px;
  height: 34px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  user-select: none;
}

.hall-of-fame-screen {
  position: absolute;
  inset: 0;
  z-index: 110;
  width: 1081px;
  height: 720px;
  overflow: hidden;
  background: #4d566d;
  text-shadow: none;
}

.hall-of-fame-screen[hidden] {
  display: none;
}

.hall-of-fame-artboard {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 1065px;
  height: 708px;
  transform: scale(1.0150234742, 1.0169491525);
  transform-origin: left top;
}

.hall-of-fame-background,
.hall-of-fame-welcome,
.hall-of-fame-pokemon {
  position: absolute;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  user-select: none;
}

.hall-of-fame-background {
  inset: 0;
  width: 1065px;
  height: 708px;
}

.hall-of-fame-team {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hall-of-fame-slot {
  position: absolute;
  top: 127px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 327px;
  height: 358px;
  opacity: 0;
  will-change: opacity, transform;
}

.hall-of-fame-slot-1 {
  left: 0;
}

.hall-of-fame-slot-2 {
  left: 378px;
}

.hall-of-fame-slot-3 {
  left: 704px;
}

.hall-of-fame-pokemon {
  position: static;
  width: auto;
  height: auto;
}

.hall-of-fame-welcome {
  left: 200px;
  top: 616px;
  width: 662px;
  height: 53px;
  opacity: 0;
}

.hall-of-fame-confetti {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: 1081px;
  height: 720px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
}

.hall-of-fame-reset {
  position: absolute;
  left: 965px;
  top: 646px;
  z-index: 4;
  display: block;
  width: 92px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
  cursor: pointer;
}

.hall-of-fame-reset[hidden] {
  display: none;
}

.hall-of-fame-reset img {
  display: block;
  width: 92px;
  height: 34px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  user-select: none;
}

@keyframes prof-intro-clicker-bounce {
  0%,
  49.99%,
  100% {
    transform: translateY(0);
  }

  50%,
  99.99% {
    transform: translateY(8px);
  }
}

.enemy-hud .hud-name,
.player-hud .hud-name,
.hud-level-part {
  font-size: 46px;
}

.enemy-hud .hud-name {
  left: 33px;
  top: 11px;
}

.player-hud .hud-name {
  left: 69px;
  top: 10px;
}

.hud-name {
  transform: scale(var(--hud-name-scale, 1.2026), 1.2026);
}

.enemy-hud .hud-level-parts {
  left: 307px;
  top: 4px;
  width: 110px;
}

.player-hud .hud-level-parts {
  left: 347px;
  top: 4px;
  width: 110px;
}

.hud-level-parts {
  position: absolute;
  height: 46px;
  color: var(--game-text);
  text-shadow: var(--game-text-shadow);
  white-space: nowrap;
}

.hud-level-part {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  line-height: 1;
  transform-origin: left top;
}

.hud-level-l {
  transform: scale(0.795, 1.391);
}

.hud-level-l-copy {
  left: 2px;
}

.hud-level-v {
  left: 16px;
  top: 4px;
  transform: scale(1.214, 1.286);
}

.hud-level-number {
  left: 39px;
  top: 5px;
  transform: scale(1.193, 1.255);
}

.enemy-hud .hp-track {
  left: 176px;
  top: 76px;
  width: 214px;
  height: 15px;
}

.player-hud .hp-track {
  left: 216px;
  top: 74px;
  width: 217px;
  height: 13px;
}

.enemy-hud .hud-status-icon {
  left: 33px;
  top: 75px;
}

.player-hud .hud-status-icon {
  left: 69px;
  top: 72px;
}

.message-box {
  left: 2px;
  top: 0;
  width: 1079px;
  min-height: 216px;
  height: 216px;
}

.battle-command-overlay,
.battle-text-menu,
.battle-fight-menu {
  width: 1079px;
  height: 216px;
}

.battle-command-menu {
  left: 543px;
  top: 0;
  width: 536px;
  height: 216px;
}

.battle-command-bar {
  width: 536px;
  height: 216px;
}

.battle-command-icon {
  width: 28px;
  height: 43px;
}

.battle-command-hitbox {
  display: block;
  width: 220px;
  height: 73px;
  font-size: 73px;
  font-weight: 400;
  line-height: 1;
  text-align: left;
  letter-spacing: -0.4px;
}

.battle-command-hitbox[data-command="fight"] {
  left: 80px;
  top: 28px;
}

.battle-command-hitbox[data-command="bag"] {
  left: 348px;
  top: 28px;
}

.battle-command-hitbox[data-command="pokedex"] {
  left: 80px;
  top: 102px;
}

.battle-command-hitbox[data-command="reset"] {
  left: 348px;
  top: 102px;
}

.battle-command-prompt {
  left: 55px;
  top: 35px;
  width: 450px;
  height: 110px;
  font-size: 73px;
  letter-spacing: -0.4px;
}

.battle-command-prompt-name-line,
.battle-command-prompt-do-line {
  top: 61px;
}

.fight-move-cursor {
  width: 28px;
  height: 43px;
}

.fight-move-list {
  left: 62px;
  top: 43px;
  width: 620px;
  height: 126px;
  font-size: 62px;
  letter-spacing: -0.875px;
}

.fight-move-button {
  display: block;
  width: 280px;
  height: 62px;
  line-height: 1;
}

.fight-move-button:nth-child(2) {
  left: 331px;
}

.fight-move-button:nth-child(3) {
  top: 83px;
}

.fight-move-button:nth-child(4) {
  left: 331px;
  top: 81px;
}

.fight-move-details {
  left: 751px;
  top: 0;
  width: 318px;
  height: 200px;
  font-size: 62px;
  letter-spacing: -0.875px;
}

.fight-move-pp {
  left: 0;
  top: 35px;
  width: 318px;
  max-width: none !important;
  overflow: visible !important;
}

.fight-move-type-label {
  left: 0;
  top: 108px;
}

.fight-move-type {
  left: 132px;
  top: 136px;
  width: 75px;
  height: 33px;
}

.fight-move-type img {
  width: 75px;
  height: 33px;
}

.fight-move-category {
  left: 173px;
  top: 62px;
  width: 79px;
  height: 31px;
}

.fight-back-button {
  left: 965px;
  top: 136px;
  width: 79px;
  height: 33px;
  background-size: 79px 33px;
}

.battle-text-line {
  left: 54px;
  top: 34px;
  width: 960px;
  height: 128px;
  font-size: 73px;
  line-height: 1;
  letter-spacing: -0.4px;
}

.battle-text-line span:nth-child(2) {
  top: 70px;
}

.battle-text-line[data-layout="user-faint"] span:nth-child(2),
.battle-text-line[data-layout="user-miss"] span:nth-child(2) {
  top: 70px;
}

.battle-text-line[data-layout="foe-miss"] span:nth-child(2) {
  top: 68px;
  transform: scaleX(1.0432);
  transform-origin: left top;
}

.battle-text-line[data-layout="foe-faint"] span:nth-child(2) {
  top: 70px;
}

.battle-text-line[data-layout="recovery"] span:nth-child(2) {
  top: 70px;
}

.battle-text-line[data-layout="drain"] span:nth-child(2) {
  top: 89px;
}

.battle-text-line[data-layout="foe-miss"] {
  top: 36px;
}

.battle-text-line[data-layout="foe-miss"] span:first-child {
  transform: scaleX(1.0532);
  transform-origin: left top;
}

.battle-text-line[data-layout="effectiveness"] {
  top: 24px;
}

.battle-text-line[data-layout="critical"] {
  top: 32px;
}

.battle-text-line[data-layout="failed"] {
  top: 34px;
}

.battle-text-line[data-layout="drain"] {
  top: 15px;
}

.battle-text-line[data-layout="recovery"] {
  top: 35px;
}

.battle-text-line[data-layout="move"],
.battle-text-line[data-layout="foe-faint"],
.battle-text-line[data-layout="user-faint"],
.battle-text-line[data-layout="user-miss"],
.battle-text-line[data-layout="poison"],
.battle-text-line[data-layout="poison-damage"],
.battle-text-line[data-layout="stat-change"],
.battle-text-line[data-layout="single"] {
  top: 34px;
}

.battle-text-line[data-layout="outro-player-1"],
.battle-text-line[data-layout="outro-enemy-1"],
.battle-text-line[data-layout="outro-enemy-2"] {
  top: 34px;
  transform-origin: left top;
}

.battle-text-line[data-layout="outro-player-1"] {
  transform: scaleX(1.03946);
}

.battle-text-line[data-layout="outro-enemy-1"] {
  transform: scaleX(1.04078);
}

.battle-text-line[data-layout="outro-enemy-2"] {
  transform: scaleX(1.03942);
}

.battle-text-line[data-layout="outro-player-2"] {
  top: 33px;
  transform: scaleX(1.0396);
  transform-origin: left top;
}

.battle-text-line[data-layout="outro-player-2"] span:nth-child(2) {
  top: 70px;
}

.battle-text-line[data-layout="outro-player-3"] {
  top: 33px;
  transform: scaleX(1.04024);
  transform-origin: left top;
}

.battle-text-line[data-layout="outro-player-3"] span:nth-child(2) {
  top: 70px;
}

.battle-text-line[data-layout="outro-player-4"] {
  top: 24px;
  transform: scaleX(1.0394);
  transform-origin: left top;
}

.battle-text-line[data-layout="outro-player-4"] span:nth-child(2) {
  top: 80px;
}

.battle-outro-website {
  position: relative;
  font-weight: inherit;
  color: #2a75bb;
  text-decoration: underline;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
}


.riki-trainer {
  left: 722px;
  top: 10px;
  width: 140px;
  height: 300px;
}

.rikidex-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: none;
  width: 1081px;
  height: 720px;
  overflow: hidden;
  background: transparent;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.rikidex-overlay.is-open {
  display: block;
}

.rikidex-page {
  position: absolute;
  inset: 0;
  display: none;
  width: 1081px;
  height: 720px;
}

.rikidex-overlay[data-page="1"] .rikidex-page-1,
.rikidex-overlay[data-page="2"] .rikidex-page-2 {
  display: block;
}

.rikidex-page-bg,
.rikidex-list-name,
.rikidex-picker,
.rikidex-detail-name,
.rikidex-detail-sprite,
.rikidex-type-icon,
.rikidex-dex-description,
.rikidex-page-flip,
.rikidex-back-button {
  position: absolute;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  user-select: none;
}

.rikidex-page-1 .rikidex-page-bg {
  left: 0;
  top: 0;
  width: 1081px;
  height: 721px;
}

.rikidex-page-2 .rikidex-page-bg {
  left: -1px;
  top: 0;
  width: 1082px;
  height: 721px;
}

.rikidex-list,
.rikidex-detail {
  position: absolute;
  inset: 0;
}

.rikidex-list-name {
  left: var(--rikidex-x);
  top: var(--rikidex-y);
  width: var(--rikidex-width);
  height: var(--rikidex-height);
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.rikidex-list-name img,
.rikidex-detail-name,
.rikidex-detail-sprite,
.rikidex-type-icon {
  width: 100%;
  height: 100%;
}

.rikidex-picker {
  left: var(--rikidex-picker-x, 95px);
  top: var(--rikidex-picker-y, 93px);
  z-index: 2;
  width: 27px;
  height: 45px;
  pointer-events: none;
}

.rikidex-detail-name {
  left: var(--rikidex-name-x);
  top: var(--rikidex-name-y);
  width: var(--rikidex-name-width);
  height: var(--rikidex-name-height);
}

.rikidex-detail-sprite {
  left: var(--rikidex-sprite-x);
  top: var(--rikidex-sprite-y);
  width: var(--rikidex-sprite-width);
  height: var(--rikidex-sprite-height);
}

.rikidex-type-icon {
  left: var(--rikidex-type-x);
  top: var(--rikidex-type-y);
  width: var(--rikidex-type-width);
  height: var(--rikidex-type-height);
}

.rikidex-dex-description {
  left: var(--rikidex-description-x);
  top: var(--rikidex-description-y);
  width: var(--rikidex-description-width);
  height: var(--rikidex-description-height);
}

.rikidex-page-flip {
  left: 1007px;
  top: 602px;
  z-index: 3;
  width: 27px;
  height: 45px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent url("assets/rikidex/new/page-flip.png") 0 0 / 27px 45px no-repeat;
  color: transparent;
  text-shadow: none;
  cursor: pointer;
}

.rikidex-back-button {
  left: 972px;
  top: 683px;
  z-index: 3;
  width: 79px;
  height: 33px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent url("assets/rikidex/new/back-button.png") 0 0 / 79px 33px no-repeat;
  color: transparent;
  text-shadow: none;
}

/* ---------------------------------------------------------------
 * Mobile-only Riktendo Game Boy overlay.
 * Activated by inline script (adds html.mobile + device-width viewport).
 * Overlay image 883x1920 is fit into the viewport with `contain`.
 * Transparent screen cutout in the image occupies:
 *   x: 2.04% – 97.85%  (width 95.81%)
 *   y: 13.70% – 43.96% (height 30.26%)
 * The 1081x720 game stage is scaled to fit that cutout.
 * --------------------------------------------------------------- */
html.mobile,
html.mobile body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #2e2d26;
  touch-action: manipulation;
  -ms-touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  -webkit-user-select: none;
  user-select: none;
}

html.mobile body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("assets/riktendo-overlay.png") no-repeat center center;
  background-size: 100% auto;
  z-index: 10;
  pointer-events: none;
}

html.mobile body::after {
  content: "";
  position: fixed;
  left: var(--m-cutout-left, 0);
  top: var(--m-cutout-top, 0);
  width: var(--m-cutout-width, 0);
  height: var(--m-cutout-height, 0);
  background: #2e2d26;
  z-index: 0;
  pointer-events: none;
}

html.mobile .app-shell {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  display: block;
  grid-template-columns: none;
  gap: 0;
  min-height: 0;
  z-index: 1;
}

html.mobile .battle-stage {
  position: fixed;
  left: var(--m-stage-left, 0);
  top: var(--m-stage-top, 0);
  width: 1081px;
  height: 720px;
  transform-origin: top left;
  transform: translate(var(--shake-x, 0px), var(--shake-y, 0px)) scale(var(--m-scale, 1));
  overflow: hidden;
  z-index: 5;
}


html.mobile .command-panel {
  display: none;
}

#mobile-gamepad {
  display: none;
}

html.mobile #mobile-gamepad {
  display: block;
  position: fixed;
  left: 0;
  top: var(--m-overlay-top, 0);
  width: var(--m-overlay-width, 100vw);
  height: var(--m-overlay-height, 100vh);
  z-index: 20;
  pointer-events: none;
  touch-action: none;
}

html.mobile .mp-btn {
  position: absolute;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  user-select: none;
}

/* Positions are % of the overlay image (883x1920). */
html.mobile .mp-dpad  { left: 6%;  top: 53%;   width: 34%; height: 18%; }
html.mobile .mp-b     { left: 55%; top: 57.5%; width: 15%; height: 8%; }
html.mobile .mp-a     { left: 69%; top: 54.5%; width: 16%; height: 8.5%; }
html.mobile .mp-select{ left: 36%; top: 68.5%; width: 13%; height: 5%; }
html.mobile .mp-start { left: 49%; top: 68.5%; width: 13%; height: 5%; }

/* ---------------------------------------------------------------
 * Landscape mobile: hide the Game Boy skin, let the game fill the
 * screen (contain), and show a minimal floating touch gamepad.
 * --------------------------------------------------------------- */
html.mobile.mobile-landscape body::before,
html.mobile.mobile-landscape body::after {
  display: none;
}

html.mobile.mobile-landscape .battle-stage {
  left: var(--m-stage-left, 0);
  top: var(--m-stage-top, 0);
}

/* Reposition the gamepad to cover the full viewport with visible buttons. */
html.mobile.mobile-landscape #mobile-gamepad {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

html.mobile.mobile-landscape .mp-btn {
  background: rgba(0, 0, 0, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

html.mobile.mobile-landscape .mp-dpad {
  left: 2vh;
  top: auto;
  bottom: 2vh;
  width: 22vh;
  height: 22vh;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

html.mobile.mobile-landscape .mp-a {
  left: auto;
  right: 3vh;
  top: auto;
  bottom: 10vh;
  width: 9vh;
  height: 9vh;
}

html.mobile.mobile-landscape .mp-b {
  left: auto;
  right: 13vh;
  top: auto;
  bottom: 4vh;
  width: 9vh;
  height: 9vh;
}

html.mobile.mobile-landscape .mp-start {
  left: auto;
  right: 3vh;
  top: 2vh;
  bottom: auto;
  width: 8vh;
  height: 4vh;
  border-radius: 2vh;
}

html.mobile.mobile-landscape .mp-select {
  left: auto;
  right: 13vh;
  top: 2vh;
  bottom: auto;
  width: 8vh;
  height: 4vh;
  border-radius: 2vh;
}