html,
body {
  margin: 0;
  min-height: 100%;
  background: #000;
}

.site-boot {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: #dfe6f2;
  background: #000;
  font: 13px/1.5 ui-monospace, monospace;
}

.site-boot__dots {
  display: inline-block;
  width: 3ch;
  overflow: hidden;
  vertical-align: bottom;
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
  animation: site-boot-dots 1.2s step-end infinite;
}

#runtime-host .page-boot-runner {
  animation: page-boot-run 1.25s steps(9, end) infinite;
}

@keyframes page-boot-run {
  to { left: 100%; }
}

@keyframes site-boot-dots {
  0% { clip-path: inset(0 100% 0 0); }
  25% { clip-path: inset(0 66.666% 0 0); }
  50% { clip-path: inset(0 33.333% 0 0); }
  75%, 100% { clip-path: inset(0); }
}

@media (prefers-reduced-motion: reduce) {
  .site-boot__dots {
    animation: none;
    clip-path: none;
  }
}

/*
 * The game engine remains the owner of one canonical rendering stack. It is
 * kept in the game's page, at a stable off-screen size, and sampled by the
 * site presentation into whichever physical screen is currently visible.
 */
#runtime-host {
  position: fixed;
  z-index: -1;
  top: 0;
  left: -12000px;
  width: 960px;
  height: 640px;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint size style;
}

#runtime-host,
#runtime-host * {
  box-sizing: border-box;
}

#runtime-host [hidden] {
  display: none !important;
}

/* The marketing site normally supplies these shared primitives through its
 * presentation bundle. The packaged handheld deliberately omits that bundle,
 * so its real DOM account/session controls need the same bitmap font and ROM
 * window frame here. Keeping the rules scoped to the canonical runtime avoids
 * leaking the game's UI styles into the website. */
#runtime-host .game-text-host {
  font-size: 0 !important;
  letter-spacing: 0 !important;
  line-height: 0 !important;
  text-shadow: none !important;
  text-transform: none;
}

#runtime-host .game-text-content {
  display: inline-block;
  max-width: 100%;
  font-size: 0;
  line-height: 16px;
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  zoom: var(--gba-scale, 1);
}

#runtime-host .game-word {
  display: inline-block;
  height: 16px;
  white-space: nowrap;
}

#runtime-host .game-glyph {
  display: inline-block;
  height: 16px;
  overflow: hidden;
  background-image: var(--game-font-atlas);
  background-repeat: no-repeat;
  image-rendering: pixelated;
  vertical-align: top;
}

#runtime-host .game-window {
  border: var(--gba-frame, 8px) solid transparent;
  border-image-source: var(--game-window-frame);
  border-image-slice: 8 fill;
  border-image-width: var(--gba-frame, 8px);
  border-image-repeat: stretch;
  background: #fff;
  background-clip: padding-box;
  box-shadow: none;
  color: #383838;
  text-shadow: none;
}

#runtime-host .page,
#runtime-host .console {
  width: 960px;
  margin: 0;
  padding: 0;
}

#runtime-host .screen-bezel {
  position: relative;
  width: 960px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #000;
}

#runtime-host .screen-bezel.widescreen-layout {
  /* The presentation reports its real aspect on every wide draw. The 13:6
   * fallback is a 19.5:9 iPhone in landscape, including the island area. */
  aspect-ratio: var(--bridge-wide-aspect, 13 / 6);
}

#runtime-host .screen-bezel.widescreen-layout.cinematic-wide {
  aspect-ratio: var(--bridge-wide-aspect, 13 / 6);
}

#runtime-host #screen,
#runtime-host #screen-backdrop,
#runtime-host #battle-pokemon,
#runtime-host #voxel-screen,
#runtime-host #voxel-billboards,
#runtime-host #voxel-transition,
#runtime-host #voxel-ui,
#runtime-host #voxel-edge-ui,
#runtime-host #voxel-fade,
#runtime-host .voxel-loading {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

#runtime-host #screen {
  z-index: 3;
  display: block;
  background: #000;
  image-rendering: pixelated;
}

#runtime-host #screen-backdrop,
#runtime-host #battle-pokemon,
#runtime-host #voxel-screen,
#runtime-host #voxel-billboards,
#runtime-host #voxel-transition,
#runtime-host #voxel-ui,
#runtime-host #voxel-edge-ui,
#runtime-host #voxel-fade {
  display: none;
}

#runtime-host #screen-backdrop { z-index: 0; }
#runtime-host #voxel-screen { z-index: 1; background: #12161d; }
#runtime-host #battle-pokemon { z-index: 3; image-rendering: pixelated; pointer-events: none; }
#runtime-host #voxel-billboards,
#runtime-host #voxel-transition,
#runtime-host #voxel-ui,
#runtime-host #voxel-edge-ui {
  image-rendering: pixelated;
}
#runtime-host #voxel-billboards { z-index: 2; }
#runtime-host #voxel-transition { z-index: 3; }
#runtime-host #voxel-ui { z-index: 4; }
#runtime-host #voxel-edge-ui { z-index: 5; }
#runtime-host #voxel-fade { z-index: 6; background: #000; opacity: 0; }
/* The native START menu occupies the right side of the viewport. Keep the
 * authenticated wallet's two useful figures opposite it, using the same ROM
 * window and bitmap text scale in direct, TV, and SP presentations. */
#runtime-host .start-menu-balances {
  position: absolute;
  z-index: 8;
  top: 0;
  left: 0;
  display: grid;
  align-content: center;
  width: calc(88px * var(--gba-scale, 1));
  min-height: calc(40px * var(--gba-scale, 1));
  padding: calc(3px * var(--gba-scale, 1)) calc(9px * var(--gba-scale, 1));
  pointer-events: none;
}

#runtime-host .start-menu-balances p {
  display: flex;
  align-items: center;
  min-width: 0;
  height: calc(16px * var(--gba-scale, 1));
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
}

#runtime-host .screen-bezel.voxel-active #voxel-screen,
#runtime-host .screen-bezel.voxel-active #voxel-billboards,
#runtime-host .screen-bezel.voxel-active #voxel-ui,
#runtime-host .screen-bezel.voxel-active #voxel-fade,
#runtime-host .screen-bezel.widescreen-layout.two-d-field-wide #voxel-ui,
#runtime-host .screen-bezel.widescreen-layout.battle-native-wide #screen-backdrop {
  display: block;
}

#runtime-host .screen-bezel.animated-native-battle #battle-pokemon,
#runtime-host .screen-bezel.animated-native-battle #voxel-ui {
  display: block;
}

/* Battles keep their native 3:2 composition. A softened copy fills only the
 * side wings instead of widening the battle camera or stretching its UI. */
#runtime-host .screen-bezel.widescreen-layout.battle-native-wide #screen-backdrop {
  inset: 0;
  width: 100%;
  height: 100%;
  filter: blur(14px);
  clip-path: inset(0);
  image-rendering: auto;
}

#runtime-host .screen-bezel.widescreen-layout.battle-native-wide #screen,
#runtime-host .screen-bezel.widescreen-layout.battle-native-wide #battle-pokemon,
#runtime-host .screen-bezel.widescreen-layout.battle-native-wide #voxel-screen,
#runtime-host .screen-bezel.widescreen-layout.battle-native-wide #voxel-billboards,
#runtime-host .screen-bezel.widescreen-layout.battle-native-wide #voxel-transition,
#runtime-host .screen-bezel.widescreen-layout.battle-native-wide #voxel-ui,
#runtime-host .screen-bezel.widescreen-layout.battle-native-wide #voxel-edge-ui,
#runtime-host .screen-bezel.widescreen-layout.battle-native-wide #voxel-fade {
  top: 0;
  right: auto;
  bottom: 0;
  left: 50%;
  width: auto;
  height: 100%;
  aspect-ratio: 3 / 2;
  transform: translateX(-50%);
}

#runtime-host .screen-bezel.widescreen-layout.voxel-active #voxel-edge-ui,
#runtime-host .screen-bezel.voxel-active.battle-transition-active #voxel-transition {
  display: block;
}

#runtime-host .screen-bezel.voxel-active #screen {
  visibility: hidden;
}

#runtime-host .screen-bezel.widescreen-layout.voxel-active #voxel-ui,
#runtime-host .screen-bezel.widescreen-layout.two-d-field-wide #voxel-ui,
#runtime-host .screen-bezel.widescreen-layout.full-native-screen #screen {
  top: 0;
  right: auto;
  bottom: 0;
  left: 50%;
  width: auto;
  height: 100%;
  aspect-ratio: 3 / 2;
  transform: translateX(-50%);
}

/* Wide frames already contain the correctly centred native composition and
 * authored side art. Let those pixels fill the bezel directly; the generic
 * native-screen rule above is only for genuinely 240x160 scenes. */
#runtime-host .screen-bezel.widescreen-layout.cinematic-wide #screen,
#runtime-host .screen-bezel.widescreen-layout.front-end-wide #screen {
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  transform: none;
}

#runtime-host .screen-bezel.widescreen-layout.start-menu-right.start-menu-open #voxel-ui {
  right: 0;
  left: auto;
  transform: none;
}

#runtime-host .screen-bezel.widescreen-layout.map-popup-open #voxel-ui {
  right: auto;
  left: 0;
  transform: none;
}

#runtime-host .voxel-loading {
  z-index: 7;
  overflow: hidden;
  background: #182338;
}

#runtime-host .voxel-loading-backdrop,
#runtime-host .voxel-loading-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#runtime-host .voxel-loading-logo {
  position: absolute;
  top: 9.4%;
  left: 50%;
  width: auto;
  max-width: 66%;
  height: 34%;
  object-fit: contain;
  transform: translateX(-50%);
  image-rendering: pixelated;
}

#runtime-host .voxel-loading-panel,
#runtime-host .error,
#runtime-host .server-menu,
#runtime-host .pvp-dialog,
#runtime-host .account-gate,
#runtime-host .device-session-dialog,
#runtime-host .wallet-menu,
#runtime-host .auction-menu {
  position: absolute;
}

#runtime-host .error,
#runtime-host .server-menu,
#runtime-host .pvp-dialog,
#runtime-host .account-gate,
#runtime-host .device-session-dialog,
#runtime-host .wallet-menu,
#runtime-host .auction-menu {
  z-index: 9;
  inset: 0;
}

#runtime-host .account-gate,
#runtime-host .device-session-dialog {
  display: grid;
  place-items: center;
  padding: calc(3px * var(--gba-scale, 1));
  background: rgb(8 12 18 / 68%);
  color: #383838;
}

#runtime-host .account-gate-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: calc(3px * var(--gba-scale, 1));
  width: min(100%, calc(220px * var(--gba-scale, 1)));
  min-height: calc(154px * var(--gba-scale, 1));
  padding: calc(5px * var(--gba-scale, 1));
  overflow: hidden;
}

#runtime-host .device-session-card {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: calc(3px * var(--gba-scale, 1));
  width: min(100%, calc(220px * var(--gba-scale, 1)));
  min-height: calc(112px * var(--gba-scale, 1));
  padding: calc(7px * var(--gba-scale, 1));
  overflow: hidden;
}

#runtime-host .device-session-card h2,
#runtime-host .device-session-card p {
  margin: 0;
}

#runtime-host .account-gate-card h2,
#runtime-host .account-gate-card p {
  margin: 0;
}

#runtime-host .account-gate-providers,
#runtime-host .account-gate-ready,
#runtime-host .account-cloud-error-actions,
#runtime-host .account-email-flow,
#runtime-host .account-email-actions {
  display: grid;
  align-content: start;
  gap: calc(2px * var(--gba-scale, 1));
}

#runtime-host .account-gate-providers {
  max-height: calc(88px * var(--gba-scale, 1));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

#runtime-host .account-gate-providers::-webkit-scrollbar {
  display: none;
}

#runtime-host .account-gate-card button {
  display: grid;
  grid-template-columns: calc(18px * var(--gba-scale, 1)) 1fr;
  align-items: center;
  min-height: calc(20px * var(--gba-scale, 1));
  padding: calc(2px * var(--gba-scale, 1)) calc(5px * var(--gba-scale, 1));
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

#runtime-host .account-email-actions button {
  display: block;
  min-height: calc(17px * var(--gba-scale, 1));
  padding: calc(1px * var(--gba-scale, 1)) calc(4px * var(--gba-scale, 1));
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

#runtime-host .account-gate-card button.selected {
  background: #e0e8e0;
}

#runtime-host .account-gate-card button:focus-visible {
  outline: calc(1px * var(--gba-scale, 1)) solid #706880;
  outline-offset: calc(-1px * var(--gba-scale, 1));
}

#runtime-host .account-gate-card button img {
  width: calc(16px * var(--gba-scale, 1));
  height: calc(16px * var(--gba-scale, 1));
  image-rendering: pixelated;
}

#runtime-host .account-gate-ready button,
#runtime-host .account-cloud-error-actions button {
  grid-template-columns: 1fr;
}

/* The verified state is a trainer card: the player's own 64x64 front picture
 * beside the account name, $SILVER balance and wallet. */
#runtime-host .account-gate-ready {
  grid-template-columns: calc(64px * var(--gba-scale, 1)) 1fr;
  column-gap: calc(8px * var(--gba-scale, 1));
}

#runtime-host .account-gate-avatar {
  grid-row: span 4;
  width: calc(64px * var(--gba-scale, 1));
  height: calc(64px * var(--gba-scale, 1));
  align-self: start;
  image-rendering: pixelated;
}

#runtime-host .account-gate-ready > p {
  margin: 0;
  grid-column: 2;
}

#runtime-host .account-gate-ready > button {
  grid-column: 1 / -1;
}

#runtime-host .account-gate-avatar[hidden] ~ p,
#runtime-host .account-gate-avatar[hidden] ~ button {
  grid-column: 1 / -1;
}

#runtime-host .account-gate-privy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(4px * var(--gba-scale, 1));
  margin: 0;
}

#runtime-host .account-gate-privy img {
  width: calc(9px * var(--gba-scale, 1));
  height: calc(11px * var(--gba-scale, 1));
  image-rendering: pixelated;
}

#runtime-host .account-gate-status {
  min-height: calc(16px * var(--gba-scale, 1));
}

#runtime-host .account-email-value {
  min-height: calc(16px * var(--gba-scale, 1));
  border: calc(1px * var(--gba-scale, 1)) solid #706880;
  background: #f8f8f8;
  color: #383838;
  padding: calc(2px * var(--gba-scale, 1));
}

/* Emerald's naming screen keeps BACK and OK in a column beside the key grid
 * rather than as another row of it. */
#runtime-host .account-email-buttons {
  display: grid;
  gap: calc(10px * var(--gba-scale, 1));
  justify-items: start;
}

#runtime-host .account-email-buttons button {
  min-width: calc(40px * var(--gba-scale, 1));
  min-height: calc(24px * var(--gba-scale, 1));
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: center;
  cursor: pointer;
}

#runtime-host .account-keyboard {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: calc(1px * var(--gba-scale, 1));
}

#runtime-host .account-keyboard[data-layout="code"] {
  grid-template-columns: repeat(3, 1fr);
}

#runtime-host .account-keyboard button {
  position: relative;
  display: block;
  min-width: 0;
  min-height: calc(14px * var(--gba-scale, 1));
  padding: 0;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  text-align: center;
  image-rendering: pixelated;
}

#runtime-host .account-keyboard button .game-text-content {
  position: relative;
  z-index: 1;
}

#runtime-host .account-gate-card .account-keyboard button.selected {
  background: transparent;
}

/* Keep the keyboard unchanged except for Emerald's unambiguous naming cursor.
 * Its slight down-left offset hugs the bitmap character instead of the cell. */
#runtime-host .account-keyboard button.selected[data-key-value]::before {
  position: absolute;
  z-index: 0;
  top: calc(50% + 6px * var(--gba-scale, 1));
  left: calc(50% - 5px * var(--gba-scale, 1));
  width: calc(16px * var(--gba-scale, 1));
  height: calc(24px * var(--gba-scale, 1));
  background: url('/graphics/naming_screen/cursor_transparent.png') center / 100% 100% no-repeat;
  content: '';
  image-rendering: pixelated;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

#runtime-host .account-keyboard[data-layout="email"] button[data-key-action] {
  grid-column: span 3;
}

#runtime-host .account-keyboard button.selected[data-key-action]::before {
  position: absolute;
  top: 50%;
  left: calc(2px * var(--gba-scale, 1));
  width: calc(8px * var(--gba-scale, 1));
  height: calc(16px * var(--gba-scale, 1));
  background: url('/graphics/naming_screen/input_arrow.png') center / 100% 100% no-repeat;
  content: '';
  image-rendering: pixelated;
  pointer-events: none;
  transform: translateY(-50%);
}

/* The wallet is a full 240x160 game screen built on the bag menu's chrome:
 * the pocket-name bar and page pips at the top left, the wallet portrait
 * beneath them, the description window along the bottom left, and the tall
 * list panel on the right. Every offset below is a native GBA pixel scaled by
 * --gba-scale so the DOM and the canvas bridge stay pixel-identical. */
#runtime-host .wallet-menu {
  display: grid;
  place-items: center;
  background: #000;
  color: #383838;
}

#runtime-host .wallet-screen {
  position: relative;
  width: calc(240px * var(--gba-scale, 1));
  height: calc(160px * var(--gba-scale, 1));
  background: url('/graphics/wallet/bg.png') center / 100% 100% no-repeat;
  image-rendering: pixelated;
}

#runtime-host .wallet-screen > * {
  position: absolute;
}

#runtime-host .wallet-portrait {
  left: calc(36px * var(--gba-scale, 1));
  top: calc(32px * var(--gba-scale, 1));
  width: calc(64px * var(--gba-scale, 1));
  height: calc(64px * var(--gba-scale, 1));
  background-image: url('/graphics/wallet/wallet.png');
  background-repeat: no-repeat;
  background-size: calc(64px * var(--gba-scale, 1)) calc(256px * var(--gba-scale, 1));
  background-position: 0 calc(-64px * var(--gba-scale, 1) * var(--wallet-frame, 0));
  image-rendering: pixelated;
}

#runtime-host .wallet-head {
  left: calc(26px * var(--gba-scale, 1));
  top: calc(7px * var(--gba-scale, 1));
  width: calc(76px * var(--gba-scale, 1));
  text-align: center;
}

#runtime-host .wallet-head h2 {
  margin: 0;
  height: calc(16px * var(--gba-scale, 1));
}

#runtime-host .wallet-pips {
  display: flex;
  gap: calc(4px * var(--gba-scale, 1));
  justify-content: center;
  margin: calc(2px * var(--gba-scale, 1)) 0 0;
  padding: 0;
  list-style: none;
}

#runtime-host .wallet-pips li {
  width: calc(6px * var(--gba-scale, 1));
  height: calc(6px * var(--gba-scale, 1));
  background: url('/graphics/wallet/pips.png') 0 0 / calc(6px * var(--gba-scale, 1)) calc(12px * var(--gba-scale, 1)) no-repeat;
  image-rendering: pixelated;
}

#runtime-host .wallet-pips li[aria-current="true"] {
  background-position: 0 calc(-6px * var(--gba-scale, 1));
}

/* Description window, bottom left. Three native text lines, exactly like the
 * bag's item description. A status message takes the window over when set. */
#runtime-host .wallet-info {
  left: calc(7px * var(--gba-scale, 1));
  top: calc(103px * var(--gba-scale, 1));
  width: calc(94px * var(--gba-scale, 1));
  height: calc(46px * var(--gba-scale, 1));
  overflow: hidden;
}

#runtime-host .wallet-info p {
  margin: 0;
}

#runtime-host .wallet-panel {
  left: calc(112px * var(--gba-scale, 1));
  top: calc(16px * var(--gba-scale, 1));
  width: calc(120px * var(--gba-scale, 1));
  height: calc(128px * var(--gba-scale, 1));
  overflow: hidden;
}

#runtime-host .wallet-view {
  display: grid;
  align-content: start;
  gap: calc(2px * var(--gba-scale, 1));
  min-height: 0;
  padding: calc(4px * var(--gba-scale, 1)) calc(6px * var(--gba-scale, 1));
}

#runtime-host .wallet-view > p {
  margin: 0;
}

#runtime-host .wallet-actions {
  display: grid;
  align-content: start;
  overflow: hidden;
}

#runtime-host .wallet-screen button {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: calc(4px * var(--gba-scale, 1));
  min-height: calc(16px * var(--gba-scale, 1));
  padding: 0 calc(8px * var(--gba-scale, 1));
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

#runtime-host .wallet-screen button.selected {
  background: #ced9f2;
}

#runtime-host .wallet-screen button:focus-visible {
  outline: calc(1px * var(--gba-scale, 1)) solid #6e80ae;
  outline-offset: calc(-1px * var(--gba-scale, 1));
}

#runtime-host .wallet-row-value {
  justify-self: end;
}

/* Receive borrows the portrait slot for the QR so the wallet appears to be
 * showing its own code, and stacks the address above the actions. */
#runtime-host #wallet-receive-qr {
  position: absolute;
  left: calc(35px * var(--gba-scale, 1));
  top: calc(34px * var(--gba-scale, 1));
  width: calc(66px * var(--gba-scale, 1));
  height: calc(66px * var(--gba-scale, 1));
  border: calc(1px * var(--gba-scale, 1)) solid #1e243c;
  background: #fff;
  image-rendering: pixelated;
}

#runtime-host .wallet-address {
  overflow: hidden;
  overflow-wrap: normal;
  text-align: center;
  word-break: normal;
}

#runtime-host .wallet-fields {
  display: grid;
  gap: 0;
  padding-bottom: calc(3px * var(--gba-scale, 1));
  border-bottom: calc(1px * var(--gba-scale, 1)) solid #acb8d6;
}

#runtime-host .wallet-input-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: calc(2px * var(--gba-scale, 1));
  min-height: calc(16px * var(--gba-scale, 1));
  padding: 0 calc(2px * var(--gba-scale, 1));
}

#runtime-host .wallet-input-row input {
  width: 100%;
  border: 0;
  background: transparent;
  color: #383838;
  font: inherit;
  text-align: right;
  outline: 0;
}

/* The transfer/swap review is a real ROM window laid over the list panel, the
 * same way the bag confirms a toss. */
#runtime-host .wallet-review {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  gap: 0;
  padding: calc(9px * var(--gba-scale, 1)) calc(8px * var(--gba-scale, 1));
  border-image: var(--game-window-frame) 8 fill / calc(8px * var(--gba-scale, 1)) repeat;
  border-width: calc(8px * var(--gba-scale, 1));
  border-style: solid;
}

#runtime-host .wallet-review p {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
}

#runtime-host .wallet-amount-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

#runtime-host .wallet-amount-pad button {
  grid-template-columns: 1fr;
  min-height: calc(18px * var(--gba-scale, 1));
  padding: 0;
  text-align: center;
}

#runtime-host .wallet-amount-pad button[data-wallet-key="done"],
#runtime-host .wallet-amount-pad button[data-wallet-swap-key="done"] {
  grid-column: 1 / -1;
}

#runtime-host .wallet-menu-status {
  min-height: calc(15px * var(--gba-scale, 1));
}

/* Full-screen auction house. It shares the bag/wallet background language but
 * uses the party menu's large selected-mon area and compact blue list rows. */
#runtime-host .auction-menu {
  display: grid;
  place-items: center;
  background: #000;
  color: #383838;
}

#runtime-host .auction-screen {
  position: relative;
  width: calc(240px * var(--gba-scale, 1));
  height: calc(160px * var(--gba-scale, 1));
  overflow: hidden;
  background: url('/graphics/wallet/bg.png') center / 100% 100% no-repeat;
  image-rendering: pixelated;
}

#runtime-host .auction-screen > * {
  position: absolute;
}

#runtime-host .auction-head {
  top: calc(7px * var(--gba-scale, 1));
  left: calc(4px * var(--gba-scale, 1));
  width: calc(104px * var(--gba-scale, 1));
  text-align: center;
}

#runtime-host .auction-head h2 {
  height: calc(16px * var(--gba-scale, 1));
  margin: 0;
}

#runtime-host .auction-tabs {
  display: grid;
  grid-template-columns: 35fr 22fr 22fr 22fr;
  gap: calc(1px * var(--gba-scale, 1));
  margin: calc(1px * var(--gba-scale, 1)) 0 0;
  padding: 0;
  list-style: none;
}

#runtime-host .auction-tabs li {
  min-width: 0;
  height: calc(17px * var(--gba-scale, 1));
  overflow: hidden;
  background: #747f9f;
  border-bottom: calc(1px * var(--gba-scale, 1)) solid #acb8d6;
  white-space: nowrap;
}

#runtime-host .auction-tabs li .game-glyph {
  background-image: var(--game-small-font-atlas, var(--game-font-atlas));
}

#runtime-host .auction-tabs li[aria-current="true"] {
  background: #50699e;
  border-bottom-color: #c99423;
}

#runtime-host .auction-feature {
  top: calc(42px * var(--gba-scale, 1));
  left: calc(6px * var(--gba-scale, 1));
  width: calc(101px * var(--gba-scale, 1));
  height: calc(60px * var(--gba-scale, 1));
  text-align: center;
}

#runtime-host .auction-feature-icon {
  position: relative;
  width: calc(40px * var(--gba-scale, 1));
  height: calc(40px * var(--gba-scale, 1));
  margin: 0 auto;
}

#runtime-host .auction-feature-icon img,
#runtime-host .auction-feature-icon canvas {
  /* Two stacked 32px animation frames; the box clips to the first. */
  width: calc(32px * var(--gba-scale, 1));
  height: calc(64px * var(--gba-scale, 1));
  image-rendering: pixelated;
}

#runtime-host .auction-feature-icon img.single-frame,
#runtime-host .auction-feature-icon canvas.single-frame {
  height: calc(32px * var(--gba-scale, 1));
}

#runtime-host .auction-feature-icon.is-shiny::after {
  position: absolute;
  inset: 0;
  background: #fff7b0;
  clip-path: polygon(0 75%, 0 58%, 100% 10%, 100% 27%);
  content: '';
  opacity: .78;
  -webkit-mask: var(--auction-icon) center / contain no-repeat;
  mask: var(--auction-icon) center / contain no-repeat;
  animation: auction-shimmer 1.35s steps(7, end) infinite;
  pointer-events: none;
}

@keyframes auction-shimmer {
  from { transform: translate(-52%, 36%); }
  to { transform: translate(54%, -32%); }
}

#runtime-host .auction-feature p {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
}

#runtime-host .auction-feature-shiny {
  position: absolute;
  top: 0;
  right: 0;
  color: #88621e;
}

#runtime-host .auction-feature-name {
  height: calc(14px * var(--gba-scale, 1));
}

#runtime-host .auction-feature-level,
#runtime-host .auction-feature-seller {
  display: inline-block;
  max-width: 48%;
}

#runtime-host .auction-info {
  top: calc(104px * var(--gba-scale, 1));
  left: calc(4px * var(--gba-scale, 1));
  width: calc(104px * var(--gba-scale, 1));
  height: calc(52px * var(--gba-scale, 1));
  padding: calc(7px * var(--gba-scale, 1)) calc(8px * var(--gba-scale, 1));
  overflow: hidden;
}

#runtime-host .auction-info p {
  margin: 0;
}

#runtime-host #auction-status:not(:empty) + * {
  display: none;
}

#runtime-host .auction-panel {
  top: calc(4px * var(--gba-scale, 1));
  left: calc(108px * var(--gba-scale, 1));
  width: calc(128px * var(--gba-scale, 1));
  height: calc(152px * var(--gba-scale, 1));
  padding: calc(7px * var(--gba-scale, 1));
  overflow: hidden;
}

#runtime-host .auction-panel-title {
  height: calc(14px * var(--gba-scale, 1));
  margin: 0;
  padding-left: calc(3px * var(--gba-scale, 1));
  border-bottom: calc(1px * var(--gba-scale, 1)) solid #acb8d6;
}

#runtime-host .auction-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

#runtime-host .auction-list li,
#runtime-host .auction-actions button,
#runtime-host .auction-keypad button {
  position: relative;
  width: 100%;
  min-height: calc(20px * var(--gba-scale, 1));
  margin: 0;
  padding: 0 calc(3px * var(--gba-scale, 1));
  border: 0;
  background: transparent;
  color: #383838;
  font: inherit;
  text-align: left;
}

#runtime-host .auction-list li {
  display: grid;
  grid-template-columns: calc(26px * var(--gba-scale, 1)) 1fr auto;
  align-items: center;
  height: calc(22px * var(--gba-scale, 1));
  overflow: hidden;
}

#runtime-host .auction-list li.selected,
#runtime-host .auction-actions button.selected,
#runtime-host .auction-keypad button.selected {
  background: #ced9f2;
}

#runtime-host .auction-list img,
#runtime-host .auction-list canvas {
  width: calc(24px * var(--gba-scale, 1));
  image-rendering: pixelated;
}

#runtime-host .auction-list .auction-row-name,
#runtime-host .auction-list .auction-row-price {
  overflow: hidden;
  white-space: nowrap;
}

#runtime-host .auction-detail,
#runtime-host .auction-sell-form,
#runtime-host .auction-review {
  padding: calc(5px * var(--gba-scale, 1)) calc(3px * var(--gba-scale, 1));
}

#runtime-host .auction-detail p,
#runtime-host .auction-review p {
  margin: 0;
}

/* Listing values are a passive summary, not three more selectable rows. The
 * native window frame and small ROM font separate them from the action list
 * without introducing another web-style control surface. */
#runtime-host .auction-listing-summary {
  display: grid;
  gap: 0;
  min-height: calc(43px * var(--gba-scale, 1));
  margin: 0 0 calc(2px * var(--gba-scale, 1));
  padding: calc(5px * var(--gba-scale, 1)) calc(6px * var(--gba-scale, 1));
  overflow: hidden;
}

#runtime-host .auction-listing-summary p {
  height: calc(11px * var(--gba-scale, 1));
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
}

#runtime-host .auction-listing-summary .game-glyph {
  background-image: var(--game-small-font-atlas, var(--game-font-atlas));
}

#runtime-host .auction-actions {
  margin-top: calc(4px * var(--gba-scale, 1));
}

#runtime-host .auction-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

#runtime-host .auction-keypad button {
  text-align: center;
}

#runtime-host .auction-keypad button[data-auction-key="done"] {
  grid-column: 1 / -1;
}

#runtime-host .page-boot {
  position: absolute;
  inset: 0;
}

/*
 * PortMaster/KNULLI direct presentation.
 *
 * The public site samples this runtime into animated React/Three presentation
 * surfaces. On the RG35XXSP that doubled the work and, for voxel scenes,
 * copied a WebGL result back through a 2D canvas. Put the canonical runtime on
 * screen instead so WPE can composite its canvas/WebGL layers directly.
 */
html[data-hns-direct-runtime="rg35xxsp"],
html[data-hns-direct-runtime="rg35xxsp"] body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background: #000;
}

html[data-hns-direct-runtime="rg35xxsp"] #root {
  display: none;
}

html[data-hns-direct-runtime="rg35xxsp"] #runtime-host {
  z-index: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: auto;
  contain: none;
  background: #000;
}

html[data-hns-direct-runtime="rg35xxsp"] #runtime-host .hero,
html[data-hns-direct-runtime="rg35xxsp"] #runtime-host .camera-settings,
html[data-hns-direct-runtime="rg35xxsp"] #runtime-host .controls,
html[data-hns-direct-runtime="rg35xxsp"] #runtime-host .toolbar,
html[data-hns-direct-runtime="rg35xxsp"] #runtime-host footer {
  display: none;
}

html[data-hns-direct-runtime="rg35xxsp"] #runtime-host .page,
html[data-hns-direct-runtime="rg35xxsp"] #runtime-host .console {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #000;
  box-shadow: none;
}

html[data-hns-direct-runtime="rg35xxsp"] #runtime-host .screen-bezel {
  position: absolute;
  inset: 0;
  width: min(100vw, 150vh);
  height: min(100vh, 66.6667vw);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  aspect-ratio: 3 / 2;
  background: #000;
  box-shadow: none;
}

html[data-hns-direct-runtime="rg35xxsp"] #runtime-host .screen-bezel.widescreen-layout,
html[data-hns-direct-runtime="rg35xxsp"] #runtime-host .screen-bezel.widescreen-layout.cinematic-wide {
  aspect-ratio: 3 / 2;
}

html[data-hns-direct-runtime="rg35xxsp"] #runtime-host .start-menu-balances,
html[data-hns-direct-runtime="rg35xxsp"] #runtime-host .voxel-loading,
html[data-hns-direct-runtime="rg35xxsp"] #runtime-host .error,
html[data-hns-direct-runtime="rg35xxsp"] #runtime-host .server-menu,
html[data-hns-direct-runtime="rg35xxsp"] #runtime-host .pvp-dialog,
html[data-hns-direct-runtime="rg35xxsp"] #runtime-host .account-gate,
html[data-hns-direct-runtime="rg35xxsp"] #runtime-host .device-session-dialog,
html[data-hns-direct-runtime="rg35xxsp"] #runtime-host .wallet-menu,
html[data-hns-direct-runtime="rg35xxsp"] #runtime-host .auction-menu {
  position: fixed !important;
  inset: auto !important;
  top: 0 !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  pointer-events: none;
}