/* Approved parts of the arcade study, inside the existing expedition layout. */
@font-face {
  font-family: ArcadePixel;
  src: url("./fonts/Jersey10-Regular.d6941bdb94bd.ttf") format('truetype');
  font-display: swap;
}
html:has(.encounter-upgraded),
body:has(.encounter-upgraded) {
  height: auto;
  min-height: 100dvh;
  overflow-y: auto;
}
.slots-shell.compact-shell:has(.encounter-upgraded) {
  height: max(calc(100dvh - 64px), 980px);
  max-height: none;
}
.compact-shell .encounter-upgraded {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.compact-shell .encounter-upgraded .machine-heading-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-align: center;
}
.compact-shell .encounter-upgraded .machine-heading-copy > small,
.compact-shell .encounter-upgraded .machine-heading-copy > h1,
.compact-shell .encounter-upgraded .machine-heading-copy > p {
  display: block;
  margin: 0;
}
.compact-shell .encounter-upgraded .machine-heading-copy > h1 {
  font:
    400 clamp(28px, 4vw, 46px)/1.05 ArcadePixel,
    sans-serif;
  letter-spacing: 0;
  color: #ffe18a;
}
.compact-shell .encounter-upgraded .machine-heading-copy > small {
  font-size: 11px;
  letter-spacing: 1.5px;
}
.compact-shell .encounter-upgraded .machine-heading-copy > p {
  font-size: 13px;
  line-height: 1.1;
}
.compact-shell .encounter-upgraded .encounter-reels {
  grid-column: auto;
  grid-row: auto;
  flex: 1 1 0;
  min-height: 410px;
  padding: 0;
  gap: 8px;
}
.compact-shell .encounter-upgraded .encounter-reel {
  display: grid;
  grid-template-rows: minmax(330px, 1fr) 38px;
  gap: 5px;
  min-width: 0;
  container-type: normal;
  --reel-sprite-size: clamp(60px, 9vw, 96px);
}
.compact-shell .encounter-upgraded .reel-window {
  position: relative;
  height: auto;
  min-height: 330px;
  padding: 0;
  overflow: hidden;
  border: 3px solid #f7cb50;
  border-radius: 3px;
  background: #15130e;
  box-shadow:
    inset 0 0 0 1px #fff0a1,
    inset 0 -3px #80500f,
    0 1px #6f450c;
}
.compact-shell .encounter-upgraded .reel-drum {
  position: absolute;
  inset: 3px;
  border-radius: 8% / 4%;
  overflow: hidden;
  isolation: isolate;
  background: url("./ui/encounters/reel-material-v3.376cd2976b55.png") 50% 0 / 100% 105% no-repeat;
  box-shadow:
    inset 0 7px 6px #0008,
    inset 0 -7px 7px #0007;
}
.compact-shell .encounter-upgraded .reel-drum::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    #03080b,
    #070b0be6 4%,
    #14150e99 9%,
    #29271933 16%,
    transparent 24% 76%,
    #29271933 84%,
    #14150e99 91%,
    #070b0be6 96%,
    #03080b
  );
}
.compact-shell .encounter-upgraded .reel-drum .reel-focus {
  position: absolute;
  inset: 28% 0;
  padding: 0;
  margin: 0;
  display: grid;
  place-items: center;
}
.compact-shell .encounter-upgraded .reel-drum .reel-pokemon {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  max-height: none;
}
.compact-shell .encounter-upgraded .reel-drum .reel-pokemon .pixel,
.compact-shell .encounter-upgraded .reel-drum .reel-ghost .pixel {
  width: var(--reel-sprite-size);
  height: var(--reel-sprite-size);
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: contain;
  object-position: center;
}
.compact-shell .encounter-upgraded .reel-drum .reel-ghost {
  position: absolute;
  left: 50%;
  right: auto;
  width: 0;
  height: 0;
  display: grid;
  grid-template: 0 / 0;
  place-items: center;
  opacity: 0.54;
  overflow: visible;
  filter: saturate(0.88) brightness(0.9);
  transform: none;
}
.compact-shell .encounter-upgraded .reel-drum .reel-ghost.above {
  top: 5.4%;
  bottom: auto;
}
.compact-shell .encounter-upgraded .reel-drum .reel-ghost.below {
  top: 94.6%;
  bottom: auto;
}
.compact-shell .encounter-upgraded .reel-ghost.above .pixel {
  transform: perspective(350px) rotateX(63deg) scaleX(0.912);
}
.compact-shell .encounter-upgraded .reel-ghost.below .pixel {
  transform: perspective(350px) rotateX(-63deg) scaleX(0.912);
}
.compact-shell .encounter-upgraded .selection-arrow {
  position: absolute;
  top: calc(50% - 10px);
  width: 11px;
  height: 20px;
  z-index: 9;
  background: linear-gradient(90deg, #fff3b4, #ffc743 60%, #b77414);
  pointer-events: none;
}
.compact-shell .encounter-upgraded .selection-arrow.left {
  left: -1px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.compact-shell .encounter-upgraded .selection-arrow.right {
  right: -1px;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.compact-shell .encounter-upgraded .arcade-battle-plinth {
  padding: 3px;
  border: 1px solid #416788;
  border-radius: 3px;
  background: #06182c;
}
/* Use the selected TEAM tab's pixel face, lip and stepped corners. */
.compact-shell .encounter-upgraded .arcade-battle-plinth > .reel-battle {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  outline: 0;
  background: #03102a !important;
  box-shadow: none !important;
  color: #102239 !important;
  letter-spacing: 0;
  text-shadow: none;
  transform: none;
  clip-path: var(--px-o);
}
.compact-shell .encounter-upgraded .arcade-battle-plinth > .reel-battle::before {
  content: '' !important;
  position: absolute;
  z-index: -2;
  left: 2px;
  right: 2px;
  top: 2px;
  bottom: -1px;
  background: linear-gradient(#ffe7a0, #9a5f08);
  clip-path: var(--px-in);
  pointer-events: none;
}
.compact-shell .encounter-upgraded .arcade-battle-plinth > .reel-battle::after {
  content: '' !important;
  position: absolute;
  z-index: -1;
  inset: 3px;
  background: linear-gradient(#ffe9a6, #dba22a);
  box-shadow:
    inset 0 2px #ffffff3a,
    inset 0 -2px #0000002e;
  clip-path: var(--px-in);
  pointer-events: none;
}
.compact-shell .encounter-upgraded .reel-battle:disabled {
  opacity: 1;
}
.compact-shell .encounter-upgraded .reel-battle:hover:not(:disabled) {
  filter: none;
  transform: translateY(-1px);
}
.compact-shell .encounter-upgraded > .machine-controls {
  display: grid;
  flex: none;
  height: auto;
  min-height: 54px;
  grid-column: auto;
  grid-row: auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr) minmax(0, 1fr);
  grid-template-rows: 54px;
  gap: 10px;
  padding: 0 3px;
}
.compact-shell .encounter-upgraded button.arcade-physical-button {
  --button-top: #ffeca0;
  --button-face: #ffd15a;
  --button-edge: #c78e24;
  --button-side: #8b5717;
  --button-rim: #ffe18a;
  --button-ink: #17222b;
  position: relative;
  isolation: isolate;
  display: block !important;
  width: 100%;
  min-height: 0;
  height: 57px !important;
  padding: 0 !important;
  margin: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  clip-path: none !important;
  transform: perspective(650px) rotateX(24deg) !important;
  transform-origin: center center;
  transform-style: preserve-3d;
  transition:
    transform 0.12s,
    filter 0.12s;
  overflow: visible;
  color: var(--button-ink) !important;
  text-shadow: none !important;
}
.compact-shell .encounter-upgraded button.arcade-physical-button > .arcade-button-base {
  display: block !important;
  position: absolute;
  inset: 7px 0 0;
  background: linear-gradient(var(--button-edge), var(--button-side));
  border: 1px solid #030c19;
  box-shadow: 0 4px 3px #0009;
  z-index: 0;
  clip-path: polygon(
    8px 0,
    calc(100% - 8px) 0,
    100% 8px,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    8px 100%,
    0 calc(100% - 8px),
    0 8px
  );
}
.compact-shell .encounter-upgraded button.arcade-physical-button > .arcade-button-face {
  display: flex !important;
  position: absolute;
  inset: 0 0 8px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 3px 8px;
  background: linear-gradient(var(--button-top), var(--button-face) 65%, var(--button-edge));
  color: var(--button-ink);
  z-index: 1;
  border: 2px solid var(--button-rim);
  box-shadow:
    inset 0 2px #ffffff96,
    inset 0 -2px #0003,
    inset 2px 0 #fff5,
    inset -2px 0 #fff5;
  clip-path: polygon(
    8px 0,
    calc(100% - 8px) 0,
    100% 8px,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    8px 100%,
    0 calc(100% - 8px),
    0 8px
  );
}
.compact-shell .encounter-upgraded button.arcade-physical-button .arcade-button-copy {
  display: block;
  min-width: 0;
  font-family: ArcadePixel, sans-serif !important;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.3px;
  text-align: center;
  font-weight: 400;
}
.compact-shell .encounter-upgraded button.arcade-physical-button .arcade-button-copy small {
  display: block;
  font:
    7px 'Trebuchet MS',
    sans-serif;
  line-height: 1.1;
  letter-spacing: 0.2px;
  margin-top: 3px;
  color: inherit;
  opacity: 0.85;
}
.compact-shell .encounter-upgraded .arcade-button-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 5px;
  filter: drop-shadow(0 1px #0005);
}
.compact-shell .encounter-upgraded .arcade-button-icon img {
  display: block;
  width: 25px;
  height: 25px;
  object-fit: contain;
  image-rendering: pixelated;
}
.compact-shell .encounter-upgraded .arcade-button-icon svg {
  display: block;
  width: 22px;
  height: 22px;
  flex: none;
}
.compact-shell .encounter-upgraded button.arcade-control-revive {
  --button-top: #257b50;
  --button-face: #155c3a;
  --button-edge: #10462e;
  --button-side: #072b1e;
  --button-rim: #78c374;
  --button-ink: #edffe1;
  height: 50px !important;
}
.compact-shell .encounter-upgraded button.arcade-control-abandon {
  --button-top: #84333b;
  --button-face: #65202c;
  --button-edge: #491925;
  --button-side: #2d0d16;
  --button-rim: #d96264;
  --button-ink: #ffd8cc;
  height: 50px !important;
}
.compact-shell .encounter-upgraded button.arcade-control-revive .arcade-button-copy,
.compact-shell .encounter-upgraded button.arcade-control-abandon .arcade-button-copy {
  font-size: 19px;
}
.compact-shell .encounter-upgraded button.arcade-control-revive .arcade-button-copy strong {
  font: inherit;
  color: inherit;
}
.compact-shell .encounter-upgraded .icon-revive {
  color: #99e385;
}
.compact-shell .encounter-upgraded .icon-abandon {
  color: #f1786c;
}
.compact-shell .encounter-upgraded button.arcade-physical-button:hover:not(:disabled) {
  transform: perspective(650px) rotateX(24deg) translateY(-1px) !important;
  filter: brightness(1.1);
}
.compact-shell .encounter-upgraded button.arcade-physical-button:active:not(:disabled) {
  transform: perspective(650px) rotateX(24deg) translateY(4px) !important;
}
.compact-shell .encounter-upgraded button.arcade-physical-button:active:not(:disabled) > .arcade-button-base {
  inset: 4px 0 0;
}
.compact-shell .encounter-upgraded button.arcade-physical-button:focus-visible {
  outline: 2px solid #a2e5ff !important;
  outline-offset: 5px;
}
.compact-shell .encounter-upgraded button.arcade-physical-button:disabled {
  opacity: 0.85;
  filter: saturate(0.85);
}
.compact-shell .encounter-upgraded button.arcade-control-spin {
  --button-top: #bd87ff;
  --button-face: #8445d9;
  --button-edge: #56259b;
  --button-side: #32145e;
  --button-rim: #d4adff;
  --button-ink: #fff4ff;
  --button-glow: #bc80ff;
}
.compact-shell .encounter-upgraded button.arcade-control-revive {
  --button-top: #46ce83;
  --button-face: #15945b;
  --button-edge: #08633c;
  --button-side: #043c29;
  --button-rim: #91f6b1;
  --button-ink: #f0fff3;
  --button-glow: #6af4a6;
}
.compact-shell .encounter-upgraded button.arcade-control-abandon {
  --button-top: #ee6f78;
  --button-face: #ba354a;
  --button-edge: #7d1b32;
  --button-side: #4b1226;
  --button-rim: #ffadb0;
  --button-ink: #fff1ec;
  --button-glow: #ff7f96;
}
.compact-shell .encounter-upgraded .icon-revive,
.compact-shell .encounter-upgraded .icon-abandon {
  color: var(--button-ink);
}
.compact-shell .encounter-upgraded button.arcade-physical-button > .arcade-button-face {
  transition:
    border-color 150ms,
    box-shadow 150ms;
}
.compact-shell .encounter-upgraded button.arcade-physical-button:hover:not(:disabled),
.compact-shell .encounter-upgraded button.arcade-physical-button:focus-visible {
  filter: none !important;
}
.compact-shell .encounter-upgraded button.arcade-physical-button:hover:not(:disabled) > .arcade-button-face,
.compact-shell .encounter-upgraded button.arcade-physical-button:focus-visible > .arcade-button-face {
  border-color: var(--button-glow);
  box-shadow:
    inset 0 0 0 2px var(--button-glow),
    inset 0 2px #ffffff80;
}
.compact-shell .encounter-upgraded button.arcade-control-spin:disabled {
  opacity: 0.9;
  filter: saturate(0.95);
}
.compact-shell .encounter-upgraded .reel-drum.motion-active > .reel-focus,
.compact-shell .encounter-upgraded .reel-drum.motion-active > .reel-ghost {
  visibility: hidden;
}
.compact-shell .encounter-upgraded .arcade-reel-motion {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 8;
  border-radius: inherit;
  background: linear-gradient(
    #5e5034 0%,
    #c4af82 10%,
    #f4e4bc 29%,
    #fff7d7 45%,
    #fff8dd 55%,
    #ecdcb3 76%,
    #b39a6e 90%,
    #574c33 100%
  );
  pointer-events: none;
}
.compact-shell .encounter-upgraded .arcade-reel-motion:before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: var(--rolling-light, 0);
  background: repeating-linear-gradient(0deg, transparent 0 35px, #8f703b70 36px, #fff3c960 38px, transparent 40px);
  background-position-y: var(--paper-offset, 0px);
  pointer-events: none;
}
.compact-shell .encounter-upgraded .arcade-reel-motion:after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(
      transparent calc(50% - 0.5px),
      #bd8d3570 calc(50% - 0.5px) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)
    ),
    linear-gradient(#090d164d, transparent 25% 75%, #090d164d),
    linear-gradient(90deg, #30291b33, transparent 18% 82%, #30291b33);
}
.compact-shell .encounter-upgraded .arcade-motion-track {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  will-change: transform;
}
.compact-shell .encounter-upgraded .arcade-motion-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #9d7c4244;
  box-sizing: border-box;
  transform-origin: center;
}
.compact-shell .encounter-upgraded .arcade-motion-cell img {
  flex: none;
  width: 150px !important;
  height: 150px !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
  image-rendering: pixelated;
  transform: none !important;
  filter: var(--reel-blur-filter) drop-shadow(0 3px #493a2326);
}
.compact-shell .encounter-upgraded .arcade-machine.rolling .reel-pokemon {
  animation: none !important;
  transform: none !important;
  filter: none !important;
}
.compact-shell .encounter-upgraded .reel-drum.motion-settled .arcade-reel-motion {
  filter: brightness(1.035);
}

/* Keep text readable at the real page scale and retain the approved colors. */
.compact-shell .encounter-upgraded button.arcade-control-spin {
  --button-top: #9660df;
  --button-face: #6634ae;
  --button-edge: #3e1b71;
}
.compact-shell .encounter-upgraded button.arcade-control-revive {
  --button-top: #22975d;
  --button-face: #0b6b40;
  --button-edge: #06492c;
}
.compact-shell .encounter-upgraded button.arcade-control-abandon {
  --button-top: #cf4b5c;
  --button-face: #94263a;
  --button-edge: #631829;
}
.compact-shell .encounter-upgraded button.arcade-physical-button {
  --button-ink: #fff;
  height: 54px !important;
  transform: perspective(420px) rotateX(32deg) !important;
}
.compact-shell .encounter-upgraded button.arcade-physical-button:hover:not(:disabled) {
  transform: perspective(420px) rotateX(32deg) translateY(-1px) !important;
}
.compact-shell .encounter-upgraded button.arcade-physical-button:active:not(:disabled) {
  transform: perspective(420px) rotateX(32deg) translateY(3px) !important;
}
.compact-shell .encounter-upgraded button.arcade-physical-button .arcade-button-copy {
  font:
    800 clamp(12px, 1.4vw, 18px)/1.05 'Trebuchet MS',
    Arial,
    sans-serif !important;
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow: 0 1px #0008;
}
.compact-shell .encounter-upgraded button.arcade-physical-button .arcade-button-copy small {
  font:
    700 8px/1.1 'Trebuchet MS',
    Arial,
    sans-serif;
  letter-spacing: 0;
}
.compact-shell .encounter-upgraded button.arcade-physical-button > .arcade-button-base,
.compact-shell .encounter-upgraded button.arcade-physical-button > .arcade-button-face {
  animation: none !important;
  transform: none !important;
}
.compact-shell .encounter-upgraded button.arcade-physical-button::before,
.compact-shell .encounter-upgraded button.arcade-physical-button::after {
  content: none !important;
}
.compact-shell .encounter-upgraded .icon-revive,
.compact-shell .encounter-upgraded .icon-abandon {
  color: var(--button-ink);
}
.compact-shell .encounter-upgraded .arcade-reel-motion,
.compact-shell .encounter-upgraded .arcade-reel-motion::after {
  background: none;
}
.compact-shell .encounter-upgraded .arcade-motion-cell img {
  width: var(--reel-sprite-size) !important;
  height: var(--reel-sprite-size) !important;
}
.compact-shell .encounter-upgraded .arcade-motion-cell.arcade-motion-initial img {
  width: var(--initial-symbol-size) !important;
  height: var(--initial-symbol-size) !important;
}
.compact-shell .encounter-upgraded.rolling .reel-pokemon {
  animation: none !important;
  transform: none !important;
  filter: none !important;
}
.compact-shell .encounter-upgraded .reel-pokeball {
  width: 52px;
  height: 52px;
}
@media (max-width: 650px) {
  .compact-shell .encounter-upgraded .encounter-reels {
    min-height: 375px;
    gap: 5px;
  }
  .compact-shell .encounter-upgraded .encounter-reel {
    --reel-sprite-size: clamp(52px, 14vw, 72px);
    grid-template-rows: minmax(330px, 1fr) 34px;
    gap: 4px;
  }
  .compact-shell .encounter-upgraded .reel-window {
    min-height: 330px;
    border-width: 2px;
  }
  .compact-shell .encounter-upgraded .reel-drum {
    inset: 2px;
  }
  .compact-shell .encounter-upgraded .arcade-battle-plinth > .reel-battle {
    font-size: 22px;
    border-bottom-width: 3px !important;
  }
  .compact-shell .encounter-upgraded > .machine-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 42px 42px;
    min-height: 89px;
    gap: 5px 8px;
  }
  .compact-shell .encounter-upgraded .encounter-spin {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .compact-shell .encounter-upgraded .encounter-center {
    grid-column: 1;
    grid-row: 2;
  }
  .compact-shell .encounter-upgraded .encounter-abandon {
    grid-column: 2;
    grid-row: 2;
  }
  .compact-shell .encounter-upgraded button.arcade-physical-button {
    height: 42px !important;
  }
  .compact-shell .encounter-upgraded button.arcade-physical-button .arcade-button-copy {
    font-size: 12px !important;
  }
  .compact-shell .encounter-upgraded button.arcade-physical-button .arcade-button-copy small {
    display: none;
  }
  .compact-shell .encounter-upgraded .arcade-button-icon svg {
    width: 16px;
    height: 16px;
  }
  .compact-shell .encounter-upgraded .machine-heading-copy > h1 {
    font-size: clamp(26px, 5.8vw, 34px);
  }
  .compact-shell .encounter-upgraded .machine-heading-copy > small {
    font-size: 9px;
  }
  .compact-shell .encounter-upgraded .machine-heading-copy > p {
    font-size: 10px;
  }
  .compact-shell .encounter-upgraded .reel-pokeball {
    width: 38px;
    height: 38px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .compact-shell .encounter-upgraded .arcade-reel-motion {
    display: none;
  }
  .compact-shell .encounter-upgraded button.arcade-physical-button {
    transition: none;
  }
}

.compact-shell .encounter-upgraded button.arcade-control-revive .arcade-button-copy {
  font-size: 15px !important;
}
@media (max-width: 650px) {
  .compact-shell .encounter-upgraded button.arcade-control-revive .arcade-button-copy {
    font-size: 12px !important;
  }
}

/* Restore the original readout beneath the Pokémon, inside the cylinder. */
.compact-shell .encounter-upgraded .reel-drum {
  --reel-center: 0.39;
}
.compact-shell .encounter-upgraded .reel-drum .reel-focus {
  inset: 0;
  display: block;
  z-index: 13;
  background: none;
  color: #102841;
}
.compact-shell .encounter-upgraded .reel-drum .reel-pokemon {
  position: absolute;
  top: 39%;
  height: var(--reel-sprite-size);
  transform: translateY(-50%);
}
.compact-shell .encounter-upgraded .selection-arrow {
  top: calc(39% - 10px);
}
.compact-shell .encounter-upgraded .reel-readout {
  position: absolute;
  top: calc(39% + var(--reel-sprite-size) * 0.5 + 6px);
  left: 5%;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  text-shadow: 0 1px #fff4d599;
}
.compact-shell .encounter-upgraded .reel-readout-heading {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  max-width: 100%;
}
.compact-shell .encounter-upgraded .reel-name {
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font:
    400 23px/1 ArcadePixel,
    sans-serif;
  color: #0b203e;
}
.compact-shell .encounter-upgraded .reel-level {
  position: static;
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: #233e56;
  font-size: 9px;
}
.compact-shell .encounter-upgraded .reel-types {
  min-height: 0;
  gap: 3px;
}
.compact-shell .encounter-upgraded .reel-types:empty {
  display: none;
}
.compact-shell .encounter-upgraded .reel-details {
  flex: none;
  min-height: 0;
  gap: 6px;
  font-size: 11px;
  line-height: 1.2;
  color: #243e50;
}
.compact-shell .encounter-upgraded .reel-details .money {
  color: #604719;
}
.compact-shell .encounter-upgraded .reel-archetype {
  margin: 0;
  padding: 1px 0;
  border: 0;
  background: none;
  font-size: 9px;
  line-height: 1.1;
  color: #243e50;
}
.compact-shell .encounter-upgraded .reel-support {
  margin: 0;
  font-size: 10px;
  color: #243e50;
}
.compact-shell .encounter-upgraded .arcade-battle-plinth > .reel-battle {
  font:
    800 18px/1 'Trebuchet MS',
    Arial,
    sans-serif !important;
}
.compact-shell .encounter-upgraded .encounter-heading .machine-heading-copy {
  width: 100%;
  height: 100%;
  gap: 3px;
  justify-content: center;
}
.compact-shell .encounter-upgraded .machine-heading-copy > small {
  line-height: 13px;
}
.compact-shell .encounter-upgraded .machine-heading-copy > h1 {
  line-height: 0.95;
  padding: 0 35px;
}
.compact-shell .encounter-upgraded .machine-heading-copy > p {
  line-height: 14px;
}
.compact-shell .encounter-upgraded .encounter-heading > .encounter-help {
  position: absolute;
  left: 2px;
  top: 2px;
  transform: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 1px solid #dfbd60 !important;
  border-radius: 5px !important;
  background: linear-gradient(#234766, #0c2845) !important;
  color: #ffe393 !important;
  font:
    800 14px/1 'Trebuchet MS',
    Arial,
    sans-serif !important;
  box-shadow:
    inset 0 1px #fff0b555,
    inset 0 -2px #020d20 !important;
  clip-path: none !important;
  filter: none !important;
}
.compact-shell .encounter-upgraded .encounter-help::before,
.compact-shell .encounter-upgraded .encounter-help::after {
  content: none !important;
}
.compact-shell .encounter-upgraded .encounter-heading > .encounter-help:hover {
  border-color: #fff0b5 !important;
  box-shadow: inset 0 0 0 1px #ffe393 !important;
}
.compact-shell .encounter-upgraded .encounter-help:focus-visible {
  outline: 2px solid #ffe393;
  outline-offset: 3px;
}
.compact-shell .encounter-upgraded .encounter-announcement {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 650px) {
  .compact-shell .encounter-upgraded .reel-readout {
    left: 3%;
    width: 94%;
    gap: 4px;
  }
  .compact-shell .encounter-upgraded .reel-readout-heading {
    flex-wrap: wrap;
    gap: 2px 4px;
  }
  .compact-shell .encounter-upgraded .reel-name {
    font-size: 19px;
  }
  .compact-shell .encounter-upgraded .reel-level {
    font-size: 7px;
  }
  .compact-shell .encounter-upgraded .reel-types .type {
    font-size: 7px !important;
    padding: 1px 2px;
    line-height: 10px;
  }
  .compact-shell .encounter-upgraded .reel-types .type-sprite {
    width: 9px;
    height: 9px;
  }
  .compact-shell .encounter-upgraded .reel-details {
    flex-wrap: wrap;
    gap: 3px;
    font-size: 8px;
  }
  .compact-shell .encounter-upgraded .reel-archetype {
    font-size: 7px;
  }
  .compact-shell .encounter-upgraded .reel-support {
    font-size: 8px;
  }
  .compact-shell .encounter-upgraded .arcade-battle-plinth > .reel-battle {
    font-size: 14px !important;
  }
  .compact-shell .encounter-upgraded .encounter-heading > .encounter-help {
    left: 2px;
    width: 22px;
    height: 22px;
    font-size: 14px !important;
  }
}

/* Frame each section independently; the stage also contains the progress strip. */
.site-theme.compact-shell > .game-stage:has(.encounter-upgraded) {
  border: 0 !important;
  border-image: none !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.site-theme.compact-shell > .game-stage:has(.encounter-upgraded)::after,
.compact-shell .encounter-upgraded::before,
.compact-shell .encounter-upgraded::after {
  content: none !important;
}
.compact-shell:has(.encounter-upgraded) .expedition-progress,
.compact-shell .encounter-upgraded {
  border: 2px solid transparent !important;
  border-radius: 0 !important;
  border-image: url("/static/game/ui/pixel-gold-frame.8917bbdb0a7c.svg?v=20261011-frame2") 12 / 12px / 2px stretch !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.compact-shell .encounter-upgraded .encounter-reels,
.compact-shell .encounter-upgraded .encounter-reel,
.compact-shell .encounter-upgraded .arcade-battle-plinth {
  border: 0 !important;
  outline: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.compact-shell .encounter-upgraded .arcade-battle-plinth {
  padding: 0;
}
.compact-shell .encounter-upgraded .reel-pokemon > .reel-pokeball {
  position: static;
  inset: auto;
  width: 84px !important;
  height: 84px !important;
  max-width: none;
  max-height: none;
  opacity: 1 !important;
  filter: none;
}
@media (max-width: 650px) {
  .compact-shell .encounter-upgraded .reel-pokemon > .reel-pokeball {
    width: 64px !important;
    height: 64px !important;
  }
}

/* Leave the title, help and speed controls on the main surface. */
.compact-shell .encounter-upgraded > .encounter-heading {
  min-height: 84px;
  border: 0 !important;
  border-image: none !important;
  outline: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.compact-shell .encounter-upgraded > .encounter-heading::before,
.compact-shell .encounter-upgraded > .encounter-heading::after {
  content: none !important;
}
.compact-shell .encounter-upgraded button.arcade-control-revive,
.compact-shell .encounter-upgraded button.arcade-control-abandon {
  height: 44px !important;
  align-self: center;
}
.compact-shell .encounter-upgraded .reel-battle:focus-visible::after {
  box-shadow: inset 0 0 0 2px #fff;
}
@media (max-width: 650px) {
  .compact-shell .encounter-upgraded button.arcade-control-revive,
  .compact-shell .encounter-upgraded button.arcade-control-abandon {
    height: 36px !important;
  }
}

/* Healing belongs to the team header; keep Spin prominent beside Abandon. */
.compact-shell .encounter-upgraded > .machine-controls {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-rows: 54px;
  min-height: 54px;
}
.compact-shell .encounter-upgraded .encounter-spin {
  grid-column: 1;
  grid-row: 1;
}
.compact-shell .encounter-upgraded .encounter-abandon {
  grid-column: 2;
  grid-row: 1;
}
@media (max-width: 650px) {
  .compact-shell .encounter-upgraded > .machine-controls {
    grid-template-rows: 42px;
    min-height: 42px;
  }
}

.compact-shell .encounter-upgraded .machine-heading-copy > .encounter-odds-link {
  display: block;
  position: static;
  width: auto;
  min-height: 0;
  height: auto;
  margin: -4px 0 0;
  padding: 0 6px 2px;
  border: 0 !important;
  border-radius: 4px !important;
  background: none !important;
  box-shadow: none !important;
  clip-path: none !important;
  transform: none !important;
  color: #bad0e7 !important;
  font:
    700 11px/1.2 'Trebuchet MS',
    Arial,
    sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.compact-shell .encounter-upgraded .encounter-odds-link::before,
.compact-shell .encounter-upgraded .encounter-odds-link::after {
  content: none !important;
}
.compact-shell .encounter-upgraded .machine-heading-copy > .encounter-odds-link:hover {
  color: #ffe18a !important;
}
.compact-shell .encounter-upgraded .encounter-odds-link:focus-visible {
  outline: 2px solid #ffe18a;
  outline-offset: 2px;
}
@media (max-width: 650px) {
  .compact-shell .encounter-upgraded .machine-heading-copy > .encounter-odds-link {
    font-size: 9px;
  }
}

/* Center the main action over the animation speed row. */
.compact-shell .encounter-upgraded > .machine-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 94px;
  padding: 0;
}
.compact-shell .encounter-upgraded .machine-controls > .encounter-spin {
  width: min(100%, 420px);
  flex: none;
}
.compact-shell .encounter-upgraded .machine-controls > .speed-control {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: auto;
  height: 28px;
  margin: 0;
  padding: 0;
  order: 1;
}
.compact-shell .encounter-upgraded .machine-controls > .speed-control > span {
  margin-right: 9px;
  color: #c2d8ed;
  opacity: 1;
  font:
    800 11px/1 'Trebuchet MS',
    Arial,
    sans-serif;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 1px #020a19;
}
.compact-shell .encounter-upgraded .machine-controls .speed-chip {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  margin: 0;
  padding: 0;
  border: 1px solid #496788 !important;
  border-radius: 0 !important;
  background: linear-gradient(#183b5d, #0b233d) !important;
  box-shadow:
    inset 0 1px #aacbe228,
    inset 0 -1px #020a194d !important;
  clip-path: none !important;
  transform: none !important;
  color: #d7e8f9 !important;
  font:
    800 11px/1 'Trebuchet MS',
    Arial,
    sans-serif;
}
.compact-shell .encounter-upgraded .machine-controls .speed-chip:first-of-type {
  border-radius: 6px 0 0 6px !important;
}
.compact-shell .encounter-upgraded .machine-controls .speed-chip:last-of-type {
  border-radius: 0 6px 6px 0 !important;
}
.compact-shell .encounter-upgraded .machine-controls .speed-chip + .speed-chip {
  margin-left: -1px;
}
.compact-shell .encounter-upgraded .machine-controls .speed-chip::before,
.compact-shell .encounter-upgraded .machine-controls .speed-chip::after {
  content: none !important;
}
.compact-shell .encounter-upgraded .machine-controls .speed-chip[aria-pressed='true'] {
  z-index: 1;
  border-color: #ffe19a !important;
  background: linear-gradient(#ffe396, #dca62f) !important;
  color: #102239 !important;
  text-shadow: none !important;
}
.compact-shell .encounter-upgraded .machine-controls .speed-chip:focus-visible {
  outline: 2px solid #b6d8ff;
  outline-offset: 2px;
  z-index: 2;
}

.compact-shell .encounter-upgraded .encounter-heading > .encounter-abandon-compact {
  --lip-a: #ee9b9f;
  --lip-b: #601a2c;
  --face-a: #b84051;
  --face-b: #792236;
  --ink: #fff0f2;
  position: absolute;
  right: 8px;
  top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: auto;
  min-height: 29px;
  height: 29px;
  margin: 0;
  padding: 4px 9px;
  font:
    800 10px/16px 'Trebuchet MS',
    Arial,
    sans-serif;
}
.compact-shell .encounter-upgraded .encounter-abandon-icon {
  display: flex;
  align-items: center;
}
.compact-shell .encounter-upgraded .encounter-abandon-icon svg {
  width: 16px;
  height: 16px;
}
@media (max-width: 650px) {
  .compact-shell .encounter-upgraded > .machine-controls {
    min-height: 80px;
  }
  .compact-shell .encounter-upgraded > .encounter-heading {
    min-height: 110px;
    padding-top: 26px;
  }
}

/* Nested clipped surfaces keep the rim continuous across the diagonal corners. */
.compact-shell .encounter-upgraded button.encounter-spin > .arcade-button-face {
  isolation: isolate;
  border: 0;
  padding: 5px 10px;
  background: var(--button-rim);
  box-shadow: none;
}
.compact-shell .encounter-upgraded button.encounter-spin > .arcade-button-face::before {
  content: '';
  position: absolute;
  inset: 2px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(var(--button-top), var(--button-face) 65%, var(--button-edge));
  box-shadow:
    inset 0 2px #ffffff96,
    inset 0 -2px #0003;
  clip-path: polygon(
    7px 0,
    calc(100% - 7px) 0,
    100% 7px,
    100% calc(100% - 7px),
    calc(100% - 7px) 100%,
    7px 100%,
    0 calc(100% - 7px),
    0 7px
  );
}

/* A compact raised key: fixed plinth, beveled cap, and physical press travel. */
.compact-shell .encounter-upgraded .machine-controls > button.encounter-spin {
  width: min(100%, 340px);
  height: 50px !important;
  transform: perspective(650px) rotateX(18deg) !important;
  filter: drop-shadow(0 4px 3px #02071499) !important;
  opacity: 1;
}
.compact-shell .encounter-upgraded button.encounter-spin > .arcade-button-base {
  inset: 8px 0 1px;
  background: linear-gradient(#7138ad 0%, #3b1768 55%, #220d40 100%);
  border: 0;
  box-shadow:
    inset 0 -2px #16092b,
    inset 0 -4px #733da966;
}
.compact-shell .encounter-upgraded button.encounter-spin > .arcade-button-face {
  inset: 0 0 10px;
  background: linear-gradient(#ead6ff, #c18ce9 48%, #8754b8);
  transition:
    transform 90ms ease-out,
    filter 140ms ease-out;
}
.compact-shell .encounter-upgraded button.encounter-spin > .arcade-button-face::before {
  background: linear-gradient(#be8bf0 0%, #a56de0 14%, #8748c4 52%, #6c32a6 100%);
  box-shadow:
    inset 0 2px #f6e7ff80,
    inset 0 -3px #42166c66;
}
.compact-shell .encounter-upgraded button.encounter-spin .arcade-button-copy {
  font-size: 14px !important;
  text-shadow: 0 1px 2px #36104f;
}
.compact-shell .encounter-upgraded button.encounter-spin .arcade-button-copy small {
  font-size: 7px;
}
.compact-shell .encounter-upgraded button.encounter-spin:hover:not(:disabled) > .arcade-button-face {
  transform: translateY(-1px) !important;
  filter: brightness(1.09);
}
.compact-shell .encounter-upgraded button.encounter-spin:active:not(:disabled) > .arcade-button-face {
  transform: translateY(7px) !important;
  filter: brightness(0.95);
}
.compact-shell .encounter-upgraded button.encounter-spin:focus-visible {
  outline: 2px solid #ecd5ff;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .compact-shell .encounter-upgraded button.encounter-spin > .arcade-button-face {
    transition: none;
  }
}

/* One shared corner profile avoids uneven joins between cap and plinth. */
.compact-shell .encounter-upgraded .machine-controls > button.encounter-spin {
  transform: none !important;
}
.compact-shell .encounter-upgraded button.encounter-spin > .arcade-button-base,
.compact-shell .encounter-upgraded button.encounter-spin > .arcade-button-face {
  clip-path: none;
  border-radius: 8px;
}
.compact-shell .encounter-upgraded button.encounter-spin > .arcade-button-face {
  overflow: hidden;
}
.compact-shell .encounter-upgraded button.encounter-spin > .arcade-button-face::before {
  clip-path: none;
  border-radius: 6px;
}

/* Spin uses the same stepped face and lower lip as Battle. Hover lights the rim only. */
.compact-shell .encounter-upgraded .machine-controls > button.encounter-spin {
  height: 44px !important;
  border-bottom: 3px solid transparent !important;
  background: #03102a !important;
  clip-path: var(--px-o) !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}
.compact-shell .encounter-upgraded button.encounter-spin > .arcade-button-base {
  inset: 2px 2px -1px;
  background: linear-gradient(#d8b4ff, #492070);
  clip-path: var(--px-in);
  border-radius: 0;
  box-shadow: none;
}
.compact-shell .encounter-upgraded button.encounter-spin > .arcade-button-face {
  inset: 3px;
  padding: 0 35px;
  border-radius: 0;
  clip-path: var(--px-in);
  background: linear-gradient(#bd8af0, #773ab6);
  box-shadow:
    inset 0 2px #ffffff3a,
    inset 0 -2px #0000002e;
  transform: none !important;
  filter: none !important;
  transition: box-shadow 140ms ease-out;
}
.compact-shell .encounter-upgraded button.encounter-spin > .arcade-button-face::before {
  content: none;
}
.compact-shell .encounter-upgraded button.encounter-spin .arcade-button-copy {
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 100%;
  text-align: center;
}
.compact-shell .encounter-upgraded button.encounter-spin .arcade-button-icon {
  position: absolute;
  left: 13px;
  margin: 0;
}
.compact-shell .encounter-upgraded button.encounter-spin .arcade-button-icon,
.compact-shell .encounter-upgraded button.encounter-spin .arcade-button-icon svg {
  transform: none !important;
  animation: none !important;
}
.compact-shell .encounter-upgraded button.encounter-spin:hover:not(:disabled) > .arcade-button-face,
.compact-shell .encounter-upgraded button.encounter-spin:focus-visible > .arcade-button-face {
  box-shadow:
    inset 0 0 0 2px #f2d7ff,
    inset 0 0 9px #e2b8ff80;
}
.compact-shell .encounter-upgraded .arcade-battle-plinth > .reel-battle:hover:not(:disabled),
.compact-shell .encounter-upgraded .arcade-battle-plinth > .reel-battle:focus-visible {
  transform: none !important;
  filter: none !important;
}
.compact-shell .encounter-upgraded .reel-battle:hover:not(:disabled)::before,
.compact-shell .encounter-upgraded .reel-battle:focus-visible::before {
  background: linear-gradient(#fff7d6, #f5cc62);
}
.compact-shell .encounter-upgraded .reel-battle:hover:not(:disabled)::after,
.compact-shell .encounter-upgraded .reel-battle:focus-visible::after {
  box-shadow:
    inset 0 0 0 2px #fff5c7,
    inset 0 0 9px #fff0aa99;
}

.compact-shell .encounter-upgraded button.encounter-spin:hover:not(:disabled) > .arcade-button-face,
.compact-shell .encounter-upgraded button.encounter-spin:active:not(:disabled) > .arcade-button-face {
  transform: none !important;
  filter: none !important;
}

.compact-shell .encounter-upgraded .machine-controls > button.encounter-spin:hover:not(:disabled),
.compact-shell .encounter-upgraded .machine-controls > button.encounter-spin:focus-visible,
.compact-shell .encounter-upgraded .machine-controls > button.encounter-spin:active:not(:disabled) {
  transform: none !important;
  filter: none !important;
}

/* Give the encounter action more weight while keeping Battle compact. */
.compact-shell .encounter-upgraded .arcade-battle-plinth {
  display: grid;
  place-items: center;
}
.compact-shell .encounter-upgraded .arcade-battle-plinth > .reel-battle {
  width: 88%;
  height: 30px;
  font-size: 16px !important;
}
.compact-shell .encounter-upgraded .machine-controls > button.encounter-spin {
  height: 58px !important;
}
.compact-shell .encounter-upgraded button.encounter-spin > .arcade-button-face {
  gap: 10px;
  padding: 0 12px;
}
.compact-shell .encounter-upgraded button.encounter-spin .arcade-button-icon {
  position: static;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
}
.compact-shell .encounter-upgraded button.encounter-spin .arcade-button-icon svg {
  width: 24px;
  height: 24px;
}
.compact-shell .encounter-upgraded button.encounter-spin .arcade-button-copy {
  width: auto;
  font-size: 18px !important;
}
.compact-shell .encounter-upgraded button.encounter-spin .arcade-button-copy small {
  font-size: 9px;
}

/* Align the compact action and tighten spacing without moving controls on hover. */
.compact-shell .encounter-upgraded .encounter-heading > .encounter-abandon-compact {
  width: 94px;
  padding: 0 22px;
  line-height: 1;
  text-align: center;
}
.compact-shell .encounter-upgraded .encounter-abandon-compact > span:last-child {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.compact-shell .encounter-upgraded .encounter-abandon-compact .encounter-abandon-icon {
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
}
.compact-shell .encounter-upgraded .encounter-reel {
  gap: 2px;
}
.compact-shell .encounter-upgraded .arcade-battle-plinth {
  align-items: start;
}
.compact-shell .encounter-upgraded .machine-controls > button.encounter-spin {
  position: relative;
  top: -6px;
}
.compact-shell .encounter-upgraded .reel-battle:hover:not(:disabled)::before,
.compact-shell .encounter-upgraded .reel-battle:focus-visible::before {
  background: #e8bf63;
}
.compact-shell .encounter-upgraded .reel-battle:hover:not(:disabled)::after,
.compact-shell .encounter-upgraded .reel-battle:focus-visible::after {
  box-shadow:
    inset 0 0 0 2px #f3d488,
    inset 0 0 10px #ffd35533;
}
.compact-shell .encounter-upgraded .machine-controls > button.encounter-spin:hover > .arcade-button-face,
.compact-shell .encounter-upgraded .machine-controls > button.encounter-spin:focus-visible > .arcade-button-face {
  box-shadow:
    inset 0 0 0 2px #f3d488,
    inset 0 0 12px #ffd35533;
}
.compact-shell .encounter-upgraded .machine-controls > button.encounter-spin:hover > .arcade-button-base,
.compact-shell .encounter-upgraded .machine-controls > button.encounter-spin:focus-visible > .arcade-button-base {
  background: linear-gradient(#ffe7a0, #9a5f08);
}

.compact-shell .encounter-upgraded .encounter-abandon-compact > span:last-child {
  position: relative;
  top: 1.5px;
}
.compact-shell .encounter-upgraded .encounter-abandon-compact .encounter-abandon-icon {
  top: calc(50% + 1.5px);
}

/* Region-card feedback: warm gold edging and the same restrained gold shadow. */
.compact-shell .encounter-upgraded .machine-controls > button.encounter-spin.arcade-physical-button:hover,
.compact-shell .encounter-upgraded .machine-controls > button.encounter-spin.arcade-physical-button:focus-visible,
.compact-shell .encounter-upgraded .arcade-battle-plinth > .reel-battle:hover:not(:disabled),
.compact-shell .encounter-upgraded .arcade-battle-plinth > .reel-battle:focus-visible {
  filter: drop-shadow(0 0 5px #ffd35566) !important;
  transform: none !important;
}
.compact-shell
  .encounter-upgraded
  .machine-controls
  > button.encounter-spin.arcade-physical-button:hover
  > .arcade-button-face,
.compact-shell
  .encounter-upgraded
  .machine-controls
  > button.encounter-spin.arcade-physical-button:focus-visible
  > .arcade-button-face,
.compact-shell .encounter-upgraded .reel-battle:hover:not(:disabled)::after,
.compact-shell .encounter-upgraded .reel-battle:focus-visible::after {
  box-shadow:
    inset 0 0 0 2px #f3d488,
    inset 0 2px #ffffff3a,
    inset 0 -2px #0000002e;
}

/* A shared arcade console groups the action and speed, matching the supplied reference. */
.compact-shell .encounter-upgraded > .machine-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: min(100%, 560px);
  min-height: 94px;
  gap: 18px;
  margin: 0 auto;
  padding: 12px 18px;
  border: 2px solid transparent;
  border-image: url("/static/game/ui/pixel-gold-frame.8917bbdb0a7c.svg?v=20261011-frame2") 12 / 12px / 0 stretch;
  background: linear-gradient(#102d48, #07192e);
  box-sizing: border-box;
}
.compact-shell .encounter-upgraded .machine-controls > button.encounter-spin {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  top: 0;
}
.compact-shell .encounter-upgraded .machine-controls > .speed-control {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(4, 28px);
  grid-template-rows: 13px 28px;
  justify-content: center;
  align-items: center;
  column-gap: 0;
  row-gap: 4px;
  height: auto;
  order: initial;
}
.compact-shell .encounter-upgraded .machine-controls > .speed-control > span {
  grid-column: 1 / -1;
  margin: 0;
  text-align: center;
  font-size: 9px;
  letter-spacing: 0.1em;
}
@media (max-width: 550px) {
  .compact-shell .encounter-upgraded > .machine-controls {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 12px;
  }
  .compact-shell .encounter-upgraded .machine-controls > .speed-control {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
  }
}

/* Reference proportions: compact cap, gold divider, and two small side studs. */
.compact-shell .encounter-upgraded > .machine-controls {
  position: relative;
  grid-template-columns: minmax(0, 300px) 132px;
  min-height: 84px;
  gap: 36px;
  padding: 12px 22px;
}
.compact-shell .encounter-upgraded > .machine-controls::before {
  content: '';
  position: absolute;
  left: calc(50% + 84px);
  top: 20px;
  bottom: 20px;
  width: 1px;
  background: linear-gradient(transparent, #c49a41 20%, #ffdf83 50%, #c49a41 80%, transparent);
  box-shadow: 1px 0 #020a1999;
  pointer-events: none;
}
.compact-shell .encounter-upgraded > .machine-controls::after {
  content: '';
  position: absolute;
  inset: 0 9px;
  background:
    radial-gradient(ellipse, #fff0ad 0 18%, #dbad48 25% 48%, #6f511e 55% 65%, transparent 72%) left center / 8px 11px
      no-repeat,
    radial-gradient(ellipse, #fff0ad 0 18%, #dbad48 25% 48%, #6f511e 55% 65%, transparent 72%) right center / 8px 11px
      no-repeat;
  pointer-events: none;
}
.compact-shell .encounter-upgraded .machine-controls > button.encounter-spin {
  height: 48px !important;
}
.compact-shell .encounter-upgraded .machine-controls > .speed-control {
  grid-template-columns: repeat(4, 33px);
  grid-template-rows: 13px 28px;
}
.compact-shell .encounter-upgraded .machine-controls .speed-chip {
  width: 33px;
  min-width: 33px;
  flex-basis: 33px;
}
@media (max-width: 650px) and (min-width: 551px) {
  .compact-shell .encounter-upgraded > .machine-controls {
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 24px;
    padding-inline: 20px;
  }
  .compact-shell .encounter-upgraded > .machine-controls::before {
    left: auto;
    right: 144px;
  }
  .compact-shell .encounter-upgraded .machine-controls > .speed-control {
    grid-template-columns: repeat(4, 28px);
  }
  .compact-shell .encounter-upgraded .machine-controls .speed-chip {
    width: 28px;
    min-width: 28px;
  }
}
@media (max-width: 550px) {
  .compact-shell .encounter-upgraded > .machine-controls {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 12px 22px;
  }
  .compact-shell .encounter-upgraded > .machine-controls::before {
    content: none;
  }
}

/* Compact red key with the warm gold rim shown in the reference. */
.compact-shell .encounter-upgraded .encounter-heading > .encounter-abandon-compact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 84px;
  height: 25px;
  min-height: 25px;
  padding: 2px 6px;
  border: 2px solid #c9a34e !important;
  border-image: none !important;
  border-radius: 7px !important;
  clip-path: none !important;
  background: linear-gradient(#c6464a, #a32632 60%, #87232d) !important;
  box-shadow:
    inset 0 1px #ffb3a866,
    inset 0 -2px #691b28,
    0 2px 2px #020a1966 !important;
  color: #fff2e6;
  font-size: 9px;
  line-height: 1;
  text-shadow: 0 1px #671c24;
}
.compact-shell .encounter-upgraded .encounter-abandon-compact::before,
.compact-shell .encounter-upgraded .encounter-abandon-compact::after {
  content: none !important;
}
.compact-shell .encounter-upgraded .encounter-abandon-compact > span:last-child {
  position: static;
  display: block;
  width: auto;
  height: auto;
}
.compact-shell .encounter-upgraded .encounter-abandon-compact .encounter-abandon-icon {
  position: static;
  transform: none;
}
.compact-shell .encounter-upgraded .encounter-abandon-compact .encounter-abandon-icon svg {
  width: 13px;
  height: 13px;
}
.compact-shell .encounter-upgraded .encounter-heading > .encounter-abandon-compact:hover {
  border-color: #ffe39b !important;
  transform: none !important;
  filter: drop-shadow(0 0 5px #ffd35566);
}

/* The frame and its dark fill share one silhouette, so cut corners cannot leak. */
.compact-shell .encounter-upgraded > .machine-controls {
  border: 0 !important;
  border-image: none !important;
  background: url("ui/encounters/control-console-frame.72c71e993e36.svg") center / 100% 100% no-repeat !important;
  box-shadow: none;
}
.compact-shell .encounter-upgraded > .machine-controls::before {
  left: calc(50% + 80px);
  top: 18px;
  bottom: 18px;
  width: 8px;
  background: url("ui/encounters/control-console-divider.bfea96c65ae4.svg") center / 100% 100% no-repeat;
  box-shadow: none;
}
.compact-shell .encounter-upgraded > .machine-controls::after {
  content: none;
}
@media (max-width: 650px) and (min-width: 551px) {
  .compact-shell .encounter-upgraded > .machine-controls::before {
    left: auto;
    right: 140px;
  }
}
@media (max-width: 550px) {
  .compact-shell .encounter-upgraded > .machine-controls::before {
    content: none;
  }
}

/* Slightly more compact proportions for the framed control console. */
.compact-shell .encounter-upgraded > .machine-controls {
  width: min(100%, 520px);
  min-height: 76px;
  grid-template-columns: minmax(0, 280px) 124px;
  gap: 28px;
  padding: 10px 22px;
}
.compact-shell .encounter-upgraded > .machine-controls::before {
  left: calc(50% + 74px);
  right: auto;
  top: 16px;
  bottom: 16px;
}
.compact-shell .encounter-upgraded .machine-controls > button.encounter-spin {
  height: 44px !important;
}
.compact-shell .encounter-upgraded button.encounter-spin .arcade-button-copy {
  font-size: 16px !important;
}
.compact-shell .encounter-upgraded button.encounter-spin .arcade-button-copy small {
  font-size: 8px;
}
.compact-shell .encounter-upgraded .machine-controls > .speed-control {
  grid-template-columns: repeat(4, 31px);
  grid-template-rows: 13px 24px;
}
.compact-shell .encounter-upgraded .machine-controls .speed-chip {
  width: 31px;
  min-width: 31px;
  height: 24px;
  min-height: 24px;
  padding-block: 0;
}
@media (max-width: 550px) {
  .compact-shell .encounter-upgraded > .machine-controls {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}

/* Keep the gold face solid while the encounter still needs a spin. */
.compact-shell .encounter-upgraded .arcade-battle-plinth > .reel-battle:disabled {
  opacity: 1 !important;
  filter: none !important;
  color: #102239 !important;
  background: #03102a !important;
}
.compact-shell .encounter-upgraded .arcade-battle-plinth > .reel-battle:disabled::before {
  background: linear-gradient(#ffe7a0, #9a5f08) !important;
}
.compact-shell .encounter-upgraded .arcade-battle-plinth > .reel-battle:disabled::after {
  background: linear-gradient(#ffe9a6, #dba22a) !important;
}
.compact-shell .encounter-upgraded .selection-arrow {
  width: 15px;
  height: 26px;
  top: calc(39% - 13px);
  z-index: 15;
}
.compact-shell .encounter-upgraded .arcade-reel-motion:after {
  background:
    linear-gradient(#090d164d, transparent 25% 75%, #090d164d),
    linear-gradient(90deg, #30291b33, transparent 18% 82%, #30291b33);
}
.compact-shell .encounter-upgraded .expedition-clock {
  position: absolute;
  top: 10px;
  left: 102px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #ffe5a0;
  font-size: 9px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  padding: 0 5px;
  border-radius: 4px;
  background: #06172eaa;
}

/* Match TEAM/BAG feedback: lift and brighten the whole key, keeping its normal rim. */
.site-theme.compact-shell
  .encounter-upgraded
  .machine-controls
  > button.encounter-spin.arcade-physical-button:is(:hover, :focus-visible):not(:disabled),
.site-theme.compact-shell
  .encounter-upgraded
  .arcade-battle-plinth
  > .reel-battle:is(:hover, :focus-visible):not(:disabled) {
  filter: brightness(1.1) !important;
  transform: translateY(-1px) !important;
}
.site-theme.compact-shell
  .encounter-upgraded
  .machine-controls
  > button.encounter-spin.arcade-physical-button
  > .arcade-button-face,
.site-theme.compact-shell .encounter-upgraded .arcade-battle-plinth > .reel-battle::after {
  box-shadow:
    inset 0 2px #ffffff3a,
    inset 0 -2px #0000002e !important;
}
.site-theme.compact-shell
  .encounter-upgraded
  .machine-controls
  > button.encounter-spin.arcade-physical-button
  > .arcade-button-base {
  background: linear-gradient(#d8b4ff, #492070) !important;
}
.site-theme.compact-shell .encounter-upgraded .arcade-battle-plinth > .reel-battle::before {
  background: linear-gradient(#ffe7a0, #9a5f08) !important;
}
@media (prefers-reduced-motion: reduce) {
  .site-theme.compact-shell
    .encounter-upgraded
    .machine-controls
    > button.encounter-spin.arcade-physical-button:is(:hover, :focus-visible):not(:disabled),
  .site-theme.compact-shell
    .encounter-upgraded
    .arcade-battle-plinth
    > .reel-battle:is(:hover, :focus-visible):not(:disabled) {
    transform: none !important;
  }
}
.compact-shell .encounter-upgraded .reel-pokemon > .reel-tags {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: max-content;
  top: auto;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: 14;
  transform: translateX(-50%);
}
.compact-shell .encounter-upgraded .reel-tags > .reel-elite {
  position: static;
  transform: none;
}
.compact-shell .encounter-upgraded button.reel-support {
  min-height: 0;
  width: auto;
  padding: 2px 4px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  color: #23445e;
  font: 800 10px/1.2 var(--font);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.compact-shell .encounter-upgraded button.reel-support:focus-visible {
  outline: 2px solid #23445e;
  outline-offset: 1px;
}

/* Tighten only the final metadata rows; retain name/type spacing. */
.compact-shell .encounter-upgraded .reel-archetype {
  margin-top: -2px;
  padding: 0;
}
.compact-shell .encounter-upgraded button.reel-support {
  margin-top: -2px;
  padding: 0 4px;
}

/* Keep the cylinder's lower seam thin and shaded, independent of text spacing. */
.compact-shell .encounter-upgraded .reel-drum::before {
  content: '';
  position: absolute;
  top: calc(82.5% - 1px);
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(#837452, #b19a6f 45%, #cdbc98);
  z-index: 14;
  pointer-events: none;
}