@font-face {
  font-family: ExpeditionPixel;
  src: url(/_fonts/pixelifysans-v3-CHylV-3HFUT7aC4iv1TxGDR9Jn0Ei0tSaJ0.woff2);
}
:root {
  --ink:#f1f3da;
  --muted:#a7bdd1;
  --gold:#f4d38a;
  --navy:#142b49;
  --blue:#244877;
  --edge:#acc6da;
  --green:#8fc9ad;
  --font:ExpeditionPixel,"Microsoft YaHei","PingFang SC",sans-serif;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #12243b;
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
}
body {
  background:
    repeating-linear-gradient(
      0deg,
      #152a45 0,
      #152a45 2px,
      #172e4a 2px,
      #172e4a 4px);
  user-select: none;
}
button,
input,
textarea {
  font: inherit;
}
button {
  color: inherit;
  border: 2px solid #92adc1;
  border-radius: 0;
  background: #27466b;
  padding: 10px 14px;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px #193450, 2px 3px 0 #091a2e;
  transition: background .12s, transform .12s;
}
button:hover:enabled {
  background: #385e87;
  border-color: #f2dc9b;
}
button:active:enabled {
  transform: translateY(2px);
  box-shadow: inset 0 0 0 2px #193450;
}
button:disabled {
  opacity: .42;
  cursor: default;
}
button:focus-visible,
textarea:focus-visible {
  outline: 3px solid #f4d38a;
  outline-offset: 3px;
}
button.primary {
  background: #b4cbaa;
  border-color: #f0edc7;
  color: #183c3a;
  text-shadow: none;
  box-shadow: inset 0 0 0 2px #729b88, 2px 3px 0 #091a2e;
  font-weight: bold;
}
button.primary:hover:enabled {
  background: #d2dfb5;
}
.danger {
  background: #874856;
}
.tiny {
  font-size: 12px;
  padding: 5px 10px;
}
.large {
  padding: 14px 22px;
  margin-top: 12px;
}
p {
  line-height: 1.8;
  margin: 10px 0;
}
h1,
h2,
h3 {
  color: var(--ink);
  font: inherit;
  font-weight: bold;
  line-height: 1.4;
  margin: 0 0 12px;
}
h1 {
  font-size: 25px;
}
h2 {
  font-size: 21px;
}
h3 {
  font-size: 17px;
}
small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
strong {
  font-weight: bold;
}
img,
canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
button img {
  pointer-events: none;
}
.panel {
  border: 2px solid var(--edge);
  background:
    linear-gradient(
      180deg,
      #294e7d,
      #1d3b63);
  border-radius: 0;
  box-shadow:
    0 0 0 2px #0d2037,
    inset 0 0 0 2px #54739a,
    4px 5px 0 #0c1d32;
  padding: 22px;
}
.eyebrow {
  font: 12px/1.4 ExpeditionPixel, monospace;
  letter-spacing: 2px;
  color: var(--gold);
  margin: 0 0 10px;
  text-transform: uppercase;
}
.muted {
  color: var(--muted);
  font-size: 13px;
}
.notice {
  color: #e0cfa5;
  font-size: 12px;
  padding: 12px;
  background: #132f51;
  border-left: 3px solid #b69e6b;
  line-height: 1.7;
}
.hp {
  height: 7px;
  background: #122e43;
  border: 1px solid #0c2435;
  overflow: hidden;
}
.hp i {
  height: 100%;
  display: block;
  background: #94c6a5;
  transition: width .2s;
}
.badge {
  border: 1px solid #739baf;
  color: #d9dcb2;
  font-size: 11px;
  padding: 4px 8px;
  white-space: nowrap;
}
#game-ui {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  z-index: 1;
}
#app {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}
body.in-battle #app {
  z-index: 100;
  pointer-events: auto;
}
body.in-battle #game-ui {
  visibility: hidden;
}
body.in-battle .battle-screen {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
body.in-battle .battle-canvas {
  image-rendering: pixelated;
}
body.in-battle .hud-top,
body.in-battle .hud-bottom,
body.in-battle .hud-pause,
body.in-battle .results {
  border-radius: 0;
  font-family: var(--font);
}
body.in-battle .btn {
  border-radius: 0;
  font-family: var(--font);
}
.topbar {
  height: 76px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  border-bottom: 2px solid #536d86;
  background: #142a44;
  box-shadow: 0 3px 0 #0c1e34;
  gap: 12px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.brand strong {
  font-size: 20px;
  letter-spacing: 2px;
}
.brand small {
  font-size: 11px;
  letter-spacing: 2px;
  margin-top: 3px;
  color: #c2cfcd;
}
.pixel-ball {
  display: inline-block;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background:
    linear-gradient(
      #c77368 0,
      #c77368 42%,
      #243a46 42%,
      #243a46 57%,
      #dbddba 57%);
  border: 3px solid #233b49;
  box-shadow: 0 0 0 1px #9fb5b7;
  position: relative;
}
.pixel-ball:after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  left: 5px;
  top: 5px;
  background: #e3e4c6;
  border: 1px solid #263e4e;
}
.page-name {
  font-size: 13px;
  color: #a7bdcd;
}
.wallet {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 14px;
  color: var(--gold);
  white-space: nowrap;
}
.footer {
  height: 35px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32px;
  border-top: 1px solid #4a6380;
  color: #9cb6c8;
  font-size: 11px;
  letter-spacing: 1px;
}
.hub {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(260px, .86fr) minmax(480px, 1.6fr);
  gap: 30px;
  max-width: 1400px;
  width: 100%;
  margin: auto;
  padding: 32px 36px;
}
.trainer-panel {
  position: relative;
  overflow: hidden;
  min-height: 0;
  padding: 0;
}
.camp-art {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .26;
}
.trainer-panel:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:
    linear-gradient(
      180deg,
      #183b6355,
      transparent 40%,
      #122e4ce6);
}
.trainer-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 22px 22px 0;
}
.trainer-content > .eyebrow {
  font-size: 10px;
  color: #c2d3c3;
  align-self: flex-start;
  letter-spacing: 1.5px;
}
.trainer-content h1 {
  font-size: 23px;
  margin: 6px 0;
}
.region {
  color: #b6cfcb;
  font-size: 12px;
  margin: 0;
}
.trainer-portrait {
  height: 80px;
  height: clamp(80px, 25vh, 240px);
  object-fit: contain;
  width: 90%;
  flex: 1;
  min-height: 60px;
  filter: drop-shadow(4px 5px 0 #102c49);
  padding: 10px;
  image-rendering: pixelated;
}
.energy {
  width: 100%;
  max-width: 260px;
  margin: 3px 0 8px;
}
.energy > span {
  font-size: 11px;
  display: block;
  margin-bottom: 6px;
  color: #d3dec9;
}
.party-preview {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  max-height: 95px;
}
.preview-mon {
  text-align: center;
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.preview-mon .mon-sprite {
  transform: scale(.75);
  transform-origin: center bottom;
  margin-top: -15px;
  margin-bottom: -3px;
}
.preview-mon small {
  font-size: 10px;
}
.trainer-bottom {
  padding: 13px 0;
  margin-top: 16px;
  border-top: 1px solid #63819a;
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #c9d6ca;
}
.hub-nav {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-top: 8px;
}
.nav-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
  gap: 12px;
}
.nav-heading h2 {
  font-size: 29px;
  margin: 0;
}
.day-tag {
  font-family: ExpeditionPixel, monospace;
  font-size: 13px;
  color: #b7c6c6;
  border: 1px solid #5d7486;
  padding: 7px 10px;
  white-space: nowrap;
}
.menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: 16px;
  flex: 1;
  min-height: 0;
}
.menu-card {
  text-align: left;
  position: relative;
  padding: 14px 15px;
}
.menu-card:hover:enabled {
  background: #315985;
}
.menu-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.menu-icon {
  color: #b6c8ce;
  font-size: 29px;
  width: 35px;
  text-align: center;
  text-shadow: 3px 2px 0 #0e2c46;
}
.menu-num {
  position: absolute;
  right: 14px;
  top: 9px;
  font-family: ExpeditionPixel, monospace;
  font-size: 12px;
  color: #7393ac;
}
.menu-label {
  padding-top: 10px;
}
.menu-label strong {
  display: block;
  font-size: 18px;
  white-space: nowrap;
}
.menu-label small {
  font-size: 11px;
  margin-top: 8px;
  white-space: nowrap;
}
.menu-arrow {
  margin-left: auto;
  color: #7796ab;
  font-size: 11px;
}
.menu-card.featured {
  background:
    linear-gradient(
      140deg,
      #436867,
      #2b4b59);
  border-color: #c9d5b3;
}
.featured .menu-icon,
.featured .menu-arrow {
  color: var(--gold);
}
.camp-tip {
  font-size: 12px;
  color: #a6b9bd;
  padding: 12px 0 0;
  margin: 0;
  line-height: 1.7;
}
.page {
  overflow: auto;
  flex: 1;
  padding: 24px 32px 32px;
  width: 100%;
  max-width: 1400px;
  margin: auto;
}
.page-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 23px;
}
.page-top .eyebrow {
  margin: 0;
}
.back {
  font-size: 12px;
  padding: 7px 12px;
  background: #1d3859;
}
.lab-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
}
.welcome {
  display: flex;
  align-items: center;
  gap: 30px;
  max-width: 1000px;
  margin: 20px auto;
}
.person-art {
  width: 120px;
  max-height: 250px;
  object-fit: contain;
}
.starter-grid {
  display: flex;
  gap: 18px;
  margin-top: 25px;
}
.starter {
  flex: 1;
  text-align: center;
  min-width: 130px;
}
.starter > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.collection {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.mon-card {
  padding: 10px;
  text-align: left;
}
.mon-card.selected {
  border-color: #e4d796;
  background: #345d72;
}
.collection-content {
  display: flex;
  align-items: center;
  gap: 10px;
}
.small-mon {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.small-mon > .mon-sprite {
  zoom: .65;
  flex-shrink: 0;
}
.small-mon > div {
  flex: 1;
  min-width: 55px;
}
.small-mon small {
  margin: 3px 0;
}
.hp-label {
  font-size: 10px;
  color: #8cbaaa;
  display: none;
}
.shop-row {
  display: flex;
  gap: 15px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #577189;
}
.shop-row > div {
  flex: 1;
}
.shop-row small {
  margin-top: 6px;
}
.potion-icon {
  width: 20px;
  height: 27px;
  display: block;
  background: #b19dc7;
  border: 4px solid #725f91;
  box-shadow: 0 -4px 0 -1px #b8ccbc;
}
.center-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
}
.joy {
  text-align: center;
}
.joy-scene {
  height: 125px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.joy-scene canvas {
  width: 320px;
  height: 160px;
  object-fit: contain;
}
.joy h1 {
  font-size: 23px;
}
.condition {
  display: flex;
  gap: 20px;
  justify-content: center;
  color: #c9d9cd;
  font-size: 12px;
  margin: 20px 0;
}
.recruit {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.gacha-display {
  height: 125px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.ticket-count {
  color: var(--gold);
  margin: 12px 0;
}
.adventure-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 24px;
}
.stage-option {
  width: 100%;
  margin-top: 8px;
  text-align: left;
  padding: 12px 16px;
  background: #1e3d60;
  box-shadow: none;
}
.stage-option.selected {
  background: #395d72;
  border-color: #dbd59b;
}
.stage-row {
  display: flex;
  align-items: center;
  gap: 18px;
}
.stage-row > span:nth-child(2) {
  flex: 1;
}
.stage-index {
  font-family: ExpeditionPixel, monospace;
  color: var(--gold);
  font-size: 23px;
}
.stage-row small {
  font-size: 11px;
  margin-top: 4px;
}
.briefing {
  position: sticky;
  top: 0;
  align-self: start;
}
.route-art {
  background:
    repeating-linear-gradient(
      0deg,
      #486959 0,
      #486959 3px,
      #436454 3px,
      #436454 6px);
  height: 125px;
  border: 2px solid #71968b;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin: 20px 0;
}
dl {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  font-size: 13px;
}
dt {
  color: var(--muted);
}
dd {
  margin: 0;
}
.arena-panel {
  margin-top: 5px;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.opponents {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 24px 0;
}
.opponent {
  border: 2px solid #64829f;
  background: #163659;
  padding: 22px;
  text-align: center;
}
.opponent .eyebrow {
  font-size: 10px;
  letter-spacing: 1px;
}
.opponent img {
  width: 100%;
  height: 150px;
  object-fit: contain;
  filter: drop-shadow(5px 6px 0 #0e243c);
}
.opponent h2 {
  margin: 15px 0 3px;
}
.opponent p {
  color: var(--gold);
  font-size: 13px;
}
.opponent button {
  width: 100%;
  margin-top: 20px;
}
.opponent.won {
  border-color: #8eb8a3;
}
.tasks-panel {
  max-width: 1000px;
  margin: auto;
}
.task-list {
  margin-top: 28px;
}
.task {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 22px 10px;
  border-top: 1px solid #5f7d97;
}
.task > div {
  flex: 1;
}
.task h2 {
  font-size: 18px;
  margin: 0;
}
.task p {
  font-size: 12px;
  color: var(--gold);
}
.task .hp {
  max-width: 400px;
}
.task-seal {
  font-size: 28px;
  color: #d4d7af;
}
.task > strong {
  font-family: ExpeditionPixel, monospace;
  color: #c4d7c3;
  white-space: nowrap;
}
.report {
  text-align: center;
  max-width: 850px;
  margin: auto;
  padding: 30px;
}
.report-emblem {
  font-size: 56px;
  color: var(--gold);
  margin: 20px;
}
.failure .report-emblem {
  color: #e5a393;
}
.report-rewards {
  display: flex;
  justify-content: center;
  gap: 22px;
  padding: 20px;
  color: #f3d69d;
}
.report-mons {
  display: flex;
  justify-content: center;
  gap: 25px;
}
.report-mons > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.report > button {
  margin: 20px 10px 0;
}
.lan-panel {
  max-width: 1050px;
  margin: auto;
}
.lan-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 25px 0;
}
.lan-codes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.lan-codes label {
  font-size: 13px;
  color: #d7dabe;
}
.lan-codes textarea {
  width: 100%;
  display: block;
  resize: vertical;
  border: 2px solid #6c8a9e;
  background: #112d4c;
  color: #d4e3d4;
  padding: 12px;
  margin-top: 10px;
  font: 12px/1.5 monospace;
  user-select: text;
}
.lan-bottom {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}
.lan-bottom p {
  color: var(--green);
  font-size: 13px;
}
.mon-sprite {
  display: inline-block;
  image-rendering: pixelated;
  background-repeat: no-repeat;
  animation: idle 1.2s steps(var(--frames)) infinite;
  flex-shrink: 0;
  vertical-align: middle;
}
@keyframes idle {
  from {
    background-position: var(--ox,0px) var(--oy,0px);
  }
  to {
    background-position: calc(var(--ox,0px) - var(--fw) * var(--frames)) var(--oy,0px);
  }
}
.mon-fallback {
  display: inline-block;
  padding: 20px;
  color: #b5c59a;
}
.boot {
  padding: 80px;
  text-align: center;
}
.fatal {
  margin: 40px;
  max-width: 800px;
}
.dialog-back {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 200;
  background: #081b30c9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.dialog {
  max-width: 600px;
  width: 100%;
  max-height: 95vh;
  overflow: auto;
  animation: dialog-in .18s steps(4);
}
.dialog h2 {
  font-size: 22px;
}
.dialog-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
  justify-content: flex-end;
}
.capture-content,
.catch-result {
  text-align: center;
}
.capture-content > p {
  text-align: left;
}
.heal-target {
  margin: 6px;
}
.toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  background: #e2dfbd;
  color: #1b3c42;
  border: 3px solid #566c73;
  box-shadow: 0 0 0 2px #10283f;
  padding: 12px 20px;
  max-width: 85%;
  font-size: 13px;
  pointer-events: none;
}
.battle-transition {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 150;
  background:
    repeating-linear-gradient(
      0deg,
      #132a42 0,
      #132a42 8px,
      #284663 8px,
      #284663 16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: encounter .3s steps(5);
}
.battle-transition h2 {
  color: #f0e6be;
}
.battle-transition p {
  color: #a3c4c1;
  font-size: 13px;
}
.encounter-mark {
  font: 70px ExpeditionPixel, monospace;
  color: #f0d38c;
  text-shadow: 4px 4px #945451;
  animation: blink .25s steps(2) infinite;
}
@keyframes blink {
  50% {
    opacity: .3;
  }
}
@keyframes encounter {
  from {
    clip-path: inset(50% 0);
  }
  to {
    clip-path: inset(0);
  }
}
@keyframes dialog-in {
  from {
    transform: translateY(8px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.exploration {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #142b36;
}
.exploration > canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  outline: none;
}
.field-top {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  pointer-events: none;
}
.field-top > * {
  pointer-events: auto;
}
.field-location {
  padding: 10px 16px;
  background: #1b3c61ed;
}
.field-location small {
  font-family: ExpeditionPixel, monospace;
  letter-spacing: 2px;
  font-size: 10px;
  margin-bottom: 3px;
}
.field-objective {
  padding: 12px;
  font-size: 12px;
  background: #1b3c61dd;
}
.field-retreat {
  padding: 10px 14px;
  margin-left: auto;
  margin-right: 215px;
  font-size: 12px;
}
.field-team {
  position: absolute;
  left: 18px;
  top: 94px;
  padding: 10px 12px;
  background: #1a3b5ccd;
  min-width: 112px;
  pointer-events: none;
}
.field-mon {
  margin: 4px 0 9px;
  font-size: 11px;
}
.field-mon .hp {
  margin-top: 4px;
  height: 5px;
}
.field-loot {
  position: absolute;
  top: 94px;
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: #193958dd;
  font-size: 11px;
  pointer-events: none;
}
.field-loot small {
  font-size: 10px;
}
.dpad {
  position: absolute;
  bottom: 32px;
  left: 20px;
  width: 156px;
  height: 135px;
}
.dir {
  position: absolute;
  width: 49px;
  height: 43px;
  padding: 0;
  background: #193c60d9;
  border-color: #b5ccbb;
  touch-action: none;
  font-size: 22px;
}
.dir-1 {
  left: 53px;
  top: 0;
}
.dir-2 {
  left: 0;
  top: 46px;
}
.dir-0 {
  left: 53px;
  top: 92px;
}
.dir-3 {
  left: 106px;
  top: 46px;
}
.field-actions {
  position: absolute;
  bottom: 38px;
  right: 22px;
  display: flex;
  gap: 12px;
}
.field-actions button {
  padding: 16px 18px;
  background: #244b6fdd;
  font-size: 13px;
}
.field-caption {
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
  font-size: 10px;
  color: #d2dbbd;
  text-shadow: 1px 1px #162a3c;
  pointer-events: none;
}
body.in-battle .play-bar {
  border: 2px solid #a7c2d1;
  border-radius: 0;
  background: linear-gradient(#254b77ee, #193858f5);
  box-shadow: 0 0 0 2px #122a42, inset 0 0 0 2px #557a97;
}
body.in-battle .pb-move,
body.in-battle .pb-dodge,
body.in-battle .pb-slot,
body.in-battle .hud-btn {
  border-radius: 0 !important;
  font-family: var(--font);
  background: #284a70;
  border: 2px solid #9bb6c6;
  box-shadow: inset 0 0 0 2px #3c6183, 2px 2px 0 #132d46;
}
body.in-battle .pb-move .nm {
  font-family: var(--font);
  text-transform: none;
}
body.in-battle .pb-move .ty {
  border-radius: 0;
}
body.in-battle .pb-move .cd {
  border-radius: 0;
}
.exp-battle-result {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  background: #0b2037bd;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
  pointer-events: auto;
}
.exp-battle-result .panel {
  text-align: center;
  max-width: 600px;
}
.exp-battle-result button {
  margin: 12px 8px 0;
  padding: 12px 20px;
}
.exp-battle-result p {
  font-size: 13px;
  color: #bacdd1;
}
@media (min-width:1500px) {
  .hub {
    padding-top: 45px;
    padding-bottom: 45px;
  }
  .trainer-portrait {
    max-height: 270px;
  }
  .menu-label strong {
    font-size: 21px;
  }
}
@media (max-height:650px) {
  .topbar {
    height: 60px;
    padding: 0 24px;
  }
  .hub {
    padding: 22px 26px;
    gap: 23px;
  }
  .trainer-content {
    padding: 15px 16px 0;
  }
  .trainer-content h1 {
    font-size: 20px;
  }
  .trainer-content > .eyebrow {
    font-size: 9px;
  }
  .trainer-bottom {
    padding: 8px 0;
    margin-top: 10px;
  }
  .nav-heading {
    margin-bottom: 16px;
  }
  .nav-heading h2 {
    font-size: 24px;
  }
  .menu-grid {
    gap: 13px;
  }
  .menu-label strong {
    font-size: 16px;
  }
  .menu-label small {
    font-size: 10px;
    margin-top: 5px;
  }
  .menu-card {
    padding: 10px 12px;
  }
  .menu-inner {
    gap: 9px;
  }
  .menu-icon {
    font-size: 25px;
    width: 28px;
  }
  .footer {
    height: 28px;
  }
  .party-preview {
    max-height: 68px;
  }
  .preview-mon .mon-sprite {
    zoom: .8;
  }
  .page {
    padding: 18px 25px;
  }
  .panel {
    padding: 18px;
  }
  .page-top {
    margin-bottom: 18px;
  }
  .trainer-panel {
    padding: 0;
  }
  .menu-card.panel {
    padding: 10px 12px;
  }
  .opponent img {
    height: 105px;
  }
  .opponent {
    padding: 15px;
  }
  .opponents {
    margin: 17px 0;
    gap: 16px;
  }
  .opponent h2 {
    font-size: 18px;
  }
  .opponent button {
    margin-top: 12px;
  }
  .joy-scene {
    height: 95px;
  }
  .joy-scene canvas {
    width: 240px;
    height: 120px;
  }
  .condition {
    margin: 12px 0;
  }
  .gacha-display {
    height: 95px;
  }
  .route-art {
    height: 95px;
    margin: 14px 0;
  }
  .stage-option {
    padding: 9px 12px;
  }
  .task {
    padding: 17px 6px;
  }
  .briefing p {
    font-size: 12px;
  }
  .briefing dl {
    gap: 10px;
    font-size: 12px;
  }
  .large {
    padding: 11px 16px;
  }
  .report {
    padding: 25px;
  }
}
@media (max-height:470px) {
  html,
  body {
    font-size: 12px;
  }
  .topbar {
    height: 48px;
    padding: 0 18px;
  }
  .brand strong {
    font-size: 16px;
  }
  .brand small {
    font-size: 9px;
  }
  .brand .pixel-ball {
    width: 19px;
    height: 19px;
  }
  .wallet {
    font-size: 12px;
    gap: 13px;
  }
  .hub {
    padding: 14px 19px;
    gap: 18px;
    grid-template-columns: minmax(200px, .8fr) minmax(380px, 1.6fr);
  }
  .trainer-content {
    padding: 10px 13px 0;
  }
  .trainer-content h1 {
    font-size: 17px;
    margin: 3px 0;
  }
  .trainer-content > .eyebrow {
    margin-bottom: 5px;
    font-size: 8px;
  }
  .region {
    font-size: 10px;
  }
  .trainer-portrait {
    padding: 4px;
    height: 90px;
    max-height: 130px;
  }
  .energy {
    margin: 2px 0 4px;
  }
  .energy > span {
    font-size: 9px;
    margin-bottom: 3px;
  }
  .energy .hp {
    height: 5px;
  }
  .party-preview {
    max-height: 46px;
    min-height: 40px;
  }
  .preview-mon {
    width: 55px;
  }
  .preview-mon .mon-sprite {
    zoom: .58;
  }
  .preview-mon small {
    font-size: 8px;
  }
  .trainer-bottom {
    font-size: 10px;
    padding: 6px 0;
    margin-top: 6px;
  }
  .nav-heading {
    margin-bottom: 11px;
  }
  .nav-heading h2 {
    font-size: 20px;
  }
  .nav-heading .eyebrow {
    font-size: 9px;
    margin-bottom: 5px;
    letter-spacing: 1.5px;
  }
  .hub-nav {
    padding-top: 2px;
  }
  .day-tag {
    font-size: 10px;
    padding: 5px;
  }
  .menu-grid {
    gap: 10px;
  }
  .menu-label {
    padding-top: 5px;
  }
  .menu-label strong {
    font-size: 14px;
  }
  .menu-label small {
    font-size: 9px;
    margin-top: 5px;
  }
  .menu-num {
    top: 5px;
    right: 8px;
    font-size: 9px;
  }
  .menu-card.panel {
    padding: 8px;
  }
  .menu-inner {
    gap: 7px;
  }
  .menu-icon {
    font-size: 21px;
    width: 24px;
  }
  .menu-arrow {
    font-size: 8px;
  }
  .camp-tip {
    font-size: 10px;
    padding-top: 9px;
  }
  .footer {
    height: 22px;
    font-size: 9px;
    padding: 0 19px;
  }
  .page {
    padding: 12px 18px 20px;
  }
  .page-top {
    margin-bottom: 14px;
  }
  .page-top .eyebrow {
    font-size: 9px;
  }
  .panel {
    padding: 16px;
  }
  .lab-layout,
  .center-layout,
  .adventure-layout {
    gap: 16px;
  }
  h1 {
    font-size: 21px;
  }
  h2 {
    font-size: 18px;
  }
  .welcome {
    margin: 6px auto;
    gap: 20px;
  }
  .starter {
    min-width: 110px;
    padding: 8px;
  }
  .starter-grid {
    margin-top: 15px;
    gap: 12px;
  }
  .starter .mon-sprite {
    zoom: .75;
  }
  .person-art {
    width: 85px;
  }
  .opponent img {
    height: 80px;
  }
  .opponent p {
    font-size: 11px;
  }
  .opponent small {
    font-size: 10px;
  }
  .opponent h2 {
    margin-top: 8px;
  }
  .opponents {
    gap: 12px;
    margin: 14px 0;
  }
  .opponent {
    padding: 12px;
  }
  .opponent button {
    margin-top: 12px;
    padding: 8px;
  }
  .section-heading h1 {
    margin-bottom: 5px;
  }
  .section-heading .eyebrow {
    margin-bottom: 6px;
  }
  .section-heading p {
    margin: 5px 0;
  }
  .notice {
    padding: 9px;
    font-size: 11px;
  }
  .task {
    padding: 15px 0;
    gap: 17px;
  }
  .task h2 {
    font-size: 16px;
  }
  .tasks-panel h1 {
    margin-bottom: 6px;
  }
  .task-list {
    margin-top: 18px;
  }
  .report-emblem {
    margin: 8px;
    font-size: 37px;
  }
  .report-rewards {
    padding: 12px;
  }
  .report h1 {
    font-size: 20px;
  }
  .report .report-mons .mon-sprite {
    zoom: .7;
  }
  .lan-actions {
    margin: 15px 0;
  }
  .field-top {
    top: 10px;
    left: 12px;
    right: 12px;
    gap: 10px;
  }
  .field-location {
    padding: 8px 12px;
  }
  .field-location small {
    font-size: 8px;
  }
  .field-objective {
    padding: 9px;
    font-size: 10px;
  }
  .field-retreat {
    margin-right: 205px;
    padding: 8px;
    font-size: 10px;
  }
  .field-team {
    top: 74px;
    left: 12px;
    min-width: 100px;
    padding: 8px;
  }
  .field-mon {
    font-size: 9px;
    margin-bottom: 7px;
  }
  .field-loot {
    top: 88px;
    right: 12px;
    max-width: 190px;
    font-size: 10px;
    padding: 8px;
  }
  .field-loot small {
    font-size: 9px;
  }
  .dpad {
    zoom: .8;
    bottom: 30px;
    left: 15px;
  }
  .field-actions {
    bottom: 28px;
    right: 16px;
  }
  .field-actions button {
    padding: 12px;
    font-size: 12px;
  }
  .field-caption {
    font-size: 9px;
  }
  .dialog {
    max-width: 560px;
    padding: 18px;
  }
  .dialog h2 {
    font-size: 19px;
  }
  .dialog .mon-sprite {
    zoom: .8;
  }
  .dialog-actions {
    margin-top: 15px;
  }
  .dialog p {
    margin: 8px 0;
  }
}
@media (max-width:700px) and (orientation:landscape) {
  .hub {
    grid-template-columns: 190px minmax(330px, 1fr);
    gap: 12px;
    padding: 12px;
  }
  .menu-label strong {
    font-size: 12px;
  }
  .menu-label small {
    font-size: 8px;
  }
  .menu-icon {
    font-size: 18px;
    width: 20px;
  }
  .menu-inner {
    gap: 5px;
  }
  .menu-grid {
    gap: 9px;
  }
  .nav-heading h2 {
    font-size: 17px;
  }
  .day-tag {
    font-size: 9px;
  }
  .brand strong {
    font-size: 14px;
  }
  .page-name {
    display: none;
  }
  .camp-tip {
    font-size: 9px;
  }
  .wallet {
    gap: 10px;
  }
  .trainer-content > .eyebrow {
    font-size: 7px;
  }
  .footer {
    font-size: 8px;
  }
  .briefing .route-art .mon-sprite {
    zoom: .75;
  }
  .starter {
    min-width: 90px;
  }
  .welcome {
    gap: 15px;
  }
  .person-art {
    width: 65px;
  }
  .starter-grid {
    gap: 8px;
  }
  .starter .mon-sprite {
    zoom: .65;
  }
  .field-objective {
    display: none;
  }
}
@media (orientation:portrait) {
  .topbar {
    padding: 0 14px;
    height: 62px;
  }
  .brand strong {
    font-size: 16px;
  }
  .brand small {
    font-size: 9px;
  }
  .page-name {
    display: none;
  }
  .wallet {
    gap: 10px;
    font-size: 11px;
  }
  .hub {
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 18px;
    gap: 20px;
  }
  .trainer-panel {
    min-height: 270px;
    flex-shrink: 0;
  }
  .trainer-content {
    height: 270px;
    align-items: flex-start;
    padding: 20px;
  }
  .trainer-content h1 {
    margin-top: 12px;
  }
  .trainer-portrait {
    position: absolute;
    right: 20px;
    top: 35px;
    width: 40%;
    height: 170px;
  }
  .trainer-content > .energy {
    width: 45%;
    margin-top: 20px;
  }
  .party-preview {
    position: absolute;
    right: 10px;
    bottom: 10px;
    transform: scale(.75);
    transform-origin: right bottom;
  }
  .trainer-bottom {
    width: 45%;
    margin-top: auto;
  }
  .hub-nav {
    min-height: 350px;
    flex-shrink: 0;
  }
  .nav-heading h2 {
    font-size: 22px;
  }
  .menu-card {
    min-height: 86px;
  }
  .menu-label strong {
    font-size: 14px;
  }
  .menu-icon {
    font-size: 22px;
    width: 25px;
  }
  .menu-inner {
    gap: 8px;
  }
  .menu-label small {
    font-size: 9px;
  }
  .menu-arrow {
    display: none;
  }
  .footer {
    padding: 0 14px;
    font-size: 9px;
  }
  .page {
    padding: 16px;
  }
  .lab-layout,
  .center-layout,
  .adventure-layout {
    grid-template-columns: 1fr;
  }
  .briefing {
    position: static;
  }
  .page-top .eyebrow {
    display: none;
  }
  .welcome {
    flex-direction: column;
  }
  .starter-grid {
    gap: 8px;
  }
  .starter {
    min-width: 85px;
    padding: 8px;
  }
  .starter .mon-sprite {
    zoom: .65;
  }
  .opponents {
    grid-template-columns: 1fr;
  }
  .opponent img {
    height: 110px;
  }
  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .task {
    gap: 12px;
    flex-wrap: wrap;
  }
  .task > div {
    min-width: 170px;
  }
  .task button {
    margin-left: auto;
  }
  .lan-codes {
    grid-template-columns: 1fr;
  }
  .lan-bottom {
    flex-wrap: wrap;
  }
  .report-rewards {
    flex-wrap: wrap;
  }
  .report-mons {
    flex-wrap: wrap;
  }
  .field-retreat {
    margin-right: 0;
  }
  .field-objective {
    display: none;
  }
  .field-loot {
    top: 105px;
    max-width: 160px;
  }
  .field-team {
    top: 100px;
  }
  .exploration > canvas {
    object-fit: contain;
    background: #1d3141;
  }
  .dialog-actions {
    justify-content: center;
  }
}
@font-face {
  font-family: SurvivorPixel;
  src: url(/_expedition/assets/pokesurvivor/fonts/PixelifyPS-400.ttf) format("truetype");
  font-weight: 400 550;
  font-display: swap;
}
@font-face {
  font-family: SurvivorPixel;
  src: url(/_expedition/assets/pokesurvivor/fonts/PixelifyPS-700.ttf) format("truetype");
  font-weight: 551 900;
  font-display: swap;
}
:root {
  --ink:#fff;
  --muted:#b9cbf0;
  --gold:#ffd23f;
  --navy:#0b1838;
  --blue:#2c519f;
  --edge:#f4f8ff;
  --green:#5fe08a;
  --font:SurvivorPixel,"Segoe UI","Microsoft YaHei",sans-serif;
}
html,
body {
  background: #050914;
  font-family: var(--font);
  font-size: 16px;
  -webkit-font-smoothing: none;
}
body {
  background: #050914;
  text-shadow: 2px 2px 0 #0a1430;
}
#survivor-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  image-rendering: pixelated;
  pointer-events: none;
}
body[data-screen=explore] #survivor-backdrop,
body.in-battle #survivor-backdrop {
  visibility: hidden;
}
#game-ui {
  background: transparent;
}
.panel {
  background:
    linear-gradient(
      180deg,
      #2c519f,
      #1a3170);
  border: 3px solid #f4f8ff;
  border-radius: 12px;
  box-shadow:
    0 0 0 3px #0b1838,
    inset 0 0 0 2px #5b83d6,
    0 14px 32px #0006;
  padding: 24px;
  text-shadow: 2px 2px 0 #0a1430;
}
button {
  border: 3px solid #f4f8ff;
  border-radius: 9px;
  background:
    linear-gradient(
      180deg,
      #3d67c0,
      #26468f);
  box-shadow: 0 0 0 2px #0b1838, 0 4px 0 #0b1838;
  color: white;
  text-shadow: 2px 2px 0 #0a1430;
  font-weight: 700;
  font-family: var(--font);
  padding: 10px 20px;
}
button:hover:enabled {
  background:
    linear-gradient(
      180deg,
      #5079ce,
      #325ba8);
  border-color: #fff;
  filter: brightness(1.08);
}
button:active:enabled {
  box-shadow: 0 0 0 2px #0b1838, 0 2px 0 #0b1838;
  transform: translateY(2px);
}
button.primary {
  background:
    linear-gradient(
      180deg,
      #ffe37a,
      #f0a31e);
  border-color: #fff7d6;
  color: #3a2300;
  text-shadow: 1px 1px 0 #ffffff66;
  box-shadow: 0 0 0 2px #0b1838, 0 4px 0 #0b1838;
}
button.primary:hover:enabled {
  background:
    linear-gradient(
      180deg,
      #ffec9a,
      #ffb632);
}
button:disabled {
  opacity: .55;
  filter: grayscale(.6);
  box-shadow: none;
}
button:focus-visible,
textarea:focus-visible {
  outline: 3px solid #ffd23f;
  outline-offset: 4px;
}
button.danger {
  background: linear-gradient(#b94767, #7b294d);
  border-color: #ffb0b8;
}
.ui-pixel-icon {
  object-fit: contain;
  image-rendering: pixelated;
  flex-shrink: 0;
  vertical-align: middle;
  filter: none;
}
h1,
h2,
h3 {
  font-family: var(--font);
  font-weight: 700;
  color: #fff;
  text-shadow: 2px 2px 0 #0a1430;
}
h1 {
  font-size: 28px;
}
h2 {
  font-size: 24px;
}
small,
.muted {
  color: #b9cbf0;
}
.eyebrow {
  font-family: SurvivorPixel, monospace;
  letter-spacing: 1px;
  color: #c6d5ff;
  font-size: 12px;
}
p {
  line-height: 1.6;
}
.notice {
  border: 1px solid #5b83d6;
  border-radius: 8px;
  background: #122655b8;
  color: #c7d9ff;
  font-size: 13px;
  border-left: 1px solid #5b83d6;
}
.hp {
  background: #0d1838;
  border: 1px solid #111b3a;
  border-radius: 8px;
  height: 9px;
}
.hp i {
  background: #5fe08a;
  border-radius: 8px;
}
.badge {
  border-radius: 7px;
  background: #0b183885;
  border: 1px solid #7e9bd7;
  color: #ffd23f;
}
.selected .badge {
  color: #fff0a8;
}
.topbar {
  height: 86px;
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  padding: 14px 28px 12px;
  gap: 16px;
  border: 0;
  box-shadow: none;
  background: none;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.resource-pills,
.top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.resource-pill {
  display: flex;
  align-items: center;
  gap: 11px;
  border: 2px solid #f4f8ff;
  border-radius: 30px;
  background: #0a1430df;
  box-shadow: 0 0 0 3px #0b1838;
  padding: 10px 18px;
  font-size: 22px;
  white-space: nowrap;
  min-height: 52px;
}
.resource-pill b {
  font-family:
    SurvivorPixel,
    "Segoe UI",
    sans-serif;
  letter-spacing: 1px;
}
.user-pill {
  font-size: 19px;
}
.online-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #5fe08a;
  margin-left: 10px;
}
.save-button {
  padding: 8px 13px !important;
}
.save-inner {
  display: flex;
  align-items: center;
  gap: 9px;
}
.save-inner span {
  font-size: 15px;
}
.page-name {
  font-size: 15px;
  color: #c6d5ff;
  font-weight: 700;
}
.topbar .brand,
.topbar .wallet {
  display: none;
}
body[data-screen=home] .page-name {
  display: none;
}
.hub {
  width: 100%;
  max-width: 1860px;
  padding: 18px 36px 30px;
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 36px;
  flex: 1;
  min-height: 0;
  align-items: center;
}
.home-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 0;
  min-height: 0;
  padding: 0 12px;
  text-align: center;
  gap: 18px;
}
.home-logo {
  margin-bottom: 4px;
  width: 100%;
}
.logo-title {
  font-family: SurvivorPixel, monospace;
  font-size: 40px;
  font-size: clamp(40px, 5.25vw, 86px);
  line-height: 1.05;
  font-weight: 700;
  color: #ffd23f;
  text-shadow: 3px 3px 0 #a55f00, 6px 6px 0 #0a1430;
  letter-spacing: 1px;
  white-space: nowrap;
}
.logo-subtitle {
  font-size: 25px;
  color: #fff;
  letter-spacing: 5px;
  margin-top: 16px;
}
.logo-tagline {
  font-size: 14px;
  color: #e1e9ff;
  letter-spacing: 1px;
  margin: 12px 0 0;
}
.trainer-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  position: relative;
  overflow: visible;
  min-height: 0;
  width: 100%;
}
.trainer-panel:after {
  display: none;
}
.hero-stage {
  width: 75%;
  width: min(75%, 360px);
  height: 290px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(
      ellipse at 50% 88%,
      #78aaff35,
      transparent 60%),
    linear-gradient(
      180deg,
      #14244ee0,
      #080e22eb);
  border: 3px solid #aeb8d1;
  border-radius: 14px;
  box-shadow:
    0 0 0 3px #0b1838,
    inset 0 0 0 2px #ffffff22,
    0 10px 30px #0007;
  overflow: hidden;
}
.hero-shadow {
  position: absolute;
  bottom: 21px;
  left: 22%;
  right: 22%;
  height: 26px;
  background: #070d26aa;
  border-radius: 50%;
}
.hero-stage .trainer-portrait {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  flex: none;
  width: 68%;
  height: 92%;
  max-height: none;
  min-height: 0;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(4px 5px 0 #080e22);
  padding: 14px 0 20px;
  z-index: 1;
}
.hero-companion {
  position: absolute;
  right: 0;
  bottom: 12px;
  width: 95px;
  display: flex;
  justify-content: center;
  z-index: 2;
}
.hero-companion .mon-sprite {
  transform: scale(1.1);
  transform-origin: center bottom;
}
.hero-name {
  font-size: 28px;
  margin: 16px 0 7px;
  text-shadow: 3px 3px #0a1430;
}
.hero-badges {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.hero-badges span {
  padding: 4px 11px;
  background: #9ba2b3;
  border: 2px solid #0b1838;
  border-radius: 9px;
  color: #142448;
  text-shadow: none;
  font-size: 13px;
  font-weight: 700;
}
.hero-badges span + span {
  background: #1b3165db;
  color: #b9cbf0;
  border-color: #879fc5;
  text-shadow: 1px 1px #0a1430;
}
.trainer-panel .energy {
  width: 230px;
  max-width: 70%;
  margin: 11px 0 0;
}
.trainer-panel .energy > span {
  font-size: 12px;
  color: #f4f8ff;
  margin-bottom: 5px;
}
.trainer-panel .hp {
  height: 7px;
}
.home-right {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
  max-height: 100%;
}
.hub-nav {
  padding: 25px 26px;
  display: block;
  min-height: 0;
  flex: none;
}
.menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 11px 12px;
  min-height: 0;
}
button.menu-card {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: none;
  box-shadow: none;
  text-align: left;
  border-radius: 7px;
  min-width: 0;
  padding: 13px 8px 13px 14px;
  position: relative;
  filter: none;
  text-shadow: 2px 2px #0a1430;
}
button.menu-card:hover:enabled,
button.menu-card:focus-visible {
  background: #ffffff14;
  border: 0;
  box-shadow: none;
  filter: none;
  outline: none;
}
button.menu-card:before {
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  width: 12px;
  height: 20px;
  transform: translate(-6px, -50%);
  background: var(--ico-cursor) no-repeat center/contain;
  image-rendering: pixelated;
  opacity: 0;
  transition: opacity .1s, transform .1s;
}
button.menu-card:hover:before,
button.menu-card:focus-visible:before {
  opacity: 1;
  transform: translate(0, -50%);
}
.menu-inner {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}
.menu-inner > .ui-pixel-icon {
  width: 32px;
  height: 32px;
}
.menu-label {
  padding: 0;
  min-width: 0;
}
.menu-label strong {
  font-size: 17px;
  font-size: clamp(17px, 1.55vw, 30px);
  line-height: 1.3;
  font-weight: 700;
  white-space: normal;
}
.menu-label small {
  font-size: 11px;
  font-size: clamp(11px, .9vw, 17px);
  line-height: 1.5;
  margin-top: 5px;
  color: #b9cbf0;
  font-weight: 400;
  white-space: normal;
}
button.menu-card.featured {
  grid-column: 1/-1;
  order: -1;
  background: none;
  border: 0;
  padding-top: 10px;
  padding-bottom: 18px;
  border-bottom: 1px solid #6889c166;
  border-radius: 0;
  margin-bottom: 2px;
}
.featured .menu-label strong {
  font-size: 24px;
  font-size: clamp(24px, 2.3vw, 41px);
  color: #ffd23f;
}
.featured .menu-inner > .ui-pixel-icon {
  width: 38px;
  height: 38px;
}
.featured .menu-label small {
  font-size: 12px;
  font-size: clamp(12px, .95vw, 18px);
}
.hub-status {
  padding: 18px 25px;
}
.hub-status p {
  margin: 0 0 6px;
  line-height: 1.5;
  font-size: 17px;
  color: #b9cbf0;
}
.hub-status strong {
  color: #fff;
  font-weight: 700;
}
.hub-status p.camp-tip {
  margin: 9px 0 0;
  padding: 0;
  border-top: 1px solid #5b83d66b;
  padding-top: 9px;
  font-size: 13px;
  color: #d2ddf9;
}
.footer {
  height: 27px;
  padding: 0 24px;
  color: #aebdd8;
  background: none;
  border: 0;
  font-size: 11px;
  letter-spacing: 0;
  justify-content: space-between;
  text-shadow: 2px 2px #0a1430;
}
.credits-button {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font-size: 11px;
  font-weight: 400;
  color: #ccd6ed;
  padding: 0;
  text-decoration: underline;
}
.page {
  max-width: 1380px;
  padding: 20px 30px 35px;
  scrollbar-color: #829de0 #14244e;
}
.page-top {
  margin-bottom: 23px;
  padding: 0 0 4px;
}
.page-top .eyebrow {
  font-size: 13px;
  color: #c4d4fc;
  background: #0b183899;
  border-radius: 16px;
  padding: 6px 13px;
  letter-spacing: 0;
}
.back {
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 8px;
  background: linear-gradient(#3d67c0, #26468f);
}
.welcome {
  max-width: 1050px;
  padding: 30px;
  gap: 35px;
}
.starter {
  background: #0d1c45aa;
  border: 2px solid #7d9bdd;
  border-radius: 11px;
  box-shadow: none;
  padding: 16px;
}
.starter:hover:enabled {
  border-color: #ffd23f;
}
.starter-grid {
  gap: 18px;
}
.starter strong {
  font-size: 18px;
}
.starter small {
  font-size: 13px;
}
.collection {
  gap: 13px;
}
.mon-card {
  background: #1027569c;
  border: 2px solid #7495cd;
  border-radius: 10px;
  box-shadow: none;
}
.mon-card.selected {
  background: #ffd23f24;
  border-color: #ffd23f;
}
.small-mon strong {
  font-size: 15px;
}
.small-mon small {
  font-size: 12px;
}
.shop-row {
  border-color: #5b83d6;
}
.shop-row strong {
  font-size: 17px;
}
.shop-row small {
  color: #b9cbf0;
  font-size: 13px;
}
.shop-row button {
  font-size: 15px;
}
.pixel-ball {
  background: var(--survivor-ball) center/contain no-repeat;
  border: 0;
  box-shadow: none;
  width: 26px;
  height: 26px;
}
.pixel-ball:after {
  display: none;
}
.potion-icon {
  border-radius: 5px;
}
.condition {
  color: #d5e2ff;
}
.recruit .ticket-count {
  color: #ffd23f;
}
.gacha-display {
  background:
    radial-gradient(
      ellipse,
      #637bc838,
      transparent 70%);
  width: 100%;
  justify-content: center;
  gap: 20px;
}
.joy-scene {
  background:
    radial-gradient(
      ellipse,
      #566fbb44,
      transparent 70%);
  border-radius: 12px;
}
.route-art {
  background: linear-gradient(#101d45bb, #182d5cc7);
  border: 2px solid #7495cd;
  border-radius: 11px;
}
.stage-option {
  border: 2px solid #597dbc;
  border-radius: 8px;
  background: #142e64;
  box-shadow: none;
}
.stage-option.selected {
  background: #4266a7;
  border-color: #ffd23f;
}
.stage-index {
  color: #ffd23f;
  font-family: SurvivorPixel, monospace;
}
.briefing dd {
  color: #fff;
}
.opponent {
  border: 2px solid #7294d7;
  border-radius: 12px;
  background: #11244dbb;
}
.opponent.won {
  border-color: #5fe08a;
}
.opponent p {
  color: #ffd23f;
}
.task {
  border-color: #5b83d6;
}
.task-seal {
  color: #ffd23f;
}
.task > strong {
  font-family: SurvivorPixel, monospace;
}
.report-rewards {
  color: #ffd23f;
}
.lan-codes textarea {
  border-radius: 8px;
  background: #0f1f4a;
  border: 2px solid #5b83d6;
  color: #fff;
}
.lan-codes label {
  color: #b9cbf0;
}
.lan-bottom p {
  color: #9aefbf;
}
.dialog-back {
  background: #050a19b8;
}
.dialog {
  border-radius: 13px;
  max-width: 650px;
  padding: 25px;
  animation: survivor-pop .2s ease-out;
}
.dialog h2 {
  font-size: 25px;
}
.dialog p {
  font-size: 15px;
}
.toast {
  background: linear-gradient(#2c519f, #1a3170);
  border: 3px solid #f4f8ff;
  border-radius: 10px;
  box-shadow: 0 0 0 3px #0b1838, inset 0 0 0 2px #5b83d6;
  color: #fff;
  text-shadow: 2px 2px #0a1430;
  font-size: 15px;
}
.battle-transition {
  background:
    linear-gradient(
      180deg,
      #2c519f,
      #1a3170);
}
.battle-transition h2 {
  color: #ffd23f;
}
.battle-transition p {
  color: #b9cbf0;
}
.encounter-mark {
  font-family: SurvivorPixel, monospace;
  color: #ffd23f;
}
.field-location,
.field-objective,
.field-team,
.field-loot {
  background: linear-gradient(#2c519fea, #1a3170ed);
  border-radius: 10px;
}
.field-location small {
  font-family: SurvivorPixel, monospace;
}
.field-actions button,
.dir {
  background: linear-gradient(#3d67c0dd, #26468fee);
  border: 2px solid #f4f8ff;
  border-radius: 9px;
  box-shadow: 0 0 0 2px #0b1838;
}
.field-caption {
  color: #e0e8ff;
}
.field-retreat {
  border-radius: 8px;
}
.field-mon .hp i {
  background: #5fe08a;
}
body.in-battle .hud .play-bar {
  border: 3px solid #f4f8ff;
  border-radius: 12px;
  background: linear-gradient(#2c519ff0, #1a3170f5);
  box-shadow: 0 0 0 3px #0b1838, inset 0 0 0 2px #5b83d6;
}
body.in-battle .hud .play-bar .pb-move,
body.in-battle .hud .play-bar .pb-dodge,
body.in-battle .hud .pb-slot,
body.in-battle .hud .hud-btn {
  border-radius: 8px !important;
  background: linear-gradient(#3d67c0, #26468f);
  border: 2px solid #f4f8ff;
  box-shadow: 0 0 0 2px #0b1838, 0 3px 0 #0b1838;
  font-family: var(--font);
}
body.in-battle .hud .play-bar .pb-move:before,
body.in-battle .hud .play-bar .pb-move:after {
  display: none;
}
body.in-battle .hud .play-bar .pb-move .nm,
body.in-battle .hud .pb-dodge,
body.in-battle .hud .pb-hint,
body.in-battle .hud .pb-slot {
  font-family: var(--font);
  text-shadow: 2px 2px #0a1430;
}
body.in-battle .hud .play-bar .pb-move .ty {
  border-radius: 4px;
}
body.in-battle .hud .play-bar .pb-move .cd {
  border-radius: 7px;
}
.exp-battle-result {
  background: #050a19b8;
}
.exp-battle-result .panel {
  border-radius: 12px;
}
.exp-battle-result button {
  border-radius: 9px;
}
@keyframes survivor-pop {
  from {
    transform: scale(.96);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@media (min-width:1600px) {
  .hub {
    gap: 60px;
    padding: 30px 52px 50px;
  }
  .hero-stage {
    height: 330px;
    width: 380px;
  }
  .home-left {
    gap: 27px;
  }
  .home-right {
    gap: 26px;
  }
  .hub-nav {
    padding: 32px;
  }
  .menu-grid {
    gap: 14px 20px;
  }
  button.menu-card {
    padding: 15px 12px 15px 17px;
  }
  .menu-inner {
    gap: 22px;
  }
  .hub-status {
    padding: 22px 30px;
  }
  .hub-status p {
    font-size: 20px;
  }
  .logo-subtitle {
    font-size: 29px;
  }
  .hero-name {
    font-size: 32px;
  }
  .resource-pill {
    font-size: 25px;
    padding: 11px 20px;
  }
  .topbar {
    height: 100px;
    padding: 18px 38px;
  }
  .hero-stage .trainer-portrait {
    padding-bottom: 28px;
  }
}
@media (max-height:700px) {
  .topbar {
    height: 68px;
    padding: 10px 20px;
  }
  .resource-pill {
    min-height: 40px;
    font-size: 17px;
    padding: 7px 13px;
    gap: 8px;
  }
  .resource-pill .ui-pixel-icon {
    width: 22px;
    height: 22px;
  }
  .user-pill {
    font-size: 15px;
  }
  .save-inner span {
    font-size: 13px;
  }
  .save-inner .ui-pixel-icon {
    width: 24px;
    height: 24px;
  }
  .hub {
    padding: 8px 25px 18px;
    gap: 28px;
  }
  .home-left {
    gap: 12px;
    padding: 0;
  }
  .logo-title {
    font-size: 34px;
    font-size: clamp(34px, 5vw, 67px);
  }
  .logo-subtitle {
    font-size: 21px;
    margin-top: 11px;
  }
  .logo-tagline {
    font-size: 12px;
    margin-top: 8px;
  }
  .hero-stage {
    height: 200px;
    width: 255px;
  }
  .hero-name {
    font-size: 23px;
    margin: 12px 0 5px;
  }
  .hero-badges span {
    font-size: 11px;
  }
  .trainer-panel .energy {
    margin-top: 7px;
  }
  .trainer-panel .energy > span {
    font-size: 10px;
  }
  .trainer-panel .hp {
    height: 6px;
  }
  .home-right {
    gap: 16px;
  }
  .hub-nav {
    padding: 19px 20px;
  }
  .menu-grid {
    gap: 5px 10px;
  }
  button.menu-card {
    padding: 9px 7px 9px 11px;
  }
  .menu-label strong {
    font-size: 20px;
  }
  .menu-label small {
    font-size: 12px;
    margin-top: 4px;
  }
  .menu-inner {
    gap: 12px;
  }
  .menu-inner > .ui-pixel-icon {
    width: 27px;
    height: 27px;
  }
  .featured .menu-label strong {
    font-size: 28px;
  }
  .featured .menu-label small {
    font-size: 13px;
  }
  .featured .menu-inner > .ui-pixel-icon {
    width: 32px;
    height: 32px;
  }
  button.menu-card.featured {
    padding-bottom: 13px;
  }
  .hub-status {
    padding: 13px 20px;
  }
  .hub-status p {
    font-size: 15px;
    margin-bottom: 4px;
  }
  .hub-status p.camp-tip {
    font-size: 11px;
    margin-top: 6px;
    padding-top: 6px;
  }
  .footer {
    height: 24px;
    font-size: 10px;
  }
  .credits-button {
    font-size: 10px;
  }
  .page {
    padding-top: 12px;
  }
  .panel:not(.hub-nav):not(.hub-status):not(.dialog) {
    padding: 20px;
  }
  .hero-stage .trainer-portrait {
    padding: 10px 0 15px;
  }
}
@media (max-height:470px) and (orientation:landscape) {
  html,
  body {
    font-size: 13px;
  }
  .topbar {
    height: 56px;
    padding: 7px 15px;
  }
  .resource-pills,
  .top-actions {
    gap: 9px;
  }
  .resource-pill {
    font-size: 15px;
    min-height: 34px;
    padding: 5px 11px;
    gap: 7px;
    border-radius: 24px;
  }
  .resource-pill .ui-pixel-icon {
    width: 20px;
    height: 20px;
  }
  .user-pill {
    font-size: 13px;
  }
  .online-dot {
    width: 8px;
    height: 8px;
    margin-left: 3px;
  }
  .save-button {
    padding: 4px 8px !important;
    border-width: 2px;
  }
  .save-inner .ui-pixel-icon {
    width: 22px;
    height: 22px;
  }
  .save-inner span {
    display: none;
  }
  .page-name {
    font-size: 12px;
  }
  .hub {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    padding: 4px 18px 10px;
    gap: 20px;
  }
  .home-left {
    gap: 8px;
  }
  .home-logo {
    margin: 0;
  }
  .logo-title {
    font-size: 30px;
    font-size: clamp(30px, 4.9vw, 49px);
    text-shadow: 2px 2px #a55f00, 4px 4px #0a1430;
    letter-spacing: 0;
  }
  .logo-subtitle {
    font-size: 17px;
    letter-spacing: 3px;
    margin-top: 7px;
  }
  .logo-tagline {
    font-size: 10px;
    margin-top: 5px;
  }
  .hero-stage {
    width: 188px;
    height: 130px;
    border-radius: 12px;
  }
  .hero-stage .trainer-portrait {
    width: 63%;
    height: 100%;
    padding: 7px 0 9px;
  }
  .hero-shadow {
    height: 13px;
    bottom: 9px;
  }
  .hero-companion {
    right: -9px;
    bottom: 4px;
    transform: scale(.67);
    transform-origin: bottom right;
  }
  .hero-name {
    font-size: 18px;
    margin: 7px 0 3px;
  }
  .hero-badges span {
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 6px;
  }
  .hero-badges {
    gap: 5px;
  }
  .trainer-panel .energy {
    width: 155px;
    margin-top: 4px;
  }
  .trainer-panel .energy > span {
    font-size: 9px;
    margin-bottom: 3px;
  }
  .trainer-panel .hp {
    height: 5px;
  }
  .home-right {
    gap: 12px;
  }
  .hub-nav {
    padding: 12px 13px;
  }
  .menu-grid {
    gap: 1px 5px;
  }
  button.menu-card {
    padding: 7px 5px 7px 9px;
    border-radius: 6px;
  }
  .menu-inner {
    gap: 9px;
  }
  .menu-inner > .ui-pixel-icon {
    width: 24px;
    height: 24px;
  }
  .menu-label strong {
    font-size: 16px;
    line-height: 1.3;
  }
  .menu-label small {
    font-size: 10px;
    line-height: 1.4;
    margin-top: 3px;
  }
  .featured .menu-label strong {
    font-size: 23px;
  }
  .featured .menu-label small {
    font-size: 11px;
  }
  .featured .menu-inner > .ui-pixel-icon {
    width: 28px;
    height: 28px;
  }
  button.menu-card.featured {
    padding-top: 3px;
    padding-bottom: 9px;
    margin-bottom: 3px;
  }
  .hub-status {
    padding: 9px 15px;
  }
  .hub-status p {
    font-size: 12px;
    margin: 0 0 2px;
  }
  .hub-status p.camp-tip {
    font-size: 10px;
    padding-top: 4px;
    margin-top: 3px;
  }
  .footer {
    height: 20px;
    font-size: 8px;
    padding: 0 15px;
  }
  .credits-button {
    font-size: 9px;
  }
  .page {
    padding: 9px 16px 20px;
  }
  .page-top {
    margin-bottom: 16px;
  }
  .back {
    font-size: 12px;
    padding: 6px 12px;
    border-width: 2px;
  }
  .page-top .eyebrow {
    font-size: 10px;
  }
  .panel:not(.hub-nav):not(.hub-status):not(.dialog) {
    padding: 16px;
  }
  .welcome {
    gap: 18px;
  }
  .starter {
    padding: 10px;
    min-width: 90px;
  }
  .starter strong {
    font-size: 15px;
  }
  .starter small {
    font-size: 11px;
  }
  .notice {
    font-size: 11px;
  }
  .dialog {
    padding: 20px;
  }
  .dialog h2 {
    font-size: 21px;
  }
  .dialog p {
    font-size: 13px;
  }
  .dialog-actions button {
    font-size: 12px;
  }
  .toast {
    font-size: 12px;
  }
  .field-top .panel {
    padding: 8px 11px !important;
  }
  .field-team.panel,
  .field-loot.panel {
    padding: 8px !important;
  }
}
@media (max-width:720px) and (orientation:landscape) {
  .hub {
    padding: 2px 12px 8px;
    gap: 13px;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  }
  .home-left {
    gap: 6px;
  }
  .logo-title {
    font-size: 30px;
  }
  .logo-subtitle {
    font-size: 15px;
  }
  .logo-tagline {
    display: none;
  }
  .hero-stage {
    width: 164px;
    height: 128px;
  }
  .hero-name {
    font-size: 17px;
  }
  .hub-nav {
    padding: 10px 9px;
  }
  .menu-inner {
    gap: 6px;
  }
  .menu-label strong {
    font-size: 13px;
  }
  .menu-label small {
    font-size: 9px;
  }
  .menu-inner > .ui-pixel-icon {
    width: 20px;
    height: 20px;
  }
  .featured .menu-label strong {
    font-size: 21px;
  }
  .featured .menu-label small {
    font-size: 10px;
  }
  .featured .menu-inner > .ui-pixel-icon {
    width: 26px;
    height: 26px;
  }
  .hub-status p {
    font-size: 11px;
  }
  .hub-status p.camp-tip {
    font-size: 9px;
  }
  .resource-pill {
    font-size: 13px;
    padding: 5px 9px;
  }
  .user-pill {
    max-width: 205px;
    font-size: 11px;
  }
  .resource-pills {
    gap: 8px;
  }
  .resource-pill .ui-pixel-icon {
    width: 18px;
    height: 18px;
  }
  .online-dot {
    display: none;
  }
  .save-inner .ui-pixel-icon {
    width: 20px;
    height: 20px;
  }
  .topbar {
    height: 53px;
  }
  .home-right {
    gap: 10px;
  }
  button.menu-card {
    padding: 7px 4px 7px 7px;
  }
}
@media (orientation:portrait) {
  html,
  body {
    font-size: 14px;
  }
  .topbar {
    height: 68px;
    padding: 10px 12px;
    gap: 10px;
  }
  .resource-pill {
    font-size: 14px;
    min-height: 35px;
    padding: 6px 11px;
    gap: 7px;
  }
  .resource-pill .ui-pixel-icon {
    width: 20px;
    height: 20px;
  }
  .resource-pills,
  .top-actions {
    gap: 9px;
  }
  .user-pill {
    display: none;
  }
  .save-inner span {
    display: none;
  }
  .save-inner .ui-pixel-icon {
    width: 24px;
    height: 24px;
  }
  .page-name {
    display: none;
  }
  .save-button {
    padding: 5px 9px !important;
    border-width: 2px;
  }
  .hub {
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 15px 16px 24px;
    gap: 24px;
    align-items: stretch;
  }
  .home-left {
    padding: 0;
    gap: 15px;
    flex-shrink: 0;
  }
  .home-logo {
    margin: 0;
  }
  .logo-title {
    font-size: 33px;
    font-size: clamp(33px, 9.2vw, 53px);
  }
  .logo-subtitle {
    font-size: 20px;
    margin-top: 10px;
    letter-spacing: 3px;
  }
  .logo-tagline {
    font-size: 11px;
    margin-top: 8px;
  }
  .trainer-panel {
    min-height: 0;
    flex: none;
  }
  .hero-stage {
    height: 180px;
    width: 230px;
  }
  .hero-stage .trainer-portrait {
    width: 65%;
    height: 100%;
    padding: 10px 0 15px;
  }
  .hero-companion {
    transform: scale(.8);
    transform-origin: bottom right;
  }
  .hero-name {
    font-size: 22px;
    margin: 11px 0 6px;
  }
  .hero-badges span {
    font-size: 11px;
  }
  .trainer-panel .energy {
    margin-top: 8px;
    width: 190px;
  }
  .home-right {
    gap: 19px;
    max-height: none;
    flex-shrink: 0;
  }
  .hub-nav {
    min-height: 0;
    padding: 18px 15px;
  }
  .menu-grid {
    gap: 7px 8px;
  }
  .menu-card {
    min-height: 0 !important;
  }
  .menu-inner {
    gap: 10px;
  }
  .menu-inner > .ui-pixel-icon {
    width: 25px;
    height: 25px;
  }
  .menu-label strong {
    font-size: 16px;
  }
  .menu-label small {
    font-size: 10px;
    margin-top: 4px;
  }
  .featured .menu-label strong {
    font-size: 25px;
  }
  .featured .menu-label small {
    font-size: 12px;
  }
  .featured .menu-inner > .ui-pixel-icon {
    width: 30px;
    height: 30px;
  }
  button.menu-card {
    padding: 10px 5px 10px 8px;
  }
  button.menu-card.featured {
    padding-bottom: 15px;
  }
  .hub-status {
    padding: 15px 19px;
  }
  .hub-status p {
    font-size: 14px;
  }
  .hub-status p.camp-tip {
    font-size: 11px;
  }
  .footer {
    height: 30px;
    padding: 0 12px;
    font-size: 8px;
    gap: 10px;
  }
  .credits-button {
    font-size: 9px;
    white-space: nowrap;
  }
  .page {
    padding: 14px 16px 28px;
  }
  .back {
    font-size: 13px;
    padding: 8px 13px;
  }
  .panel:not(.hub-nav):not(.hub-status):not(.dialog) {
    padding: 19px;
  }
  .dialog p {
    font-size: 13px;
  }
  .dialog-actions button {
    font-size: 12px;
  }
  .dialog h2 {
    font-size: 21px;
  }
}
@media (max-height:470px) and (orientation:landscape) {
  .hub-nav {
    padding: 10px 12px;
  }
  .menu-grid {
    gap: 1px 5px;
  }
  button.menu-card {
    padding: 4px 5px 4px 9px;
  }
  .menu-label strong {
    line-height: 1.2;
  }
  .menu-label small {
    line-height: 1.2;
    margin-top: 2px;
  }
  .featured .menu-label strong {
    line-height: 1.2;
  }
  .featured .menu-label small {
    line-height: 1.2;
    margin-top: 2px;
  }
  button.menu-card.featured {
    padding-top: 4px;
    padding-bottom: 7px;
  }
  .hub-status {
    padding: 8px 14px;
  }
  .hub-status p {
    line-height: 1.35;
  }
  .hub-status p.camp-tip {
    line-height: 1.3;
  }
}
@media (max-height:380px) and (orientation:landscape) {
  .hub-status p.camp-tip {
    display: none;
  }
  .home-right {
    gap: 10px;
  }
  .home-left {
    gap: 6px;
  }
  .hero-stage {
    height: 118px;
  }
  .trainer-panel .energy {
    margin-top: 3px;
  }
  .hero-name {
    margin-top: 5px;
  }
}
@media (orientation:portrait) {
  .menu-grid {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .menu-label strong {
    font-size: 18px;
    white-space: nowrap;
  }
  .menu-label small {
    font-size: 12px;
    white-space: normal;
  }
  .menu-inner {
    gap: 14px;
  }
  .menu-inner > .ui-pixel-icon {
    width: 28px;
    height: 28px;
  }
  button.menu-card {
    padding: 11px 8px 11px 12px;
  }
}
.exploration {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #0b1428;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.exploration > canvas {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill !important;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #0b1428;
}
.field-top {
  position: absolute;
  left: 12px;
  top: 10px;
  right: auto;
  display: flex;
  gap: 8px;
  align-items: stretch;
  pointer-events: none;
  z-index: 3;
}
.field-top .panel {
  padding: 6px 11px !important;
  border-radius: 10px;
}
.field-location small {
  display: block;
  font-size: 9px;
  letter-spacing: 1px;
  color: #bcd2ff;
}
.field-location strong {
  font-size: 14px;
}
.field-objective {
  display: flex;
  align-items: center;
  font-size: 11px;
}
.field-team {
  position: absolute;
  left: 12px;
  top: 58px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 8px !important;
  min-width: 0;
  background: linear-gradient(#2c519fd6, #1a3170d6);
  border-radius: 10px;
  pointer-events: none;
  z-index: 3;
}
.field-mon {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 10px;
}
.field-mon .mon-sprite.mini {
  zoom: .5;
  flex: none;
}
.field-mon strong {
  display: block;
  font-size: 10px;
  line-height: 1.2;
}
.field-mon .hp {
  width: 58px;
  height: 4px;
  margin-top: 2px;
}
.field-side {
  position: absolute;
  right: 10px;
  top: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  z-index: 3;
}
.field-map {
  padding: 4px !important;
  border-radius: 9px;
  line-height: 0;
}
.field-map canvas {
  display: block;
  max-width: 150px;
  max-height: 110px;
  image-rendering: pixelated;
  border-radius: 5px;
}
.field-loot {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 9px !important;
  font-size: 10px;
  border-radius: 9px;
  pointer-events: none;
  position: static !important;
}
.field-loot strong {
  font-size: 10px;
}
.loot-row {
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: SurvivorPixel, monospace;
}
.loot-row img {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
  margin-left: 4px;
}
.loot-row img:first-child {
  margin-left: 0;
}
.field-retreat {
  margin: 0 !important;
  padding: 6px 14px !important;
  font-size: 11px;
}
.stick-zone {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52%;
  height: 72%;
  z-index: 2;
  touch-action: none;
}
.stick-base {
  position: absolute;
  left: 96px;
  top: calc(100% - 96px);
  width: 108px;
  height: 108px;
  margin: -54px 0 0 -54px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      #ffffff14 0,
      #ffffff14 55%,
      #ffffff26 56%,
      #ffffff26 100%);
  border: 3px solid #ffffff55;
  box-shadow: 0 0 0 2px #0b183866;
  opacity: .55;
  transition: opacity .15s;
  pointer-events: none;
}
.stick-base.on {
  opacity: 1;
}
.stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 40% 35%,
      #fff,
      #bcd2ff 60%,
      #7d9ee6);
  border: 3px solid #fff;
  box-shadow: 0 3px 0 #0b1838, 0 0 12px #0008;
}
.field-actions {
  position: absolute;
  right: 16px;
  bottom: 18px;
  display: flex;
  gap: 12px;
  z-index: 3;
}
.field-actions > button {
  width: 66px;
  height: 66px;
  padding: 0 !important;
  border-radius: 50% !important;
  background: linear-gradient(#3d67c0ee, #26468ff0) !important;
  border: 3px solid #f4f8ff !important;
  box-shadow: 0 4px 0 #0b1838, 0 0 0 2px #0b1838 !important;
}
.field-actions > button:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #0b1838 !important;
}
.field-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.field-btn img {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
}
.field-btn b {
  font-size: 10px;
}
.field-caption {
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10px;
  color: #e0e8ff;
  text-shadow: 1px 1px #000;
  pointer-events: none;
  z-index: 3;
}
.item-icon {
  image-rendering: pixelated;
  vertical-align: middle;
}
.item-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bag-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.shop-row .item-icon {
  flex: none;
}
.joy-scene {
  height: auto !important;
  padding: 4px 0;
}
.joy-scene canvas {
  display: block;
  height: 96px !important;
  height: clamp(96px, 30vh, 288px) !important;
  width: auto !important;
  max-width: 100%;
  aspect-ratio: 224/144;
  --ar: 224/144;
  object-fit: contain;
  margin: 0 auto;
  image-rendering: pixelated;
  border-radius: 8px;
  border: 2px solid #f4f8ff;
  box-shadow: 0 0 0 2px #0b1838;
}
@media (max-height:420px) {
  .field-top .panel {
    padding: 4px 9px !important;
  }
  .field-location strong {
    font-size: 12px;
  }
  .field-team {
    top: 50px;
  }
  .field-map canvas {
    max-width: 120px;
    max-height: 84px;
  }
  .field-actions > button {
    width: 56px;
    height: 56px;
  }
  .field-caption {
    display: none;
  }
}
@media (orientation:portrait) {
  .field-objective {
    display: none;
  }
  .stick-zone {
    width: 100%;
    height: 45%;
  }
}
.gba.field-gba {
  position: fixed;
  left: 50%;
  bottom: var(--safe-bottom,0px);
  transform: translateX(-50%);
  width: calc(var(--u)*240);
  height: calc(var(--u)*48);
  max-width: 100vw;
  background: transparent;
  overflow: visible;
  z-index: 60;
}
.stick-base.fixed.on {
  opacity: .8;
}
.stick-base.on.idle {
  opacity: .45;
}
body.in-battle .hud.mode-play .play-bar {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  transform: none !important;
  display: block !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  pointer-events: none;
}
body.in-battle .hud.mode-play .play-bar > * {
  pointer-events: auto;
}
body.in-battle .hud.mode-play .pb-team {
  position: absolute;
  left: 50%;
  bottom: calc(8px + var(--safe-bottom,0px));
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  align-items: flex-end;
  margin: 0;
  padding: 5px 9px;
  border-radius: 30px;
  background: linear-gradient(#2c519fd9, #1a3170e6);
  border: 2px solid #f4f8ff;
  box-shadow: 0 0 0 2px #0b1838;
}
body.in-battle .hud.mode-play .pb-slot {
  width: 46px;
  padding: 2px !important;
  border-radius: 50% !important;
  background: #162a5c !important;
  border: 2px solid #9fb6e8 !important;
  box-shadow: none !important;
}
body.in-battle .hud.mode-play .pb-slot > span {
  display: none;
}
body.in-battle .hud.mode-play .pb-slot.active {
  border-color: #ffd23a !important;
  box-shadow: 0 0 0 2px #ffd23a, 0 0 12px #ffd23a88 !important;
  transform: translateY(-3px);
}
body.in-battle .hud.mode-play .pb-slot .pic {
  width: 36px;
  height: 36px;
}
body.in-battle .hud.mode-play .pb-slot .mini {
  width: 28px;
  margin: 2px auto 0;
}
body.in-battle .hud.mode-play .pb-hint {
  display: none !important;
}
body.in-battle .hud.mode-play .pb-moves {
  position: absolute !important;
  left: auto !important;
  top: auto !important;
  right: calc(62px + var(--safe-right,0px)) !important;
  bottom: calc(62px + var(--safe-bottom,0px)) !important;
  width: 0 !important;
  height: 0 !important;
  display: block !important;
  max-width: none;
  gap: 0;
  margin: 0;
  transform: none !important;
}
body.in-battle .hud.mode-play .pb-move {
  --r:150px;
  position: absolute !important;
  width: 72px;
  height: 72px;
  min-height: 0 !important;
  margin: -36px 0 0 -36px;
  padding: 4px !important;
  border-radius: 50% !important;
  left: calc(var(--r) * var(--cx));
  top: calc(var(--r) * var(--cy));
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(255, 255, 255, .35),
      rgba(255, 255, 255, 0) 60%),
    linear-gradient(#22346eee, #101d48f2) !important;
  border: 3px solid var(--tc,#f4f8ff) !important;
  box-shadow: 0 0 0 2px #0b1838, 0 4px 0 #0b1838 !important;
}
body.in-battle .hud.mode-play .pb-move:nth-child(1) {
  --cx:-1;
  --cy:0;
}
body.in-battle .hud.mode-play .pb-move:nth-child(2) {
  --cx:-.866;
  --cy:-.5;
}
body.in-battle .hud.mode-play .pb-move:nth-child(3) {
  --cx:-.5;
  --cy:-.866;
}
body.in-battle .hud.mode-play .pb-move:nth-child(4) {
  --cx:0;
  --cy:-1;
}
body.in-battle .hud.mode-play .pb-move:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 2px #0b1838, 0 1px 0 #0b1838 !important;
}
body.in-battle .hud.mode-play .pb-move .k,
body.in-battle .hud.mode-play .pb-move .ty,
body.in-battle .hud.mode-play .pb-move .cat,
body.in-battle .hud.mode-play .pb-move .bp {
  display: none !important;
}
body.in-battle .hud.mode-play .pb-emblem {
  width: 30px;
  height: 30px;
  image-rendering: pixelated;
  flex: none;
  filter: drop-shadow(0 2px 0 #0008);
}
body.in-battle .hud.mode-play .pb-move .nm {
  width: 100%;
  font-size: 10px !important;
  line-height: 1.05;
  white-space: normal;
  word-break: break-word;
  color: #fff;
  text-shadow:
    1px 1px 0 #0a1430,
    -1px -1px 0 #0a1430,
    1px -1px 0 #0a1430,
    -1px 1px 0 #0a1430;
}
body.in-battle .hud.mode-play .pb-move .meta {
  display: block !important;
  width: auto;
}
body.in-battle .hud.mode-play .pb-move .pp {
  font-size: 8px;
  opacity: .9;
  text-shadow: 1px 1px 0 #0a1430;
}
body.in-battle .hud.mode-play .pb-move .cd {
  border-radius: 0 !important;
}
body.in-battle .hud.mode-play .pb-move .cdt {
  font-size: 20px !important;
}
body.in-battle .hud.mode-play .pb-move[data-type=normal] {
  --tc:#d8d2c6;
}
body.in-battle .hud.mode-play .pb-move[data-type=fire] {
  --tc:#ff7b3d;
}
body.in-battle .hud.mode-play .pb-move[data-type=water] {
  --tc:#4b9bff;
}
body.in-battle .hud.mode-play .pb-move[data-type=grass] {
  --tc:#5fcb6a;
}
body.in-battle .hud.mode-play .pb-move[data-type=electric] {
  --tc:#ffd33d;
}
body.in-battle .hud.mode-play .pb-move[data-type=ice] {
  --tc:#7fe0e0;
}
body.in-battle .hud.mode-play .pb-move[data-type=fighting] {
  --tc:#e0533d;
}
body.in-battle .hud.mode-play .pb-move[data-type=poison] {
  --tc:#b45ec4;
}
body.in-battle .hud.mode-play .pb-move[data-type=ground] {
  --tc:#d6b25c;
}
body.in-battle .hud.mode-play .pb-move[data-type=flying] {
  --tc:#9bb8ff;
}
body.in-battle .hud.mode-play .pb-move[data-type=psychic] {
  --tc:#ff5f9e;
}
body.in-battle .hud.mode-play .pb-move[data-type=bug] {
  --tc:#a3c43d;
}
body.in-battle .hud.mode-play .pb-move[data-type=rock] {
  --tc:#bfa96b;
}
body.in-battle .hud.mode-play .pb-move[data-type=ghost] {
  --tc:#7a6bc4;
}
body.in-battle .hud.mode-play .pb-move[data-type=dragon] {
  --tc:#6b58ff;
}
body.in-battle .hud.mode-play .pb-move[data-type=dark] {
  --tc:#8a7a70;
}
body.in-battle .hud.mode-play .pb-move[data-type=steel] {
  --tc:#a8b8c4;
}
body.in-battle .hud.mode-play .pb-move[data-type=fairy] {
  --tc:#ff9ed8;
}
body.in-battle .hud.mode-play .pb-dodge {
  position: absolute !important;
  left: auto !important;
  top: auto !important;
  right: calc(14px + var(--safe-right,0px)) !important;
  bottom: calc(14px + var(--safe-bottom,0px)) !important;
  width: 96px;
  height: 96px;
  margin: 0;
  transform: none;
  border-radius: 50% !important;
  background: linear-gradient(#ffe46a, #f2b705) !important;
  color: #0d1430;
  border: 3px solid #fff !important;
  box-shadow: 0 0 0 2px #0b1838, 0 5px 0 #8a5c00 !important;
  font-size: 14px;
  text-shadow: none !important;
}
body.in-battle .hud.mode-play .pb-dodge .k {
  display: none;
}
body.in-battle .hud.mode-play .pb-dodge span {
  color: #0d1430;
  text-shadow: none !important;
}
body.in-battle .hud.mode-play .pb-dodge .fill {
  height: 100%;
  opacity: .25;
  background: #fff;
}
body.in-battle .hud.mode-play .pb-dodge:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 2px #0b1838, 0 2px 0 #8a5c00 !important;
}
body.in-battle .hud.mode-play .pb-stick {
  left: calc(22px + var(--safe-left,0px)) !important;
  bottom: 28px !important;
  top: auto !important;
}
@media (max-height:400px) {
  body.in-battle .hud.mode-play .pb-moves {
    right: calc(56px + var(--safe-right,0px)) !important;
    bottom: calc(56px + var(--safe-bottom,0px)) !important;
  }
  body.in-battle .hud.mode-play .pb-move {
    --r:128px;
    width: 62px;
    height: 62px;
    margin: -31px 0 0 -31px;
  }
  body.in-battle .hud.mode-play .pb-emblem {
    width: 24px;
    height: 24px;
  }
  body.in-battle .hud.mode-play .pb-move .nm {
    font-size: 9px !important;
  }
  body.in-battle .hud.mode-play .pb-dodge {
    width: 84px;
    height: 84px;
  }
  body.in-battle .hud.mode-play .pb-slot {
    width: 40px;
  }
  body.in-battle .hud.mode-play .pb-slot .pic {
    width: 30px;
    height: 30px;
  }
}
@media (max-width:820px) {
  body.in-battle .hud.mode-play .pb-team {
    gap: 3px;
    padding: 4px 7px;
  }
  body.in-battle .hud.mode-play .pb-slot {
    width: 38px;
  }
  body.in-battle .hud.mode-play .pb-slot .pic {
    width: 28px;
    height: 28px;
  }
  body.in-battle .hud.mode-play .pb-slot .mini {
    width: 24px;
  }
}
body.in-battle .auto-battle {
  position: absolute;
  z-index: 40;
  right: calc(12px + var(--safe-right,0px));
  top: calc(64px + var(--safe-top,0px));
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  min-height: 0;
  font-size: 13px;
  font-weight: 700;
  color: #f8f8f0;
  background: #304060e6;
  border: 2px solid #f8f8f0;
  border-radius: 4px;
  box-shadow: 0 3px 0 #18203a;
  cursor: pointer;
  touch-action: manipulation;
}
body.in-battle .auto-battle i {
  font-style: normal;
  font-size: 11px;
  letter-spacing: -2px;
  color: #a8c0e8;
}
body.in-battle .auto-battle.on {
  background: #e8a030;
  color: #402000;
  border-color: #fff8d8;
}
body.in-battle .auto-battle.on i {
  color: #402000;
  animation: auto-pulse 1s steps(2) infinite;
}
@keyframes auto-pulse {
  50% {
    opacity: .4;
  }
}
body.in-battle .auto-battle-on .pb-moves,
body.in-battle .auto-battle-on .pb-stick,
body.in-battle .auto-battle-on .pb-dodge {
  opacity: .45;
  pointer-events: none;
}
@media (max-height:470px) {
  body.in-battle .auto-battle {
    top: calc(52px + var(--safe-top,0px));
    padding: 3px 9px;
    font-size: 12px;
  }
}
body.in-battle .pb-dodge,
body.in-battle .pb-team .pb-slot {
  position: relative;
  overflow: hidden;
}
body.in-battle .pe-cd {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: rgba(10, 14, 34, .62);
  pointer-events: none;
  z-index: 2;
}
body.in-battle .pe-cdt {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  text-shadow:
    1px 1px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000;
}
body.in-battle .pb-dodge .pe-cd {
  border-radius: inherit;
}
body.in-battle .pb-dodge.pe-cooling {
  filter: saturate(.6);
}
body.in-battle .pb-team .pb-slot .pe-cdt {
  font-size: 14px;
}
body.in-battle .pb-dodge.pe-cooling > span:not(.pe-cdt) {
  opacity: 0;
}
body.in-battle .pb-dodge .pe-cdt {
  font-size: 24px;
}
body.in-battle .pb-team .pb-slot > .pe-cdt {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  font-size: 15px !important;
  color: #fff !important;
  opacity: 1 !important;
  z-index: 3;
}
body.in-battle .pb-dodge > .pe-cdt {
  color: #fff !important;
  opacity: 1 !important;
}
body.in-battle .faint-pick {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 45;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 18px;
  background: #18203ae6;
  border: 3px solid #f8f8f0;
  border-radius: 6px;
  box-shadow: 0 4px 0 #0b1020;
  color: #fff;
  pointer-events: none;
  text-align: center;
}
body.in-battle .faint-pick b {
  font-size: 15px;
}
body.in-battle .faint-pick span {
  font-size: 30px;
  font-weight: 700;
  color: #ffd84a;
  line-height: 1.1;
}
body.in-battle .faint-pick small {
  font-size: 11px;
  color: #c8d4ec;
}
body.in-battle .faint-picking .pb-team .pb-slot:not(.out):not(.active) {
  box-shadow: 0 0 0 3px #ffd84a !important;
  animation: faint-glow .6s steps(2) infinite;
}
@keyframes faint-glow {
  50% {
    box-shadow: 0 0 0 3px #fff6c0 !important;
  }
}
body.in-battle .hud-controls .auto-battle {
  position: static !important;
  right: auto;
  top: auto;
  width: auto !important;
  min-width: 0;
  padding: 0 10px !important;
  gap: 4px;
  font-size: 12px;
  border-width: 2px;
}
body.in-battle .hud-controls .auto-battle i {
  font-size: 10px;
}
body.in-battle .hud-controls .auto-battle.on {
  background: #e8a030 !important;
  color: #402000 !important;
}
body.in-battle .hud-controls {
  display: flex !important;
  gap: 6px;
  align-items: stretch;
}
body.in-battle .pb-hint,
body.in-battle .play-bar .k {
  display: none !important;
}
body.in-battle .wild-dock.battle-bag {
  top: calc(64px + var(--safe-top,0px));
}
@media (max-height:470px) {
  body.in-battle .wild-dock.battle-bag {
    top: calc(56px + var(--safe-top,0px));
  }
}
body.in-battle .trainer-shout {
  position: absolute;
  z-index: 34;
  transform: translate(-20%, -100%);
  max-width: 200px;
  padding: 4px 9px;
  background: #fff;
  border: 2px solid #303850;
  border-radius: 8px;
  box-shadow: 0 2px 0 #30385066;
  color: #303850;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  animation: shout-in .15s ease-out, shout-out .3s ease-in 1.2s forwards;
}
body.in-battle .trainer-shout::after {
  content: "";
  position: absolute;
  left: 18%;
  bottom: -8px;
  border: 6px solid transparent;
  border-top: 7px solid #303850;
  border-bottom: 0;
}
@keyframes shout-in {
  from {
    transform: translate(-20%, -90%) scale(.7);
    opacity: 0;
  }
}
@keyframes shout-out {
  to {
    opacity: 0;
    transform: translate(-20%, -120%);
  }
}
body.in-battle .hud.mode-play .pb-dodge.pb-dodge {
  width: 90px !important;
  height: 90px !important;
  border: 0 !important;
  border-image: none !important;
  border-radius: 50% !important;
  background: url(/_expedition/assets/ui/dodge-button.png) center/100% 100% no-repeat !important;
  image-rendering: pixelated;
  box-shadow: none !important;
  filter: drop-shadow(0 4px 0 #30385080);
  color: #503838 !important;
  font-family: var(--font) !important;
  font-size: 19px !important;
  letter-spacing: 1px;
  text-shadow: 1px 1px 0 #ffd8c8 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row !important;
  white-space: nowrap !important;
  padding: 0 !important;
  line-height: 1 !important;
}
body.in-battle .hud.mode-play .pb-dodge.pb-dodge > span {
  color: #503838 !important;
  font-family: var(--font) !important;
  text-shadow: 1px 1px 0 #ffd8c8 !important;
  writing-mode: horizontal-tb !important;
  white-space: nowrap !important;
  width: auto !important;
}
body.in-battle .hud.mode-play .pb-dodge.pb-dodge:active {
  transform: translateY(3px) !important;
  filter: drop-shadow(0 1px 0 #30385080);
  background-image: url(/_expedition/assets/ui/dodge-button-down.png) !important;
}
body.in-battle .hud.mode-play .pb-dodge.pb-dodge .pe-cd {
  border-radius: 50% !important;
}
@media (max-height:470px) {
  body.in-battle .hud.mode-play .pb-dodge.pb-dodge {
    width: 78px !important;
    height: 78px !important;
    font-size: 17px !important;
  }
}
body.in-battle .hud.mode-play .pb-dodge.pb-dodge .fill {
  display: none !important;
}
body.in-battle .hud .pb-team .pb-slot.out {
  background: #101018 !important;
  border-color: #585868 !important;
  position: relative;
  cursor: not-allowed;
}
body.in-battle .hud .pb-team .pb-slot.out .pic {
  opacity: .18;
  filter: grayscale(1);
}
body.in-battle .hud .pb-team .pb-slot.out::after {
  content: "";
  position: absolute;
  top: 18%;
  right: 18%;
  bottom: 18%;
  left: 18%;
  pointer-events: none;
  image-rendering: pixelated;
  background:
    linear-gradient(
      45deg,
      transparent calc(50% - 3px),
      #e83838 calc(50% - 3px),
      #e83838 calc(50% + 3px),
      transparent calc(50% + 3px)),
    linear-gradient(
      -45deg,
      transparent calc(50% - 3px),
      #e83838 calc(50% - 3px),
      #e83838 calc(50% + 3px),
      transparent calc(50% + 3px));
}
body.in-battle .hud .pb-team .pb-slot.pb-empty {
  background: transparent !important;
  border: 2px dashed #9fb6e880 !important;
  box-shadow: none !important;
  pointer-events: none;
}
body.in-battle .hud .pb-team .pb-slot.pb-empty .pic {
  visibility: hidden;
}
body.in-battle .hud .pb-team .pb-slot.out.out {
  opacity: 1 !important;
  filter: none !important;
  background: #101018 !important;
}
body.in-battle .auto-battle.auto-corner {
  position: absolute !important;
  left: calc(12px + var(--safe-left,0px));
  right: auto;
  top: calc(12px + var(--safe-top,0px));
  z-index: 40;
  box-sizing: border-box;
  min-height: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.in-battle.battle-intro .auto-battle.auto-corner {
  visibility: hidden;
}
body.in-battle .hud.mode-play .pe-stick-zone {
  position: absolute;
  left: 0;
  top: 18%;
  width: 42%;
  bottom: 0;
  touch-action: none;
  z-index: 0;
  pointer-events: auto;
}
body.in-battle .hud.mode-play .pb-stick.pe-floating:not(.pe-held) {
  opacity: .55;
}
body.in-battle .auto-battle-on .pe-stick-zone {
  pointer-events: none;
}
body.in-battle.battle-intro .pe-stick-zone,
body.in-battle.battle-over .pe-stick-zone {
  display: none;
}
body.in-battle .hud.mode-play .pe-stick-zone.off {
  pointer-events: none;
}
body.in-battle .pb-move.pe-choice-locked {
  filter: grayscale(1) brightness(.7);
  opacity: .6;
}
.panel-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.panel-title strong {
  font-size: 15px;
}
.panel-title small {
  font-size: 10px;
  color: #bcd2ff;
}
.hero-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
}
.party-column {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px !important;
  min-height: 0 !important;
  border-radius: 10px !important;
  background:
    linear-gradient(
      180deg,
      #14244ee0,
      #080e22eb) !important;
  border: 3px solid #aeb8d1 !important;
  box-shadow: 0 0 0 3px #0b1838 !important;
}
.party-thumb {
  position: relative;
  flex: 1;
  width: 42px;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #2c519f88;
  overflow: hidden;
}
.party-thumb.lead {
  background: #3f9a5c99;
  box-shadow: inset 0 0 0 1px #9df0b4;
}
.party-thumb.empty {
  background: #ffffff0d;
  box-shadow: inset 0 0 0 1px #ffffff22;
}
.party-thumb .thumb-mon {
  zoom: .5;
}
.thumb-hp {
  position: absolute;
  left: 3px;
  bottom: 2px;
  height: 2px;
  max-width: calc(100% - 6px);
  background: #5fe08a;
  border-radius: 1px;
}
.home-menu {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.home-menu .menu-card.featured {
  grid-column: 1 / -1;
}
.party-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 6px;
  flex: 1;
  min-height: 0;
}
.party-slot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 4px 8px !important;
  border-radius: 12px !important;
  text-align: left;
  background: linear-gradient(#3c78d8, #2453a8) !important;
  border: 2px solid #cfe0ff !important;
  box-shadow: 0 0 0 2px #0b1838, 0 3px 0 #0b1838 !important;
  color: #fff;
  overflow: hidden;
}
.party-slot.lead {
  background: linear-gradient(#4fb06a, #2b7a43) !important;
}
.party-slot.selected {
  border-color: #ffd23a !important;
  box-shadow: 0 0 0 2px #ffd23a, 0 3px 0 #0b1838 !important;
}
.party-slot.empty {
  background: #14234dcc !important;
  border-style: dashed !important;
  border-color: #5b78b8 !important;
  box-shadow: none !important;
  justify-content: center;
  color: #7d95c8;
  font-size: 11px;
}
.slot-ball {
  width: 14px;
  height: 14px;
  flex: none;
  background: var(--survivor-ball) center/contain no-repeat;
  image-rendering: pixelated;
  opacity: .9;
}
.party-slot .slot-mon {
  zoom: .6;
  flex: none;
}
.slot-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.slot-info strong {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slot-info small {
  font-size: 10px;
  color: #e6eeff;
}
.slot-info .hp {
  height: 5px;
  margin-top: 2px;
}
.slot-item {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
}
.scene-layout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.scene-art {
  padding: 6px;
  border-radius: 12px;
  background: linear-gradient(#2c519f, #1a3170);
  border: 2px solid #f4f8ff;
  box-shadow: 0 0 0 2px #0b1838;
  line-height: 0;
}
.scene-art canvas {
  height: 150px;
  height: clamp(150px, 58vh, 420px);
  width: auto;
  aspect-ratio: 1;
  --ar: 1;
  image-rendering: pixelated;
  border-radius: 6px;
}
.lab-main {
  padding: 14px !important;
}
.lab-main h2 {
  margin: 4px 0 8px;
}
.pc-layout {
  display: grid;
  grid-template-columns: minmax(150px, .75fr) minmax(220px, 1.05fr) minmax(260px, 1.3fr);
  gap: 10px;
  align-items: stretch;
  height: calc(100vh - 150px);
  min-height: 0;
}
.pc-party {
  padding: 8px !important;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.pc-party .party-panel {
  grid-template-columns: 1fr;
}
.pc-party .party-slot {
  min-height: 0;
}
.pc-box {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 8px;
  border-radius: 12px;
  border: 3px solid #f4f8ff;
  box-shadow: 0 0 0 3px #0b1838;
  background:
    repeating-linear-gradient(
      45deg,
      #7cc48a 0,
      #7cc48a 10px,
      #6bb67a 10px,
      #6bb67a 20px);
}
.box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
  padding: 4px 8px;
  border-radius: 9px;
  background: #f8f4e0;
  color: #3a4a2a;
  border: 2px solid #3a6a3a;
}
.box-head strong {
  font-size: 14px;
  color: #2f4f2f;
}
.box-nav {
  padding: 2px 10px !important;
  min-height: 0 !important;
  font-size: 12px;
}
.box-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 3px;
  min-height: 0;
}
.box-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  min-height: 0 !important;
  border-radius: 6px !important;
  background: #ffffff2e !important;
  border: 1px solid #ffffff55 !important;
  box-shadow: none !important;
  overflow: hidden;
}
.box-cell.empty {
  background: #ffffff14;
  border: 1px dashed #ffffff33;
  border-radius: 6px;
}
.box-cell.selected {
  background: #fff6 !important;
  border: 2px solid #ffd23a !important;
}
.box-cell .box-mon {
  zoom: .5;
}
.box-held {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffd23a;
  box-shadow: 0 0 0 1px #000;
}
.box-foot {
  margin: 5px 0 0;
  font-size: 10px;
  color: #f4fff2;
  text-shadow: 1px 1px #2a4a2a;
  text-align: center;
}
.pc-screen {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  overflow: auto;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(#0f2a3a, #0b1f2c);
  color: #d8fff0;
  border: 4px solid #c8ccd4;
  box-shadow:
    0 0 0 3px #0b1838,
    inset 0 0 0 2px #24485c,
    inset 0 0 24px #23ffb222;
  font-size: 11px;
}
.pc-empty {
  margin: auto;
  color: #7fb8a4;
}
.pc-screen-head {
  display: flex;
  gap: 10px;
  align-items: center;
}
.pc-portrait {
  flex: none;
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background:
    radial-gradient(
      circle,
      #2f6b7a,
      #123040);
  border: 2px solid #4fd1b0;
}
.pc-portrait .pc-mon {
  zoom: 1;
}
.pc-screen h2 {
  margin: 0;
  font-size: 18px;
  color: #fff;
}
.pc-sub {
  margin: 1px 0;
  color: #9fe8cf;
}
.type-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin: 3px 0;
}
.type-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px 1px 2px;
  border-radius: 99px;
  font-size: 10px;
  color: #fff;
  background: #0006;
  border: 1px solid #fff5;
}
.type-tag img {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}
.pc-cols {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 10px;
}
.pc-screen h3 {
  margin: 2px 0 4px;
  font-size: 11px;
  color: #ffd23a;
  letter-spacing: 1px;
}
.stat-row {
  display: grid;
  grid-template-columns: 28px 28px 1fr 22px;
  align-items: center;
  gap: 4px;
  margin: 2px 0;
}
.stat-row b {
  text-align: right;
  color: #fff;
}
.stat-row small {
  color: #ffd23a;
  font-size: 9px;
}
.stat-bar {
  height: 5px;
  border-radius: 3px;
  background: #ffffff1f;
  overflow: hidden;
}
.stat-bar i {
  display: block;
  height: 100%;
  background:
    linear-gradient(
      90deg,
      #4fd1b0,
      #c8ff7a);
}
.pc-moves {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pc-move {
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-template-rows: auto auto;
  column-gap: 5px;
  align-items: center;
  padding: 3px 5px;
  border-radius: 7px;
  background: #ffffff12;
}
.pc-move img {
  grid-row: 1 / 3;
  width: 22px;
  height: 22px;
  image-rendering: pixelated;
}
.mv-name {
  font-weight: 700;
  color: #fff;
}
.pc-move small {
  font-size: 9px;
  color: #9fe8cf;
}
.pc-ability {
  margin: 2px 0;
  color: #9fd6c4;
  font-size: 10px;
  line-height: 1.35;
}
.pc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
}
.pc-actions button {
  padding: 5px 10px !important;
  font-size: 11px;
  min-height: 0 !important;
}
.shop-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px !important;
  height: calc(100vh - 150px);
  min-height: 0;
}
.shop-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}
.shop-head h2 {
  margin: 0;
}
.shop-head .coins {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 700;
}
.pocket-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pocket-tabs button {
  padding: 5px 12px !important;
  font-size: 12px;
  min-height: 0 !important;
}
.pocket-tabs button.selected {
  background: linear-gradient(#ffe46a, #f2b705) !important;
  color: #0d1430 !important;
}
.shop-list {
  flex: 1;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 8px;
  align-content: start;
  padding: 2px;
}
.shop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #ffffff14;
  border: 1px solid #ffffff2a;
}
.shop-item.locked {
  opacity: .45;
  filter: grayscale(.7);
}
.shop-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.shop-text strong {
  font-size: 14px;
}
.shop-text small {
  font-size: 10px;
  color: #c9d8ff;
  line-height: 1.3;
}
.shop-text .owned {
  font-size: 10px;
  color: #ffd23a;
}
.shop-buy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.shop-buy .price {
  font-size: 12px;
  color: #ffe9a0;
}
.shop-buy button {
  padding: 4px 12px !important;
  font-size: 11px;
  min-height: 0 !important;
}
.empty-pocket {
  grid-column: 1 / -1;
  text-align: center;
  padding: 30px 0;
}
.item-pick,
.target-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 52vh;
  overflow: auto;
}
.item-pick .item-btn,
.target-list .item-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
}
.item-pick small {
  display: block;
  font-size: 10px;
  opacity: .8;
}
.target-list .mon-sprite.mini {
  zoom: .5;
}
.carry-title {
  margin: 8px 0 4px;
  font-size: 14px;
}
.carry-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 6px;
  max-height: 34vh;
  overflow: auto;
}
.carry-group h4 {
  margin: 2px 0;
  font-size: 11px;
  color: #ffd23a;
}
.carry-row {
  display: grid;
  grid-template-columns: 24px 1fr 26px 24px 26px 30px;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  margin: 2px 0;
}
.carry-row b {
  text-align: center;
}
.carry-row small {
  color: #9fb6e8;
  font-size: 10px;
}
.mini-btn {
  padding: 0 !important;
  min-height: 22px !important;
  height: 22px;
  width: 26px;
  font-size: 14px;
  line-height: 1;
}
.run-bag {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 56vh;
  overflow: auto;
}
.run-bag .bag-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 8px;
  background: #ffffff12;
}
.bag-text {
  display: flex;
  flex-direction: column;
}
.bag-text small {
  font-size: 10px;
  opacity: .8;
}
@media (max-height:470px) {
  .hub.home2 {
    padding: 8px 12px;
    gap: 10px;
  }
  .home2 .logo-title {
    font-size: 22px;
  }
  .home-menu .menu-label small {
    display: none;
  }
  .home-menu .menu-card {
    padding: 5px 8px !important;
  }
  .pc-layout,
  .shop-panel {
    height: calc(100vh - 118px);
  }
  .party-slot .slot-mon {
    zoom: .45;
  }
}
@media (orientation:portrait) {
  .hub.home2,
  .pc-layout,
  .scene-layout {
    grid-template-columns: 1fr;
    height: auto;
  }
}
@media (max-height:700px) and (orientation:landscape) {
  .page {
    padding-top: 6px !important;
    padding-bottom: 8px !important;
  }
  .page-top {
    margin-bottom: 6px !important;
  }
  .page-top .back {
    padding: 4px 12px !important;
    font-size: 12px;
    min-height: 0 !important;
  }
  .page-top .eyebrow {
    font-size: 10px;
  }
  .pc-layout,
  .shop-panel {
    height: calc(100vh - 118px);
  }
}
@media (max-height:700px) and (orientation:landscape) {
  .hub .home-right {
    gap: 8px;
  }
  .home-menu {
    gap: 4px 10px !important;
    padding: 8px 14px !important;
  }
  .home-menu .menu-card {
    padding: 4px 8px !important;
  }
  .home-menu .menu-card.featured .menu-label strong {
    font-size: 22px;
  }
  .home-menu .menu-label strong {
    font-size: 16px;
  }
  .home-menu .menu-label small {
    font-size: 10px;
  }
  .hub-status {
    padding: 6px 14px !important;
  }
  .hub-status p {
    margin: 2px 0;
    font-size: 12px;
  }
}
.gacha-rates {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 700;
  margin: 4px 0;
}
.gacha-rates span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.gacha-rates img {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}
.ticket-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.gacha-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 6px 0;
}
.gacha-buttons button {
  padding: 8px 14px !important;
}
.ten-ticket {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #e2c4ff;
}
.pull-fx {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 14px 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(
      circle at 50% 45%,
      #1b2d63,
      #03060f 70%);
}
.pull-fx::before,
.pull-fx::after {
  content: "";
  margin: auto;
}
.gacha-slot {
  width: 528px;
  width: min(528px, 92vw, 78vh);
  height: auto;
  image-rendering: pixelated;
  cursor: pointer;
  filter: drop-shadow(0 0 30px rgba(255, 90, 90, .35));
  animation: survivor-pop .25s ease-out both;
}
.pull-results {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 900px;
}
.pull-results.ten {
  display: grid;
  grid-template-columns: repeat(5, auto);
  justify-content: center;
}
.pcard {
  width: 150px;
  padding: 10px 6px;
  text-align: center;
  border-radius: 12px;
  color: #fff;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .1),
      rgba(0, 0, 0, .3));
  border: 3px solid var(--rc,#fff);
  box-shadow: 0 0 22px var(--rc,#fff);
  animation: pcard-pop .3s ease-out both;
  text-shadow: 2px 2px 0 #0a1430;
}
.pcard .stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--rc);
  font-size: 13px;
  font-weight: 700;
}
.pcard .stars img {
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
}
.pcard .pcard-mon {
  margin: 6px auto;
}
.pcard b {
  display: block;
  font-size: 16px;
}
.pcard .tag {
  font-size: 11px;
  margin-top: 2px;
  opacity: .9;
}
.pcard .new {
  color: #ffd23a;
  font-weight: 700;
}
.pcard.r4 {
  animation: pcard-pop .3s ease-out both, pcard-epic 1.4s ease-in-out infinite alternate;
}
.pull-close {
  position: sticky;
  bottom: 8px;
  z-index: 2;
  flex-shrink: 0;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .6);
}
@keyframes pcard-pop {
  from {
    transform: scale(.6);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes pcard-epic {
  to {
    box-shadow: 0 0 40px var(--rc), 0 0 80px var(--rc);
  }
}
@media (max-height:520px) {
  .pull-fx {
    gap: 8px;
  }
  .pull-results {
    gap: 6px;
  }
  .pcard {
    width: 96px;
    padding: 5px 3px;
    border-radius: 10px;
  }
  .pcard .pcard-mon {
    zoom: .75;
    margin: 2px auto;
  }
  .pcard b {
    font-size: 12px;
  }
  .pcard .tag {
    font-size: 9px;
  }
  .pcard .stars {
    font-size: 10px;
  }
}
.pcard-art {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pcard .pcard-mon {
  margin: 0;
}
@media (max-height:520px) {
  .pcard-art {
    height: 64px;
  }
}
.pc-box {
  background: none !important;
  border: 0 !important;
  border-image: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  align-items: center;
  justify-content: center;
}
.box-wall {
  position: relative;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 160/144;
  --ar: 160/144;
  min-height: 0;
  background-size: 100% 100%;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 0 #30385080);
}
.box-wall .box-head {
  position: absolute;
  left: 15%;
  right: 15%;
  top: 1.2%;
  height: 13.5%;
  margin: 0;
  padding: 0 2%;
  background: none !important;
  border: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.box-wall .box-head strong {
  font-size: 11px;
  font-size: clamp(11px, 2.2vh, 16px);
  color: #404858;
  text-shadow:
    1px 1px 0 #f8f8f8,
    -1px 0 0 #f8f8f8,
    0 -1px 0 #f8f8f8,
    1px 0 0 #f8f8f8;
  letter-spacing: 1px;
}
.box-wall .box-nav {
  padding: 0 6px !important;
  min-height: 0 !important;
  font-size: 12px;
  background: #f8f8f0e0 !important;
  border: 2px solid #687890 !important;
  border-image: none !important;
  box-shadow: none !important;
  border-radius: 3px !important;
}
.box-wall .box-grid {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 21%;
  bottom: 5%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 0;
}
.box-wall .box-cell,
.box-wall .box-cell.empty {
  background: none !important;
  border: 0 !important;
  border-image: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible;
  padding: 0 !important;
  min-height: 0 !important;
}
.box-wall .box-cell .box-mon {
  zoom: .7;
  filter: drop-shadow(1px 1px 0 #30385066);
}
.box-wall .box-cell:hover:not(.empty) .box-mon {
  filter: drop-shadow(0 0 2px #fff) drop-shadow(1px 1px 0 #30385066);
}
.box-wall .box-cell.selected::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -38%;
  width: 30px;
  height: 30px;
  transform: translateX(-30%);
  background: url(/_expedition/assets/emerald/pc/hand_cursor.png) 0 0/100% 400%;
  image-rendering: pixelated;
  animation: pc-hand 1s steps(2) infinite;
  pointer-events: none;
  z-index: 2;
}
.box-wall .pc-drop-target {
  outline: 3px dashed #f8f8f8 !important;
  outline-offset: -4px;
  background: #ffffff44 !important;
}
@keyframes pc-hand {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 3px;
  }
}
.pc-box .box-foot {
  color: #f8f8e8;
  text-shadow: 1px 1px 0 #303850;
}
.box-wall {
  height: auto;
  width: 100%;
  width: min(100%, calc((100vh - 190px) * 160 / 144));
}
.pc-party .party-panel {
  grid-auto-rows: minmax(0, 50px);
  grid-template-rows: none;
  align-content: start;
  gap: 5px;
}
.pc-party .party-slot.empty {
  opacity: .55;
}
@media (max-height:500px) {
  .box-wall {
    width: 100%;
    width: min(100%, calc((100vh - 140px) * 160 / 144));
  }
  .pc-party .party-panel {
    grid-auto-rows: minmax(0, 40px);
    gap: 3px;
  }
}
.dex-icon {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  width: 34px;
  height: 34px;
}
.dex-icon .dex-mon {
  zoom: .42;
}
.dex-icon.unseen .dex-mon {
  filter: brightness(0) opacity(.6);
}
.dex-icon.rare::after {
  content: "★";
  position: absolute;
  right: -2px;
  top: -4px;
  font-size: 11px;
  color: #e0a020;
  text-shadow: 1px 1px 0 #503818;
}
.route-art.dex-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 6px 8px;
  min-height: 0;
  height: auto;
}
.gacha-pool {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 150px;
  overflow: auto;
  padding: 4px 6px;
  background: #ffffff40;
}
.pool-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 2px;
}
.pool-row > img {
  width: 18px;
  height: 18px;
  margin-right: 4px;
  image-rendering: pixelated;
}
.gen-tabs {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 4px;
  margin: 6px 0 10px;
}
.gen-tab {
  padding: 4px 2px !important;
  min-height: 0 !important;
  line-height: 1.1;
}
.gen-tab b {
  display: block;
  font-size: 11px;
}
.gen-tab small {
  font-size: 10px;
  opacity: .8;
}
.starter .type-row {
  display: flex;
  gap: 3px;
  justify-content: center;
  margin-top: 3px;
}
@media (max-width:900px) {
  .gen-tabs {
    grid-template-columns: repeat(5, 1fr);
  }
}
.gen-tab {
  border-width: 4px !important;
}
.gen-tab b {
  white-space: nowrap;
  font-size: 10px;
}
@media (orientation:landscape) {
  .pc-layout,
  .pc-layout[class] {
    height: auto !important;
    grid-template-columns: minmax(150px, .72fr) minmax(0, 1.5fr) minmax(240px, 1.2fr);
    align-items: stretch;
  }
  .pc-layout > .pc-party,
  .pc-layout > .pc-screen {
    height: 0;
    min-height: 100%;
    overflow: auto;
  }
  .pc-box {
    justify-content: flex-start;
  }
  .box-wall {
    height: auto;
    width: 100%;
  }
}
@media (max-width:760px) and (orientation:landscape) {
  .pc-layout,
  .pc-layout[class] {
    grid-template-columns: minmax(110px, .7fr) minmax(0, 1.4fr) minmax(200px, 1.2fr);
  }
}
.report-rewards.lost strong,
.report-rewards.lost span {
  color: #b05048;
}
.report-mons.lost .mon-sprite {
  filter: grayscale(1) opacity(.6);
}
.route-art.dex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 40px);
  gap: 4px;
  justify-content: start;
}
.dex-grid .dex-icon,
.pool-row .dex-icon {
  width: 40px;
  height: 40px;
  align-items: center;
  overflow: hidden;
  border-radius: 4px;
  background: #ffffff40;
}
.dex-icon.rare {
  overflow: visible;
  box-shadow: inset 0 0 0 2px #e0a02066;
}
.dex-icon.rare::after {
  right: 1px;
  top: -1px;
}
.route-art.dex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 40px);
  gap: 4px;
  justify-content: start;
}
.dex-grid .dex-icon,
.pool-row .dex-icon {
  width: 40px;
  height: 40px;
  align-items: center;
  overflow: hidden;
  border-radius: 4px;
  background: #ffffff40;
}
.dex-icon.rare {
  overflow: visible;
  box-shadow: inset 0 0 0 2px #e0a02066;
}
.dex-icon.rare::after {
  right: 1px;
  top: -1px;
}
.difficulty-card {
  display: block;
  width: 100%;
  text-align: left;
  margin: 6px 0;
  padding: 8px 10px !important;
}
.difficulty-card-inner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.difficulty-card-inner > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.difficulty-card strong {
  font-size: 14px;
}
.difficulty-card small {
  font-size: 11px;
  line-height: 1.35;
  opacity: .85;
}
.difficulty-reward {
  color: #b05048;
  opacity: 1 !important;
}
.difficulty-badge {
  flex: none;
  display: inline-block;
  padding: 3px 8px;
  border-radius: 3px;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  text-shadow: 1px 1px 0 #0005;
}
.difficulty-badge.easy {
  background: #58a868;
}
.difficulty-badge.normal {
  background: #5878b8;
}
.difficulty-badge.hard {
  background: #c05048;
}
.difficulty-card.selected {
  box-shadow: inset 5px 0 #c85848 !important;
}
.area-sign {
  position: fixed;
  z-index: 500;
  left: 50%;
  top: 70px;
  width: 240px;
  margin-left: -120px;
  padding: 10px 18px 12px;
  background: #f8f0d8;
  border: 4px solid #a07848;
  box-shadow:
    0 0 0 3px #f8f0d8,
    0 0 0 6px #604828,
    0 6px 0 #0006;
  color: #484028;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: area-sign 4.2s steps(14) both;
  pointer-events: none;
}
.area-sign small {
  font-size: 12px;
  color: #806848;
}
.area-sign strong {
  font-size: 22px;
}
.area-sign .difficulty-badge {
  align-self: flex-start;
  margin-top: 4px;
}
@keyframes area-sign {
  0% {
    transform: translateY(-160%);
  }
  10%, 85% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-160%);
  }
}
.region-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin: 4px 0;
}
.region-tab {
  padding: 3px 8px !important;
  min-height: 0 !important;
  font-size: 12px;
}
.arena-team {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  min-height: 40px;
}
.arena-mon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.arena-mon .dex-mon {
  zoom: .45;
}
.opponent .difficulty-badge {
  align-self: center;
}
.dex-panel {
  overflow: auto;
  max-height: calc(100vh - 140px);
}
.dex-regions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.dex-region {
  padding: 8px;
  background: #ffffff50;
  border: 2px solid #b8c0d0;
}
.dex-region header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.dex-region.locked {
  opacity: .6;
}
.dex-region .dex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 40px);
  gap: 4px;
}
.dex-icon.owned {
  box-shadow: inset 0 0 0 2px #58a86888;
}
.music-button {
  min-width: 64px;
  font-weight: 700;
  margin-right: 8px;
}
.home-menu .menu-card {
  overflow: hidden;
}
.home-menu .menu-inner {
  position: relative;
  z-index: 1;
}
.menu-art {
  --s:2;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 46%;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: calc(var(--bw)*var(--s)*1px) auto;
  background-position: calc(var(--bx)*var(--s)*-1px) calc(var(--by)*var(--s)*-1px);
  image-rendering: pixelated;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  padding-bottom: 2px;
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 45%);
  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 45%);
  opacity: .95;
}
.featured .menu-art {
  width: 55%;
}
.menu-art-person {
  height: 64px;
  height: min(64px, calc(100% - 2px));
  aspect-ratio: 1/2;
  --ar: 1/2;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 900% 100%;
  image-rendering: pixelated;
  flex-shrink: 0;
}
.menu-art-item {
  image-rendering: pixelated;
  max-height: 100%;
  flex-shrink: 0;
}
.menu-art-item {
  height: 48px;
  height: min(48px, calc(100% - 4px));
  width: auto;
}
.difficulty-card-inner {
  position: relative;
}
.difficulty-art {
  width: 56px;
  height: 56px;
  object-fit: contain;
  image-rendering: pixelated;
  flex-shrink: 0;
  filter: drop-shadow(2px 2px 0 #30385050);
}
.wild-mode .difficulty-art {
  width: 72px;
  height: 72px;
}
.user-pill .user-icon {
  image-rendering: pixelated;
}
.difficulty-badge.royale {
  background: #6a3a78;
}
.menu-art {
  max-width: 150px;
}
.featured .menu-art {
  max-width: 190px;
}
@media (orientation:portrait) {
  .menu-art {
    max-width: 120px;
  }
  .featured .menu-art {
    max-width: 150px;
  }
}
.lab-room {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 0;
}
.lab-stage {
  position: relative;
  line-height: 0;
}
.scene-art .lab-canvas {
  display: block;
  height: var(--lab-size,520px);
  width: auto;
  aspect-ratio: 1;
  --ar: 1;
  image-rendering: pixelated;
  cursor: pointer;
}
@supports (width: min(1px, 2px)) {
  .scene-art .lab-canvas {
    height: var(--lab-size,min(80vw,520px));
  }
}
.incubator-hint-wrap {
  position: absolute;
  transform: translate(-50%, -110%);
  animation: hint-bob 1.1s ease-in-out infinite;
  z-index: 2;
  line-height: 1;
}
.incubator-hint {
  position: relative;
  white-space: nowrap;
  padding: 5px 10px !important;
  min-height: 0 !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  background: #fff8e0 !important;
  color: #a84840 !important;
}
.incubator-hint::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: #404858;
}
@keyframes hint-bob {
  50% {
    transform: translate(-50%, calc(-110% - 5px));
  }
}
.lab-caption {
  margin: 0;
  font-size: 12px;
  color: #f0f0e8;
  text-shadow: 1px 1px 0 #10203a;
}
@media (orientation:landscape) and (max-height:470px) {
  .lab-caption {
    display: none;
  }
  .incubator-hint {
    font-size: 11px;
    padding: 3px 7px !important;
  }
}
.gacha-back .dialog {
  --modal-w: 880px;
  width: var(--modal-w) !important;
  max-width: var(--modal-w) !important;
}
@supports (width: min(1px, 2px)) {
  .gacha-back .dialog {
    --modal-w: min(880px,calc(100vw - var(--safe-left,0px) - var(--safe-right,0px) - 28px));
  }
}
.gacha {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gacha-gens {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 4px;
}
.gacha-gens .gen-tab:disabled {
  opacity: .35;
}
.gacha-gens .gen-tab.selected {
  background: #f0d898 !important;
  box-shadow: inset 0 -3px #c85848 !important;
}
.gacha-main {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 10px;
}
.gacha-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  color: #fff;
  border: 4px solid #0a1430;
  min-height: 0;
}
.banner-title {
  font-size: 20px;
  text-shadow: 2px 2px #0a1430;
}
.banner-desc {
  font-size: 12px;
  opacity: .85;
}
.gacha-feat {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  min-height: 110px;
  margin: 4px 0;
}
.gacha-feat .feat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 700;
  text-shadow: 1px 1px #0a1430;
}
.gacha-feat .feat.silhouette .mon-sprite {
  filter: brightness(0) opacity(.75);
}
.gacha-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 13px;
  background: #0a143080;
  padding: 5px 8px;
}
.gacha-progress b {
  color: #ffd23f;
  font-size: 15px;
}
.gacha-progress .total {
  opacity: .8;
}
.gacha-odds {
  padding: 6px 8px;
  background: #ffffff70;
  border: 2px solid #40485830;
  font-size: 13px;
}
.gacha-odds h3 {
  margin: 0 0 4px;
  font-size: 15px;
  color: #b05048;
}
.odds-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  border-bottom: 1px solid #40485818;
}
.odds-name {
  display: flex;
  align-items: center;
  gap: 6px;
}
.odds-name img {
  width: 20px;
  height: 20px;
  image-rendering: pixelated;
}
.odds-name small {
  opacity: .85;
  font-size: 11px;
}
.odds-val {
  font-weight: 700;
  color: #404858;
}
.gacha-odds .note {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: #687080;
}
.gacha-tickets {
  margin: 0;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
@media (max-height:470px) {
  .gacha-gens .gen-tab small {
    display: none;
  }
  .gacha-feat {
    min-height: 80px;
  }
  .gacha-feat .mon-sprite {
    zoom: .75;
  }
  .gacha-odds .note {
    display: none;
  }
  .banner-desc {
    display: none;
  }
}
@media (orientation:portrait) {
  .gacha-main {
    grid-template-columns: 1fr;
  }
  .gacha-gens {
    grid-template-columns: repeat(5, 1fr);
  }
}
.gacha-banner .banner-desc {
  color: #e8f0ff !important;
  opacity: .9;
}
body[data-screen=lab] main.page {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body[data-screen=lab] .lab-room {
  flex: 1;
  min-height: 0;
  width: 100%;
  container-type: size;
  justify-content: center;
}
body[data-screen=lab] .lab-room .lab-stage {
  --lab-size: calc(calc(100vh - 40px) - 28px);
}
@supports (width: min(1px, 2px)) and (width: 1cqw) {
  body[data-screen=lab] .lab-room .lab-stage {
    --lab-size: calc(min(100cqh - 40px,100cqw) - 28px);
  }
}
@media (orientation:landscape) and (max-height:470px) {
  body[data-screen=lab] .lab-room .lab-stage {
    --lab-size: calc(100vh - 28px);
  }
  @supports (width: min(1px, 2px)) and (width: 1cqw) {
    body[data-screen=lab] .lab-room .lab-stage {
      --lab-size: calc(min(100cqh,100cqw) - 28px);
    }
  }
  body[data-screen=lab] .page-top {
    margin-bottom: 4px;
  }
}
body[data-screen=adventure] main.page,
body[data-screen=dungeon] main.page,
body[data-screen=survival] main.page {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dungeon-select {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dungeon-gens {
  margin: 0 !important;
}
.dungeon-map {
  flex: 1;
  min-height: 0;
  padding: 10px !important;
  background: #c8d8b0 !important;
  background-image:
    repeating-linear-gradient(
      0deg,
      #00000008 0 2px,
      transparent 2px 4px) !important;
}
.dungeon-path {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}
.dungeon-path::before {
  content: "";
  position: absolute;
  top: 25%;
  right: 10%;
  bottom: 25%;
  left: 10%;
  border: 6px dashed #8a6a46;
  border-left: 0;
  border-radius: 0 40px 40px 0;
  opacity: .55;
  pointer-events: none;
}
.dungeon-path > :nth-child(6) {
  grid-area: 2/5;
}
.dungeon-path > :nth-child(7) {
  grid-area: 2/4;
}
.dungeon-path > :nth-child(8) {
  grid-area: 2/3;
}
.dungeon-path > :nth-child(9) {
  grid-area: 2/2;
}
.dungeon-path > :nth-child(10) {
  grid-area: 2/1;
}
button.dungeon-node {
  position: relative;
  z-index: 1;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  text-align: left;
  background: var(--theme) !important;
}
button.dungeon-node.has-map {
  background: var(--map) -40px -40px/auto no-repeat, var(--theme) !important;
  image-rendering: pixelated;
}
button.dungeon-node.gen-map {
  background: var(--map) center/cover no-repeat, var(--theme) !important;
}
.node-inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1px;
  padding: 6px 8px;
  background: linear-gradient(transparent 20%, #f8f8f0f0 58%);
}
.node-tier {
  position: absolute;
  left: 6px;
  top: 5px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #404858;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  border: 2px solid #f8f8f0;
}
.dungeon-node strong {
  font-size: 12px;
  font-size: clamp(12px, 2.1vw, 17px);
  color: #303848;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dungeon-node small {
  font-size: 11px;
  color: #687080;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.node-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.node-lv {
  font-size: 11px;
  font-weight: 700;
  color: #a84840;
}
.node-clears {
  display: flex;
  gap: 3px;
}
.clear-dot {
  width: 8px;
  height: 8px;
  border: 1px solid #404858;
  background: #fff;
}
.clear-dot.easy.on {
  background: #58a868;
}
.clear-dot.normal.on {
  background: #5878b8;
}
.clear-dot.hard.on {
  background: #c05048;
}
.node-pool {
  position: absolute;
  right: 6px;
  top: 7px;
  display: flex;
  gap: 2px;
}
.node-pool i {
  width: 6px;
  height: 12px;
  background: #ffffff80;
  border: 1px solid #404858;
}
.node-pool i.on {
  background: #f0c040;
}
.node-lock {
  position: absolute;
  right: 8px;
  top: 6px;
  font-size: 16px;
}
button.dungeon-node.locked {
  filter: grayscale(1) brightness(.85);
  opacity: .75;
}
.dungeon-tip {
  margin: 0;
  font-size: 12px;
  color: #f0f0e8;
  text-shadow: 1px 1px 0 #10203a;
}
@media (max-height:470px) {
  .dungeon-gens .gen-tab small {
    display: none;
  }
  .dungeon-path {
    gap: 6px 8px;
  }
  .dungeon-node small {
    display: none;
  }
  .dungeon-tip {
    display: none;
  }
  .node-tier {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }
}
@media (orientation:portrait) {
  .dungeon-path {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: 110px;
    height: auto;
  }
  .dungeon-path > * {
    grid-area: auto !important;
  }
  .dungeon-path::before {
    display: none;
  }
  .dungeon-map {
    overflow: auto;
  }
}
body[data-screen=dungeon] .adventure-layout,
body[data-screen=survival] .adventure-layout {
  flex: 1;
  min-height: 0;
}
@media (orientation:landscape) {
  body[data-screen=dungeon] .adventure-layout > .panel,
  body[data-screen=survival] .adventure-layout > .panel {
    min-height: 0;
    max-height: 100%;
    overflow: auto;
    position: static;
  }
}
.briefing-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.briefing-head h2 {
  margin: 2px 0;
}
.info-button {
  flex-shrink: 0;
  padding: 5px 10px !important;
  min-height: 0 !important;
  font-size: 13px;
}
.info-back .dialog {
  --modal-w: 720px;
  width: var(--modal-w) !important;
  max-width: var(--modal-w) !important;
}
@supports (width: min(1px, 2px)) {
  .info-back .dialog {
    --modal-w: min(720px,calc(100vw - 28px));
  }
}
.dungeon-info .info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.dungeon-info .info-grid > div {
  display: flex;
  flex-direction: column;
  padding: 6px 8px;
  background: #ffffff80;
  border: 2px solid #40485820;
}
.dungeon-info .info-grid small {
  color: #687080;
}
.pool-tier {
  padding: 6px 0;
  border-bottom: 1px solid #40485818;
}
.pool-tier.locked {
  opacity: .55;
}
.pool-tier-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pool-tier-head small {
  color: #687080;
}
.pool-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 4px;
}
.dungeon-info .rules {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.55;
  color: #505868;
}
@media (max-height:470px) {
  body[data-screen=dungeon] .difficulty-card-inner > span:last-child small:not(.difficulty-reward) {
    display: none;
  }
  body[data-screen=dungeon] .difficulty-art {
    width: 40px;
    height: 40px;
  }
}
@media (orientation:landscape) {
  .dungeon-gens {
    grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
  }
  .dungeon-gens .gen-tab b {
    font-size: 9px;
    font-size: clamp(9px, 1.6vw, 13px);
    white-space: nowrap;
  }
}
.lab-bubble {
  position: absolute;
  transform: translate(-50%, -100%);
  max-width: 62%;
  padding: 4px 9px;
  background: #f8f8f8;
  border: 3px solid #404858;
  box-shadow: inset -2px -2px 0 #d0d0c8, 0 2px 0 #30385060;
  font-size: 13px;
  line-height: 1.35;
  color: #404040;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
  animation: bubble-in .15s steps(2);
}
.lab-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top: 6px solid #404858;
  border-bottom: 0;
}
@keyframes bubble-in {
  from {
    opacity: 0;
    transform: translate(-50%, -90%);
  }
}
@media (max-height:470px) {
  .lab-bubble {
    font-size: 11px;
    padding: 3px 7px;
    border-width: 2px;
  }
}
@media (orientation:landscape) {
  body[data-screen=arena] main.page {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  body[data-screen=arena] .arena-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    padding: 10px 14px !important;
  }
  body[data-screen=arena] .arena-panel .section-heading {
    flex: none;
    align-items: center;
    flex-direction: row;
  }
  body[data-screen=arena] .arena-panel h1 {
    font-size: 17px;
    font-size: clamp(17px, 2.4vw, 24px);
    margin: 0 0 2px !important;
  }
  body[data-screen=arena] .arena-panel .section-heading .muted {
    margin: 0;
    font-size: 12px;
  }
  body[data-screen=arena] .opponents {
    flex: 1;
    min-height: 0;
    margin: 8px 0 6px !important;
    gap: 10px !important;
    grid-template-rows: minmax(0, 1fr);
  }
  body[data-screen=arena] .opponent {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
    padding: 8px 10px !important;
    gap: 2px;
  }
  body[data-screen=arena] .opponent img {
    flex: 1;
    min-height: 0;
    height: auto !important;
    width: 100%;
    object-fit: contain;
  }
  body[data-screen=arena] .opponent h2 {
    margin: 0 !important;
    font-size: 14px;
    font-size: clamp(14px, 1.8vw, 18px);
  }
  body[data-screen=arena] .opponent p {
    margin: 0 !important;
  }
  body[data-screen=arena] .opponent button {
    margin-top: 4px !important;
    width: 100%;
    padding: 6px !important;
  }
  body[data-screen=arena] .arena-team {
    min-height: 0;
  }
  body[data-screen=arena] .arena-panel > .notice {
    flex: none;
    margin: 0 !important;
    padding: 5px 9px !important;
    font-size: 11px;
  }
}
@media (orientation:landscape) and (max-height:470px) {
  body[data-screen=arena] .arena-panel .eyebrow,
  body[data-screen=arena] .arena-panel .section-heading .muted,
  body[data-screen=arena] .arena-panel > .notice {
    display: none;
  }
  body[data-screen=arena] .arena-mon {
    width: 30px;
    height: 30px;
  }
  body[data-screen=arena] .arena-mon .mon-sprite {
    zoom: .32;
  }
  body[data-screen=arena] .opponent small {
    font-size: 10px;
  }
  body[data-screen=arena] .opponent .difficulty-badge {
    font-size: 11px;
    padding: 1px 6px;
  }
}
body[data-screen=arena] .arena-panel .section-heading > button {
  white-space: nowrap;
  flex-shrink: 0;
}
.report {
  display: grid !important;
  grid-template-columns: minmax(220px, .8fr) minmax(0, 1.4fr);
  gap: 16px;
  text-align: left !important;
  max-width: 1100px !important;
  padding: 16px 20px !important;
}
.report-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 4px;
}
.report-main h1 {
  margin: 2px 0 !important;
}
.report-main .report-emblem {
  margin: 4px !important;
}
.report-where {
  margin: 0;
  font-weight: 700;
  color: #b05048;
}
.report-text {
  margin: 0;
  color: #687080;
  font-size: 13px;
}
.report-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}
.report-actions button {
  margin: 0 !important;
}
.report-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  overflow: auto;
}
.rgroup {
  padding: 6px 10px;
  background: #ffffff70;
  border: 2px solid #40485820;
  border-left: 5px solid #78b080;
}
.rgroup.lost {
  border-left-color: #c05048;
}
.rgroup.kept {
  border-left-color: #5878b8;
}
.rgroup.grow {
  border-left-color: #d0a040;
}
.rgroup h3 {
  margin: 0 0 5px;
  font-size: 13px;
  color: #404858;
}
.rchips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.rchip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 4px;
  background: #f8f8f0;
  border: 2px solid #606880;
  box-shadow: inset -2px -2px 0 #d0d0c8;
}
.rchip img {
  image-rendering: pixelated;
  flex-shrink: 0;
}
.rchip-name {
  font-size: 12px;
  color: #505868;
}
.rchip b {
  font-size: 14px;
}
.rchip.gain b {
  color: #3a8a4a;
}
.rchip.lost b {
  color: #c05048;
  text-decoration: line-through;
}
.rchip.lost img {
  filter: grayscale(1);
  opacity: .6;
}
.rchip.kept b {
  color: #4868a8;
}
.rmon {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
  padding: 2px 4px;
  background: #f8f8f0;
  border: 2px solid #606880;
}
.rmon .rmon-sprite {
  zoom: .7;
}
.rmon span {
  font-size: 12px;
  color: #404858;
}
.rmon small {
  font-size: 11px;
  color: #687080;
}
.rmon.lost .mon-sprite {
  filter: grayscale(1) opacity(.55);
}
.rmon.lost span {
  text-decoration: line-through;
  color: #a05048;
}
@media (orientation:landscape) {
  body[data-screen=report] main.page {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  body[data-screen=report] .report {
    flex: 1;
    min-height: 0;
    width: 100%;
    margin: 0 auto !important;
  }
}
@media (max-height:470px) {
  .report-main .report-emblem {
    display: none;
  }
  .report-main h1 {
    font-size: 18px !important;
  }
  .report .eyebrow {
    display: none;
  }
  .rmon .rmon-sprite {
    zoom: .5;
  }
  .rgroup {
    padding: 4px 8px;
  }
}
@media (orientation:portrait) {
  .report {
    grid-template-columns: 1fr;
  }
}
section.report {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  align-items: stretch;
  gap: 12px !important;
}
.report-main,
.report-detail {
  border: 8px solid transparent;
  border-image: var(--frame) 8 stretch;
  background: #f0f0e0;
  background-clip: padding-box;
  box-shadow: 0 4px 0 #30385080;
  padding: 12px 16px;
  min-height: 0;
}
.report-main {
  justify-content: center;
}
.report-detail {
  gap: 0 !important;
  padding: 8px 12px;
}
.rgroup {
  background: none !important;
  border: 0 !important;
  border-left: 0 !important;
  padding: 8px 0 !important;
  border-bottom: 2px dashed #b8c0c8 !important;
}
.rgroup:last-child {
  border-bottom: 0 !important;
}
.rgroup h3 {
  display: inline-block;
  margin: 0 0 6px !important;
  padding: 2px 8px;
  font-size: 12px !important;
  color: #fff !important;
  background: #78b080;
  box-shadow: 2px 2px 0 #30385040;
}
.rgroup.lost h3 {
  background: #c05048;
}
.rgroup.kept h3 {
  background: #5878b8;
}
.rgroup.grow h3 {
  background: #c09038;
}
.rchip {
  border-width: 2px;
  box-shadow: inset -2px -2px 0 #d0d0c8, 2px 2px 0 #30385030;
}
.rmon {
  width: 84px;
  height: 96px;
  box-sizing: border-box;
  justify-content: flex-end;
  gap: 1px;
  padding: 3px 2px !important;
  box-shadow: inset -2px -2px 0 #d0d0c8, 2px 2px 0 #30385030;
}
.rmon-pic {
  height: 52px;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.rmon span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (max-height:470px) {
  .rmon {
    width: 70px;
    height: 78px;
  }
  .rmon-pic {
    height: 38px;
  }
  .report-main,
  .report-detail {
    padding: 8px 10px;
  }
}
.rmon-pic {
  height: 56px;
  align-items: center;
}
.rmon .rmon-sprite {
  zoom: .6;
}
@media (max-height:470px) {
  .rmon-pic {
    height: 40px;
  }
  .rmon .rmon-sprite {
    zoom: .45;
  }
}
.runbag-back .dialog {
  --modal-w: 760px;
  width: var(--modal-w) !important;
  max-width: var(--modal-w) !important;
}
@supports (width: min(1px, 2px)) {
  .runbag-back .dialog {
    --modal-w: min(760px,calc(100vw - 28px));
  }
}
.runbag {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.runbag-party {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.runbag-party > .muted {
  margin: 0;
  font-size: 12px;
}
.runbag-mon {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  background: #f8f8f0;
  border: 2px solid #606880;
  box-shadow: inset -2px -2px 0 #d0d0c8;
}
.runbag-mon.fainted {
  opacity: .6;
}
.runbag-mon.fainted .mon-sprite {
  filter: grayscale(1);
}
.runbag-order {
  flex: none;
  width: 38px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #687898;
  padding: 2px 0;
}
.runbag-mon:first-child .runbag-order,
.runbag-party > .runbag-mon:nth-of-type(1) .runbag-order {
  background: #c05048;
}
.runbag-mon .rmon-pic {
  flex: none;
  width: 56px;
  height: 48px;
}
.runbag-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.runbag-info .hp {
  max-width: 220px;
}
.runbag-info small {
  color: #687080;
  font-size: 11px;
}
.runbag-held {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #404858;
}
.runbag-held img {
  image-rendering: pixelated;
}
.runbag-btns {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.runbag-btns .mini-btn {
  min-width: 34px;
}
.runbag-loot {
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
  padding: 0 !important;
}
@media (max-height:470px) {
  .runbag-mon {
    padding: 3px 6px;
    gap: 6px;
  }
  .runbag-mon .rmon-pic {
    height: 36px;
    width: 44px;
  }
}
.runbag-btns .mini-btn {
  white-space: nowrap;
  min-width: 34px !important;
  width: auto !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}
@media (max-height:470px) {
  .shop-panel .shop-head .eyebrow {
    display: none;
  }
  .shop-panel .shop-head h2 {
    margin: 0;
  }
}
.shop-head .sell-button {
  padding: 5px 12px !important;
  min-height: 0 !important;
}
@media (orientation:landscape) {
  .shop-panel .pocket-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
}
@media (max-height:470px) and (orientation:landscape) {
  .town-mode .stage-list > .eyebrow,
  .wild-mode .stage-list > .eyebrow,
  .wild-mode .stage-list > .muted {
    display: none;
  }
  .town-mode .stage-list > h2,
  .wild-mode .stage-list > h2 {
    font-size: 18px;
    margin: 0 0 2px;
  }
  .town-mode .difficulty-card,
  .wild-mode .difficulty-card {
    margin: 4px 0;
    padding: 4px 8px !important;
  }
  .town-mode .difficulty-card strong,
  .wild-mode .difficulty-card strong {
    font-size: 13px;
  }
  .wild-mode .difficulty-card-inner > span:last-child small:not(.difficulty-reward) {
    display: none;
  }
  .town-mode .difficulty-art,
  .wild-mode .difficulty-art {
    width: 36px;
    height: 36px;
  }
  .wild-mode .briefing > .difficulty-notice,
  .wild-mode .briefing > .notice {
    font-size: 11px;
    line-height: 1.4;
    padding: 3px 8px;
    margin: 3px 0;
  }
}
.brief-short {
  display: none;
  margin: 4px 0;
  font-size: 12px;
  color: #505868;
}
.survival-info p {
  margin: 6px 0;
  line-height: 1.5;
  font-size: 13px;
}
@media (max-height:470px) and (orientation:landscape) {
  .wild-mode .briefing > .brief-short {
    display: block;
  }
  .wild-mode .briefing > .difficulty-notice,
  .wild-mode .briefing > .notice {
    display: none;
  }
}
@media (max-height:380px) and (orientation:landscape) {
  .town-mode .difficulty-art,
  .wild-mode .difficulty-art {
    display: none;
  }
  .town-mode .difficulty-card .difficulty-reward,
  .wild-mode .difficulty-card .difficulty-reward {
    font-size: 10px;
  }
  .town-mode .stage-list > h2,
  .wild-mode .stage-list > h2 {
    font-size: 16px;
  }
}
@media (max-height:400px) and (orientation:landscape) {
  .briefing .briefing-head h2 {
    font-size: 16px;
  }
  .briefing .briefing-head small {
    font-size: 11px;
  }
  .town-mode .briefing > .stage-requirement {
    display: none;
  }
  .briefing > .difficulty-notice {
    font-size: 11px;
    padding: 3px 8px;
  }
  .briefing .pack-chip img {
    width: 16px;
    height: 16px;
  }
  .briefing .pack-summary {
    font-size: 12px;
    gap: 3px 5px;
  }
  .briefing .pack-summary > button {
    padding: 2px 8px !important;
  }
  .briefing > .primary.large {
    padding: 4px 12px !important;
    margin-top: 4px;
  }
}
@media (max-height:400px) and (orientation:landscape) {
  .wild-mode .briefing > .brief-short {
    font-size: 11px;
    margin: 2px 0;
    line-height: 1.35;
  }
}
.runbag-mon {
  position: relative;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.runbag-mon .runbag-btns {
  touch-action: manipulation;
}
.runbag-grip {
  flex: none;
  width: 8px;
  align-self: stretch;
  margin: 2px 0;
  background:
    repeating-linear-gradient(
      0deg,
      #9098b0 0 2px,
      transparent 2px 4px);
}
.runbag-mon.dragging {
  z-index: 5;
  cursor: grabbing;
  border-color: #c05048;
  box-shadow: inset -2px -2px 0 #d0d0c8, 3px 4px 0 #30385050;
  background: #fff8e8;
}
.runbag-party.sorting .runbag-mon:not(.dragging) {
  transition: none;
}
.runbag-party > .runbag-mon.lead .runbag-order {
  background: #c05048;
}
.runbag-party.sorting > .runbag-mon:not(.lead) .runbag-order {
  background: #687898;
}
@media (max-height:470px) and (orientation:landscape) {
  .runbag-back .dialog > .eyebrow {
    display: none;
  }
  .runbag-back .dialog > h2 {
    font-size: 17px !important;
    margin: 0 0 4px !important;
  }
  .runbag-back .dialog-actions {
    margin-top: 6px;
  }
  .runbag {
    gap: 4px;
  }
  .runbag-party {
    gap: 3px;
  }
  .runbag-party > .muted {
    font-size: 11px;
  }
  .runbag-mon {
    padding: 2px 6px;
    gap: 6px;
    min-height: 0;
  }
  .runbag-mon .rmon-pic {
    width: 34px;
    height: 28px;
  }
  .runbag-mon .rmon-sprite {
    zoom: .5;
  }
  .runbag-order {
    width: 30px;
    font-size: 11px;
    padding: 1px 0;
  }
  .runbag-info {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .runbag-info strong {
    flex: none;
    min-width: 96px;
    font-size: 13px;
    white-space: nowrap;
  }
  .runbag-info .hp {
    flex: 1;
    min-width: 50px;
    max-width: 160px;
  }
  .runbag-info > small {
    flex: none;
    white-space: nowrap;
  }
  .runbag-held {
    flex: none;
    font-size: 11px;
    white-space: nowrap;
  }
  .runbag-held img {
    width: 16px;
    height: 16px;
  }
  .runbag-btns .mini-btn {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    min-height: 0 !important;
    font-size: 11px;
  }
}
.runbag-tabs {
  align-items: center;
}
.runbag-tabs .runbag-close {
  margin-left: auto;
}
.runbag-back .dialog-actions:empty {
  display: none;
}
@media (max-height:470px) and (orientation:landscape) {
  .runbag-mon {
    padding: 1px 6px;
  }
  .runbag-mon .rmon-pic {
    height: 26px;
  }
  .runbag-tabs .runbag-close {
    padding: 4px 14px !important;
    min-height: 0 !important;
  }
}
@media (max-height:470px) and (orientation:landscape) {
  .runbag-back .dialog {
    padding: 8px 14px !important;
  }
  .runbag-party {
    gap: 2px;
  }
}
.runbag-grid {
  flex: none;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 54px !important;
  gap: 6px;
}
.runbag-grid .party-slot {
  min-height: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.runbag-grid .party-slot .slot-mon {
  zoom: .6;
}
.runbag-grid .party-slot.fainted .slot-mon {
  filter: grayscale(1) opacity(.6);
}
.runbag-grid .party-slot.newbie::after {
  content: "新";
  position: absolute;
  right: 4px;
  top: 2px;
  font-size: 10px;
  font-weight: 700;
  color: #503020;
  background: #f0d070;
  padding: 0 3px;
}
.runbag-grid .party-slot.dragging {
  z-index: 5;
  cursor: grabbing;
  box-shadow: 0 0 0 2px #ffd23a, 4px 6px 0 #30385060 !important;
  opacity: .95;
}
.runbag-detail {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: #f8f8f0;
  border: 2px solid #606880;
  box-shadow: inset -2px -2px 0 #d0d0c8;
}
.runbag-detail .rd-pic {
  flex: none;
  width: 52px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.runbag-detail .rd-sprite {
  zoom: .75;
}
.runbag-detail .rd-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.runbag-detail .rd-info .hp {
  max-width: 240px;
}
.runbag-detail .rd-info small {
  color: #687080;
  font-size: 11px;
}
.runbag-noheld {
  margin: 0;
  font-size: 12px;
  padding: 4px 10px;
}
@media (max-height:470px) and (orientation:landscape) {
  .runbag-grid {
    grid-auto-rows: 44px !important;
    gap: 4px;
  }
  .runbag-grid .party-slot .slot-mon {
    zoom: .48;
  }
  .runbag-detail {
    padding: 3px 8px;
    gap: 8px;
  }
  .runbag-detail .rd-pic {
    height: 34px;
    width: 40px;
  }
  .runbag-detail .rd-sprite {
    zoom: .55;
  }
}
@media (orientation:portrait) {
  .runbag-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
.runbag-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 5px;
}
.runbag-grid .party-slot {
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 2px;
  min-height: 96px;
  padding: 14px 4px 5px !important;
  text-align: center;
}
.runbag-grid .party-slot .slot-ball {
  position: absolute;
  left: 4px;
  top: 4px;
}
.runbag-grid .party-slot .slot-mon {
  zoom: .75;
}
.runbag-grid .party-slot .slot-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.runbag-grid .party-slot .slot-info strong {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.runbag-grid .party-slot .slot-info .hp {
  width: 100%;
}
.runbag-grid .party-slot .slot-item {
  position: absolute;
  right: 3px;
  top: 18px;
}
.runbag-grid .party-slot.lead::before {
  content: "首发";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  font-size: 10px;
  line-height: 14px;
  font-weight: 700;
  color: #fff8e8;
  background: #c05048;
  text-align: center;
}
.runbag-grid .party-slot.lead .slot-ball {
  display: none;
}
.runbag-grid .party-slot.newbie::after {
  top: auto;
  bottom: 34px;
}
.runbag-grid .party-slot.empty {
  min-height: 96px;
}
@media (max-height:470px) and (orientation:landscape) {
  .runbag-grid .party-slot,
  .runbag-grid .party-slot.empty {
    min-height: 78px;
  }
  .runbag-grid .party-slot .slot-mon {
    zoom: .55;
  }
  .runbag-grid .party-slot .slot-info strong {
    font-size: 11px;
  }
}
@media (orientation:portrait) {
  .runbag-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 3px;
  }
  .runbag-grid .party-slot .slot-mon {
    zoom: .45;
  }
  .runbag-grid .party-slot .slot-info strong {
    font-size: 9px;
  }
  .runbag-grid .party-slot .slot-info small {
    font-size: 9px;
  }
}
.runbag-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 5px;
}
.runbag-grid .party-slot {
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 2px;
  min-height: 96px;
  padding: 16px 4px 5px !important;
  text-align: center;
}
.runbag-grid .party-slot .slot-ball {
  position: absolute;
  left: 4px;
  top: 4px;
}
.runbag-grid .party-slot .slot-mon {
  zoom: .75;
}
.runbag-grid .party-slot .slot-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.runbag-grid .party-slot .slot-info strong {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.runbag-grid .party-slot .slot-info .hp {
  width: 100%;
}
.runbag-grid .party-slot .slot-item {
  position: absolute;
  right: 3px;
  top: 18px;
}
.runbag-grid .party-slot.lead::before {
  content: "首发";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  font-size: 10px;
  line-height: 14px;
  font-weight: 700;
  color: #fff8e8;
  background: #c05048;
  text-align: center;
}
.runbag-grid .party-slot.lead .slot-ball {
  display: none;
}
.runbag-grid .party-slot.newbie::after {
  top: auto;
  bottom: 34px;
}
.runbag-grid .party-slot.empty {
  min-height: 96px;
}
@media (max-height:470px) and (orientation:landscape) {
  .runbag-grid .party-slot,
  .runbag-grid .party-slot.empty {
    min-height: 78px;
  }
  .runbag-grid .party-slot .slot-mon {
    zoom: .55;
  }
  .runbag-grid .party-slot .slot-info strong {
    font-size: 11px;
  }
}
@media (orientation:portrait) {
  .runbag-grid {
    gap: 3px;
  }
  .runbag-grid .party-slot .slot-mon {
    zoom: .45;
  }
  .runbag-grid .party-slot .slot-info strong {
    font-size: 9px;
  }
  .runbag-grid .party-slot .slot-info small {
    font-size: 9px;
  }
}
@media (max-height:380px) and (orientation:landscape) {
  .runbag-grid .party-slot,
  .runbag-grid .party-slot.empty {
    min-height: 66px;
    padding-top: 14px !important;
  }
  .runbag-grid .party-slot .slot-mon {
    zoom: .42;
  }
  .runbag-grid .party-slot .slot-info small {
    display: none;
  }
  .runbag-detail .rd-pic {
    display: none;
  }
}
.runbag-grid .party-slot.lead::before {
  content: none !important;
  display: none !important;
}
.runbag-grid .party-slot.lead .slot-ball {
  display: block;
}
.shop-list {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 6px;
}
.shop-item {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px !important;
}
.shop-item > img {
  width: 30px;
  height: 30px;
}
.shop-text small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-buy {
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  max-width: 150px;
  gap: 3px 4px !important;
}
.shop-buy .price {
  flex: 0 0 100%;
  text-align: right;
  line-height: 1.1;
}
.shop-buy button {
  padding: 3px 8px !important;
}
.expand-row {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
}
.expand-row .shop-buy {
  max-width: none;
  flex-direction: column !important;
  align-items: flex-end;
}
@media (max-height:470px) and (orientation:landscape) {
  .shop-panel {
    gap: 5px;
    padding: 8px 10px !important;
  }
  .shop-head h2 {
    font-size: 18px;
  }
  .shop-head .coins {
    font-size: 13px;
  }
  .pocket-tabs button {
    padding: 3px 9px !important;
    font-size: 11px;
  }
  .shop-list {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 4px;
  }
  .shop-item {
    padding: 3px 6px !important;
    gap: 6px;
  }
  .shop-item > img {
    width: 24px;
    height: 24px;
  }
  .shop-text strong {
    font-size: 12px;
  }
  .shop-text small,
  .shop-text .owned {
    font-size: 9px;
  }
  .shop-buy .price {
    font-size: 10px;
  }
  .shop-buy button {
    padding: 2px 6px !important;
    font-size: 10px;
  }
}
@media (max-height:380px) and (orientation:landscape) {
  .shop-text > small {
    display: none;
  }
}
@media (max-height:470px) and (orientation:landscape) {
  .shop-head {
    align-items: center;
  }
  .shop-head .eyebrow {
    display: none;
  }
  .shop-head h2 {
    margin: 0;
    white-space: nowrap;
  }
  .shop-head > small.muted {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
  }
  .shop-head > button {
    flex: none;
    white-space: nowrap;
    padding: 4px 12px !important;
    min-height: 0;
  }
  .shop-panel > .pocket-tabs {
    flex-wrap: wrap;
  }
}
@media (max-height:470px) and (orientation:landscape) {
  .shop-panel > .shop-list {
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  }
  .shop-text strong,
  .shop-text .owned {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .shop-buy {
    max-width: none;
    flex-wrap: nowrap !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 2px !important;
  }
  .shop-buy > button {
    min-width: 0;
  }
  .shop-item:not(.expand-row) .shop-buy {
    display: grid !important;
    grid-template-columns: auto auto;
    justify-items: end;
  }
  .shop-item:not(.expand-row) .shop-buy .price {
    grid-column: 1/-1;
  }
}
@media (max-height:470px) and (orientation:landscape) {
  .shop-head > .coins {
    display: none;
  }
  .shop-panel > .shop-list {
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  }
  .shop-item > img {
    width: 22px;
    height: 22px;
  }
}
@media (max-height:470px) and (orientation:landscape) {
  .shop-item:not(.expand-row) .shop-buy button {
    min-height: 0;
    height: 20px;
    line-height: 1;
    padding: 0 7px !important;
  }
  .shop-item:not(.expand-row) {
    padding: 3px 6px !important;
  }
}
.shop-panel.mart {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 190px !important;
  grid-template-columns: minmax(0, 1fr) clamp(190px, 33%, 380px) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: stretch !important;
  align-content: stretch !important;
  gap: 12px !important;
  padding: 8px 10px !important;
  overflow: hidden;
}
.mart-work {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  min-height: 0;
}
.mart-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.mart-head .pocket-tabs {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
.mart-modes {
  display: flex;
  flex: none;
  padding: 3px;
  background: #304060;
  border-radius: 4px;
  box-shadow: inset 0 2px 0 #18203a;
}
.mart-modes .mart-mode {
  min-height: 0;
  padding: 4px 14px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #c8d4ec !important;
  font-weight: 700;
  letter-spacing: 1px;
}
.mart-modes .mart-mode .ui-pixel-icon {
  opacity: .7;
}
.mart-modes .mart-mode.on {
  background: linear-gradient(#f8f0d8, #e8d8b0) !important;
  color: #503020 !important;
  box-shadow: 0 2px 0 #a07840 !important;
}
.mart-modes .mart-mode.on .ui-pixel-icon {
  opacity: 1;
}
.mart-sell-tools {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
.mart-sell-tools small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mart-work > .shop-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  align-content: start;
}
.mart-sell {
  flex: 1;
  min-height: 0;
  display: flex;
}
.pack-embed {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
}
.pack-embed .pack-window {
  width: 100%;
  max-height: none;
  height: 100%;
  border: 0;
  border-image: none;
  background: none;
  box-shadow: none;
  padding: 0 !important;
}
.pack-embed .pack-main {
  grid-template-columns: max-content minmax(140px, 1fr);
}
.pack-embed .pack-right {
  gap: 6px;
}
.pack-embed .shop-stash {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.pack-embed .shop-stash .stash-list {
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 4px 10px;
}
.mart-desk {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  border-radius: 6px;
  overflow: hidden;
  background:
    radial-gradient(
      120% 70% at 50% 100%,
      #fff6dc 0,
      #f6e6c0 45%,
      #e9cf9c 100%);
  box-shadow: inset 0 0 0 3px #c8a868, inset 0 -40px 0 #d8b880;
}
.mart-desk::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  height: 24px;
  background:
    repeating-linear-gradient(
      90deg,
      #e04848 0,
      #e04848 18px,
      #f8f0e0 18px,
      #f8f0e0 36px);
  box-shadow: 0 3px 0 #b03030;
  opacity: .95;
}
.mart-bubble {
  position: relative;
  z-index: 2;
  margin: 30px 10px 0;
  padding: 6px 10px;
  background: #fff;
  border: 3px solid #404858;
  border-radius: 6px;
  box-shadow: 2px 3px 0 #40485833;
  min-height: 3.2em;
  display: flex;
  align-items: center;
}
.mart-bubble p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #303848;
}
.mart-bubble::after {
  content: "";
  position: absolute;
  left: 44%;
  bottom: -11px;
  border: 8px solid transparent;
  border-top: 9px solid #404858;
  border-bottom: 0;
}
.mart-bubble.pop {
  animation: mart-pop .28s steps(3);
}
@keyframes mart-pop {
  0% {
    transform: scale(.92);
  }
  60% {
    transform: scale(1.04);
  }
  100% {
    transform: none;
  }
}
.mart-scene {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  container-type: size;
  padding: 0 4px 4px;
}
.mart-art {
  position: relative;
  width: 100%;
  width: 100%;
  width: min(100%, calc(100cqh*323/252));
  aspect-ratio: 323/252;
  --ar: 323/252;
}
.mart-clerk {
  position: absolute;
  left: 23%;
  bottom: 9%;
  width: 40%;
  image-rendering: auto;
  transform-origin: 50% 100%;
  animation: mart-idle 2.4s steps(2) infinite;
}
@keyframes mart-idle {
  50% {
    transform: translateY(-1.5%);
  }
}
.mart-counter {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.mart-counter > img {
  display: block;
  width: 100%;
  filter: drop-shadow(0 4px 0 #8a6a3a66);
}
.mart-tally {
  position: absolute;
  left: 4%;
  bottom: 8%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2px 7px;
  background: #304060;
  border: 2px solid #f8f0e0;
  box-shadow: 0 2px 0 #18203a;
  color: #fff;
  line-height: 1.15;
}
.mart-tally small {
  font-size: 9px;
  color: #c8d4ec;
}
.mart-tally b {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: #ffe080;
}
.mart-desk.selling .mart-counter::after {
  content: "把物品拖到这里卖掉";
  position: absolute;
  right: 4%;
  bottom: 10%;
  padding: 1px 6px;
  font-size: 9px;
  color: #fff;
  background: #e04848;
  border: 2px solid #fff;
  box-shadow: 0 2px 0 #902828;
}
.mart-counter.hover > img {
  filter: drop-shadow(0 0 6px #ffd84a) drop-shadow(0 0 2px #ffd84a) brightness(1.06);
}
.mart-counter.hover::after {
  background: #f0b020 !important;
}
.mart-gain {
  position: absolute;
  left: 50%;
  top: 40%;
  z-index: 3;
  transform: translateX(-50%);
  font-size: 16px;
  color: #ffe080;
  text-shadow: 2px 2px 0 #503010, -1px -1px 0 #503010;
  animation: mart-gain 1.3s ease-out forwards;
  pointer-events: none;
}
@keyframes mart-gain {
  0% {
    opacity: 0;
    transform: translate(-50%, 10px);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -40px);
  }
}
@media (max-height:470px) and (orientation:landscape) {
  .shop-panel.mart {
    padding: 5px 8px !important;
    gap: 8px !important;
  }
  .mart-modes .mart-mode {
    padding: 2px 10px !important;
    font-size: 12px;
  }
  .mart-bubble {
    margin: 26px 6px 0;
    padding: 3px 7px;
    min-height: 2.9em;
  }
  .mart-bubble p {
    font-size: 11px;
    line-height: 1.35;
  }
  .mart-desk::before {
    height: 18px;
  }
  .mart-work > .shop-list {
    grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  }
}
main.page:has(> .shop-panel.mart) {
  display: flex;
  flex-direction: column;
}
main.page > .shop-panel.mart {
  flex: 1 1 0;
  height: auto !important;
  min-height: 0;
}
.mart-tally {
  white-space: nowrap;
}
.mart-clerk {
  left: 27%;
}
.mart-head .pocket-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.mart-head .pocket-tabs::-webkit-scrollbar {
  display: none;
}
.mart-head .pocket-tabs button,
.mart-sell-tools .tidy-button,
.mart-modes .mart-mode {
  white-space: nowrap;
  flex: 0 0 auto;
}
@media (max-width:760px) and (orientation:landscape) {
  .shop-panel.mart {
    grid-template-columns: minmax(0, 1fr) 160px !important;
    grid-template-columns: minmax(0, 1fr) clamp(160px, 30%, 380px) !important;
  }
  .mart-sell-tools small {
    display: none;
  }
  .mart-head .pocket-tabs button {
    padding: 3px 7px !important;
  }
  .pack-embed .pack-main {
    grid-template-columns: max-content minmax(110px, 1fr);
  }
  .pack-embed .stash-item {
    zoom: .85;
  }
}
.mart-tally {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  left: 3%;
  bottom: 6%;
  border-radius: 3px;
}
.mart-tally small {
  font-size: 10px;
  color: #dfe8ff;
}
.mart-tally b {
  font-size: 14px;
  color: #ffe27a;
}
@media (max-height:470px) {
  .mart-tally {
    padding: 1px 5px;
    gap: 4px;
  }
  .mart-tally small {
    font-size: 9px;
  }
  .mart-tally b {
    font-size: 11px;
  }
  .mart-desk.selling .mart-counter::after {
    display: none;
  }
}
@media (max-width:860px) and (max-height:470px) and (orientation:landscape) {
  .shop-panel.mart {
    grid-template-columns: minmax(0, 1fr) 150px !important;
    grid-template-columns: minmax(0, 1fr) clamp(150px, 27%, 300px) !important;
  }
  .mart-work > .shop-list {
    grid-template-columns: repeat(auto-fill, minmax(134px, 1fr));
    gap: 4px;
  }
  .mart-work .shop-item:not(.expand-row) {
    gap: 4px;
    padding: 2px 4px !important;
  }
  .mart-work .shop-item > img {
    width: 20px;
    height: 20px;
  }
  .mart-work .shop-text strong {
    font-size: 11px;
  }
  .mart-work .shop-buy button {
    padding: 0 5px !important;
    font-size: 9px;
  }
}
@media (max-height:470px) and (orientation:landscape) {
  .mart-work .shop-item:not(.expand-row) {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto;
    row-gap: 1px;
  }
  .mart-work .shop-item:not(.expand-row) > img {
    grid-row: 1/3;
    align-self: center;
  }
  .mart-work .shop-item:not(.expand-row) .shop-text {
    grid-column: 2/4;
    grid-row: 1;
  }
  .mart-work .shop-item:not(.expand-row) .shop-text .owned {
    display: none;
  }
  .mart-work .shop-item:not(.expand-row) .shop-buy {
    display: contents !important;
  }
  .mart-work .shop-item:not(.expand-row) .shop-buy .price {
    grid-column: 4;
    grid-row: 1;
    align-self: center;
    font-size: 9px;
  }
  .mart-work .shop-item:not(.expand-row) .shop-buy button:first-of-type {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
  }
  .mart-work .shop-item:not(.expand-row) .shop-buy button:last-of-type {
    grid-column: 4;
    grid-row: 2;
  }
  .mart-work .shop-item:not(.expand-row) .shop-buy button:only-of-type {
    grid-column: 4;
  }
}
@media (orientation:portrait) {
  .shop-panel.mart {
    grid-template-columns: 1fr !important;
    grid-template-rows: 200px minmax(0, 1fr) !important;
  }
  .mart-desk {
    grid-row: 1;
  }
  .mart-work {
    grid-row: 2;
  }
  .mart-head .pocket-tabs {
    flex-wrap: wrap;
    overflow: visible;
  }
}
.mart-desk {
  --awn:24px;
  --bub:52px;
  background: none !important;
  box-shadow: none !important;
  justify-content: flex-end;
  container-type: size;
  overflow: visible;
}
.mart-desk::before {
  content: none;
}
.mart-booth {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--awn) + 8px) 8px 0;
  border-radius: 6px;
  overflow: hidden;
  background:
    radial-gradient(
      120% 70% at 50% 100%,
      #fff6dc 0,
      #f6e6c0 45%,
      #e9cf9c 100%);
  box-shadow: inset 0 0 0 3px #c8a868, inset 0 -26px 0 #d8b880;
}
.mart-booth::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  height: var(--awn);
  background:
    repeating-linear-gradient(
      90deg,
      #e04848 0,
      #e04848 18px,
      #f8f0e0 18px,
      #f8f0e0 36px);
  box-shadow: 0 3px 0 #b03030;
}
.mart-booth .mart-bubble {
  margin: 0;
  width: 100%;
  height: var(--bub);
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.mart-booth .mart-bubble::after {
  left: calc(47% - 8px);
}
.mart-scene {
  flex: none;
  width: 100%;
  container-type: normal;
  padding: 4px 0 0;
  display: flex;
  justify-content: center;
}
.mart-art {
  width: calc(100% - 16px) !important;
}
@supports (width: min(1px, 2px)) and (width: 1cqw) {
  .mart-art {
    width: min(100cqw - 16px, (100cqh - var(--awn) - var(--bub) - 20px)*323/252) !important;
  }
}
.mart-bubble.pop {
  transform-origin: 47% 100%;
}
@media (max-height:470px) and (orientation:landscape) {
  .mart-desk {
    --awn:18px;
    --bub:40px;
  }
  .mart-booth {
    padding-top: calc(var(--awn) + 5px);
    padding-left: 5px;
    padding-right: 5px;
  }
}
.mart-head {
  height: 36px;
  flex-wrap: nowrap;
}
.mart-sell-tools .tidy-button {
  min-height: 0;
  padding: 4px 12px !important;
  line-height: 1.2;
}
@media (max-height:470px) and (orientation:landscape) {
  .mart-head {
    height: 28px;
  }
  .mart-sell-tools .tidy-button {
    padding: 2px 9px !important;
    font-size: 12px;
  }
}
@media (orientation:portrait) {
  .mart-head {
    height: auto;
    flex-wrap: wrap;
  }
}
@media (min-height:600px) and (min-width:1100px) {
  .mart-head {
    height: 46px;
  }
  .mart-modes .mart-mode {
    padding: 6px 20px !important;
    font-size: 17px;
  }
  .mart-head .pocket-tabs button {
    font-size: 15px;
    padding: 6px 14px !important;
  }
  .mart-sell-tools .tidy-button {
    font-size: 15px;
    padding: 6px 16px !important;
  }
  .mart-work > .shop-list {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 10px;
  }
  .mart-work .shop-item {
    padding: 12px 14px !important;
    gap: 12px;
  }
  .mart-work .shop-item > img {
    width: 48px;
    height: 48px;
  }
  .mart-work .shop-text strong {
    font-size: 19px;
  }
  .mart-work .shop-text small {
    font-size: 13px;
  }
  .mart-work .shop-text .owned {
    font-size: 13px;
  }
  .mart-work .shop-buy .price {
    font-size: 15px;
  }
  .mart-work .shop-buy button {
    font-size: 15px;
    padding: 6px 14px !important;
  }
  .mart-desk {
    --awn:30px;
    --bub:64px;
  }
  .mart-bubble p {
    font-size: 16px;
  }
  .mart-tally small {
    font-size: 12px;
  }
  .mart-tally b {
    font-size: 17px;
  }
}
@media (min-height:600px) and (min-width:1100px) {
  .shop-panel.mart {
    grid-template-columns: minmax(0, 1fr) 190px !important;
    grid-template-columns: minmax(0, 1fr) clamp(190px, 34%, 520px) !important;
  }
}
.mart-head {
  height: auto !important;
  min-height: 36px;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  row-gap: 4px;
}
.mart-head .pocket-tabs {
  flex-wrap: wrap !important;
  overflow: visible !important;
  gap: 4px;
}
.mart-sell-tools {
  min-height: 36px;
  align-self: stretch;
}
@media (max-height:470px) and (orientation:landscape) {
  .mart-head {
    min-height: 28px;
  }
  .mart-sell-tools {
    min-height: 28px;
  }
}
@media (min-height:600px) and (min-width:1100px) {
  .mart-head {
    min-height: 46px;
  }
  .mart-sell-tools {
    min-height: 46px;
  }
}
.topbar .top-back {
  flex: none;
  min-height: 0;
  padding: 6px 14px !important;
  font-size: 14px;
  white-space: nowrap;
}
@media (max-height:470px) and (orientation:landscape) {
  .topbar .top-back {
    padding: 4px 10px !important;
    font-size: 12px;
  }
}
.shop-panel:not(.mart) > .shop-list {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 8px !important;
  align-content: start;
  overflow: auto;
}
.shop-panel:not(.mart) .shop-item {
  padding: 8px 12px !important;
  gap: 10px;
}
.shop-panel:not(.mart) .shop-item > img {
  width: 36px;
  height: 36px;
}
.shop-panel:not(.mart) .shop-text strong {
  font-size: 15px;
}
.shop-panel:not(.mart) .shop-text small {
  font-size: 12px;
}
@media (max-height:470px) and (orientation:landscape) {
  .shop-panel:not(.mart) .shop-item {
    padding: 6px 10px !important;
  }
  .shop-panel:not(.mart) .shop-item > img {
    width: 30px;
    height: 30px;
  }
  .shop-panel:not(.mart) .shop-text strong {
    font-size: 14px;
  }
  .shop-panel:not(.mart) .shop-text small {
    font-size: 11px;
    display: block !important;
  }
}
@media (max-height:470px) and (orientation:landscape) and (min-width:761px) {
  .mart-work > .shop-list {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 6px !important;
  }
  .mart-work .shop-item:not(.expand-row) {
    padding: 5px 8px !important;
    gap: 8px;
  }
  .mart-work .shop-item > img {
    width: 28px;
    height: 28px;
  }
  .mart-work .shop-text strong {
    font-size: 13px;
  }
  .mart-work .shop-text small {
    display: block !important;
    font-size: 10px;
  }
  .mart-work .shop-buy .price {
    font-size: 11px;
  }
  .mart-work .shop-item:not(.expand-row) .shop-buy button {
    height: 22px;
    font-size: 11px;
    padding: 0 9px !important;
  }
}
@media (orientation:landscape) {
  .adventure-layout {
    align-items: stretch !important;
  }
  .adventure-layout > .panel {
    height: auto !important;
    max-height: none !important;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .adventure-layout > .stage-list .difficulty-card {
    flex: 1 1 0;
    min-height: 0;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
  }
  .adventure-layout > .briefing > :last-child {
    margin-top: auto;
  }
}
@media (max-height:470px) and (orientation:landscape) and (min-width:761px) {
  .mart-work > .shop-list {
    grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)) !important;
  }
  .mart-work .shop-text small {
    display: none !important;
  }
}
.mart-work > .shop-list.expand-list {
  grid-template-columns: 1fr !important;
}
.mart-work .expand-row {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center;
}
.mart-work .expand-row .shop-text small {
  display: block !important;
  white-space: normal;
  font-size: 11px;
}
.mart-work .expand-row .shop-buy {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 4px !important;
}
.mart-work .expand-row .shop-buy button {
  white-space: nowrap;
  height: auto !important;
  padding: 4px 10px !important;
  font-size: 12px;
}
.layout-editor {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2147482000;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(
      circle at 50% 45%,
      #6aa060 0,
      #3e7044 60%,
      #28402c 100%);
}
.layout-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background:
    repeating-linear-gradient(
      0deg,
      #ffffff08 0 2px,
      transparent 2px 24px),
    repeating-linear-gradient(
      90deg,
      #ffffff08 0 2px,
      transparent 2px 24px);
}
.layout-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22%;
  aspect-ratio: 1;
  --ar: 1;
  border: 3px solid #ffffff55;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.layout-box {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #304060cc;
  border: 3px dashed #f8f8f0;
  border-radius: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 3px 0 #18203a;
}
.layout-box.round {
  border-radius: 50%;
}
.layout-box.moved {
  background: #405890d9;
}
.layout-box.on {
  border-style: solid;
  border-color: #ffd84a;
  box-shadow: 0 0 0 3px #ffd84a66, 0 3px 0 #18203a;
  z-index: 2;
}
.layout-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px calc(6px + var(--safe-bottom,0px));
  background: #f0f0e0;
  border-top: 4px solid #303850;
}
.layout-hint {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: #505868;
}
.layout-size {
  display: flex;
  align-items: center;
  gap: 6px;
}
.layout-size[hidden] {
  display: none;
}
.layout-size b {
  font-size: 12px;
}
.layout-size input {
  width: 140px;
}
.layout-size-out {
  font-size: 12px;
  min-width: 3em;
}
.layout-acts {
  display: flex;
  gap: 6px;
}
.layout-acts button {
  min-height: 0;
  padding: 5px 14px !important;
  font-size: 13px;
}
.pc-screen.move-editor {
  gap: 5px;
}
.me-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.me-head h2 {
  margin: 0;
  font-size: 16px;
}
.me-head small {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: var(--muted);
}
.me-head .me-done {
  min-height: 0;
  padding: 3px 12px !important;
  font-size: 12px;
}
.move-editor h3 {
  margin: 2px 0 0 !important;
  font-size: 11px;
}
.me-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}
.me-move {
  min-height: 0;
  padding: 3px 6px !important;
  text-align: left;
  font-size: 12px;
}
.me-move.on {
  box-shadow: 0 0 0 2px #e0a020 !important;
  background: #fff4d0 !important;
}
.me-move.equipped:not(.on) {
  background: #e8f0e0 !important;
}
.me-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.me-row img {
  width: 18px;
  height: 18px;
  flex: none;
}
.me-row b {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}
.me-row small {
  font-size: 10px;
  color: var(--muted);
}
.me-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #9098b0;
  border: 2px dashed #b8c0d0;
  min-height: 26px;
}
.me-detail {
  padding: 5px 7px;
  background: #fff;
  border: 2px solid #687890;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.me-detail-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.me-detail-head img {
  width: 20px;
  height: 20px;
}
.me-detail-head strong {
  font-size: 14px;
}
.me-stats {
  margin: 0;
  font-size: 11px;
  color: #505868;
}
.me-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}
.me-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.me-acts button {
  min-height: 0;
  padding: 3px 10px !important;
  font-size: 12px;
}
.me-replace-tip {
  font-size: 11px;
}
.me-pool {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  overflow: auto;
  min-height: 60px;
}
.move-demo-box {
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.move-demo-wall {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 4px solid #303850;
  background:
    linear-gradient(
      #a8d8f0 0,
      #a8d8f0 55%,
      #88c070 55%,
      #88c070 100%);
  box-shadow: 0 4px 0 #30385080;
  image-rendering: pixelated;
}
.move-demo {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: block;
}
.move-demo-cap {
  margin: 0;
  padding: 3px 8px;
  background: #303850;
  color: #f8f8f0;
  font-size: 12px;
  text-align: center;
}
@media (max-height:470px) and (orientation:landscape) {
  .mart-work .shop-item:not(.expand-row) {
    padding: 2px 6px !important;
    row-gap: 0 !important;
  }
  .mart-work .shop-item:not(.expand-row) > img {
    width: 22px;
    height: 22px;
  }
  .mart-work .shop-item:not(.expand-row) .shop-text strong {
    font-size: 12px;
    line-height: 1.15;
  }
  .mart-work .shop-item:not(.expand-row) .shop-text .owned,
  .mart-work .shop-item:not(.expand-row) .shop-text small {
    display: none !important;
  }
  .mart-work .shop-item:not(.expand-row) .shop-buy button {
    height: 19px !important;
    min-height: 0 !important;
    font-size: 10px !important;
    padding: 0 8px !important;
    line-height: 1;
  }
  .mart-work .shop-item:not(.expand-row) .shop-buy .price {
    font-size: 10px;
    line-height: 1.1;
  }
  .mart-work > .shop-list {
    gap: 4px !important;
  }
}
@media (max-height:470px) and (orientation:landscape) {
  .mart-work .shop-item:not(.expand-row) {
    padding: 1px 6px !important;
  }
  .mart-work .shop-item:not(.expand-row) .shop-buy button {
    height: 17px !important;
  }
  .mart-work > .shop-list {
    gap: 3px !important;
  }
}
@media (max-height:470px) and (orientation:landscape) {
  .mart-work .shop-item:not(.expand-row) .shop-buy button {
    border-width: 3px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
    height: 18px !important;
    box-sizing: border-box;
  }
}
.me-slots {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 5px !important;
}
.me-slot {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 40px;
  padding: 2px 2px 2px 18px;
  background: #e0e6ee;
  border: 2px dashed #9098b0;
  border-radius: 4px;
}
.me-slot.hover {
  background: #fff0b8;
  border-color: #d09020;
  border-style: solid;
}
.me-key {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  color: #687080;
}
.me-slot > .me-move {
  flex: 1;
}
.me-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #9098b0;
}
.me-move {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 4px 8px;
  background: #f8f8f0;
  border: 2px solid #9098b0;
  border-radius: 4px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  text-align: left;
}
.me-move img {
  width: 24px;
  height: 24px;
  flex: none;
}
.me-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
.me-text b {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.me-text small {
  font-size: 10px;
  color: #687080;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.me-move.on {
  border-color: #e0a020;
  background: #fff4d0;
  box-shadow: 0 0 0 2px #f0c04066;
}
.me-move.equipped:not(.on) {
  background: #e8f0e0;
}
.me-pool {
  display: flex !important;
  flex-direction: column;
  gap: 4px !important;
  overflow: auto;
  min-height: 80px;
}
.me-pool .me-move {
  padding: 5px 8px;
}
.move-editor h3 small {
  font-weight: 400;
  color: var(--muted);
  font-size: 10px;
}
.me-ghost {
  position: fixed;
  z-index: 2147483000;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-3deg);
  box-shadow: 0 6px 12px #00000055;
  opacity: .95;
}
body.me-dragging,
body.me-dragging * {
  cursor: grabbing !important;
}
.move-demo-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #3a5a3a;
}
.move-demo-stage .battle-screen {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}
.move-demo-stage .battle-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.move-demo-stage .hud,
.move-demo-stage .battle-loading {
  display: none !important;
}
.me-pool {
  flex: none !important;
  overflow: visible !important;
}
.me-pool > .me-move,
.me-slots,
.me-detail {
  flex: none;
}
.move-editor {
  overflow: auto;
}
.move-editor .me-slots {
  position: sticky;
  top: -10px;
  z-index: 3;
  padding: 6px 0;
  background: #f0f0e0;
  box-shadow: 0 4px 4px -3px #30385040;
}
.me-slot .me-text small {
  display: none;
}
.me-slot .me-text b {
  white-space: normal;
  overflow: visible;
  font-size: 12px;
  line-height: 1.15;
}
.me-slot .me-move {
  padding: 3px 5px;
  gap: 5px;
}
.me-slot .me-move img {
  width: 20px;
  height: 20px;
}
.brief-pool {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.brief-pool-head {
  font-size: 11px;
  color: #505868;
}
.brief-pool-head b {
  color: #c08010;
}
.brief-pool-list {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 2px;
}
.brief-pool-list .dex-icon {
  flex: none;
  width: 30px;
  height: 30px;
  overflow: hidden;
  background: #ffffff60;
  border-radius: 3px;
  align-items: center;
}
.brief-pool-list .dex-icon .dex-mon {
  zoom: .36;
}
@media (min-height:560px) {
  .brief-pool-list .dex-icon {
    width: 40px;
    height: 40px;
  }
  .brief-pool-list .dex-icon .dex-mon {
    zoom: .48;
  }
}
.redeem-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.redeem-input {
  width: 150px;
  padding: 5px 8px;
  font: inherit;
  border: 2px solid #687890;
  background: #fff;
}
.redeem-row button {
  min-height: 0;
  padding: 4px 12px !important;
}
.me-move {
  touch-action: pan-y !important;
}
.me-move.me-held {
  opacity: .4;
}
.pc-screen.move-editor {
  overflow-y: auto !important;
  scrollbar-width: auto;
  scrollbar-color: #8890a8 #e0e4ec;
  padding-right: 4px;
}
.pc-screen.move-editor::-webkit-scrollbar {
  width: 12px;
}
.pc-screen.move-editor::-webkit-scrollbar-track {
  background: #e0e4ec;
  border-radius: 6px;
}
.pc-screen.move-editor::-webkit-scrollbar-thumb {
  background: #8890a8;
  border-radius: 6px;
  border: 2px solid #e0e4ec;
}
.pc-sub.friendship.loyal {
  color: #f0a0b0;
}
.returned-note {
  flex-basis: 100%;
  margin: 2px 0 0;
  font-size: 12px;
}
.dex-icon {
  position: relative;
}
.dex-icon .dex-ball {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  image-rendering: pixelated;
  pointer-events: none;
  filter: drop-shadow(0 0 1px #fff);
}
.lan-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}
.lan-mine,
.lan-join {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  min-width: 0;
}
.lan-mine {
  align-items: center;
  text-align: center;
}
.lan-mine h2,
.lan-join h2 {
  margin: 0;
  font-size: 17px;
}
.lan-code {
  font-size: 30px;
  letter-spacing: 4px;
  font-weight: 700;
  color: #283850;
  line-height: 1.1;
}
.lan-qr {
  width: 132px;
  height: 132px;
  image-rendering: pixelated;
  background: #fff;
  border: 2px solid #586880;
}
.lan-qr.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 13px;
}
.lan-status {
  margin: 0;
  font-size: 12px;
  color: #506078;
  min-height: 1.3em;
}
.lan-row {
  display: flex;
  gap: 8px;
}
.lan-row input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 18px;
  letter-spacing: 2px;
  padding: 6px 10px;
  border: 2px solid #586880;
  background: #fff;
}
.lan-scan-btn {
  align-self: flex-start;
}
.lan-rules {
  margin: 2px 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.5;
  color: #405068;
}
.lan-manual {
  align-self: flex-end;
  margin-top: auto;
  flex: none;
  width: auto;
  min-width: 0;
  white-space: nowrap;
  padding: 3px 10px;
}
@media (max-height:470px) {
  .lan-qr {
    width: 112px;
    height: 112px;
  }
  .lan-code {
    font-size: 26px;
  }
  .lan-mine,
  .lan-join {
    padding: 8px 12px;
    gap: 4px;
  }
}
.lan-scanner {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 80;
  background: #101828e8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #f8f0d0;
}
.lan-scan-frame {
  position: relative;
  width: 70vh;
  width: min(70vh, 80vw);
  aspect-ratio: 1;
  --ar: 1;
  overflow: hidden;
  border: 3px solid #f0d898;
  background: #000;
}
.lan-scan-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lan-scan-target {
  position: absolute;
  top: 18%;
  right: 18%;
  bottom: 18%;
  left: 18%;
  border: 2px dashed #f0d898aa;
}
.lan-bag {
  position: absolute;
  top: 64px;
  right: 12px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
}
.lan-bag img {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
}
.lan-bag b {
  font-size: 13px;
}
.lan-bag:disabled {
  opacity: .5;
}
.lan-bag.cooling {
  filter: grayscale(.7);
}
.dialog-back.use-back .dialog {
  max-width: 780px;
  padding: 10px 14px;
}
.dialog-back.use-back .dialog h2 {
  margin: 0 0 4px;
  font-size: 18px;
}
.use-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px !important;
  font-size: 13px !important;
}
.use-cols {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 10px;
  align-items: start;
}
.use-cols.run {
  grid-template-columns: 1fr;
}
.use-party {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  align-content: start;
}
.use-cols.run .use-party {
  grid-template-columns: repeat(3, 1fr);
}
.use-party h4 {
  grid-column: 1/-1;
  margin: 0;
  font-size: 13px;
}
.use-mon-btn {
  display: flex;
  align-items: center;
  height: 42px;
  padding: 2px 6px !important;
  min-height: 0 !important;
  text-align: left;
  overflow: hidden;
}
.use-mon {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.use-mon .mon-sprite {
  flex: none;
}
.use-mon-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}
.use-mon-text b {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.use-mon-text small {
  font-size: 10px;
  opacity: .8;
}
.use-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.use-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}
.use-box-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  padding: 4px;
  background:
    repeating-linear-gradient(
      0deg,
      #a8c8d0 0,
      #a8c8d0 8px,
      #b0d0d8 8px,
      #b0d0d8 16px);
  width: min(100%, calc((100vh - 200px)*1.2));
  align-self: center;
}
.dialog-back.use-back .dialog > .eyebrow {
  display: none;
}
.dialog-back.use-back .dialog-actions {
  margin-top: 6px;
}
.use-box-cell {
  aspect-ratio: 1;
  --ar: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  min-height: 0 !important;
  background: #ffffff40 !important;
  border: 1px solid #ffffff70 !important;
  border-radius: 4px !important;
  overflow: hidden;
}
.use-box-cell.empty {
  background: #ffffff1a !important;
  border-style: dashed !important;
}
.use-box-cell:disabled,
.use-mon-btn:disabled {
  opacity: .55;
}
.me-grip {
  flex: none;
  width: 10px;
  height: 16px;
  margin: 0 -2px 0 -3px;
  touch-action: none;
  cursor: grab;
  background:
    radial-gradient(
      circle,
      #7888a0 1.4px,
      transparent 1.6px) 0 0/5px 5.4px;
  opacity: .85;
}
.me-move:active .me-grip,
.me-held .me-grip {
  opacity: 1;
  background-image:
    radial-gradient(
      circle,
      #c05048 1.4px,
      transparent 1.6px);
}
.me-slot .me-grip {
  height: 14px;
}
.redeem-row {
  flex-wrap: wrap;
}
.redeem-msg {
  flex-basis: 100%;
  min-height: 1em;
  font-size: 12px;
}
.redeem-msg.error {
  color: #c03838;
  font-weight: 700;
}
.held-divider {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 14px;
  margin: 1px 2px;
  font-size: 11px;
  color: #687080;
}
.held-divider::before,
.held-divider::after {
  content: "";
  flex: 1;
  border-top: 2px dashed #9098b0;
}
.shop-list.held-list {
  row-gap: 2px !important;
}
.shop-list.held-list .held-divider {
  height: 10px;
  margin: 0 2px;
  font-size: 10px;
}
@media (max-width:860px) and (max-height:470px) and (orientation:landscape) {
  .mart-work .shop-list.held-list .shop-item:not(.expand-row) {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
  }
  .mart-work .shop-list.held-list .shop-item:not(.expand-row) .shop-text {
    grid-column: 2/5;
  }
  .mart-work .shop-list.held-list .shop-item:not(.expand-row) .shop-buy .price {
    grid-column: 2/4;
    grid-row: 2;
    justify-self: end;
  }
}
.mart-work > .shop-list.held-list {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.mart-work .shop-list.held-list .shop-buy .price {
  white-space: nowrap !important;
  font-size: 9px !important;
}
.mart-work > .shop-list.held-list {
  row-gap: 1px !important;
}
.mart-work > .shop-list.held-list .held-divider {
  height: 8px !important;
  margin: 0 2px !important;
  font-size: 9px !important;
}
.runbag-grid .party-slot {
  justify-content: flex-start !important;
}
.runbag-grid .party-slot .slot-pic {
  width: 100%;
  height: 50px;
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.runbag-grid .party-slot .slot-pic .slot-mon {
  zoom: 1;
}
.runbag-grid .party-slot .slot-info {
  margin-top: auto;
}
.runbag-grid .party-slot.dragging {
  transition: none !important;
}
@media (max-height:470px) and (orientation:landscape) {
  .runbag-grid .party-slot .slot-pic {
    height: 44px;
  }
}
.party-slot .slot-pic {
  width: 36px;
  height: 36px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.party-slot .slot-pic .slot-mon {
  zoom: .6;
}
.party-thumb {
  overflow: hidden;
}
.mart-sell-tools .sell-pick-button {
  white-space: nowrap;
  flex: 0 0 auto;
  min-height: 0;
  padding: 4px 12px !important;
  line-height: 1.2;
}
@media (max-height:470px) and (orientation:landscape) {
  .mart-sell-tools .sell-pick-button {
    padding: 2px 9px !important;
    font-size: 12px;
  }
}
@media (min-height:600px) and (min-width:1100px) {
  .mart-sell-tools .sell-pick-button {
    font-size: 15px;
    padding: 6px 16px !important;
  }
}
.shop-head .stow-button {
  white-space: nowrap;
}
.dialog:has(.sell-picker) {
  width: 720px;
  width: min(720px, 94vw);
  max-width: none;
}
.sell-total {
  margin: 0 0 6px;
  font-size: 13px;
}
.sell-total b {
  color: #c05048;
}
.sell-pick-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px;
  max-height: 320px;
  max-height: min(46vh, 320px);
  overflow-y: auto;
  padding: 2px;
}
.sell-pick {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px !important;
  min-height: 0 !important;
  text-align: left;
  background: #e8e4d8 !important;
  opacity: .6;
}
.sell-pick.on {
  background: #f8f0c8 !important;
  opacity: 1;
  box-shadow: inset 0 0 0 2px #d8a038;
}
.sell-check {
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid #485060;
  background: #fff;
}
.sell-pick.on .sell-check {
  background:
    #d8a038 linear-gradient(
      45deg,
      transparent 40%,
      #fff 40% 55%,
      transparent 55%);
}
.sell-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
.sell-name strong {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sell-name small {
  font-size: 11px;
  color: #606878;
}
@media (max-height:470px) {
  .sell-pick-list {
    max-height: 42vh;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
  .dialog:has(.sell-picker) h2 {
    font-size: 16px;
    margin: 0 0 4px;
  }
}
.brief-loot .loot-icon {
  flex: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff60;
  border-radius: 3px;
}
.brief-loot .loot-icon.rare {
  background: #fff0b0;
  box-shadow: inset 0 0 0 2px #d8a038;
}
@media (min-height:560px) {
  .brief-loot .loot-icon {
    width: 36px;
    height: 36px;
  }
}
.wild-mode .briefing .brief-pool {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}
.wild-mode .briefing .brief-pool-head {
  flex: none;
  width: 72px;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.wild-mode .briefing .brief-pool-head span {
  color: #808898;
  font-size: 10px;
}
.wild-mode .briefing .brief-pool-head b {
  font-size: 10px;
}
.wild-mode .briefing .brief-pool-list {
  flex: 1;
}
@media (max-height:470px) and (orientation:landscape) {
  .wild-mode .briefing .briefing-head h2 {
    font-size: 17px;
  }
  .wild-mode .briefing .brief-pool {
    margin: 1px 0;
  }
  .wild-mode .briefing .brief-pool-list .dex-icon,
  .brief-loot .loot-icon {
    width: 26px;
    height: 26px;
  }
  .wild-mode .briefing .brief-pool-list .dex-icon .dex-mon {
    zoom: .32;
  }
  .wild-mode .briefing .brief-short {
    line-height: 1.3;
  }
}
.wild-mode .briefing .brief-pool-list {
  min-width: 0;
}
.wild-mode .briefing {
  min-width: 0;
}
.shop-item.picked {
  box-shadow: inset 0 0 0 3px #d8a038;
}
.shop-list .shop-item {
  cursor: pointer;
}
.mart-booth {
  overflow: visible !important;
}
.mart-booth .mart-bubble {
  z-index: 5;
}
.lab-bubble.lab-shop {
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-size: 13px;
  line-height: 1.3;
  color: #404040;
  min-height: 0;
  z-index: 4;
}
.lab-shop b {
  font-weight: 700;
}
.lab-shop small {
  font-size: 10px;
  color: #c05048;
  animation: tut-blink-text 1s steps(2) infinite;
}
.lab-shop.said small {
  display: none;
}
@keyframes tut-blink-text {
  50% {
    opacity: .35;
  }
}
@media (max-height:470px) {
  .lab-bubble.lab-shop {
    font-size: 11px;
  }
  .lab-shop small {
    font-size: 9px;
  }
}
.ticket-shop {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ticket-shop > p {
  margin: 0 0 2px;
  font-size: 12px;
}
.ticket-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: #f4f0e0;
  border: 2px solid #c8c0a0;
}
.ticket-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.ticket-text small {
  font-size: 11px;
  color: #687080;
}
.ticket-row button {
  white-space: nowrap;
  padding: 4px 12px !important;
  min-height: 0 !important;
}
.lab-stage .incubator-hint-wrap {
  z-index: 6;
}
.lab-bubble.lab-shop {
  z-index: 3;
}
@media (max-height:400px) {
  .lan-qr {
    width: 92px;
    height: 92px;
  }
  .lan-code {
    font-size: 22px;
  }
  .lan-mine,
  .lan-join {
    padding: 6px 10px;
    gap: 3px;
  }
  .lan-rules {
    font-size: 10.5px;
    line-height: 1.35;
    margin: 0;
  }
  .lan-join h2,
  .lan-mine h2 {
    font-size: 15px;
    margin: 0;
  }
  .lan-layout .eyebrow {
    display: none;
  }
  .lan-row input {
    padding: 4px 8px !important;
    font-size: 13px;
  }
  .lan-row button,
  .lan-scan-btn {
    padding: 4px 12px !important;
    min-height: 0 !important;
  }
}
.pc-cols {
  grid-template-columns: 1fr !important;
  gap: 8px;
}
.pc-stats .stat-row {
  display: grid;
  grid-template-columns: 3em 2.6em minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}
.pc-stats .stat-bar {
  display: block;
  width: auto !important;
  height: 7px;
}
.pc-moves {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}
@media (max-width:760px) {
  .pc-moves {
    grid-template-columns: 1fr;
  }
}
.use-box-cell.can-evolve {
  box-shadow: inset 0 0 0 3px #e8a030;
  background: #fff3c8 !important;
}
@media (orientation:landscape) {
  .mart-head .pocket-tabs {
    flex-wrap: nowrap !important;
    min-width: 0;
  }
}
@media (max-width:1000px) {
  .mart-head .pocket-tabs button {
    padding-left: 6px !important;
    padding-right: 6px !important;
    font-size: 11px !important;
    letter-spacing: 0;
  }
  .mart-head .pocket-tabs {
    gap: 3px !important;
  }
}
.party-column {
  cursor: pointer;
}
.layout-editor {
  background: none !important;
  pointer-events: none;
}
.layout-editor .layout-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: auto;
  touch-action: none;
}
.layout-mark {
  position: absolute;
  box-sizing: border-box;
  border: 2px dashed #ffffffcc;
  border-radius: 8px;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.layout-mark.round {
  border-radius: 50%;
}
.layout-editor .layout-size[hidden] {
  display: none !important;
}
.layout-mark span {
  transform: translateY(-100%);
  margin-top: -2px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 700;
  color: #18203a;
  background: #ffd84a;
  border-radius: 3px;
  white-space: nowrap;
}
.layout-mark.moved {
  border-color: #9fd0ff;
}
.layout-mark.on {
  border: 3px solid #ffd84a;
  box-shadow: 0 0 0 3px #ffd84a55;
}
.layout-editor .layout-bar {
  position: absolute;
  left: 50%;
  top: calc(6px + var(--safe-top,0px));
  transform: translateX(-50%);
  pointer-events: auto;
  border: 3px solid #303850;
  border-radius: 6px;
  padding: 4px 10px;
  max-width: calc(100vw - 24px);
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.layout-editor .layout-hint {
  font-size: 11px;
  color: #404858;
}
@media (max-height:470px) {
  .layout-editor .layout-bar {
    padding: 3px 8px;
    gap: 6px;
  }
  .layout-editor .layout-acts button {
    padding: 3px 10px !important;
    min-height: 0 !important;
  }
}
.layout-editor .layout-bar {
  flex-wrap: nowrap !important;
  width: auto;
  max-width: 560px;
  max-width: min(560px, calc(100vw - 24px));
}
.layout-editor .layout-hint {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}
.layout-editor .layout-size {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.layout-editor .layout-size input {
  width: 110px;
}
.layout-editor .layout-size:not([hidden]) ~ .layout-acts {
  flex: none;
}
.layout-editor .layout-size:not([hidden]) {
  display: flex;
}
.layout-editor .layout-bar:has(.layout-size:not([hidden])) .layout-hint {
  display: none;
}
.layout-editor .layout-acts {
  display: flex;
  gap: 6px;
  flex: none;
}
.menu-art.fit {
  background-size: auto 100% !important;
  background-position: 50% center !important;
}
.menu-art.fit {
  justify-content: flex-end !important;
  padding-right: 6%;
}
.mart-work > .shop-list.held-list {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
}
@media (max-height:470px) and (orientation:landscape) {
  .mart-work > .shop-list.held-list {
    grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)) !important;
  }
  .mart-work .shop-list.held-list .shop-item:not(.expand-row) {
    min-height: 0 !important;
    height: 33px !important;
    overflow: hidden;
  }
}
@media (max-height:470px) and (orientation:landscape) {
  .mart-work > .shop-list.held-list:not(.ball-list) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
.mart-work .shop-list.held-list .shop-buy button {
  white-space: nowrap;
}
@media (max-height:470px) and (orientation:landscape) {
  .mart-work .shop-list.ball-list .shop-item:not(.expand-row) .shop-text {
    grid-column: 2/4 !important;
    grid-row: 1;
  }
  .mart-work .shop-list.ball-list .shop-item:not(.expand-row) .shop-buy .price {
    grid-column: 4/5 !important;
    grid-row: 1 !important;
    justify-self: end;
    align-self: center;
  }
}
.boss-note {
  margin: 2px 0;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1.45;
  background: #fff4d0;
  border-left: 4px solid #c05048;
  color: #584838;
}
.boss-note b {
  color: #b03838;
}
@media (max-height:470px) {
  .boss-note {
    font-size: 11px;
    padding: 3px 6px;
  }
}
.mon-sprite.shiny {
  position: relative;
}
.mon-sprite .shiny-mark {
  position: absolute;
  right: -4px;
  top: -2px;
  width: 14px;
  height: 14px;
  image-rendering: pixelated;
  pointer-events: none;
  filter: drop-shadow(0 0 2px #fff6b0);
  animation: shiny-twinkle 1.4s ease-in-out infinite;
}
@keyframes shiny-twinkle {
  50% {
    transform: scale(1.18);
    filter: drop-shadow(0 0 4px #fff6b0);
  }
}
.update-text {
  white-space: pre-line;
  max-height: 28vh;
  overflow: auto;
  margin: 0 0 8px;
}
.about-actions {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
}
.update-link {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.update-url {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  opacity: .75;
  user-select: all;
}
.update-copy {
  flex: none;
  padding: 4px 6px;
  min-width: 0;
  line-height: 0;
}
.pcard .shiny-tag {
  color: #e8b400;
  margin-right: 4px;
}
.defiant-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 3px;
  background: #c0392b;
  color: #fff;
  font-style: normal;
  font-size: 10px;
  line-height: 15px;
  vertical-align: middle;
}
.defiant-tag.box {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  margin: 0;
  font-size: 9px;
  line-height: 13px;
  white-space: nowrap;
  pointer-events: none;
}
.pb-stick.pe-locked {
  opacity: .35;
  filter: grayscale(1);
  pointer-events: none;
}
@media (max-height:380px) and (orientation:landscape) {
  .mart-work > .shop-list.held-list .shop-item:not(.expand-row) {
    height: 32px !important;
    min-height: 0 !important;
  }
  .mart-work > .shop-list.held-list .held-divider {
    height: 6px !important;
  }
}
.intro-import {
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 30;
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 6px;
  background: #fffbe9;
  border: 2px solid #3a3a48;
  box-shadow: 0 2px 0 #3a3a48;
  color: #3a3a48;
}
.mart-work > .shop-list.held-list.charm-list {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.update-qq {
  margin: 6px 0 0;
}
.update-qq .update-qq-link {
  all: unset;
  cursor: pointer;
  color: #2f6fd6;
  text-decoration: underline;
  font-size: 13px;
}
.dream-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 3px;
  background: #7b4fd6;
  color: #fff;
  font-style: normal;
  font-size: 11px;
  line-height: 16px;
  vertical-align: middle;
}
.ability-pick {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ability-pick .ability-btn {
  text-align: left;
  padding: 6px 10px;
}
.ability-opt {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ability-opt em {
  font-style: normal;
  font-size: 11px;
  opacity: .7;
}
.ability-opt small {
  font-size: 11px;
  opacity: .8;
  font-weight: normal;
}
.gacha-odds .gacha-note {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.4;
  opacity: .8;
}
.gacha-odds h3 .gacha-note-btn {
  margin-left: 6px;
  min-width: 0;
  padding: 0 7px;
  font-size: 12px;
  line-height: 18px;
  border-radius: 50%;
}
@media (max-height:400px) {
  .gacha-odds .gacha-note {
    display: none;
  }
}
.nature-grid {
  display: grid;
  grid-template-columns: auto repeat(5, 1fr);
  gap: 3px;
  align-items: center;
}
.nature-grid .nature-h {
  font-size: 10px;
  opacity: .75;
  text-align: center;
  white-space: nowrap;
}
.nature-grid .nature-btn {
  padding: 3px 2px !important;
  min-height: 0 !important;
  font-size: 12px;
}
.nature-grid .nature-btn.neutral {
  opacity: .85;
}
.nature-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}
.nature-opt em {
  font-style: normal;
  font-size: 9px;
  opacity: .7;
}
.sell-picker .sell-kinds,
.sell-picker .sell-keep {
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.sell-picker .sell-kinds .chip,
.sell-picker .sell-keep .chip {
  padding: 2px 8px !important;
  font-size: 12px;
}
.party-thumb {
  position: relative;
}
.party-thumb .thumb-status {
  position: absolute;
  left: 1px;
  top: 1px;
  padding: 0 3px;
  border-radius: 3px;
  font-style: normal;
  font-size: 9px;
  line-height: 13px;
  color: #fff;
  background: #8a4bc0;
  pointer-events: none;
}
.party-thumb .st-brn {
  background: #d8582c;
}
.party-thumb .st-par {
  background: #c9a400;
}
.party-thumb .st-slp {
  background: #6a7a8c;
}
.party-thumb .st-frz {
  background: #3a9fd0;
}
.difficulty-badge.arduous {
  background: #7b2fd0 !important;
  color: #ffe680 !important;
}
.opponent.arduous {
  box-shadow: 0 0 0 2px #b07cf0;
}
.nature-now {
  margin: 0 0 6px;
  font-size: 13px;
}
.nature-now b {
  color: #ffd54a;
}
.nature-grid .nature-btn.current {
  opacity: 1 !important;
  outline: 2px solid #ffd54a;
  background: #5a4a12 !important;
}
.nature-grid .nature-btn.current .nature-opt em {
  opacity: 1;
  color: #ffd54a;
}
.box-foot .release-start {
  margin-left: 4px;
  padding: 1px 6px !important;
  min-height: 0 !important;
  font-size: 10px;
}
.release-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11px;
}
.release-bar button {
  padding: 2px 8px !important;
  min-height: 0 !important;
  font-size: 11px;
}
.box-cell.release-pick .release-check {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 3px;
  background: #0005;
  pointer-events: none;
}
.box-cell.release-pick.picked .release-check {
  background: #e0453a;
  box-shadow: inset 0 0 0 2px #e0453a;
}
.box-cell.release-pick.picked .release-check::after {
  content: "✓";
  position: absolute;
  top: -3px;
  right: 0;
  bottom: 0;
  left: 1px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
}
.box-cell.release-pick.picked .box-mon {
  opacity: .55;
}
.box-cell .friend-tag {
  position: absolute;
  left: 1px;
  top: 0;
  font-style: normal;
  font-size: 11px;
  color: #ff6b8a;
  text-shadow: 0 0 2px #fff;
  pointer-events: none;
}
.release-friends {
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #ff6b8a22;
}
.release-friends p {
  margin: 2px 0;
}
.friend-names {
  font-size: 12px;
  opacity: .85;
}
.release-also {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.pc-screen > .pc-actions,
.pc-screen .pc-actions {
  flex-shrink: 0;
  position: sticky;
  bottom: -1px;
  z-index: 2;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
  gap: 3px;
  margin-top: auto;
  padding: 5px 0 3px;
  background: linear-gradient(#f3efdf00, #f3efdf 6px);
}
.pc-screen .pc-actions button {
  min-width: 0 !important;
  padding: 4px 3px !important;
  font-size: 10px !important;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc-actions .release-one {
  color: #b8322a;
}
.slot-status {
  margin-left: 4px;
  padding: 0 3px;
  border-radius: 3px;
  font-style: normal;
  font-size: 9px;
  line-height: 13px;
  color: #fff;
  background: #8a4bc0;
}
.slot-status.st-brn {
  background: #d8582c;
}
.slot-status.st-par {
  background: #c9a400;
}
.slot-status.st-slp {
  background: #6a7a8c;
}
.slot-status.st-frz {
  background: #3a9fd0;
}
.dex-icon.locked {
  filter: grayscale(1) brightness(.85);
  opacity: .45;
}
.dex-icon.locked.unseen {
  opacity: .35;
}
.release-gift {
  margin: 4px 0 0;
  color: #b07818;
  font-weight: bold;
}
.box-cell .friend-tag.rare-tag {
  color: #f0b020;
}
.pc-screen .pc-actions .held-btn {
  grid-column: span 2;
}
.box-wall .box-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
}
.box-wall .box-cell {
  min-width: 0;
  min-height: 0;
}
.evolution-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: #050b22df;
  touch-action: none;
}
.evolution-card.panel {
  width: 620px;
  max-width: 100%;
  max-height: 96vh;
  overflow: auto;
  text-align: center;
  background:
    radial-gradient(
      ellipse at 50% 45%,
      #496bb5,
      #1a3170 70%);
  border: 3px solid #f4f8ff;
  border-radius: 14px;
  box-shadow:
    0 0 0 3px #0b1838,
    inset 0 0 0 2px #7fa4f1,
    0 15px 60px #0008;
  padding: 24px;
}
.evolution-card h2 {
  font-size: 24px;
  margin: 8px 0 0;
}
.evolution-card .eyebrow {
  color: #ffd23f;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.evolution-stage {
  position: relative;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 14px 0;
  overflow: hidden;
  border-radius: 10px;
  background:
    radial-gradient(
      ellipse at center,
      #c3deff22,
      transparent 67%);
}
.evolution-before,
.evolution-after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .15s;
  pointer-events: none;
}
.evolution-before .mon-sprite,
.evolution-after .mon-sprite {
  transform: scale(2);
  transform-origin: center;
  filter: drop-shadow(0 8px 0 #08143377);
}
.evolution-after {
  opacity: 0;
}
.evolution-ring {
  width: 160px;
  height: 160px;
  border: 3px solid #bce9ff66;
  border-radius: 50%;
  position: absolute;
  box-shadow: 0 0 25px #a2d9ff55, inset 0 0 25px #a2d9ff33;
  animation: evolution-orbit 1s ease-in-out infinite;
}
.evolution-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  background: #d5f1ff;
  box-shadow: 0 0 8px #9bdbff;
  animation: evolution-particle 1s var(--delay) infinite ease-in;
  pointer-events: none;
}
.evolution-overlay[data-phase=transforming] .evolution-before {
  animation: evolution-flicker .18s steps(2, end) infinite;
  filter: brightness(0) invert(1);
  transform: scale(1.12);
}
.evolution-overlay[data-phase=transforming] .evolution-ring {
  animation: evolution-burst .4s infinite ease-out;
  border-color: #fff;
  box-shadow: 0 0 45px #d2edff;
}
.evolution-overlay[data-phase=revealed] .evolution-before {
  opacity: 0;
}
.evolution-overlay[data-phase=revealed] .evolution-after {
  opacity: 1;
  animation: evolution-reveal .45s ease-out;
}
.evolution-overlay[data-phase=revealed] .evolution-ring {
  border-color: #ffe37a;
  box-shadow: 0 0 30px #ffd23f55;
}
.evolution-overlay[data-phase=revealed] .evolution-spark {
  background: #ffe37a;
  animation: evolution-celebrate 1.1s var(--delay) ease-out infinite;
}
.evolution-caption {
  color: #d8e8ff;
  min-height: 26px;
  margin: 10px 0 16px;
  font-size: 16px;
}
.evolution-skip {
  min-width: 140px;
  padding: 8px 22px;
  border: 2px solid #c3d6ff;
  background: #17366e;
  color: #fff;
  border-radius: 8px;
}
@keyframes evolution-orbit {
  0%, 100% {
    transform: scale(.85) rotate(0deg);
    opacity: .5;
  }
  50% {
    transform: scale(1.06) rotate(180deg);
    opacity: 1;
  }
}
@keyframes evolution-particle {
  from {
    transform: translate(var(--x), var(--y)) scale(1);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  to {
    transform: translate(0, 0) scale(.3);
    opacity: 0;
  }
}
@keyframes evolution-flicker {
  0% {
    opacity: 1;
  }
  50% {
    opacity: .1;
  }
}
@keyframes evolution-burst {
  from {
    transform: scale(.3);
    opacity: 1;
  }
  to {
    transform: scale(1.4);
    opacity: .2;
  }
}
@keyframes evolution-reveal {
  from {
    transform: scale(.5);
    filter: brightness(3);
  }
  to {
    transform: scale(1);
    filter: brightness(1);
  }
}
@keyframes evolution-celebrate {
  from {
    transform: translate(0, 0) scale(1.4);
    opacity: 1;
  }
  to {
    transform: translate(var(--x), var(--y)) scale(.4);
    opacity: 0;
  }
}
@media (max-height:500px) {
  .evolution-card.panel {
    width: 560px;
    padding: 16px 22px;
  }
  .evolution-card h2 {
    font-size: 20px;
  }
  .evolution-stage {
    height: 150px;
    margin: 8px 0;
  }
  .evolution-before .mon-sprite,
  .evolution-after .mon-sprite {
    transform: scale(1.6);
  }
  .evolution-ring {
    width: 120px;
    height: 120px;
  }
  .evolution-card .eyebrow {
    font-size: 10px;
    margin-bottom: 4px;
  }
  .evolution-caption {
    font-size: 13px;
    margin: 5px 0 10px;
    min-height: 20px;
  }
  .evolution-skip {
    padding: 6px 18px;
    font-size: 12px;
  }
}
@media (prefers-reduced-motion:reduce) {
  .evolution-overlay * {
    animation: none !important;
    transition: none !important;
  }
  .evolution-spark {
    display: none;
  }
}
:root {
  --ink:#404858;
  --muted:#687080;
  --gold:#b84840;
  --navy:#303850;
  --blue:#687898;
  --edge:#9098b0;
  --green:#78b080;
  --font:SurvivorPixel,"Microsoft YaHei",sans-serif;
  --frame:url(/_expedition/assets/ui/handheld-frame.svg);
}
html,
body {
  background: #7888a0;
  color: var(--ink);
}
body,
body *,
body *:before,
body *:after {
  text-shadow: none !important;
}
button,
h1,
h2,
h3,
strong,
b {
  font-weight: 700;
}
h1,
h2,
h3 {
  color: var(--ink);
}
small,
.muted {
  color: var(--muted);
}
.panel,
.resource-pill,
button,
.pc-box,
.pc-screen,
.scene-art,
.route-art,
.toast {
  border: 8px solid transparent;
  border-image: var(--frame) 8 stretch;
  border-radius: 0;
  background-clip: padding-box;
  box-shadow: 0 4px 0 #30385080;
  color: var(--ink);
}
.panel {
  background-color: #f8f8e8;
  background-image:
    repeating-linear-gradient(
      0deg,
      #f8f8e8 0,
      #f8f8e8 4px,
      #f0f0e0 4px,
      #f0f0e0 6px);
  padding: 20px;
}
button,
.back {
  background-color: #d8e0e8;
  background-image:
    linear-gradient(
      #f0f0f0 0,
      #f0f0f0 4px,
      #d8e0e8 4px,
      #d8e0e8 calc(100% - 4px),
      #a8b0c8 calc(100% - 4px));
  color: #404858;
}
button:hover:enabled {
  background-color: #e8e8d0;
  background-image:
    linear-gradient(
      #fff8d8 0,
      #fff8d8 4px,
      #e8e8d0 4px,
      #e8e8d0 calc(100% - 4px),
      #c0b890 calc(100% - 4px));
  filter: none;
}
button:active:enabled {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #30385080;
}
button.primary {
  background-color: #e89078;
  background-image:
    linear-gradient(
      #ffc0a0 0,
      #ffc0a0 4px,
      #e89078 4px,
      #e89078 calc(100% - 4px),
      #c06058 calc(100% - 4px));
  color: #503838;
  box-shadow: 0 4px 0 #30385080;
  border: 8px solid transparent;
  border-image: var(--frame) 8 stretch;
}
button.primary:hover:enabled {
  background-image:
    linear-gradient(
      #ffd0a8 0,
      #ffd0a8 4px,
      #f0a088 4px,
      #f0a088 calc(100% - 4px),
      #c87060 calc(100% - 4px));
}
button.danger {
  background: #d08888;
  color: #482838;
}
button:disabled {
  opacity: .5;
}
button:focus-visible {
  outline: 3px solid #d06050;
  outline-offset: 2px;
}
button.selected,
.stage-option.selected,
.mon-card.selected {
  background: #f0d898;
  color: #584838;
  font-weight: 700;
  box-shadow: inset 4px 0 #c85848;
}
.notice {
  background: #e0e0d0;
  color: #606878;
  border: 2px solid #b0b0b8;
  border-left: 4px solid #c86858;
  border-radius: 0;
}
.badge {
  background: #e0e0d0;
  border: 2px solid #9098b0;
  border-radius: 0;
  color: #986050;
}
.hp {
  background: #585870;
  border: 1px solid #303850;
  border-radius: 0;
}
.hp i {
  background: #70b890;
  border-radius: 0;
}
.topbar {
  background: #485870c9;
  border-bottom: 4px solid #303850;
}
.resource-pill {
  background: #f0f0e0;
  color: #404858;
  border-radius: 0;
  padding: 6px 14px;
  box-shadow: 0 3px 0 #30385080;
}
.online-dot {
  background: #70b890;
  border-radius: 0;
}
.page-name {
  color: #f8f8e8;
}
.primary .ui-pixel-icon,
.resource-pill .ui-pixel-icon {
  filter: none;
}
.logo-title {
  color: #f8e8a0;
  letter-spacing: 1px;
}
.logo-subtitle {
  color: #fff8e8;
  font-weight: 700;
}
.logo-tagline {
  color: #f0f0e0;
}
.home-left {
  --portrait-size:280px;
}
.hero-stage {
  width: var(--portrait-size);
  height: var(--portrait-size);
  flex: 0 0 var(--portrait-size);
  border: 8px solid transparent;
  border-image: var(--frame) 8 stretch;
  border-radius: 0;
  background:
    repeating-linear-gradient(
      0deg,
      #a0c8d8 0,
      #a0c8d8 4px,
      #98c0d0 4px,
      #98c0d0 8px);
  background-clip: padding-box;
  box-shadow: 0 4px 0 #30385080;
  isolation: isolate;
}
.hero-stage:before {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
  border: 2px solid #d8e8e8;
  background: linear-gradient(transparent 70%, #88b0b8 70%);
  pointer-events: none;
}
.hero-stage .trainer-portrait {
  filter: none;
  width: 68%;
  height: 94%;
}
.hero-shadow {
  background: #58788066;
}
.hero-name {
  color: #fff8e8;
}
.hero-badges span,
.hero-badges span + span {
  background: #e8e8d8;
  color: #505868;
  border: 2px solid #687890;
  border-radius: 0;
}
.party-column {
  background: #a8b8c8 !important;
  border: 8px solid transparent !important;
  border-image: var(--frame) 8 stretch !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 0 #30385080 !important;
}
.party-thumb {
  background: #c8d8e0;
  border-radius: 0;
}
.party-thumb.lead {
  background: #f0d898;
  box-shadow: inset 2px 0 #c86858;
}
.party-thumb.empty {
  background: #909cb8;
  box-shadow: inset 0 0 0 1px #7888a0;
}
.hub-nav {
  border-top-width: 8px;
}
.home-menu {
  gap: 10px !important;
}
button.menu-card,
button.menu-card.featured {
  background: #e0e8e8;
  background-image:
    linear-gradient(
      #f8f8f0 0,
      #f8f8f0 4px,
      #e0e8e8 4px,
      #e0e8e8 calc(100% - 4px),
      #b8c0d0 calc(100% - 4px));
  border: 8px solid transparent;
  border-image: var(--frame) 8 stretch;
  border-radius: 0;
  box-shadow: 0 3px 0 #30385060;
  color: #404858;
  padding: 9px 10px;
}
button.menu-card:hover:enabled,
button.menu-card:focus-visible {
  background: #f0e0b0;
  border: 8px solid transparent;
  border-image: var(--frame) 8 stretch;
  box-shadow: 0 3px 0 #30385060;
  outline: none;
}
button.menu-card:before {
  display: none;
}
.menu-label strong {
  color: #404858;
  font-weight: 700;
}
.menu-label small {
  color: #687080;
  font-weight: 400;
}
button.menu-card.featured {
  background: #f0d8b0;
  background-image:
    linear-gradient(
      #fff0d0 0,
      #fff0d0 4px,
      #f0d8b0 4px,
      #f0d8b0 calc(100% - 4px),
      #d0b090 calc(100% - 4px));
}
.featured .menu-label strong {
  color: #a84840;
}
.featured .menu-label small {
  color: #806858;
}
.hub-status {
  background: #f0f0e0;
}
.hub-status p {
  color: #687080;
}
.hub-status strong {
  color: #404858;
}
.hub-status p.camp-tip {
  border-color: #c0c0b0;
  color: #687080;
}
.footer {
  background: #303850ba;
  color: #e0e0e8;
}
.credits-button {
  color: #f0f0e8 !important;
  font-weight: 700;
  border: 0 !important;
  border-image: none !important;
  background: none !important;
  box-shadow: none !important;
}
.eyebrow,
.page-top .eyebrow {
  background: #687890;
  color: #fff8e8;
  border-radius: 0;
}
.starter,
.mon-card,
.stage-option,
.opponent,
.route-art {
  background: #e0e8e0;
  color: #404858;
  border-radius: 0;
}
.condition,
.briefing dd {
  color: #505868;
}
.stage-index,
.opponent p,
.report-rewards,
.task-seal,
.recruit .ticket-count {
  color: #b05048;
}
.joy-scene,
.gacha-display {
  background: #d8e0e044;
  border-radius: 0;
}
.joy-scene canvas {
  border: 4px solid #687890;
  border-radius: 0;
  box-shadow: 0 3px 0 #303850;
}
.shop-row,
.task {
  border-color: #c0c0b0;
}
.shop-row small,
.panel-title small {
  color: #687080;
}
.dialog-back,
.exp-battle-result {
  background: #303850c9;
}
.dialog {
  border-radius: 0;
}
.toast {
  background: #f8f8e8;
}
.lan-codes textarea {
  background: #e8e8d8;
  color: #404858;
  border: 4px solid #8890a8;
  border-radius: 0;
}
.lan-codes label {
  color: #687080;
}
.lan-bottom p {
  color: #587890;
}
.scene-art {
  background: #d8d8c8;
}
.scene-art canvas {
  border-radius: 0;
}
.party-slot {
  background: #7898b8 !important;
  border: 4px solid transparent !important;
  border-image: var(--frame) 8 stretch !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #fff8e8;
}
.party-slot.lead {
  background: #6888a8 !important;
}
.party-slot.selected {
  background: #b06860 !important;
  box-shadow: inset 3px 0 #f8d898 !important;
}
.party-slot.empty {
  background: #b0b8c8 !important;
  border-image: var(--frame) 8 stretch !important;
  color: #606880;
}
.slot-info small {
  color: #f0f0e8;
}
.pc-box {
  background:
    repeating-linear-gradient(
      0deg,
      #a8c8d0 0,
      #a8c8d0 8px,
      #b0d0d8 8px,
      #b0d0d8 16px);
  padding: 6px;
}
.box-head {
  background: #f0f0e0;
  border: 2px solid #687890;
  border-radius: 0;
}
.box-head strong {
  color: #505868;
}
.box-cell,
.box-cell.empty {
  border-radius: 0 !important;
  background: #e0f0e044 !important;
  border: 1px solid #88a8b8 !important;
  box-shadow: inset 1px 1px #e0f0e0 !important;
}
.box-cell.selected {
  background: #f8e0a0aa !important;
  border: 2px solid #c05850 !important;
}
.box-foot {
  color: #505868;
}
.pc-screen {
  background: #f0f0e0;
  color: #505868;
  box-shadow: 0 4px 0 #30385080;
}
.pc-screen h2,
.pc-screen .mv-name,
.stat-row b {
  color: #404858;
}
.pc-screen h3,
.stat-row small {
  color: #b05048;
}
.pc-sub,
.pc-move small,
.pc-ability {
  color: #687080;
}
.pc-portrait {
  background:
    repeating-linear-gradient(
      0deg,
      #b0d0d8 0,
      #b0d0d8 4px,
      #a8c8d0 4px,
      #a8c8d0 8px);
  border: 3px solid #8898b0;
  border-radius: 0;
}
.pc-move {
  background: #d8e0e0;
  border-radius: 0;
}
.stat-bar {
  background: #c0c8c8;
  border-radius: 0;
}
.stat-bar i {
  background: #7898b8;
}
.shop-item {
  background: #e0e8e0;
  border: 2px solid #b8c0c8;
  border-radius: 0;
}
.shop-text small {
  color: #687080;
}
.shop-text .owned,
.shop-buy .price,
.carry-group h4 {
  color: #a85048;
}
.pocket-tabs button.selected {
  background: #f0d898 !important;
  color: #584838 !important;
}
.carry-row small {
  color: #687080;
}
.run-bag .bag-row {
  background: #d8e0e0;
  border-radius: 0;
}
.pull-fx {
  background: #384860;
}
.pcard {
  border-radius: 0;
  background: #586880;
}
.pcard .new {
  color: #f0d898;
}
.battle-transition {
  background: #586880;
}
.battle-transition h2,
.encounter-mark {
  color: #f0d898;
}
.battle-transition p {
  color: #e0e8e8;
}
.field-location,
.field-objective,
.field-team,
.field-loot {
  background: #f8f8e8ed;
  border-radius: 0;
  color: #404858;
}
.field-location small,
.field-loot small {
  color: #687080;
}
.field-top .panel {
  border-radius: 0;
}
.field-actions > button {
  background: #c0d0e0 !important;
  border: 4px solid #687890 !important;
  box-shadow: inset 2px 2px #f8f8f0, 0 3px 0 #303850 !important;
  color: #404858;
}
.field-caption {
  color: #fff8e8;
}
.stick-knob {
  background: #b8c8d8;
  border-color: #f0f0e0;
  box-shadow: 0 3px 0 #303850;
}
body.in-battle .hud.mode-play .pb-team {
  background: #a8b8c8e8;
  border-color: #606880;
  border-radius: 0;
  box-shadow: inset 2px 2px #f8f8e8, 0 3px 0 #303850;
}
body.in-battle .hud.mode-play .pb-slot {
  background: #8898b0 !important;
  border-color: #606880 !important;
}
body.in-battle .hud.mode-play .pb-slot.active {
  border-color: #f8d898 !important;
  box-shadow: 0 0 0 2px #b05850 !important;
}
body.in-battle .hud.mode-play .pb-move,
body.in-battle .hud.mode-play .pb-dodge {
  background: #687898ed !important;
  box-shadow: inset 2px 2px #c0d0e0, 0 3px 0 #303850 !important;
  font-weight: 700;
}
.evolution-overlay {
  background: #303850ed;
}
.evolution-card.panel {
  background:
    repeating-linear-gradient(
      0deg,
      #e0e8e8 0,
      #e0e8e8 4px,
      #d8e0e0 4px,
      #d8e0e0 8px);
  border: 8px solid transparent;
  border-image: var(--frame) 8 stretch;
  border-radius: 0;
  box-shadow: 0 4px 0 #303850;
}
.evolution-card .eyebrow {
  color: #fff8e8;
}
.evolution-caption {
  color: #586878;
}
.evolution-skip {
  background: #c8d8e0;
  border-radius: 0;
  color: #404858;
}
.evolution-stage {
  background:
    radial-gradient(
      ellipse,
      #f8f8e888,
      transparent 67%);
}
[data-pc-kind][data-mon-id] {
  cursor: grab;
  touch-action: none;
}
[data-pc-kind][data-mon-id]:active {
  cursor: grabbing;
}
.pc-drag-source {
  opacity: .35;
}
.pc-drop-target {
  outline: 3px solid #d05048 !important;
  outline-offset: -3px;
  background: #f8e0a0 !important;
}
.pc-drag-ghost {
  position: fixed;
  z-index: 900;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f8e8db;
  border: 4px solid #586880;
  box-shadow: 4px 4px 0 #30385088;
  overflow: hidden;
}
.pc-drag-ghost .mon-sprite {
  zoom: .75;
}
@media (min-width:1600px) {
  .home-left {
    --portrait-size:320px;
  }
}
@media (max-height:700px) {
  .home-left {
    --portrait-size:210px;
  }
}
@media (max-height:470px) and (orientation:landscape) {
  .home-left {
    --portrait-size:142px;
    gap: 6px;
  }
  .logo-subtitle {
    margin-top: 4px;
  }
  .logo-tagline {
    display: none;
  }
  .hero-name {
    margin-top: 6px;
  }
  .resource-pill {
    padding: 3px 7px;
  }
  .panel,
  .resource-pill,
  button {
    border-width: 4px;
  }
  .home-menu {
    gap: 5px !important;
    padding: 8px !important;
  }
  .home-menu .menu-card,
  .home-menu .menu-card.featured {
    border-width: 4px !important;
    padding: 3px 6px !important;
  }
  .home-menu .menu-card.featured .menu-label strong {
    font-size: 20px;
  }
  .hub-status {
    padding: 6px 10px !important;
  }
  .hub-status p.camp-tip {
    display: none;
  }
}
@media (max-width:720px) and (orientation:landscape) {
  .home-left {
    --portrait-size:125px;
  }
}
@media (max-width:760px) and (orientation:landscape) {
  .pc-layout {
    grid-template-columns: minmax(100px, .65fr) minmax(150px, 1fr) minmax(230px, 1.35fr);
  }
  .pc-screen-head {
    gap: 6px;
  }
  .pc-portrait {
    width: 64px;
    height: 64px;
  }
  .pc-cols {
    grid-template-columns: 1fr;
  }
  .pc-actions {
    gap: 5px;
  }
  .pc-screen {
    padding: 6px;
  }
  .slot-info strong {
    font-size: 10px;
  }
}
@media (orientation:portrait) {
  .home-left {
    --portrait-size:216px;
  }
  .home-menu {
    grid-template-columns: 1fr !important;
  }
  .resource-pill {
    padding: 4px 8px;
    border-width: 4px;
  }
  .home-menu .menu-card {
    padding: 9px 10px;
  }
}
@media (min-height:471px) and (max-height:900px) and (orientation:landscape) {
  .home-menu {
    padding: 14px !important;
    gap: 8px !important;
  }
  .home-menu .menu-card,
  .home-menu .menu-card.featured {
    padding: 5px 10px;
  }
  .hub-status {
    padding: 14px;
  }
  .hub .home-right {
    gap: 14px;
  }
}
@media (max-height:380px) and (orientation:landscape) {
  .home-menu {
    gap: 3px !important;
  }
  .home-menu .menu-card,
  .home-menu .menu-card.featured {
    padding: 2px 5px !important;
  }
  .hub-status {
    padding: 4px 8px !important;
  }
  .hub .home-right {
    gap: 6px;
  }
  .home-menu .menu-card.featured .menu-label strong {
    font-size: 18px;
  }
}
.panel,
.resource-pill,
button,
.pc-box,
.pc-screen,
.scene-art,
.route-art,
.toast,
.hero-stage,
.party-column {
  background-clip: padding-box !important;
}
.notice-button {
  display: flex;
  align-items: center;
}
.hero-status {
  margin: 10px auto 0;
  max-width: 100%;
  max-width: min(100%, 440px);
  padding: 6px 12px;
  background: #f0f0e0;
  border: 6px solid transparent;
  border-image: var(--frame) 8 stretch;
  text-align: left;
  color: #687080;
  font-size: 13px;
  line-height: 1.45;
}
.hero-status p {
  margin: 0;
}
.hero-status strong {
  color: #404858;
}
.hero-status .camp-tip {
  margin-top: 3px;
  font-size: 12px;
}
.home-menu .menu-inner {
  min-width: 0;
}
.home-menu .menu-label {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.home-menu .menu-label strong,
.home-menu .menu-label small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (orientation:landscape) {
  .hub .home-right {
    justify-content: stretch;
  }
  .hub .home-menu {
    grid-template-rows: repeat(2, minmax(0, 1.2fr)) repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .home-menu .menu-card {
    container-type: size;
  }
  .home-menu .menu-card .menu-inner {
    gap: 6px;
    gap: clamp(6px, 6cqh, 14px);
  }
  .home-menu .menu-card .ui-pixel-icon {
    width: 18px !important;
    width: clamp(18px, 42cqh, 40px) !important;
    height: 18px !important;
    height: clamp(18px, 42cqh, 40px) !important;
  }
  .home-menu .menu-card .menu-label {
    padding-top: 0;
  }
  .home-menu .menu-card .menu-label strong {
    font-size: 12px !important;
    font-size: clamp(12px, 30cqh, 22px) !important;
    line-height: 1.2 !important;
  }
  .home-menu .menu-card.featured .menu-label strong {
    font-size: 14px !important;
    font-size: clamp(14px, 34cqh, 30px) !important;
  }
  .home-menu .menu-card .menu-label small {
    display: block !important;
    font-size: 9px !important;
    font-size: clamp(9px, 15cqh, 14px) !important;
    margin-top: 1px !important;
    margin-top: clamp(1px, 4cqh, 6px) !important;
    line-height: 1.2;
  }
  @container (max-height:44px) {
    .home-menu .menu-card .menu-label small {
      display: none !important;
    }
  }
  html[data-compact-screen] .hero-status .camp-tip {
    display: none;
  }
  html[data-compact-screen] .hero-status {
    margin-top: 4px;
    padding: 3px 8px;
    font-size: 11px;
  }
}
@media (max-height:470px) and (orientation:landscape) {
  .hero-status {
    border-width: 4px;
    font-size: 11px;
    padding: 3px 8px;
    margin-top: 4px;
  }
  .hero-status .camp-tip {
    display: none;
  }
}
@media (orientation:landscape) {
  .home-menu .menu-card .menu-label strong {
    font-size: 12px !important;
    font-size: clamp(12px, 30cqh, 26px) !important;
  }
  .home-menu .menu-card.featured .menu-label strong {
    font-size: 14px !important;
    font-size: clamp(14px, 32cqh, 36px) !important;
  }
  .home-menu .menu-card .menu-label small {
    font-size: 9px !important;
    font-size: clamp(9px, 14cqh, 18px) !important;
  }
}
@media (min-height:900px) and (orientation:landscape) {
  .hero-status {
    font-size: 16px;
    max-width: 480px;
  }
  .hero-status .camp-tip {
    font-size: 14px;
  }
}
@media (orientation:portrait) {
  .top-actions .settings-inner span {
    display: none;
  }
  .home-menu .menu-card.featured .menu-label strong {
    font-size: 22px;
  }
  .home-menu .menu-card .menu-label {
    max-width: calc(100% - 96px);
  }
  .featured .menu-art {
    max-width: 120px;
  }
  .menu-art {
    max-width: 96px;
  }
}
.hero-status p {
  font-size: inherit !important;
  line-height: inherit !important;
}
.hero-status .camp-tip {
  font-size: .9em !important;
}
@media (orientation:portrait) {
  .topbar {
    height: auto !important;
    flex-wrap: wrap;
    row-gap: 6px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .topbar .resource-pills {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .topbar .top-actions {
    margin-left: auto;
  }
}
.top-actions button span,
.top-actions .page-name {
  white-space: nowrap;
}
@media (max-width:1000px) {
  .top-actions .settings-inner span,
  .top-actions .save-inner span,
  .top-actions .page-name {
    display: none;
  }
}
body.in-battle .hud.mode-play .pb-team {
  border: 8px solid transparent !important;
  border-image: var(--frame) 8 stretch !important;
  border-radius: 0 !important;
  background: #e0e8e8 !important;
  background-clip: padding-box !important;
  padding: 2px 3px !important;
  gap: 4px !important;
  box-shadow: 0 3px 0 #30385080 !important;
}
body.in-battle .hud.mode-play .pb-slot {
  width: 50px !important;
  padding: 2px 2px 3px !important;
  border-radius: 0 !important;
  border: 3px solid #606880 !important;
  background: #f8f8f0 !important;
  box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #c0c8d0 !important;
  cursor: pointer;
  transition: transform .08s steps(2);
}
body.in-battle .hud.mode-play .pb-slot:hover:not(.active):not(.out) {
  background: #fff8e0 !important;
}
body.in-battle .hud.mode-play .pb-slot.active {
  background: #f0d898 !important;
  border-color: #b05850 !important;
  box-shadow: inset 0 -3px 0 #c85848, 0 0 0 2px #f8f0d0 !important;
  transform: translateY(-3px);
}
body.in-battle .hud.mode-play .pb-slot.out {
  filter: grayscale(1);
  opacity: .55;
  cursor: default;
}
body.in-battle .hud.mode-play .pb-slot .pic {
  width: 40px !important;
  height: 40px !important;
  border-radius: 0 !important;
  margin: 0 auto;
  background-size: contain !important;
  background-position: center !important;
  image-rendering: pixelated;
}
body.in-battle .hud.mode-play .pb-slot .mini {
  display: block;
  width: 100% !important;
  height: 5px !important;
  margin: 2px 0 0 !important;
  border-radius: 0 !important;
  background: #404858 !important;
  border: 1px solid #303850 !important;
  overflow: hidden;
}
body.in-battle .hud.mode-play .pb-slot .mini u {
  display: block;
  height: 100%;
  border-radius: 0 !important;
  background: #58c060 !important;
}
@media (max-height:470px) {
  body.in-battle .hud.mode-play .pb-slot {
    width: 42px !important;
  }
  body.in-battle .hud.mode-play .pb-slot .pic {
    width: 32px !important;
    height: 32px !important;
  }
}
.difficulty-notice {
  background: #d8e8e8;
  border-left: 4px solid #6888a8;
  padding: 8px 10px;
  font-weight: 700;
}
.stage-requirement {
  font-size: 12px;
  color: #b05048;
}
.stage-requirement.ready {
  color: #586878;
}
.stage-option .stage-row > span:last-child {
  font-size: 11px;
  white-space: nowrap;
}
.stage-option small {
  white-space: normal;
}
.field-objective {
  max-width: 45vw;
}
.wild-encounter-sprite {
  flex-shrink: 0;
  transform: scale(1.5);
  margin: 12px;
}
.wild-battle-intro {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 15px;
  background: #303850b8;
  pointer-events: none;
}
.wild-battle-intro h2 {
  color: #f8f8e8;
}
.wild-battle-intro .mon-sprite {
  transform: scale(1.8);
  margin: 30px;
  animation: wild-slide .45s steps(12) both;
}
.capture-animation {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 550;
  background: #303850d9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  touch-action: none;
}
.capture-card.panel {
  width: 600px;
  max-width: 100%;
  text-align: center;
  padding: 18px;
}
.capture-card h2 {
  margin: 0;
}
.capture-stage {
  position: relative;
  height: 240px;
  overflow: hidden;
  background:
    repeating-linear-gradient(
      0deg,
      #a8c8d8 0,
      #a8c8d8 4px,
      #b0d0d8 4px,
      #b0d0d8 8px);
  border: 3px solid #8898b0;
  margin: 12px 0;
}
.capture-platform {
  position: absolute;
  width: 50%;
  height: 28%;
  left: 40%;
  top: 52%;
  background: #b8d8b0;
  border: 4px solid #80a090;
  border-radius: 50%;
}
.capture-target {
  position: absolute;
  left: 65%;
  top: 38%;
  transform: translate(-50%, -50%);
  transform-origin: 50% 75%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.capture-target > .mon-sprite {
  flex-shrink: 0;
  transform: scale(1.5);
}
.capture-ball {
  position: absolute;
  left: 65%;
  top: 55%;
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: pixelated;
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 3;
}
.capture-flash {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff8e8;
  opacity: 0;
  pointer-events: none;
}
.capture-stars {
  position: absolute;
  left: 65%;
  top: 42%;
  transform: translateX(-50%);
  font-size: 32px;
  color: #b07830;
  opacity: 0;
}
.capture-caption {
  min-height: 25px;
  margin: 0;
  font-weight: 700;
}
[data-phase=throw] .capture-ball {
  opacity: 1;
  animation: capture-throw .65s steps(20) both;
}
[data-phase=absorb] .capture-ball {
  opacity: 1;
  transform: translate(-50%, -145%);
}
[data-phase=absorb] .capture-target {
  animation: capture-absorb .45s steps(12) both;
  filter: brightness(0) invert(1);
}
[data-phase=absorb] .capture-flash {
  animation: capture-flash .45s steps(6);
}
[data-phase=fall] .capture-target,
[data-phase=rest] .capture-target,
[data-phase=shake] .capture-target,
[data-phase=caught] .capture-target {
  visibility: hidden;
}
[data-phase=fall] .capture-ball {
  opacity: 1;
  animation: capture-fall .45s steps(12) both;
}
[data-phase=rest] .capture-ball,
[data-phase=shake] .capture-ball,
[data-phase=caught] .capture-ball {
  opacity: 1;
  transform: translate(-50%, 25%);
}
[data-phase=shake] .capture-ball {
  animation: capture-shake .5s steps(10) both;
}
[data-phase=caught] .capture-ball {
  filter: brightness(.75);
}
[data-phase=caught] .capture-stars {
  animation: capture-stars .9s steps(10) both;
}
[data-phase=escape] .capture-ball {
  opacity: 0;
}
[data-phase=escape] .capture-target {
  animation: wild-slide .3s steps(8);
}
[data-phase=escape] .capture-flash {
  animation: capture-flash .3s steps(6);
}
@keyframes wild-slide {
  from {
    opacity: 0;
    translate: 70px 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes capture-throw {
  0% {
    transform: translate(-290px, 65px) rotate(-360deg);
  }
  50% {
    transform: translate(-140px, -100px) rotate(-180deg);
  }
  100% {
    transform: translate(-50%, -145%) rotate(0);
  }
}
@keyframes capture-absorb {
  from {
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    transform: translate(-50%, 20%) scale(0);
  }
}
@keyframes capture-fall {
  0% {
    transform: translate(-50%, -145%);
  }
  55% {
    transform: translate(-50%, 25%);
  }
  75% {
    transform: translate(-50%, -20%);
  }
  100% {
    transform: translate(-50%, 25%);
  }
}
@keyframes capture-shake {
  0%, 100% {
    transform: translate(-50%, 25%) rotate(0);
  }
  25% {
    transform: translate(-65%, 25%) rotate(-22deg);
  }
  70% {
    transform: translate(-35%, 25%) rotate(22deg);
  }
}
@keyframes capture-flash {
  20% {
    opacity: .8;
  }
  100% {
    opacity: 0;
  }
}
@keyframes capture-stars {
  0% {
    opacity: 1;
    transform: translate(-50%, 15px) scale(.6);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -10px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -25px) scale(1.4);
  }
}
@media (max-height:470px) {
  .capture-stage {
    height: 165px;
    margin: 8px 0;
  }
  .capture-card.panel {
    padding: 12px;
    max-width: 520px;
  }
  .capture-card h2 {
    font-size: 20px;
  }
  .capture-caption {
    font-size: 12px;
    min-height: 18px;
  }
  .capture-target > .mon-sprite {
    transform: scale(1.1);
  }
  .capture-ball {
    width: 32px;
    height: 32px;
  }
  .difficulty-notice {
    padding: 5px 8px;
    font-size: 12px;
  }
  .briefing p {
    font-size: 11px;
    line-height: 1.5;
  }
}
@media (prefers-reduced-motion:reduce) {
  .capture-animation *,
  .wild-battle-intro * {
    animation-duration: .01s !important;
    transition: none !important;
  }
}
body.in-battle .wild-dock {
  position: absolute;
  z-index: 30;
  left: calc(12px + var(--safe-left,0px));
  top: calc(84px + var(--safe-top,0px));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
body.in-battle .wild-flee {
  padding: 6px 16px;
  border: 3px solid #f8f8f8;
  border-radius: 10px;
  background: #3a4a78;
  color: #fff;
  font:
    700 15px SurvivorPixel,
    "Microsoft YaHei",
    sans-serif;
  box-shadow: 0 3px 0 #1a2448, 0 0 0 2px #1a2448;
  cursor: pointer;
}
body.in-battle .wild-flee:active {
  transform: translateY(2px);
}
body.in-battle .wild-flee:disabled {
  opacity: .55;
}
.ball-select {
  position: absolute;
  z-index: 30;
  width: 84px;
  display: flex;
  flex-direction: column;
  background: #f8f8f0;
  border: 3px solid #485878;
  border-radius: 8px;
  box-shadow: 0 3px 0 #1a2448;
  overflow: hidden;
}
.ball-select[hidden] {
  display: none;
}
.ball-select button {
  border: 0;
  background: none;
  color: #283048;
  cursor: pointer;
  font-family:
    SurvivorPixel,
    "Microsoft YaHei",
    sans-serif;
  min-height: 0 !important;
  box-shadow: none !important;
  border-image: none !important;
}
.ball-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #dde3f0;
  border-bottom: 2px solid #485878;
}
.ball-head b {
  flex: 1;
  text-align: center;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
}
.ball-cycle {
  width: 20px;
  padding: 0 !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
}
.ball-cycle:disabled {
  opacity: .3;
}
.ball-throw {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 4px 2px !important;
  height: 60px;
}
.ball-throw img {
  width: 34px;
  height: 34px;
  image-rendering: pixelated;
  transition: transform .15s;
}
.ball-throw small {
  font-size: 10px;
  color: #c05040;
  white-space: nowrap;
}
.ball-throw:active:not(:disabled) img {
  transform: scale(.85) rotate(-25deg);
}
.ball-throw:disabled {
  opacity: .5;
}
.ball-select.empty .ball-cycle,
.ball-select.empty img {
  display: none;
}
@media (max-height:430px) {
  .ball-select {
    width: 74px;
  }
  .ball-throw {
    height: 50px;
  }
  .ball-throw img {
    width: 28px;
    height: 28px;
  }
}
.capture-banner {
  position: absolute;
  z-index: 36;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  padding: 10px 22px;
  background: #283048e8;
  border: 3px solid #f8f8f8;
  border-radius: 8px;
  color: #fff;
  font:
    700 18px SurvivorPixel,
    "Microsoft YaHei",
    sans-serif;
  white-space: nowrap;
  pointer-events: none;
  animation: capture-banner .25s steps(5) both;
}
.capture-banner.good {
  background: #2f7a50e8;
}
@keyframes capture-banner {
  from {
    opacity: 0;
    translate: 0 10px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@media (max-height:430px) {
  body.in-battle .wild-dock {
    top: calc(72px + var(--safe-top,0px));
    gap: 6px;
  }
  body.in-battle .wild-flee {
    padding: 4px 12px;
    font-size: 13px;
  }
}
.wild-dock[hidden] {
  display: none !important;
}
.field-objective.danger {
  background: #f8d8d8 !important;
  color: #a02828 !important;
  animation: danger-blink 1s steps(2) infinite;
}
@keyframes danger-blink {
  50% {
    opacity: .75;
  }
}
body.in-battle .escape-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  text-align: left;
  padding: 4px 12px 4px 6px;
}
body.in-battle .escape-btn .escape-icon {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
  flex: none;
}
body.in-battle .escape-btn .escape-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
body.in-battle .escape-btn small {
  font-size: 10px;
  font-weight: 400;
  color: #d8e0ff;
  white-space: nowrap;
}
body.in-battle .escape-btn.locked {
  background: #6a4850;
  box-shadow: 0 3px 0 #301820, 0 0 0 2px #301820;
}
body.in-battle .escape-btn.locked .escape-icon {
  filter: grayscale(1);
  opacity: .6;
}
body.in-battle .escape-btn.locked small {
  color: #ffc8c0;
}
@media (max-height:430px) {
  body.in-battle .escape-btn {
    padding: 3px 10px 3px 4px;
  }
  body.in-battle .escape-btn .escape-icon {
    width: 22px;
    height: 22px;
  }
}
body.in-battle .wild-dock.battle-bag {
  left: auto;
  right: calc(12px + var(--safe-right,0px));
  top: calc(100px + var(--safe-top,0px));
  flex-direction: row;
  align-items: center;
  gap: 6px;
}
body.in-battle .battle-bag .bag-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 3px 6px;
  background: #304060e6;
  border: 2px solid #f8f8f0;
  border-radius: 6px;
  box-shadow: 0 3px 0 #18203a;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
}
body.in-battle .battle-bag .bag-icon {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
}
body.in-battle .battle-bag .bag-items {
  display: flex;
  flex-direction: row-reverse;
  gap: 5px;
}
body.in-battle .battle-bag .bag-item {
  position: relative;
  overflow: hidden;
  width: 44px;
  height: 44px;
  min-height: 0;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f8f0;
  border: 3px solid #304060;
  border-radius: 8px;
  box-shadow: 0 3px 0 #18203a;
  cursor: pointer;
  touch-action: manipulation;
}
body.in-battle .battle-bag .bag-item.escape {
  background: #f0e0f8;
  border-color: #704890;
}
body.in-battle .battle-bag .bag-item img {
  width: 30px;
  height: 30px;
  image-rendering: pixelated;
}
body.in-battle .battle-bag .bag-count {
  position: absolute;
  right: 2px;
  bottom: 0;
  font-size: 11px;
  color: #202840;
  text-shadow:
    1px 0 0 #fff,
    -1px 0 0 #fff,
    0 1px 0 #fff,
    0 -1px 0 #fff;
  z-index: 1;
}
body.in-battle .battle-bag .bag-item:disabled {
  opacity: 1;
}
body.in-battle .battle-bag .bag-item .pe-cdt {
  font-size: 15px;
}
body.in-battle .battle-bag .bag-empty {
  font-size: 11px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  white-space: nowrap;
}
@media (max-height:470px) {
  body.in-battle .wild-dock.battle-bag {
    top: calc(84px + var(--safe-top,0px));
  }
  body.in-battle .battle-bag .bag-item {
    width: 38px;
    height: 38px;
  }
  body.in-battle .battle-bag .bag-item img {
    width: 26px;
    height: 26px;
  }
  body.in-battle .battle-bag .bag-icon {
    width: 22px;
    height: 22px;
  }
}
body.in-battle .potion-throw,
body.in-battle .potion-trail {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 35;
  pointer-events: none;
  image-rendering: pixelated;
  will-change: transform;
}
body.in-battle .potion-throw {
  filter: drop-shadow(0 2px 0 #00000066);
}
body.in-battle .potion-trail {
  filter: brightness(1.6) saturate(.4);
}
body.in-battle .potion-burst {
  position: absolute;
  z-index: 35;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  border: 3px solid #78e890;
  box-shadow: 0 0 10px #78e890;
  pointer-events: none;
  animation: potion-burst .55s ease-out forwards;
}
@keyframes potion-burst {
  to {
    transform: scale(6);
    opacity: 0;
  }
}
.legend-timer {
  position: absolute;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  padding: 4px 12px;
  background: #f8f0d0;
  border: 2px solid #c09030;
  color: #805010;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  pointer-events: none;
  animation: danger-blink 1s steps(2) infinite;
}
.auto-clear {
  background: #d8e8f8 !important;
  border-color: #6888a8 !important;
}
.auto-clear-note {
  display: block;
  margin-top: 4px;
  font-size: 11px;
}
.auto-run {
  position: absolute;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 31;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #f8f0d0;
  border: 2px solid #6888a8;
  font-size: 13px;
  font-weight: 700;
}
.auto-run-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3aa060;
  animation: danger-blink 1s steps(2) infinite;
}
.charm-timer {
  padding: 3px 8px !important;
  font-size: 11px;
  white-space: nowrap;
  color: #687080;
  pointer-events: none;
}
.charm-timer.on {
  color: #305078;
  font-weight: 700;
}
.charm-block {
  background: #f8e0d8 !important;
  border-left-color: #c05048 !important;
  color: #803028;
}
.briefing > .notice.charm-block {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  line-height: 1.4;
  padding: 4px 8px;
  margin: 4px 0;
}
.charm-block .charm-stow {
  flex: none;
  padding: 3px 10px !important;
  min-height: 0 !important;
  font-size: 12px;
}
.stealth-count {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -100%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3px 12px;
  background: #20283cc8;
  border: 2px solid #8898b8;
  color: #e8eef8;
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
}
.stealth-count b {
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: 1px;
}
.stealth-count small {
  font-size: 10px;
  opacity: .85;
}
.stealth-count.on {
  border-color: #a8c8f0;
}
.stealth-count.ending {
  border-color: #ff7060;
  background: #5a1c1cd8;
  animation: stealth-blink .5s steps(2) infinite;
}
@keyframes stealth-blink {
  50% {
    opacity: .45;
  }
}
@media (max-height:470px) {
  .stealth-count {
    padding: 2px 10px;
  }
  .stealth-count b {
    font-size: 15px;
  }
}
.stealth-count.below {
  transform: translate(-50%, 0);
}
:root {
  --safe-left:var(--native-safe-left,env(safe-area-inset-left,0px));
  --safe-top:var(--native-safe-top,env(safe-area-inset-top,0px));
  --safe-right:var(--native-safe-right,env(safe-area-inset-right,0px));
  --safe-bottom:var(--native-safe-bottom,env(safe-area-inset-bottom,0px));
  --game-height:calc(100vh - var(--safe-top) - var(--safe-bottom));
}
#game-ui,
#app {
  left: var(--safe-left) !important;
  top: var(--safe-top) !important;
  right: var(--safe-right) !important;
  bottom: var(--safe-bottom) !important;
  width: auto !important;
  height: auto !important;
}
#app .battle-screen {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}
.dialog-back,
.evolution-overlay,
.capture-animation,
.pull-fx,
.battle-transition {
  left: var(--safe-left) !important;
  top: var(--safe-top) !important;
  right: var(--safe-right) !important;
  bottom: var(--safe-bottom) !important;
  width: auto !important;
  height: auto !important;
}
.exp-battle-result {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
}
.exp-battle-result p {
  color: var(--muted);
}
body[data-screen=explore] #survivor-backdrop,
body.in-battle #survivor-backdrop {
  display: none;
}
body[data-screen=explore],
body.in-battle {
  background: #0b1428;
}
body.in-battle #game-ui {
  display: none !important;
}
#world {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.topbar,
.footer {
  flex-shrink: 0;
}
.dialog {
  max-height: calc(var(--game-height) - 48px);
}
.evolution-card.panel {
  max-height: calc(var(--game-height) - 44px);
}
.page {
  min-height: 0;
  overflow-anchor: none;
}
.shop-list,
.pc-screen,
.dex-panel,
.carry-list {
  overflow-anchor: none;
}
.pc-layout,
.shop-panel {
  height: calc(var(--game-height) - 150px);
}
.dex-panel {
  max-height: calc(var(--game-height) - 140px);
}
.box-wall {
  width: 100%;
}
@supports (width: min(1px, 2px)) {
  .box-wall {
    width: min(100%, calc((var(--game-height) - 190px) * 160 / 144));
  }
}
.area-sign {
  top: calc(var(--safe-top) + 70px);
  left: calc(var(--safe-left) + (100vw - var(--safe-left) - var(--safe-right))/2);
}
.toast {
  bottom: calc(var(--safe-bottom) + 25px);
  left: calc(var(--safe-left) + (100vw - var(--safe-left) - var(--safe-right))/2);
  max-width: calc(100vw - var(--safe-left) - var(--safe-right) - 32px);
}
body.in-battle .hud.mode-play .pb-team {
  bottom: 8px;
}
body.in-battle .hud.mode-play .pb-moves {
  right: 62px !important;
  bottom: 62px !important;
}
body.in-battle .hud.mode-play .pb-dodge {
  right: 14px !important;
  bottom: 14px !important;
}
body.in-battle .hud.mode-play .pb-stick {
  left: 22px !important;
}
body.in-battle .wild-dock {
  left: 12px;
  top: 84px;
}
@media (max-height:700px) and (orientation:landscape) {
  .pc-layout,
  .shop-panel {
    height: calc(var(--game-height) - 118px);
  }
}
@media (max-height:500px) {
  .box-wall {
    width: 100%;
  }
  @supports (width: min(1px, 2px)) {
    .box-wall {
      width: min(100%, calc((var(--game-height) - 140px) * 160 / 144));
    }
  }
}
@media (max-height:470px) {
  body.in-battle .hud.mode-play .pb-moves {
    right: 56px !important;
    bottom: 56px !important;
  }
}
@media (max-height:430px) {
  body.in-battle .wild-dock {
    top: 72px;
  }
}
@media (orientation:portrait) {
  .pc-layout {
    height: auto;
  }
}
@media (orientation:landscape) {
  #game-ui > .hub {
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
    min-height: 0;
  }
  .hub .home-right {
    height: 100%;
    max-height: none;
    min-height: 0;
    gap: 8px;
    justify-content: center;
  }
  .hub .home-left {
    height: 100%;
    min-height: 0;
    justify-content: center;
    --portrait-size: calc(var(--game-height) * .34);
  }
  @supports (width: min(1px, 2px)) {
    .hub .home-left {
      --portrait-size: clamp(88px,calc(var(--game-height) * .34),320px);
    }
  }
  .hub .home-menu {
    flex: 1;
    min-height: 0;
    grid-template-rows: 1.1fr repeat(4, minmax(0, 1fr));
    gap: 5px !important;
    padding: 8px !important;
  }
  .home-menu .menu-card,
  .home-menu .menu-card.featured {
    min-height: 0 !important;
    margin: 0;
    padding: 3px 6px !important;
  }
  .home-menu .menu-inner {
    height: 100%;
    min-height: 0;
  }
  .hub .hub-status {
    flex: none;
    padding: 6px 10px !important;
  }
  html[data-compact-screen] .hub-status p.camp-tip,
  html[data-compact-screen] .home-menu .menu-label small,
  html[data-compact-screen] .logo-tagline {
    display: none;
  }
  html[data-compact-screen] .hub {
    padding: 6px 16px 8px;
    gap: 18px;
  }
  html[data-compact-screen] .hub-status p {
    font-size: 11px;
    line-height: 1.35;
    margin: 2px 0;
  }
  html[data-compact-screen] .home-menu .menu-label strong {
    font-size: 16px;
    line-height: 1.2;
  }
  html[data-compact-screen] .home-menu .featured .menu-label strong {
    font-size: 20px;
  }
  html[data-compact-screen] .home-menu .ui-pixel-icon {
    width: 22px;
    height: 22px;
  }
}
body[data-screen=explore] #game-ui {
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}
body[data-screen=explore] .field-top,
body[data-screen=explore] .field-team {
  margin-left: var(--safe-left);
  margin-top: var(--safe-top);
}
body[data-screen=explore] .field-side {
  margin-right: var(--safe-right);
  margin-top: var(--safe-top);
}
body[data-screen=explore] .field-actions {
  margin-right: var(--safe-right);
  margin-bottom: var(--safe-bottom);
}
body[data-screen=explore] .stick-zone {
  margin-left: var(--safe-left);
  margin-bottom: var(--safe-bottom);
}
body[data-screen=explore] .field-caption {
  margin: 0 var(--safe-right) var(--safe-bottom) var(--safe-left);
}
.hub .hero-stage.hero-card {
  width: calc(var(--portrait-size)*1.4);
  height: var(--portrait-size);
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  overflow: hidden;
}
.hero-card .hero-figure {
  position: relative;
  flex: 0 0 50%;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.hero-card .hero-figure .trainer-portrait {
  width: 96% !important;
  height: 94% !important;
  padding: 4px 0 8% !important;
  object-fit: contain;
}
.hero-card .hero-figure .hero-shadow {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 7%;
  height: 7%;
  border-radius: 50%;
}
.hero-card .hero-companion {
  right: -8%;
  bottom: 5%;
  width: auto;
}
.hero-card .hero-info {
  position: relative;
  z-index: 2;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  margin: 8% 7% 8% 0;
  padding: 6px 8px;
  background: #f8f8e8e8;
  border: 2px solid #687890;
  box-shadow: inset -2px -2px 0 #d0d0c8;
  text-align: left;
  color: var(--ink);
}
.hero-card .hero-name {
  margin: 0 !important;
  font-size: calc(var(--portrait-size)*.1);
  line-height: 1.15;
  color: #303850 !important;
  text-shadow: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@supports (width: min(1px, 2px)) {
  .hero-card .hero-name {
    font-size: clamp(15px, calc(var(--portrait-size)*.1), 30px);
  }
}
.hero-level {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero-level b {
  font-size: calc(var(--portrait-size)*.065);
  color: #b05048;
}
@supports (width: min(1px, 2px)) {
  .hero-level b {
    font-size: clamp(11px, calc(var(--portrait-size)*.065), 18px);
  }
}
.hero-exp {
  display: block;
  height: 6px;
  background: #c8d0d8;
  box-shadow: inset 0 0 0 1px #687890;
}
.hero-exp > i {
  display: block;
  height: 100%;
  background: #f0c040;
}
.hero-level small {
  font-size: calc(var(--portrait-size)*.05);
  color: var(--muted);
}
@supports (width: min(1px, 2px)) {
  .hero-level small {
    font-size: clamp(9px, calc(var(--portrait-size)*.05), 13px);
  }
}
.hero-card .hero-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 0;
}
.hero-card .hero-badges span,
.hero-card .hero-badges span + span {
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  font-size: calc(var(--portrait-size)*.058) !important;
  color: #505868 !important;
  white-space: nowrap;
}
@supports (width: min(1px, 2px)) {
  .hero-card .hero-badges span, .hero-card .hero-badges span + span {
    font-size: clamp(10px, calc(var(--portrait-size)*.058), 15px) !important;
  }
}
.hub .party-column {
  height: var(--portrait-size);
}
.hub .party-thumb {
  width: calc(var(--portrait-size)*.24);
}
@supports (width: min(1px, 2px)) {
  .hub .party-thumb {
    width: clamp(40px, calc(var(--portrait-size)*.24), 78px);
  }
}
.hub .party-thumb .thumb-mon {
  zoom: .55;
}
@media (min-height:560px) {
  .hub .party-thumb .thumb-mon {
    zoom: .75;
  }
}
@media (min-height:860px) {
  .hub .party-thumb .thumb-mon {
    zoom: 1;
  }
}
@media (orientation:landscape) {
  .hub .home-left {
    --portrait-size: calc(var(--game-height) * .58);
  }
  @supports (width: min(1px, 2px)) {
    .hub .home-left {
      --portrait-size: clamp(110px,min(calc(var(--game-height) * .58),calc((44vw - 110px) / 1.4)),380px);
    }
  }
}
@media (orientation:portrait) {
  .hub .home-left {
    --portrait-size: 216px;
  }
  @supports (width: min(1px, 2px)) {
    .hub .home-left {
      --portrait-size: min(216px,calc((100vw - 120px) / 1.4));
    }
  }
}
.hub .party-column {
  display: grid !important;
  grid-template-columns: repeat(2, var(--thumb-w));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 4px;
  --thumb-w: calc(var(--portrait-size)*.27);
}
@supports (width: min(1px, 2px)) {
  .hub .party-column {
    --thumb-w: clamp(38px,calc(var(--portrait-size)*.27),96px);
  }
}
.hub .party-thumb {
  width: auto !important;
  height: auto;
  min-height: 0;
}
@media (orientation:landscape) {
  .hub .home-left {
    --portrait-size: calc(var(--game-height) * .58);
  }
  @supports (width: min(1px, 2px)) {
    .hub .home-left {
      --portrait-size: clamp(100px,min(calc(var(--game-height) * .58),calc((44vw - 40px) / 1.96)),380px);
    }
  }
}
@media (orientation:landscape) and (max-width:760px) {
  .hub .hero-row {
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }
  .hub .home-left {
    --portrait-size: 96px;
  }
  @supports (width: min(1px, 2px)) {
    .hub .home-left {
      --portrait-size: clamp(96px,min(calc((44vw - 28px) / 1.4),calc(var(--game-height) - 160px)),300px);
    }
  }
  .hub .party-column {
    width: calc(var(--portrait-size)*1.4);
    height: calc(var(--portrait-size)*.32);
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: 1fr;
  }
}
@media (max-height:470px) and (orientation:landscape) {
  .hub .hero-status {
    display: none;
  }
  .hub .party-thumb .thumb-mon {
    zoom: .6;
  }
}
html[data-compact-screen] .hub .hero-status {
  display: none;
}
@media (orientation:landscape) and (max-width:760px) {
  .hub .home-left {
    --portrait-size: 96px;
  }
  @supports (width: min(1px, 2px)) {
    .hub .home-left {
      --portrait-size: clamp(96px,min(calc((44vw - 28px) / 1.4),calc(var(--game-height) - 215px)),300px);
    }
  }
}
@media (orientation:portrait) {
  .hub .home-left {
    --portrait-size: 216px;
  }
  @supports (width: min(1px, 2px)) {
    .hub .home-left {
      --portrait-size: min(216px,calc((100vw - 64px) / 1.96));
    }
  }
}
@media (orientation:landscape) and (max-width:760px) {
  .hero-card .hero-info {
    gap: 2px;
    padding: 3px 6px;
    margin: 6% 5% 6% 0;
  }
  .hero-card .hero-level small {
    display: none;
  }
  .hero-card .hero-name {
    font-size: 14px;
  }
  .hero-card .hero-badges span {
    font-size: 10px !important;
  }
  .hero-level b {
    font-size: 11px;
  }
}
@media (orientation:landscape) and (max-width:760px) {
  .hero-card .hero-figure {
    flex-basis: 42%;
  }
}
.hub .hero-card .hero-name {
  font-size: calc(var(--portrait-size)*.1) !important;
  min-height: 1.15em;
}
@supports (width: min(1px, 2px)) {
  .hub .hero-card .hero-name {
    font-size: clamp(14px, calc(var(--portrait-size)*.1), 30px) !important;
  }
}
@media (orientation:landscape) and (max-width:760px) {
  .hub .hero-card .hero-name {
    font-size: 14px !important;
  }
}
@media (min-height:560px) {
  .hub .party-thumb .thumb-mon {
    zoom: 1;
  }
}
@media (min-height:860px) {
  .hub .party-thumb .thumb-mon {
    zoom: 1.3;
  }
}
@media (max-height:470px) and (orientation:landscape) and (min-width:761px) {
  .hub .party-thumb .thumb-mon {
    zoom: .7;
  }
}
.hub .hero-row {
  align-items: stretch;
}
.hub .hero-stage.hero-card {
  width: var(--portrait-size);
  height: var(--portrait-size);
}
.hub .hero-card .hero-figure {
  flex: 1 1 100%;
}
.hub .hero-card .hero-figure .trainer-portrait {
  width: 78% !important;
}
.hub .hero-card .hero-companion {
  right: 2%;
}
.hub .hero-namecard {
  flex: 0 0 auto;
  width: calc(var(--portrait-size)*.64);
  height: var(--portrait-size);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  text-align: left;
  color: var(--ink);
  background-color: #f8f8e8;
  background-image:
    repeating-linear-gradient(
      0deg,
      #f8f8e8 0,
      #f8f8e8 4px,
      #f0f0e0 4px,
      #f0f0e0 6px);
  border: 8px solid transparent;
  border-image: var(--frame) 8 stretch;
  background-clip: padding-box;
  box-shadow: 0 4px 0 #30385080;
}
.hub .hero-namecard .hero-name {
  margin: 0 !important;
  font-size: calc(var(--portrait-size)*.12) !important;
  line-height: 1.15;
  color: #303850 !important;
  text-shadow: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hub .hero-namecard .hero-level b {
  font-size: calc(var(--portrait-size)*.075);
}
@supports (width: min(1px, 2px)) {
  .hub .hero-namecard .hero-level b {
    font-size: clamp(11px, calc(var(--portrait-size)*.075), 19px);
  }
}
.hub .hero-namecard .hero-level small {
  font-size: calc(var(--portrait-size)*.058);
}
@supports (width: min(1px, 2px)) {
  .hub .hero-namecard .hero-level small {
    font-size: clamp(9px, calc(var(--portrait-size)*.058), 14px);
  }
}
.hub .hero-namecard .hero-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 0;
}
.hub .hero-namecard .hero-badges span,
.hub .hero-namecard .hero-badges span + span {
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  font-size: calc(var(--portrait-size)*.066) !important;
  color: #505868 !important;
  white-space: nowrap;
}
@supports (width: min(1px, 2px)) {
  .hub .hero-namecard .hero-badges span, .hub .hero-namecard .hero-badges span + span {
    font-size: clamp(10px, calc(var(--portrait-size)*.066), 16px) !important;
  }
}
@media (orientation:landscape) {
  .hub .home-left {
    --portrait-size: calc(var(--game-height) * .58);
  }
  @supports (width: min(1px, 2px)) {
    .hub .home-left {
      --portrait-size: clamp(96px,min(calc(var(--game-height) * .58),calc((44vw - 50px) / 2.22)),360px);
    }
  }
}
@media (max-height:470px) and (orientation:landscape) {
  .hub .hero-namecard {
    border-width: 4px;
    padding: 5px 7px;
    gap: 4px;
  }
}
@media (orientation:landscape) and (max-width:760px) {
  .hub .hero-row {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
  }
  .hub .home-left {
    --portrait-size: 90px;
  }
  @supports (width: min(1px, 2px)) {
    .hub .home-left {
      --portrait-size: clamp(90px,min(calc((44vw - 30px) / 1.68),calc(var(--game-height) - 215px)),260px);
    }
  }
  .hub .party-column {
    flex: 0 0 100%;
    width: calc(var(--portrait-size)*1.64 + 5px);
    height: calc(var(--portrait-size)*.36);
  }
  .hub .hero-namecard .hero-level small {
    display: none;
  }
  .hub .hero-namecard .hero-name {
    font-size: 14px !important;
  }
}
@media (orientation:portrait) {
  .hub .home-left {
    --portrait-size: 200px;
  }
  @supports (width: min(1px, 2px)) {
    .hub .home-left {
      --portrait-size: min(200px,calc((100vw - 74px) / 2.22));
    }
  }
  .hub .hero-namecard .hero-level small {
    display: none;
  }
}
.pack-summary {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 8px !important;
  margin-top: 6px;
}
.pack-summary > .pack-open-btn {
  flex: none;
  margin: 0 !important;
  padding: 5px 12px !important;
  min-height: 0 !important;
}
.pack-btn-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  text-align: left;
}
.pack-btn-inner img {
  image-rendering: pixelated;
}
.pack-btn-inner > span {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.pack-btn-inner b {
  font-size: 14px;
  white-space: nowrap;
}
.pack-btn-inner small {
  font-size: 11px;
  opacity: .85;
  white-space: nowrap;
}
.pack-summary .pack-contents {
  flex: 1;
  min-width: 0;
  margin: 0;
  height: 52px;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 3px 5px;
  padding: 4px 6px;
  background: #f0f0e0;
  border: 2px solid #9098b0;
  box-shadow: inset 1px 1px 0 #d0d0c8;
  scrollbar-width: thin;
  scrollbar-color: #9098b0 #e0e0d0;
}
.pack-summary .pack-contents::-webkit-scrollbar {
  width: 6px;
}
.pack-summary .pack-contents::-webkit-scrollbar-thumb {
  background: #9098b0;
}
.pack-summary .pack-contents::-webkit-scrollbar-track {
  background: #e0e0d0;
}
.pack-summary .pack-contents > small {
  align-self: center;
}
@media (max-height:470px) and (orientation:landscape) {
  .briefing .pack-summary > .pack-open-btn {
    padding: 3px 9px !important;
  }
  .pack-btn-inner b {
    font-size: 12px;
  }
  .pack-btn-inner small {
    font-size: 10px;
  }
  .pack-btn-inner img {
    width: 20px;
    height: 20px;
  }
  .pack-summary .pack-contents {
    height: 44px;
    padding: 3px 5px;
  }
}
body[data-screen=explore] .field-hud-left {
  position: absolute;
  left: 10px;
  top: 8px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-left: var(--safe-left);
  margin-top: var(--safe-top);
  pointer-events: none;
}
body[data-screen=explore] .field-hud-left .field-top {
  position: static;
  margin: 0;
  left: auto;
  right: auto;
  top: auto;
  display: flex;
  gap: 6px;
  align-items: stretch;
}
body[data-screen=explore] .field-hud-left .field-team {
  position: static;
  margin: 0;
}
.field-top .panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.field-retreat.danger {
  pointer-events: auto;
  align-self: stretch;
  margin: 0 !important;
  padding: 4px 12px !important;
  min-height: 0 !important;
  font-size: 12px;
  background: #f0c8b8 !important;
  background-image:
    linear-gradient(
      #ffe0d0 0,
      #ffe0d0 3px,
      #f0b8a0 3px,
      #f0b8a0 calc(100% - 3px),
      #c87060 calc(100% - 3px)) !important;
  color: #802818 !important;
}
.retreat-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-weight: 700;
}
.warn-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: none;
  font-style: normal;
  font-weight: 900;
  font-size: 13px;
  color: #fff8e8;
  background: #d04030;
  box-shadow: 0 0 0 2px #802818;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  padding-top: 4px;
  box-sizing: border-box;
}
.field-team {
  display: grid !important;
  grid-template-columns: repeat(2, 42px);
  grid-auto-rows: 40px;
  gap: 3px;
  padding: 4px !important;
  background: #a8b8c8e6 !important;
  border: 4px solid transparent;
  border-image: var(--frame) 8 stretch;
  box-shadow: 0 3px 0 #30385060;
  pointer-events: none;
}
.field-team .party-thumb {
  position: relative;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c8d8e0;
  overflow: hidden;
}
.field-team .party-thumb.lead {
  background: #f0d890;
}
.field-team .party-thumb.empty {
  background: #8898a8;
}
.field-team .party-thumb .thumb-mon {
  zoom: .45;
  margin-bottom: 6px;
}
.field-team .party-thumb.fainted .mon-sprite {
  filter: grayscale(1) opacity(.55);
}
.field-team .party-thumb.newbie::after {
  content: "★";
  position: absolute;
  right: 1px;
  top: -2px;
  font-size: 10px;
  color: #e0a020;
  text-shadow: 1px 1px 0 #604010;
}
.thumb-hpbar {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 3px;
  height: 4px;
  background: #405060;
  display: block;
}
.thumb-hpbar > i {
  display: block;
  height: 100%;
  background: #60c870;
}
.thumb-hpbar.mid > i {
  background: #e8c040;
}
.thumb-hpbar.low > i {
  background: #e05040;
}
body[data-screen=explore] .field-side {
  gap: 6px;
}
body[data-screen=explore] .field-side .field-actions {
  position: static;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
body[data-screen=explore] .field-side .field-bag {
  width: auto;
  height: auto;
  padding: 4px 14px !important;
  border-radius: 0 !important;
  background: #c0d0e0 !important;
  background-image:
    linear-gradient(
      #f0f8ff 0,
      #f0f8ff 3px,
      #c0d0e0 3px,
      #c0d0e0 calc(100% - 3px),
      #8898b0 calc(100% - 3px)) !important;
  border: 6px solid transparent !important;
  border-image: var(--frame) 8 stretch !important;
  box-shadow: 0 3px 0 #30385080 !important;
  color: var(--ink);
}
.field-bag .field-btn {
  flex-direction: row;
  gap: 6px;
}
.field-bag .field-btn img {
  width: 26px;
  height: 26px;
}
.field-bag .field-btn b {
  font-size: 13px;
}
.field-quick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.field-quick-item {
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0 !important;
  min-height: 0 !important;
  border-width: 4px !important;
  background: #f8f8e8 !important;
}
.quick-inner {
  display: flex;
  align-items: center;
  justify-content: center;
}
.quick-inner img {
  width: 24px;
  height: 24px;
  image-rendering: pixelated;
}
.quick-inner b {
  position: absolute;
  right: 1px;
  bottom: -1px;
  font-size: 10px;
  color: #303850;
  text-shadow: 1px 1px 0 #fff;
}
@media (max-height:470px) and (orientation:landscape) {
  .field-team {
    grid-template-columns: repeat(2, 34px);
    grid-auto-rows: 32px;
    gap: 2px;
    padding: 3px !important;
  }
  .field-team .party-thumb .thumb-mon {
    zoom: .36;
  }
  .field-retreat.danger {
    font-size: 11px;
    padding: 3px 9px !important;
  }
  .warn-mark {
    width: 15px;
    height: 15px;
    font-size: 11px;
  }
  .field-quick-item {
    width: 34px;
    height: 34px;
  }
  .quick-inner img {
    width: 20px;
    height: 20px;
  }
  body[data-screen=explore] .field-side .field-bag {
    padding: 3px 10px !important;
    border-width: 4px !important;
  }
  .field-bag .field-btn img {
    width: 20px;
    height: 20px;
  }
  .field-bag .field-btn b {
    font-size: 11px;
  }
}
@media (max-height:380px) and (orientation:landscape) {
  .field-quick {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 120px;
  }
}
@media (orientation:portrait) {
  .field-team {
    grid-template-columns: repeat(6, 34px);
    grid-auto-rows: 32px;
  }
  .field-team .party-thumb .thumb-mon {
    zoom: .36;
  }
}
@media (orientation:portrait) {
  .field-top .field-objective {
    display: none;
  }
  body[data-screen=explore] .field-hud-left .field-top {
    flex-wrap: wrap;
    max-width: calc(100vw - 180px);
  }
}
.hub .hero-row {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.hub .party-column {
  flex: 0 0 100%;
  width: calc(var(--portrait-size)*1.64 + 6px);
  height: calc(var(--portrait-size)*.34);
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-template-rows: 1fr !important;
}
@media (orientation:landscape) {
  .hub .home-left {
    --portrait-size: 96px;
  }
  @supports (width: min(1px, 2px)) {
    .hub .home-left {
      --portrait-size: clamp(96px,min(calc((44vw - 40px) / 1.66),calc(var(--game-height) * .78 - 110px)),330px);
    }
  }
}
@media (orientation:landscape) and (max-width:760px) {
  .hub .home-left {
    --portrait-size: 90px;
  }
  @supports (width: min(1px, 2px)) {
    .hub .home-left {
      --portrait-size: clamp(90px,min(calc((44vw - 30px) / 1.68),calc(var(--game-height) - 215px)),260px);
    }
  }
}
@media (orientation:portrait) {
  .hub .home-left {
    --portrait-size: 200px;
  }
  @supports (width: min(1px, 2px)) {
    .hub .home-left {
      --portrait-size: min(200px,calc((100vw - 60px) / 1.66));
    }
  }
}
.hub .party-thumb.lead::before,
.field-team .party-thumb.lead::before {
  content: "首发";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  padding: 0 3px;
  font-size: 9px;
  line-height: 13px;
  font-weight: 700;
  color: #fff8e8;
  background: #c05048;
}
.field-team {
  grid-template-columns: 42px !important;
  grid-auto-rows: 38px !important;
}
@media (max-height:470px) and (orientation:landscape) {
  .field-team {
    grid-template-columns: 36px !important;
    grid-auto-rows: 32px !important;
    gap: 2px;
  }
}
@media (max-height:380px) and (orientation:landscape) {
  .field-team {
    grid-auto-rows: 28px !important;
  }
  .field-team .party-thumb .thumb-mon {
    zoom: .32;
  }
}
@media (orientation:portrait) {
  .field-team {
    grid-template-columns: repeat(6, 34px) !important;
    grid-auto-rows: 32px !important;
  }
}
.hub .party-column {
  width: auto;
  height: var(--portrait-size);
  grid-template-columns: var(--thumb-w) !important;
  grid-template-rows: repeat(6, minmax(0, 1fr)) !important;
  gap: 3px;
  --thumb-w: calc(var(--portrait-size)*.3);
}
@supports (width: min(1px, 2px)) {
  .hub .party-column {
    --thumb-w: clamp(40px,calc(var(--portrait-size)*.3),110px);
  }
}
@media (orientation:landscape) {
  .hub .home-left {
    --portrait-size: calc(var(--game-height) * .66);
  }
  @supports (width: min(1px, 2px)) {
    .hub .home-left {
      --portrait-size: clamp(100px,min(calc(var(--game-height) * .66),calc((44vw - 50px) / 1.98)),420px);
    }
  }
}
@media (orientation:landscape) and (max-width:760px) {
  .hub .hero-row {
    flex-wrap: nowrap;
  }
  .hub .home-left {
    --portrait-size: 90px;
  }
  @supports (width: min(1px, 2px)) {
    .hub .home-left {
      --portrait-size: clamp(90px,min(calc((44vw - 30px) / 1.98),calc(var(--game-height) - 150px)),260px);
    }
  }
  .hub .party-column {
    flex: 0 0 auto;
    width: auto;
    height: var(--portrait-size);
  }
}
@media (orientation:portrait) {
  .hub .home-left {
    --portrait-size: 200px;
  }
  @supports (width: min(1px, 2px)) {
    .hub .home-left {
      --portrait-size: min(200px,calc((100vw - 60px) / 1.98));
    }
  }
}
.hub .party-thumb .thumb-mon {
  zoom: .5;
}
@media (min-height:560px) {
  .hub .party-thumb .thumb-mon {
    zoom: .75;
  }
}
@media (min-height:860px) {
  .hub .party-thumb .thumb-mon {
    zoom: 1;
  }
}
.hub .party-thumb.lead::before,
.field-team .party-thumb.lead::before {
  content: "首发";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  padding: 0 3px;
  font-size: 9px;
  line-height: 13px;
  font-weight: 700;
  color: #fff8e8;
  background: #c05048;
}
.hub .hero-status {
  display: none !important;
}
.field-team {
  grid-template-columns: 42px !important;
  grid-auto-rows: 38px !important;
}
@media (max-height:470px) and (orientation:landscape) {
  .field-team {
    grid-template-columns: 36px !important;
    grid-auto-rows: 32px !important;
    gap: 2px;
  }
}
@media (max-height:380px) and (orientation:landscape) {
  .field-team {
    grid-auto-rows: 28px !important;
  }
  .field-team .party-thumb .thumb-mon {
    zoom: .32;
  }
}
@media (orientation:portrait) {
  .field-team {
    grid-template-columns: repeat(6, 34px) !important;
    grid-auto-rows: 32px !important;
  }
}
.hub .hero-row {
  flex-wrap: nowrap !important;
  justify-content: center;
}
.hub .party-column {
  flex: none !important;
  width: auto !important;
}
.hub .hero-namecard {
  width: calc(var(--portrait-size)*.54);
}
.hub .party-column {
  --thumb-w: calc(var(--portrait-size)*.27);
}
@supports (width: min(1px, 2px)) {
  .hub .party-column {
    --thumb-w: clamp(38px,calc(var(--portrait-size)*.27),110px);
  }
}
@media (orientation:landscape) {
  .hub .home-left {
    --portrait-size: calc(var(--game-height) * .66);
  }
  @supports (width: min(1px, 2px)) {
    .hub .home-left {
      --portrait-size: clamp(100px,min(calc(var(--game-height) * .66),calc((44vw - 56px) / 1.81)),440px);
    }
  }
}
@media (max-height:470px) and (orientation:landscape) {
  .hub .party-thumb .thumb-mon {
    zoom: .42;
  }
}
@media (orientation:landscape) and (max-width:760px) {
  .hub .hero-row {
    flex-wrap: wrap !important;
    gap: 5px;
  }
  .hub .home-left {
    --portrait-size: 90px;
  }
  @supports (width: min(1px, 2px)) {
    .hub .home-left {
      --portrait-size: clamp(90px,min(calc((44vw - 34px) / 1.27),calc(var(--game-height) - 190px)),240px);
    }
  }
  .hub .hero-namecard {
    flex: 0 0 100%;
    width: auto;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
    padding: 3px 8px;
  }
  .hub .hero-namecard .hero-level {
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }
  .hub .hero-namecard .hero-exp {
    width: 50px;
  }
  .hub .hero-namecard .hero-badges {
    flex-direction: row;
    gap: 8px;
  }
  .hub .party-thumb .thumb-mon {
    zoom: .4;
  }
}
.hub .party-thumb.lead::before,
.field-team .party-thumb.lead::before {
  left: 0;
  top: 0;
  bottom: 0;
  right: auto;
  width: 11px;
  padding: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 8px;
  line-height: 11px;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hub .party-thumb.lead,
.field-team .party-thumb.lead {
  padding-left: 11px;
  box-sizing: border-box;
}
.hub .party-thumb.lead::before,
.field-team .party-thumb.lead::before {
  content: none !important;
  display: none !important;
}
.hub .party-thumb.lead,
.field-team .party-thumb.lead {
  padding-left: 0;
}
@media (orientation:landscape) and (max-height:700px) {
  .hub .hero-row {
    flex-wrap: wrap !important;
    justify-content: center;
    gap: 6px;
  }
  .hub .home-left {
    --portrait-size: 96px;
  }
  @supports (width: min(1px, 2px)) {
    .hub .home-left {
      --portrait-size: clamp(96px,min(calc((44vw - 50px) / 1.56),calc((var(--game-height) - 150px) / 1.34)),300px);
    }
  }
  .hub .party-column {
    flex: 0 0 100% !important;
    width: calc(var(--portrait-size)*1.54 + 6px) !important;
    height: calc(var(--portrait-size)*.32);
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
  }
  .hub .party-thumb .thumb-mon {
    zoom: .6;
  }
}
@media (orientation:landscape) and (max-height:700px) and (max-width:760px) {
  .hub .home-left {
    --portrait-size: 90px;
  }
  @supports (width: min(1px, 2px)) {
    .hub .home-left {
      --portrait-size: clamp(90px,min(calc(44vw - 40px),calc((var(--game-height) - 200px) / 1.34)),240px);
    }
  }
  .hub .party-column {
    width: 100% !important;
    height: calc(var(--portrait-size)*.36);
  }
  .hub .party-thumb .thumb-mon {
    zoom: .5;
  }
}
@media (orientation:landscape) and (max-height:700px) {
  .hub .home-left {
    --portrait-size: 96px;
  }
  @supports (width: min(1px, 2px)) {
    .hub .home-left {
      --portrait-size: clamp(96px,min(calc((44vw - 50px) / 1.56),calc((var(--game-height) - 164px) / 1.34)),300px);
    }
  }
}
@media (orientation:landscape) and (max-height:700px) and (max-width:760px) {
  .hub .home-left {
    --portrait-size: 84px;
  }
  @supports (width: min(1px, 2px)) {
    .hub .home-left {
      --portrait-size: clamp(84px,min(calc(44vw - 40px),calc(var(--game-height) - 196px)),240px);
    }
  }
  .hub .party-column {
    height: 56px;
    padding: 3px !important;
    border-width: 4px !important;
    gap: 2px;
  }
  .hub .party-thumb .thumb-mon {
    zoom: .55;
  }
}
@media (orientation:landscape) and (max-height:700px) and (max-width:760px) {
  .hub .home-left {
    --portrait-size: 84px;
  }
  @supports (width: min(1px, 2px)) {
    .hub .home-left {
      --portrait-size: clamp(84px,min(calc(44vw - 40px),calc(var(--game-height) - 245px)),240px);
    }
  }
}
@media (orientation:landscape) and (max-height:700px) {
  .hub .home-logo .logo-title {
    font-size: 24px !important;
    font-size: clamp(24px, 4.2vw, 40px) !important;
  }
  .hub .home-logo .logo-subtitle {
    font-size: 13px !important;
    margin-top: 0 !important;
  }
  .hub .home-left {
    --portrait-size: 90px;
    justify-content: flex-start !important;
    padding-top: 4px;
  }
  @supports (width: min(1px, 2px)) {
    .hub .home-left {
      --portrait-size: clamp(90px,min(calc((44vw - 50px) / 1.56),calc((var(--game-height) - 214px) / 1.34)),300px);
    }
  }
}
@media (orientation:landscape) and (max-height:700px) and (max-width:760px) {
  .hub .home-left {
    --portrait-size: 80px;
  }
  @supports (width: min(1px, 2px)) {
    .hub .home-left {
      --portrait-size: clamp(80px,min(calc(44vw - 40px),calc(var(--game-height) - 290px)),240px);
    }
  }
}
@media (orientation:landscape) and (max-height:700px) and (min-width:761px) {
  .hub .hero-namecard {
    width: calc(var(--portrait-size)*.74);
  }
  .hub .party-column {
    width: calc(var(--portrait-size)*1.74 + 6px) !important;
  }
  .hub .home-left {
    --portrait-size: 90px;
  }
  @supports (width: min(1px, 2px)) {
    .hub .home-left {
      --portrait-size: clamp(90px,min(calc((44vw - 50px) / 1.76),calc((var(--game-height) - 214px) / 1.34)),300px);
    }
  }
}
.hub .hero-row {
  flex-wrap: wrap !important;
  justify-content: center;
  gap: 6px;
}
.hub .hero-namecard {
  width: calc(var(--portrait-size)*.74);
}
.hub .party-column {
  flex: 0 0 100% !important;
  width: calc(var(--portrait-size)*1.74 + 6px) !important;
  height: calc(var(--portrait-size)*.32);
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-template-rows: 1fr !important;
}
@media (orientation:landscape) {
  .hub .home-left {
    --portrait-size: 90px;
  }
  @supports (width: min(1px, 2px)) {
    .hub .home-left {
      --portrait-size: clamp(90px,min(calc((44vw - 50px) / 1.76),calc((var(--game-height) - 214px) / 1.34)),340px);
    }
  }
}
@media (orientation:landscape) and (max-width:760px) {
  .hub .home-left {
    --portrait-size: 80px;
  }
  @supports (width: min(1px, 2px)) {
    .hub .home-left {
      --portrait-size: clamp(80px,min(calc(44vw - 40px),calc(var(--game-height) - 290px)),240px);
    }
  }
  .hub .party-column {
    width: 100% !important;
    height: 56px;
  }
}
@media (orientation:portrait) {
  .hub .home-left {
    --portrait-size: 200px;
  }
  @supports (width: min(1px, 2px)) {
    .hub .home-left {
      --portrait-size: min(200px,calc((100vw - 60px) / 1.76));
    }
  }
}
.hub .party-thumb .thumb-mon {
  zoom: .6;
}
@media (min-height:560px) {
  .hub .party-thumb .thumb-mon {
    zoom: .85;
  }
}
@media (min-height:860px) {
  .hub .party-thumb .thumb-mon {
    zoom: 1.1;
  }
}
@media (max-width:760px) and (orientation:landscape) {
  .hub .party-thumb .thumb-mon {
    zoom: .55;
  }
}
.hub .party-column {
  box-sizing: border-box;
}
.hub .hero-namecard,
.hub .hero-stage.hero-card {
  box-sizing: border-box;
}
.hub .party-column {
  flex: 0 0 calc(var(--portrait-size)*1.74 + 6px) !important;
}
@media (orientation:landscape) and (max-width:760px) {
  .hub .party-column {
    flex: 0 0 100% !important;
  }
}
.hub .hero-row::after {
  content: "";
  flex: 0 0 100%;
  order: 1;
  height: 0;
}
.hub .party-column {
  order: 2;
}
@media (orientation:landscape) and (max-height:700px) {
  .hub .party-column {
    flex: 0 0 100% !important;
  }
  .hub .party-thumb .thumb-mon {
    zoom: .5;
  }
}
.field-pointers {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.field-pointer {
  position: absolute;
  width: 0;
  height: 0;
}
.field-pointer .ptr-icon {
  position: absolute;
  left: -15px;
  top: -15px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c05048;
  border: 2px solid #f8f8f0;
  box-shadow: 0 0 0 2px #402028, 0 2px 0 2px #40202860;
  animation: ptr-pulse .9s steps(2) infinite;
}
.field-pointer.legend .ptr-icon {
  background: #6040a0;
  box-shadow: 0 0 0 2px #201040, 0 0 10px #ffe060;
}
.field-pointer .ptr-arrow {
  position: absolute;
  left: -7px;
  top: -7px;
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-left: 10px solid #f8f8f0;
  transform-origin: 7px 7px;
  filter: drop-shadow(0 0 1px #402028);
}
@keyframes ptr-pulse {
  50% {
    transform: scale(1.12);
  }
}
.hub .party-thumb .thumb-lv {
  position: absolute;
  left: 2px;
  top: 1px;
  z-index: 1;
  font-size: calc(var(--portrait-size)*.045);
  line-height: 1;
  color: #fff;
  text-shadow:
    1px 0 0 #203048,
    -1px 0 0 #203048,
    0 1px 0 #203048,
    0 -1px 0 #203048;
  pointer-events: none;
  font-weight: 700;
}
@media (orientation:landscape) {
  .hub .home-left {
    --portrait-size: 96px !important;
    justify-content: flex-start !important;
    padding-top: 4px;
  }
  @supports (width: min(1px, 2px)) {
    .hub .home-left {
      --portrait-size: clamp(96px,min(calc((44vw - 34px) / 1.95),calc(var(--game-height) - 232px)),400px) !important;
    }
  }
  .hub .hero-row {
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch;
    gap: 6px !important;
  }
  .hub .hero-namecard {
    flex: 0 0 auto !important;
    width: calc(var(--portrait-size)*.8) !important;
    height: var(--portrait-size) !important;
  }
  .hub .hero-stage.hero-card {
    flex: 0 0 auto !important;
    width: calc(var(--portrait-size)*1.15) !important;
    height: var(--portrait-size) !important;
  }
  .hub .hero-card .hero-figure .trainer-portrait {
    width: 70% !important;
  }
  .hub .hero-card .hero-companion {
    right: 6%;
  }
  .hub .party-column {
    flex: 0 0 calc(var(--portrait-size)*1.95 + 6px) !important;
    width: calc(var(--portrait-size)*1.95 + 6px) !important;
    height: calc(var(--portrait-size)*.36) !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
    gap: 4px !important;
    padding: 4px !important;
    border-width: 5px !important;
  }
  @supports (width: min(1px, 2px)) {
    .hub .party-column {
      height: clamp(50px, calc(var(--portrait-size)*.36), 104px) !important;
    }
  }
  .hub .party-thumb {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 0 7px !important;
    overflow: hidden;
  }
  .hub .party-thumb .thumb-mon {
    zoom: .5;
  }
  .hub .party-thumb .thumb-lv {
    left: 3px;
    top: 2px;
    font-size: calc(var(--portrait-size)*.055);
  }
  @supports (width: min(1px, 2px)) {
    .hub .party-thumb .thumb-lv {
      font-size: clamp(9px, calc(var(--portrait-size)*.055), 14px);
    }
  }
  .hub .party-thumb .thumb-hp {
    left: 4px !important;
    right: auto;
    bottom: 3px !important;
    height: 3px !important;
  }
}
@media (orientation:landscape) and (min-height:560px) {
  .hub .party-thumb .thumb-mon {
    zoom: .8;
  }
}
@media (orientation:landscape) and (min-height:860px) {
  .hub .party-thumb .thumb-mon {
    zoom: 1.1;
  }
}
@media (orientation:landscape) and (max-width:700px) {
  .hub .party-thumb .thumb-mon {
    zoom: .42;
  }
}
@media (orientation:landscape) {
  .hub .party-thumb .thumb-lv {
    padding: 1px 3px;
    background: #203048d9;
    border-radius: 2px;
    text-shadow: none;
    color: #fff8d8;
  }
}
@media (orientation:landscape) and (min-height:560px) {
  .hub .home-logo .logo-tagline {
    display: none;
  }
}
@media (orientation:landscape) {
  main.page {
    display: flex !important;
    flex-direction: column;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    max-width: none !important;
  }
  main.page > * {
    flex: 1 0 auto;
    min-height: 0;
  }
  main.page > .pc-layout,
  main.page > .shop-panel,
  main.page > .dex-panel,
  main.page > .lab-room,
  main.page > .dungeon-select,
  main.page > .adventure-layout,
  main.page > .arena-panel {
    flex: 1 1 0 !important;
    height: auto !important;
    max-height: none !important;
  }
}
@media (orientation:landscape) and (max-height:470px) {
  main.page {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}
.pe-watermark {
  position: fixed;
  left: calc(var(--safe-left,0px) + 6px);
  bottom: calc(var(--safe-bottom,0px) + 4px);
  z-index: 2147483000;
  width: 103px;
  height: 14px;
  image-rendering: pixelated;
  opacity: .62;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
@media (min-height:700px) {
  .pe-watermark {
    width: 206px;
    height: 28px;
    left: calc(var(--safe-left,0px) + 10px);
    bottom: calc(var(--safe-bottom,0px) + 8px);
  }
}
.field-pause {
  pointer-events: auto;
  align-self: stretch;
  margin: 0 !important;
  padding: 4px 12px !important;
  min-height: 0 !important;
  font-size: 12px;
}
.pause-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.pause-mark {
  width: 10px;
  height: 12px;
  flex: none;
  background:
    linear-gradient(
      90deg,
      currentColor 0 35%,
      transparent 35% 65%,
      currentColor 65%);
}
@media (max-height:470px) {
  .field-pause {
    font-size: 11px;
    padding: 3px 9px !important;
  }
}
body[data-screen=explore] .toast,
body.in-battle .toast {
  pointer-events: none;
  max-width: 420px !important;
  max-width: min(46vw, 420px) !important;
  padding: 5px 12px !important;
  font-size: 12px !important;
  line-height: 1.35;
  border-width: 3px !important;
  opacity: .93;
  text-align: center;
}
body[data-screen=explore] .toast {
  bottom: calc(var(--safe-bottom) + 10px) !important;
}
body.in-battle .toast {
  bottom: auto !important;
  top: calc(var(--safe-top) + 96px) !important;
}
@media (max-height:470px) {
  body.in-battle .toast {
    top: calc(var(--safe-top) + 74px) !important;
  }
}
body[data-screen=explore] .area-sign {
  top: calc(var(--safe-top) + 58px) !important;
  width: 200px;
  margin-left: -100px;
  padding: 5px 12px 6px !important;
  gap: 0 !important;
  pointer-events: none;
}
body[data-screen=explore] .area-sign strong {
  font-size: 16px;
}
body[data-screen=explore] .area-sign small {
  font-size: 10px;
}
body[data-screen=explore] .area-sign .difficulty-badge {
  transform: scale(.85);
  transform-origin: left center;
  margin-top: 1px;
}
body[data-screen=explore] .field-team {
  pointer-events: auto;
  cursor: pointer;
}
.field-map-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.field-map-row .field-pause {
  align-self: flex-start;
}
.auto-toggle {
  pointer-events: auto;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  padding: 4px 12px !important;
  min-height: 0 !important;
  font-size: 12px;
  white-space: nowrap;
  color: #203048 !important;
  background: #d8e8f8 !important;
  background-image:
    linear-gradient(
      #f0f8ff 0,
      #f0f8ff 3px,
      #c8dcf0 3px,
      #c8dcf0 calc(100% - 3px),
      #6888a8 calc(100% - 3px)) !important;
}
.auto-toggle b {
  font-weight: 700;
}
.auto-check {
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid #304060;
  background: #fff;
  box-sizing: border-box;
}
.auto-toggle.on {
  color: #402000 !important;
  background-image:
    linear-gradient(
      #fff0c0 0,
      #fff0c0 3px,
      #f0b850 3px,
      #f0b850 calc(100% - 3px),
      #a86818 calc(100% - 3px)) !important;
}
.auto-toggle.on .auto-check {
  background:
    #e8a030 linear-gradient(
      45deg,
      transparent 38%,
      #fff 38% 56%,
      transparent 56%);
}
.auto-toggle.on .pc-icon {
  animation: auto-pulse 1s steps(2) infinite;
}
.pc-icon {
  display: inline-flex;
  font-style: normal;
  line-height: 0;
}
.pc-icon svg {
  width: 16px;
  height: 15px;
}
@media (max-height:470px) and (orientation:landscape) {
  .auto-toggle {
    font-size: 11px;
    padding: 3px 9px !important;
  }
  .auto-check {
    width: 12px;
    height: 12px;
  }
}
.dialog-actions .field-retreat.danger {
  align-self: auto;
  padding: 8px 14px !important;
  font-size: 14px;
}
body.in-battle .auto-battle i {
  display: inline-flex;
  line-height: 0;
  letter-spacing: 0;
}
body.in-battle .auto-battle .pc-svg {
  width: 16px;
  height: 15px;
}
.town-mode .briefing, .wild-mode .briefing {
  display: flex;
  flex-direction: column;
}
.town-mode .briefing .brief-actions, .wild-mode .briefing .brief-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 6px;
}
.town-mode .briefing .brief-buttons, .wild-mode .briefing .brief-buttons {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.town-mode .briefing .brief-buttons > button, .wild-mode .briefing .brief-buttons > button {
  margin: 0 !important;
  min-width: 0;
  white-space: nowrap;
}
.town-mode .briefing .brief-buttons > .primary, .wild-mode .briefing .brief-buttons > .primary {
  flex: 2 1 0;
}
.town-mode .briefing .brief-buttons > .auto-clear, .wild-mode .briefing .brief-buttons > .auto-clear {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.town-mode .briefing .brief-buttons > .auto-clear .item-btn, .wild-mode .briefing .brief-buttons > .auto-clear .item-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.town-mode .briefing .auto-clear-note, .wild-mode .briefing .auto-clear-note {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
}
.town-mode .briefing .pack-summary, .wild-mode .briefing .pack-summary {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 150px;
}
.town-mode .briefing .pack-summary .pack-contents, .wild-mode .briefing .pack-summary .pack-contents {
  height: auto;
  min-height: 52px;
}
.town-mode .briefing .brief-actions.with-auto .brief-buttons, .wild-mode .briefing .brief-actions.with-auto .brief-buttons {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.town-mode .briefing .pack-summary, .wild-mode .briefing .pack-summary {
  min-height: 56px;
}
.town-mode .briefing .brief-actions > .charm-block, .wild-mode .briefing .brief-actions > .charm-block {
  margin: 0;
}
.auto-toggle.on .auto-check,
.sell-pick.on .sell-check {
  background: #e8a030 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M1 3h1v2H1zM2 4h1v2H2zM3 5h1v2H3zM4 4h1v2H4zM5 3h1v2H5zM6 2h1v2H6zM7 1h1v2H7z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.tut-coach {
  position: fixed;
  z-index: 120;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 460px;
  max-width: min(460px, 56vw);
  padding: 6px 12px 6px 6px;
  background: #f8f4e0;
  border: 3px solid #485870;
  box-shadow: 0 3px 0 #20283880;
  pointer-events: none;
  animation: tut-in .25s ease-out;
}
.tut-coach.field {
  bottom: calc(14px + var(--safe-bottom,0px));
}
.tut-coach.battle {
  top: calc(78px + var(--safe-top,0px));
}
.tut-coach[hidden] {
  display: none;
}
.tut-coach p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
  color: #283040;
}
.tut-coach-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.tut-birch {
  width: 40px;
  height: 40px;
  flex: none;
  image-rendering: pixelated;
  object-fit: cover;
  object-position: top;
  background: #d8e8f0;
  border: 2px solid #6888a8;
}
.tut-meter {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tut-meter[hidden] {
  display: none;
}
.tut-meter small {
  font-size: 10px;
  color: #606878;
  white-space: nowrap;
}
.tut-meter i {
  position: relative;
  flex: 1;
  height: 7px;
  min-width: 90px;
  background: #d0d4d8;
  border: 1px solid #485870;
}
.tut-meter b {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: #58c070;
  transition: width .1s;
}
.tut-meter b.loud {
  background: #e05040;
}
@keyframes tut-in {
  from {
    opacity: 0;
    transform: translate(-50%, 6px);
  }
}
@media (max-height:470px) {
  .tut-coach {
    max-width: 400px;
    max-width: min(400px, 52vw);
    padding: 4px 10px 4px 4px;
  }
  .tut-coach p {
    font-size: 11px;
  }
  .tut-birch {
    width: 32px;
    height: 32px;
  }
  .tut-coach.battle {
    top: calc(62px + var(--safe-top,0px));
  }
}
.tut-coach {
  gap: 6px;
  padding: 3px 8px 3px 3px;
  max-width: 380px;
  max-width: min(380px, 44vw);
  background: #f8f4e0e6;
  border-width: 2px;
}
.tut-coach .tut-birch {
  width: 26px;
  height: 26px;
}
.tut-coach p {
  font-size: 11px;
  line-height: 1.35;
}
.tut-coach.pinned {
  bottom: auto;
  transform: none;
  max-width: 300px;
  max-width: min(300px, 34vw);
  animation: none;
}
.tut-coach .tut-meter i {
  min-width: 60px;
}
@media (max-height:470px) {
  .tut-coach .tut-birch {
    width: 22px;
    height: 22px;
  }
  .tut-coach p {
    font-size: 10px;
  }
}
.tut-focus {
  outline: 3px solid #ffd040 !important;
  outline-offset: 2px;
  animation: tut-blink .8s steps(2) infinite;
}
@keyframes tut-blink {
  50% {
    outline-color: #ff8030;
  }
}
.tut-ring {
  position: fixed;
  z-index: 119;
  pointer-events: none;
  border: 4px solid #f03030;
  border-radius: 8px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 9999px #0818288c;
  animation: tut-ring .8s ease-in-out infinite;
}
.tut-ring > span {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -48px);
  padding: 1px 8px;
  background: #f03030;
  color: #fff;
  border: 2px solid #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.tut-ring > i {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 48px;
  height: 48px;
  margin-left: -30px;
  background: url(/_expedition/assets/emerald/intro/starter_balls.png) 0 -144px/48px 192px no-repeat;
  image-rendering: pixelated;
  animation: tut-tap .6s steps(2) infinite;
}
.tut-ring.below > span {
  bottom: auto;
  top: 100%;
  transform: translate(-50%, 48px);
}
.tut-ring.below > i {
  bottom: auto;
  top: 100%;
  transform: scaleY(-1);
}
@keyframes tut-ring {
  50% {
    border-color: #ff8080;
  }
}
@keyframes tut-tap {
  50% {
    margin-bottom: -6px;
  }
}
.tut-say {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.tut-say p {
  margin: 0 0 6px;
  line-height: 1.5;
}
.tut-say .tut-birch {
  width: 56px;
  height: 56px;
}
@media (max-height:470px) {
  .tut-say p {
    font-size: 12px;
    margin-bottom: 4px;
  }
  .tut-say .tut-birch {
    width: 44px;
    height: 44px;
  }
}
.tut-button {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px !important;
  min-height: 0 !important;
  align-self: stretch;
}
.tut-inner {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  white-space: nowrap;
}
@media (max-height:470px) {
  .tut-button {
    padding: 2px 8px !important;
    font-size: 12px;
  }
  .tut-inner img {
    width: 16px;
    height: 16px;
  }
}
.tour-layer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 130;
}
.tour-spot {
  position: fixed;
  box-shadow: 0 0 0 9999px #08101cb0;
  border: 3px solid #ffd040;
  border-radius: 4px;
  pointer-events: none;
  transition: all .2s ease-out;
}
.tour-spot[hidden] {
  display: block !important;
  left: 50% !important;
  top: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border: 0;
}
.tour-card {
  position: fixed;
  width: 320px;
  width: min(320px, 80vw);
  padding: 10px 12px;
  background: #f8f4e0;
  border: 3px solid #485870;
  box-shadow: 0 4px 0 #20283880;
  transition: left .2s, top .2s;
}
.tour-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tour-head small {
  display: block;
  font-size: 10px;
  color: #687080;
}
.tour-head b {
  font-size: 15px;
  color: #283040;
}
.tour-card p {
  margin: 6px 0 8px;
  font-size: 13px;
  line-height: 1.45;
  color: #303848;
}
.tour-acts {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.tour-acts button {
  padding: 4px 12px !important;
  min-height: 0 !important;
  font-size: 12px;
}
.tour-acts .tour-skip {
  margin-right: auto;
}
@media (max-height:470px) {
  .tour-card {
    padding: 7px 10px;
  }
  .tour-card p {
    font-size: 12px;
    margin: 4px 0 6px;
  }
}
.hero-exp.stalled {
  filter: grayscale(1);
  opacity: .7;
}
.hub .hero-namecard .hero-stall {
  margin: 2px 0 0;
  font-size: calc(var(--portrait-size)*.052);
  line-height: 1.3;
  font-weight: 700;
  color: #b05048;
}
@supports (width: min(1px, 2px)) {
  .hub .hero-namecard .hero-stall {
    font-size: clamp(9px, calc(var(--portrait-size)*.052), 12px);
  }
}
.topbar.tb-compact .page-name,
.topbar.tb-compact .top-actions .settings-inner span,
.topbar.tb-compact .top-actions .save-inner span,
.topbar.tb-compact .tut-inner span {
  display: none !important;
}
.topbar.tb-tight .resource-pills,
.topbar.tb-tight .top-actions {
  gap: 6px !important;
}
.topbar.tb-tight .resource-pill {
  padding-left: 8px !important;
  padding-right: 8px !important;
  gap: 5px !important;
}
.topbar.tb-tight .top-actions button {
  padding-left: 10px !important;
  padding-right: 10px !important;
}
body[data-screen=tasks] main.page {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
body[data-screen=tasks] .tasks-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  box-sizing: border-box;
  width: 100%;
  width: min(100%, 1100px);
  margin: 0 auto;
  padding: 14px 18px !important;
}
body[data-screen=tasks] .tasks-panel > h1 {
  font-size: 17px;
  font-size: clamp(17px, 4.2vh, 30px);
  margin: 2px 0 4px;
}
body[data-screen=tasks] .tasks-panel > p.muted {
  margin: 0 0 8px;
  font-size: 10px;
  font-size: clamp(10px, 2.6vh, 14px);
}
body[data-screen=tasks] .task-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  min-height: 0;
  overflow: auto;
}
body[data-screen=tasks] .task {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin: 0;
  border: 2px solid #c0c0b0;
  background: #ffffff60;
}
body[data-screen=tasks] .task h2 {
  font-size: 12px;
  font-size: clamp(12px, 3vh, 17px);
  margin: 0;
}
.task > div > p {
  margin: 2px 0;
  font-size: 11px;
}
body[data-screen=tasks] .task .hp {
  height: 6px;
  margin: 0;
}
body[data-screen=tasks] .task-seal {
  font-size: 18px;
}
body[data-screen=tasks] .task strong {
  font-size: 12px;
  white-space: nowrap;
}
body[data-screen=tasks] .task button {
  padding: 5px 10px !important;
  min-height: 0 !important;
  font-size: 12px;
  white-space: nowrap;
}
@media (max-height:470px) {
  body[data-screen=tasks] .tasks-panel {
    padding: 8px 12px !important;
  }
  body[data-screen=tasks] .tasks-panel > .eyebrow {
    display: none;
  }
  body[data-screen=tasks] .task {
    padding: 5px 8px;
    gap: 7px;
  }
}
html.lite body.in-battle .hud.mode-play .pb-emblem,
html.lite body.in-battle .potion-throw,
html.lite .box-wall .box-cell .box-mon,
html.lite .difficulty-art,
html.lite .mart-counter > img,
html.lite .dex-icon .dex-ball,
html.lite .trainer-portrait {
  filter: none !important;
}
html.lite .inv-item.half .inv-icon::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: #ffffff66;
}
html.lite body.in-battle .hud.mode-play .pb-move {
  box-shadow: 0 0 0 2px #0b1838 !important;
}
.tut-say .tut-line {
  font-size: 15px;
  line-height: 1.6;
  min-height: 3.2em;
}
.tut-say .tut-step {
  color: #8890a0;
  font-size: 11px;
}
.tut-coach.pack {
  bottom: calc(10px + var(--safe-bottom,0px));
  z-index: 2100;
}
.stick-base.demo .stick-knob {
  transition: transform .12s ease-out;
}
.stick-base.demo .stick-knob::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  margin: -6px 0 0 -14px;
  background: url(/_expedition/assets/emerald/intro/starter_balls.png) 0 -120px/40px 160px no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
}
.tut-coach p {
  font-size: 13px;
}
.tut-coach .tut-birch {
  width: 30px;
  height: 30px;
}
@media (max-height:470px) {
  .tut-coach p {
    font-size: 12px;
  }
  .tut-coach .tut-birch {
    width: 26px;
    height: 26px;
  }
}
.tut-say .tut-line {
  font-size: 17px;
}
@media (max-height:470px) {
  .tut-say .tut-line {
    font-size: 15px;
  }
}
.run-button {
  position: absolute;
  overflow: visible !important;
  right: 22px;
  bottom: 118px;
  z-index: 6;
  width: 64px;
  height: 64px;
  padding: 0 !important;
  min-height: 0 !important;
  border-radius: 50% !important;
  border: 4px solid #283040 !important;
  background:
    radial-gradient(
      circle at 35% 30%,
      #fff 0,
      #fff 18%,
      #e8eef8 19%,
      #e8eef8 60%,
      #b8c4d8 61%) !important;
  box-shadow: 0 4px 0 #18203080, inset 0 -4px 0 #9aa8c0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.run-button img {
  width: 40px;
  height: 30px;
  image-rendering: pixelated;
  pointer-events: none;
}
.run-button.down {
  transform: translateY(3px);
  background:
    radial-gradient(
      circle at 35% 30%,
      #fff6d8 0,
      #fff6d8 18%,
      #f8c860 19%,
      #f8c860 60%,
      #d89020 61%) !important;
  box-shadow: 0 1px 0 #18203080, inset 0 -2px 0 #b07018 !important;
}
@media (max-height:470px) and (orientation:landscape) {
  .run-button {
    width: 54px;
    height: 54px;
    right: 16px;
    bottom: 100px;
  }
  .run-button img {
    width: 34px;
    height: 26px;
  }
}
.run-button::before {
  content: "";
  position: absolute;
  top: -18px;
  right: -18px;
  bottom: -18px;
  left: -18px;
  border-radius: 50%;
}
:root {
  --modal-w: 560px;
  --modal-h:calc(var(--game-height,100vh) - 28px);
}
@supports (width: min(1px, 2px)) {
  :root {
    --modal-w: min(560px,calc(100vw - var(--safe-left,0px) - var(--safe-right,0px) - 32px));
  }
}
.dialog-back {
  z-index: 1000 !important;
  padding: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.toast {
  z-index: 1100 !important;
}
.dialog,
.exp-battle-result > .panel,
.evolution-card.panel,
.capture-card.panel {
  width: var(--modal-w) !important;
  max-width: var(--modal-w) !important;
  max-height: var(--modal-h) !important;
  overflow: auto !important;
  box-sizing: border-box !important;
  padding: 16px 20px !important;
  margin: 0 !important;
  animation: none !important;
}
.dialog h2,
.exp-battle-result h1,
.exp-battle-result h2,
.evolution-card h2,
.capture-card h2 {
  font-size: 22px !important;
  line-height: 1.25;
  margin: 2px 0 10px !important;
}
.dialog .eyebrow {
  margin: 0 0 4px;
}
.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
.exp-battle-result {
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 40;
}
.exp-battle-result > .panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  gap: 8px;
}
.exp-battle-result > .panel p {
  margin: 0 0 6px;
}
@media (max-height:470px) {
  .dialog,
  .exp-battle-result > .panel,
  .evolution-card.panel,
  .capture-card.panel {
    padding: 12px 16px !important;
  }
  .dialog h2,
  .exp-battle-result h1,
  .exp-battle-result h2,
  .evolution-card h2,
  .capture-card h2 {
    font-size: 18px !important;
    margin-bottom: 6px !important;
  }
  .dialog p {
    font-size: 13px;
  }
}
body.in-battle.battle-intro .hud.mode-play .play-bar,
body.in-battle.battle-intro .hud.mode-play .pb-stick,
body.in-battle.battle-intro .ball-select,
body.in-battle.battle-intro .wild-dock,
body.in-battle.battle-over .hud.mode-play .play-bar,
body.in-battle.battle-over .hud.mode-play .pb-stick,
body.in-battle.battle-over .ball-select,
body.in-battle.battle-over .wild-dock {
  display: none !important;
}
.settings-button {
  display: flex;
  align-items: center;
}
.settings-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}
@media (max-height:470px) {
  .settings-inner span {
    display: none;
  }
}
.settings {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.set-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}
.set-tabs::-webkit-scrollbar {
  display: none;
}
.set-tab {
  flex: 0 0 auto;
  padding: 5px 12px !important;
  min-height: 0 !important;
  font-size: 13px;
}
.set-tab.on {
  background: #f0d898 !important;
  box-shadow: inset 0 -3px #c85848 !important;
}
.set-body {
  min-height: 0;
}
.set-h {
  margin: 10px 0 4px;
  font-size: 15px;
  color: #b05048;
}
.set-h:first-child {
  margin-top: 2px;
}
.set-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid #40485822;
}
.set-row .grow {
  flex: 1;
  min-width: 0;
}
.set-row b {
  display: block;
}
.set-row small {
  display: block;
  color: #687080;
  font-size: 12px;
  line-height: 1.35;
}
.set-slider {
  display: flex;
  align-items: center;
  gap: 8px;
}
.set-slider input {
  width: 220px;
  width: min(220px, 34vw);
  accent-color: #c85848;
}
.set-value {
  min-width: 42px;
  text-align: right;
  font-weight: 700;
}
.switch {
  min-width: 56px;
  padding: 4px 10px !important;
  min-height: 0 !important;
}
.switch.on {
  background: #f0d898 !important;
  color: #584838;
}
.set-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.chip {
  padding: 4px 12px !important;
  min-height: 0 !important;
  font-size: 13px;
}
.chip.on {
  background: #f0d898 !important;
  box-shadow: inset 0 -3px #c85848 !important;
}
.settings .sub {
  margin: 2px 0 6px;
  font-size: 13px;
  color: #586070;
  line-height: 1.5;
}
.settings .center {
  text-align: center;
}
.keys {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: center;
}
.keys span {
  font-weight: 700;
  padding: 1px 6px;
  background: #e0e4ec;
  border: 1px solid #9098b0;
  border-radius: 3px;
  justify-self: start;
}
.keys small {
  color: #586070;
}
.about-logo {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: #c85848;
  margin: 4px 0;
}
.dialog .dialog-actions {
  position: sticky;
  bottom: -16px;
  margin: 12px -20px -16px;
  padding: 8px 20px 12px;
  background: linear-gradient(#f0f0e000, #f0f0e0 30%);
}
@media (max-height:470px) {
  .dialog .dialog-actions {
    bottom: -12px;
    margin: 8px -16px -12px;
    padding: 6px 16px 10px;
  }
}
.dialog .credits {
  max-height: calc(100vh - 190px);
  max-height: calc(100dvh - 190px);
  overflow: auto;
  padding-right: 6px;
}
body.in-battle.battle-intro .hud-controls {
  visibility: hidden !important;
}
.crash-detail {
  max-height: 120px;
  overflow: auto;
  white-space: pre-wrap;
  font-size: 10px;
  line-height: 1.35;
  background: #eceadc;
  padding: 6px;
  margin: 6px 0 0;
  color: #404858;
}
.seg {
  display: flex;
  gap: 4px;
  flex: none;
}
.seg-btn {
  min-width: 48px;
  padding: 4px 10px !important;
  min-height: 0 !important;
}
.seg-btn.on {
  background: #f0d898 !important;
  color: #584838;
}
.intro-host {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  background: #000;
}
.gba-screen {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--safe-top,0px) var(--safe-right,0px) var(--safe-bottom,0px) var(--safe-left,0px);
  overflow: hidden;
}
.gba {
  --u:3px;
  position: relative;
  overflow: hidden;
  background: #000;
  image-rendering: pixelated;
  font-family: var(--font);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.gba.fade-out {
  transition: opacity .5s;
  opacity: 0;
}
.gba-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.gba-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.gba-pic {
  position: absolute;
  width: calc(var(--u)*64);
  height: calc(var(--u)*64);
  image-rendering: pixelated;
  transition: opacity .4s, transform .4s;
}
.gba-pic.fade-in {
  animation: gba-fade .5s both;
}
.gba-pic.fade-out {
  opacity: 0;
}
.gba-pic.pop-in {
  animation: gba-pop .45s both;
}
.gba-pic.slide {
  animation: gba-slide .25s both;
}
.gba-pic.shrink {
  transform: scale(.3) translateY(calc(var(--u)*-40));
  opacity: 0;
  transition: transform .7s, opacity .7s;
}
@keyframes gba-fade {
  from {
    opacity: 0;
  }
}
@keyframes gba-pop {
  0% {
    transform: scale(0);
    filter: brightness(4);
  }
  60% {
    transform: scale(1.1);
    filter: brightness(2);
  }
  100% {
    transform: none;
    filter: none;
  }
}
@keyframes gba-slide {
  from {
    transform: translateX(calc(var(--u)*24));
    opacity: .2;
  }
}
.gba-window {
  position: absolute;
  background: #f8f8f8;
  border: calc(var(--u)*8) solid transparent;
  border-image: url(/_expedition/assets/emerald/intro/window.png) 8 fill stretch;
  border-image-width: calc(var(--u)*8);
  box-sizing: border-box;
  color: #303030;
}
.gba-msg {
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--u)*48);
  padding: calc(var(--u)*2) calc(var(--u)*6);
}
.gba-text {
  margin: 0;
  font-size: calc(var(--u)*10.5);
  line-height: 1.45;
  color: #404040;
  text-shadow: calc(var(--u)*.7) calc(var(--u)*.7) 0 #d0d0c8;
  white-space: pre-wrap;
}
.gba-arrow {
  position: absolute;
  right: calc(var(--u)*6);
  bottom: calc(var(--u)*3);
  width: 0;
  height: 0;
  border: calc(var(--u)*3.5) solid transparent;
  border-top-color: #e05040;
  border-bottom: 0;
  animation: gba-bob .6s steps(2) infinite;
}
@keyframes gba-bob {
  50% {
    transform: translateY(calc(var(--u)*2));
  }
}
.gba-choice {
  display: flex;
  flex-direction: column;
  padding: calc(var(--u)*1) calc(var(--u)*2);
  min-width: calc(var(--u)*56);
  z-index: 3;
}
.gba-opt {
  all: unset;
  cursor: pointer;
  position: relative;
  padding: calc(var(--u)*2) calc(var(--u)*4) calc(var(--u)*2) calc(var(--u)*11);
  font-size: calc(var(--u)*10.5);
  color: #404040;
  text-shadow: calc(var(--u)*.7) calc(var(--u)*.7) 0 #d0d0c8;
  white-space: nowrap;
}
.gba-opt.on:before {
  content: "";
  position: absolute;
  left: calc(var(--u)*2);
  top: 50%;
  margin-top: calc(var(--u)*-4);
  border: calc(var(--u)*4) solid transparent;
  border-left: calc(var(--u)*5) solid #404040;
  border-right: 0;
}
.gba-naming {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  display: flex;
  gap: calc(var(--u)*4);
  align-items: flex-start;
  padding: calc(var(--u)*6);
  box-sizing: border-box;
  background:
    repeating-linear-gradient(
      0deg,
      #9cd0f8 0,
      #9cd0f8 calc(var(--u)*2),
      #b4e0ff calc(var(--u)*2),
      #b4e0ff calc(var(--u)*4));
}
.gba-naming .gba-window {
  position: relative;
}
.naming-who {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u)*2);
  padding: calc(var(--u)*1);
}
.naming-pic {
  width: calc(var(--u)*56);
  height: calc(var(--u)*56);
  image-rendering: pixelated;
}
.naming-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u)*4);
  padding: calc(var(--u)*2) calc(var(--u)*5);
}
.naming-box b {
  font-size: calc(var(--u)*10);
  color: #404040;
}
.gba-name-input {
  font: inherit;
  font-size: calc(var(--u)*12);
  color: #303030;
  background: #fff;
  border: 0;
  border-bottom: calc(var(--u)*1.5) dashed #6878a8;
  padding: calc(var(--u)*1) calc(var(--u)*2);
  outline: none;
  user-select: text;
  -webkit-user-select: text;
  width: 100%;
  box-sizing: border-box;
}
.gba-ok,
.gba-back {
  all: unset;
  cursor: pointer;
  font-size: calc(var(--u)*9);
  padding: calc(var(--u)*1.5) calc(var(--u)*5);
  background: #e8f0f8;
  border: calc(var(--u)*1) solid #8090b8;
  color: #384068;
}
.gba-back {
  background: #e8f0f8;
  border: calc(var(--u)*1) solid #8090b8;
  color: #384068;
  font-size: calc(var(--u)*10);
  padding: calc(var(--u)*2) calc(var(--u)*8);
}
.gba-ok:disabled {
  background: #c8c8c8;
  border-color: #989898;
  cursor: default;
}
.naming-actions {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
}
.naming-count {
  align-self: flex-end;
  font-size: calc(var(--u)*7);
  color: #8890a0;
}
.naming-box {
  min-height: calc(var(--u)*84);
}
.gba-choice-ok {
  margin: calc(var(--u)*3) calc(var(--u)*2) calc(var(--u)*1);
  text-align: center;
}
.gba-ok {
  align-self: flex-end;
  background: #f0a040;
  border-color: #a05818;
  color: #fff;
  font-size: calc(var(--u)*10);
  padding: calc(var(--u)*2) calc(var(--u)*10);
}
.gba-ball {
  all: unset;
  position: absolute;
  width: calc(var(--u)*32);
  height: calc(var(--u)*32);
  cursor: pointer;
  background: url(/_expedition/assets/emerald/intro/starter_balls.png) 0 0/calc(var(--u)*32) calc(var(--u)*128) no-repeat;
  image-rendering: pixelated;
}
.gba-ball.on {
  animation: gba-wobble .6s steps(1) infinite;
}
@keyframes gba-wobble {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: 0 calc(var(--u)*-32);
  }
  50% {
    background-position: 0 0;
  }
  75% {
    background-position: 0 calc(var(--u)*-64);
  }
}
.gba-hand {
  position: absolute;
  width: calc(var(--u)*32);
  height: calc(var(--u)*32);
  margin-left: calc(var(--u)*-8);
  background: url(/_expedition/assets/emerald/intro/starter_balls.png) 0 calc(var(--u)*-96)/calc(var(--u)*32) calc(var(--u)*128) no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
  transition: left .12s, top .12s;
  animation: gba-bob .5s steps(2) infinite;
}
.gba-circle {
  position: absolute;
  width: calc(var(--u)*64);
  height: calc(var(--u)*64);
  background: url(/_expedition/assets/emerald/intro/starter_circle.png) 0 0/100% 100%;
  image-rendering: pixelated;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: gba-pop .35s both;
  z-index: 2;
}
.gba-mon,
.gba-buddy {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.gba-mon .mon-sprite,
.gba-buddy .mon-sprite {
  zoom: calc(var(--zoom,1));
}
.gba-buddy {
  position: absolute;
  width: calc(var(--u)*64);
  height: calc(var(--u)*64);
  animation: gba-pop .45s both;
}
.gba-info {
  bottom: calc(var(--u)*50);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u)*2);
  padding: calc(var(--u)*1) calc(var(--u)*4);
  font-size: calc(var(--u)*10);
  z-index: 3;
}
.gba-info.left {
  left: calc(var(--u)*4);
}
.gba-info.right {
  right: calc(var(--u)*4);
}
.gba-info .type-row {
  display: flex;
  gap: 4px;
}
.gba-gens {
  right: calc(var(--u)*4);
  top: calc(var(--u)*4);
  display: flex;
  gap: calc(var(--u)*1);
  padding: calc(var(--u)*0.5) calc(var(--u)*2);
  z-index: 3;
}
.gba-gen {
  all: unset;
  cursor: pointer;
  font-size: calc(var(--u)*8);
  width: calc(var(--u)*10);
  text-align: center;
  padding: calc(var(--u)*1) 0;
  color: #606060;
}
.gba-gen.on {
  background: #f0a040;
  color: #fff;
}
.sp-screen {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px 10px 12px;
  background-color: #203820;
  background-size: cover;
  background-position: center;
  image-rendering: pixelated;
  animation: sp-in .3s ease-out;
}
@supports (width: min(1px, 2px)) {
  .sp-screen {
    padding: max(10px, var(--safe-top,0px)) max(12px, var(--safe-right,0px)) max(10px, var(--safe-bottom,0px)) max(12px, var(--safe-left,0px));
  }
}
.sp-screen::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #18283cb8;
}
.sp-screen.sp-leave {
  opacity: 0;
  transition: opacity .25s;
}
@keyframes sp-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.sp-panel {
  position: relative;
  width: 100%;
  width: min(1080px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px;
  border: 8px solid transparent;
  border-image: var(--frame) 8 stretch;
  background-clip: padding-box;
  background-color: #f8f8e8;
  background-image:
    repeating-linear-gradient(
      0deg,
      #f8f8e8 0,
      #f8f8e8 4px,
      #f0f0e0 4px,
      #f0f0e0 6px);
  box-shadow: 0 4px 0 #30385080;
  color: var(--ink);
  font-family: var(--font);
  overflow: hidden;
}
.sp-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.sp-head .eyebrow {
  margin: 0;
}
.sp-head h1 {
  margin: 2px 0 0;
  font-size: 26px;
}
.sp-lead {
  margin: 0;
  max-width: 46%;
  font-size: 13px;
  color: var(--muted);
  text-align: right;
  line-height: 1.45;
}
.sp-gens {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 6px;
}
.sp-gen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-height: 0 !important;
  padding: 4px 2px !important;
  background: #e0e8e8;
  color: var(--ink);
  cursor: pointer;
  line-height: 1.15;
}
.sp-gen small {
  font-size: 10px;
  color: var(--muted);
}
.sp-gen b {
  font-size: 14px;
  white-space: nowrap;
}
.sp-gen.on {
  background: #f0d890;
  box-shadow: inset 0 -4px 0 #c05048, 0 4px 0 #30385080;
}
.sp-gen.on small {
  color: #805830;
}
.sp-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(220px, 1fr);
  gap: 12px;
}
.sp-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
}
.sp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-height: 0 !important;
  padding: 10px 6px 8px !important;
  background: #e8f0e0;
  cursor: pointer;
  overflow: hidden;
}
.sp-card .sp-pic {
  flex: 1;
  min-height: 80px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(
      ellipse 46% 16% at 50% 84%,
      #88c070 0 96%,
      transparent 100%);
}
.sp-card .sp-pic .mon-sprite {
  zoom: 1.35;
}
.sp-card .sp-ball {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background:
    linear-gradient(
      #e85848 0,
      #e85848 45%,
      #303850 45%,
      #303850 55%,
      #f8f8f8 55%);
  box-shadow: 0 0 0 2px #303850;
  opacity: .7;
}
.sp-card.on {
  background: #fff4d0;
  box-shadow: inset 0 0 0 3px #c05048, 0 4px 0 #30385080;
}
.sp-card.on .sp-ball {
  opacity: 1;
}
.sp-card:not(.on):hover {
  background: #f0f8e8;
}
.sp-name {
  font-size: 16px;
}
.sp-card .type-row {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
}
.sp-detail {
  min-height: 0;
  overflow: auto;
  padding: 10px 12px;
  background: #f8f8f0;
  border: 2px solid #606880;
  box-shadow: inset -2px -2px 0 #d0d0c8;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp-detail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sp-detail-head b {
  font-size: 18px;
}
.sp-ability {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sp-ability b {
  font-size: 13px;
  color: #b05048;
}
.sp-ability small {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}
.sp-stats {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sp-stat {
  display: grid;
  grid-template-columns: 34px 30px 1fr;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.sp-stat span {
  color: var(--muted);
}
.sp-stat b {
  text-align: right;
}
.sp-bar {
  display: block;
  height: 6px;
  background: #d0d8e0;
}
.sp-bar > i {
  display: block;
  height: 100%;
  background: #78b080;
}
.sp-stat.total {
  grid-template-columns: 34px 30px;
  border-top: 1px dashed #9098b0;
  padding-top: 3px;
}
.sp-empty {
  margin: auto;
  text-align: center;
  color: var(--muted);
}
.sp-empty b {
  color: var(--ink);
  font-size: 15px;
}
.sp-empty p {
  margin: 6px 0 0;
  font-size: 12px;
}
.sp-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.sp-ask {
  margin: 0;
  flex: 1;
  font-size: 14px;
}
.sp-ok {
  min-height: 0 !important;
  padding: 8px 22px !important;
  font-size: 15px;
}
.sp-ok:disabled {
  opacity: .5;
}
@media (max-height:470px) and (orientation:landscape) {
  .sp-panel {
    padding: 8px 12px;
    gap: 6px;
  }
  .sp-head h1 {
    font-size: 19px;
  }
  .sp-head .eyebrow {
    display: none;
  }
  .sp-lead {
    font-size: 11px;
  }
  .sp-gen {
    padding: 2px 1px !important;
  }
  .sp-gen small {
    font-size: 9px;
  }
  .sp-gen b {
    font-size: 12px;
  }
  .sp-card {
    padding: 6px 4px 5px !important;
  }
  .sp-card .sp-pic .mon-sprite {
    zoom: 1;
  }
  .sp-card .sp-pic {
    min-height: 50px;
  }
  .sp-name {
    font-size: 14px;
  }
  .sp-detail {
    padding: 6px 8px;
    gap: 3px;
  }
  .sp-detail-head b {
    font-size: 15px;
  }
  .sp-stat {
    font-size: 11px;
  }
  .sp-ability small {
    display: none;
  }
  .sp-ask {
    font-size: 12px;
  }
  .sp-ok {
    padding: 5px 16px !important;
    font-size: 13px;
  }
}
@media (max-height:380px) and (orientation:landscape) {
  .sp-lead {
    display: none;
  }
  .sp-stat {
    font-size: 10px;
    gap: 4px;
  }
  .sp-bar {
    height: 5px;
  }
}
@media (orientation:portrait) {
  .sp-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .sp-lead {
    max-width: none;
    text-align: left;
  }
  .sp-gens {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .sp-body {
    grid-template-columns: 1fr;
  }
  .sp-panel {
    overflow: auto;
  }
}
.sp-card .sp-pic {
  align-items: flex-end;
  padding-bottom: 4%;
  background:
    radial-gradient(
      ellipse 30% 10% at 50% 86%,
      #88c070 0 96%,
      transparent 100%);
}
.sp-card .sp-pic .mon-sprite {
  zoom: 1.9;
}
@media (max-height:470px) and (orientation:landscape) {
  .sp-card .sp-pic .mon-sprite {
    zoom: 1.35;
  }
}
@media (max-height:380px) and (orientation:landscape) {
  .sp-card .sp-pic .mon-sprite {
    zoom: 1.15;
  }
}
.sp-card .sp-pic {
  background:
    radial-gradient(
      ellipse 30% 9% at 50% 78%,
      #88c070 0 96%,
      transparent 100%);
}
@media (orientation:portrait) {
  .sp-card .sp-pic {
    min-height: 96px;
  }
  .sp-card .sp-pic .mon-sprite {
    zoom: 1.05;
  }
  .sp-gen small {
    font-size: 9px;
    white-space: nowrap;
  }
  .sp-name {
    font-size: 14px;
  }
}
.sp-panel {
  height: 100%;
}
.sp-body {
  grid-template-rows: minmax(0, 1fr);
}
.sp-cards {
  grid-template-rows: minmax(0, 1fr);
}
.pack-screen {
  position: fixed;
  left: var(--safe-left,0);
  top: var(--safe-top,0);
  right: var(--safe-right,0);
  bottom: var(--safe-bottom,0);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: #081b30c9;
}
.pack-window {
  width: 100%;
  width: min(1180px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 8px solid transparent;
  border-image: var(--frame) 8 stretch;
  background: #f0f0e0;
  background-clip: padding-box;
  box-shadow: 0 4px 0 #30385080;
  padding: 8px 12px;
  overflow: hidden;
}
.pack-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pack-top h2 {
  margin: 0;
  font-size: 20px;
}
.pack-top .eyebrow {
  margin: 0;
}
.pack-top > div:first-child {
  flex: 1;
}
.pack-top .set-tabs {
  flex: none;
}
.pack-main {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr);
  gap: 10px;
}
.pack-grids {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.inv-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.inv-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.inv-head b {
  font-size: 13px;
  color: #404858;
}
.inv-head small {
  font-size: 11px;
  color: #687080;
}
.inv-grid {
  position: relative;
  background: #303850;
  border: 3px solid #303850;
  box-shadow: 0 0 0 2px #f8f8f0, 2px 3px 0 3px #30385060;
  touch-action: none;
}
.inv-cell {
  position: absolute;
  box-sizing: border-box;
  background: #c8d0d8;
  border: 1px solid #9098b0;
  box-shadow: inset 2px 2px 0 #e0e8f0;
}
.inv-cell.locked {
  background:
    repeating-linear-gradient(
      45deg,
      #505870 0,
      #505870 3px,
      #465068 3px,
      #465068 6px);
  border-color: #404860;
  box-shadow: none;
}
.inv-cell.ok {
  background: #a8e0a0;
  border-color: #58a060;
}
.inv-cell.bad {
  background: #f0a8a0;
  border-color: #c05048;
}
.inv-secure .inv-cell:not(.locked) {
  background: #d8d0b0;
  box-shadow: inset 2px 2px 0 #f0e8c8;
}
.inv-locked {
  opacity: .7;
}
.inv-item {
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  z-index: 1;
}
.inv-part {
  position: absolute;
  box-sizing: border-box;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  background: #f8f8f0;
  border: 2px solid #606880;
  box-shadow: inset -2px -2px 0 #d0d0c8;
}
.inv-item.big .inv-part {
  background: #f8f0d8;
  box-shadow: inset -2px -2px 0 #e0d0a8;
}
.inv-part.jt {
  border-top: 0;
}
.inv-part.jb {
  border-bottom: 0;
  box-shadow: inset -2px 0 0 #d0d0c8;
}
.inv-part.jl {
  border-left: 0;
}
.inv-part.jr {
  border-right: 0;
  box-shadow: inset 0 -2px 0 #d0d0c8;
}
.inv-part.jb.jr {
  box-shadow: none;
}
.inv-item.big .inv-part.jb {
  box-shadow: inset -2px 0 0 #e0d0a8;
}
.inv-item.big .inv-part.jr {
  box-shadow: inset 0 -2px 0 #e0d0a8;
}
.inv-item.big .inv-part.jb.jr {
  box-shadow: none;
}
.inv-icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}
.inv-icon > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}
.inv-item.found .inv-part:first-child::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 6px;
  height: 6px;
  background: #f0c040;
  box-shadow: 0 0 0 1px #806020;
}
.inv-item.selected .inv-part {
  border-color: #c05048;
  background: #fff0e0;
}
.inv-item.dragging {
  opacity: .35;
}
.inv-item.free {
  position: relative;
  flex: none;
}
.inv-ghost {
  position: fixed !important;
  left: 0;
  top: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: .88;
}
.inv-ghost .inv-part {
  box-shadow: 0 0 0 1px #f0c040, 3px 4px 0 #30385040;
}
.inv-ghost .inv-part {
  pointer-events: none;
}
.inv-caught {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.inv-caught img {
  width: 70%;
  image-rendering: pixelated;
}
.inv-caught .inv-mon {
  position: absolute;
  right: -2px;
  bottom: -2px;
  zoom: .32;
}
.pack-right {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
}
.pack-side {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  background: #e0e8e0;
  border: 2px dashed #9098b0;
  overflow: auto;
}
.pack-side.hover {
  background: #f0e0b0;
  border-color: #c09038;
}
.stash-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stash-group h4 {
  margin: 0 0 3px;
  font-size: 12px;
  color: #b05048;
}
.stash-items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.stash-item {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f8f0;
  border: 2px solid #606880;
  box-shadow: inset -2px -2px 0 #d0d0c8;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.stash-item img {
  image-rendering: pixelated;
  pointer-events: none;
}
.stash-item b {
  position: absolute;
  right: 1px;
  bottom: -1px;
  font-size: 10px;
  color: #303850;
  text-shadow: 1px 1px 0 #fff;
}
.stash-item.selected {
  border-color: #c05048;
}
.ground-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
  min-height: 48px;
}
.pack-info {
  flex: none;
  padding: 6px 8px;
  background: #f8f8f0;
  border: 2px solid #606880;
  box-shadow: inset -2px -2px 0 #d0d0c8;
  font-size: 12px;
}
.pack-info.empty small {
  color: #687080;
}
.pack-info-head {
  display: flex;
  gap: 8px;
  align-items: center;
}
.pack-info-head img {
  image-rendering: pixelated;
}
.pack-info-head strong {
  display: block;
  font-size: 14px;
}
.pack-info-head small {
  color: #687080;
}
.pack-info p {
  margin: 4px 0;
  color: #505868;
  line-height: 1.4;
}
.pack-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.pack-acts button {
  padding: 4px 10px !important;
  min-height: 0 !important;
  font-size: 12px;
}
.pack-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: 13px;
}
.pack-summary .pack-used {
  margin-right: 4px;
  color: #687080;
}
.pack-summary span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.pack-summary img {
  width: 20px;
  height: 20px;
  image-rendering: pixelated;
}
.expand-preview {
  display: grid;
  grid-template-columns: repeat(var(--cols), 10px);
  gap: 1px;
  padding: 3px;
  background: #303850;
  flex: none;
}
.expand-preview i {
  width: 10px;
  height: 10px;
  background: #505870;
}
.expand-preview i.on {
  background: #c8d0d8;
}
.expand-preview.secure i.on {
  background: #d8d0b0;
}
@media (max-height:470px) {
  .pack-window {
    padding: 4px 8px;
  }
  .pack-top h2 {
    font-size: 16px;
  }
  .pack-top .eyebrow {
    display: none;
  }
}
@media (orientation:portrait) {
  .pack-main {
    grid-template-columns: 1fr;
  }
  .pack-window {
    overflow: auto;
  }
}
@media (orientation:landscape) {
  .pack-main {
    grid-template-columns: max-content minmax(190px, 1fr);
  }
  .pack-grids {
    flex-wrap: nowrap;
  }
}
@media (max-height:470px) {
  .pack-info.empty {
    display: none;
  }
  .pack-side .inv-head small {
    display: none;
  }
}
.inv-bag {
  position: relative;
  flex: none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
.inv-bag .inv-grid {
  position: absolute;
  background: none;
  border: 0;
  box-shadow: none;
}
.inv-bag .inv-cell {
  background: #fff8e83d;
  border: 1px solid #40201866;
  box-shadow: inset 1px 1px 0 #ffffff30;
}
.inv-bag .inv-cell.locked {
  background:
    repeating-linear-gradient(
      45deg,
      #2018186b 0,
      #2018186b 3px,
      #30202052 3px,
      #30202052 6px);
  border-color: #20101070;
}
.inv-bag-secure .inv-cell:not(.locked) {
  background: #ffffff40;
  border: 1px solid #e8f4ffb0;
  box-shadow: inset 1px 1px 0 #ffffff50;
}
.inv-bag-secure .inv-cell.locked {
  background:
    repeating-linear-gradient(
      45deg,
      #001030a8 0,
      #001030a8 3px,
      #00183890 3px,
      #00183890 6px);
  border-color: #c8e0ff60;
}
.inv-bag .inv-cell.ok {
  background: #a8e0a0d0;
  border-color: #58a060;
}
.inv-bag .inv-cell.bad {
  background: #f0a8a0d0;
  border-color: #c05048;
}
.inv-head.on-bag {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 2px 8px;
  background: #f8f0d8;
  border: 2px solid #804828;
  box-shadow: inset -2px -2px 0 #e0c898, 2px 2px 0 #40201860;
  white-space: nowrap;
  pointer-events: none;
}
.inv-head.on-bag b {
  font-size: 12px;
  color: #503020;
  line-height: 1.2;
}
.inv-head.on-bag small {
  font-size: 10px;
  color: #806048;
  line-height: 1.2;
}
.inv-locked .inv-bag {
  opacity: .8;
}
.inv-locked {
  opacity: 1;
}
.ground-items .inv-item {
  position: relative;
}
.pack-main.split .pack-right > .inv-box {
  flex: none;
  align-items: center;
}
.pack-contents {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 6px;
  margin-top: 4px;
  font-size: 12px;
}
.pack-chip {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 0 4px 0 1px;
  background: #f8f8f0;
  border: 1px solid #9098b0;
}
.pack-chip img {
  width: 20px;
  height: 20px;
  image-rendering: pixelated;
}
.pack-summary .carry-title {
  margin: 0;
}
.pack-summary > button {
  margin-left: auto;
}
@media (max-height:470px) and (orientation:landscape) {
  .briefing .pack-summary {
    gap: 6px;
    margin-top: 4px;
  }
  .briefing .pack-summary > button {
    padding: 3px 10px !important;
    min-height: 0 !important;
  }
  .town-mode .briefing > .notice {
    display: none;
  }
  .briefing > .notice {
    font-size: 11px;
    line-height: 1.4;
    padding: 4px 8px;
    margin: 4px 0;
  }
  .briefing > .primary.large {
    min-height: 0 !important;
    padding: 6px 14px !important;
    margin-top: 6px;
  }
  .pack-contents {
    margin-top: 2px;
  }
  .pack-chip img {
    width: 18px;
    height: 18px;
  }
}
@media (max-height:470px) and (orientation:landscape) {
  .briefing .briefing-head .eyebrow {
    display: none;
  }
  .briefing .briefing-head h2 {
    font-size: 20px;
    margin: 0;
  }
  .briefing .pack-summary > button {
    font-size: 12px;
  }
  .briefing .pack-summary > button .item-btn img {
    width: 16px;
    height: 16px;
  }
  .briefing > .difficulty-notice,
  .briefing > .stage-requirement {
    margin: 4px 0;
  }
}
@media (max-height:470px) and (orientation:landscape) {
  .briefing > .eyebrow {
    display: none;
  }
  .briefing > h2 {
    font-size: 20px;
    margin: 0 0 4px;
  }
  .briefing > .difficulty-notice {
    font-size: 12px;
    padding: 4px 8px;
  }
}
body.inv-dragging,
body.inv-dragging * {
  touch-action: none !important;
}
.pack-side.ground {
  align-items: stretch;
}
.ground-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px;
}
.ground-stage .inv-item.free {
  position: relative;
}
.ground-name {
  font-size: 13px;
  color: #404858;
}
.ground-turn {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.ground-turn button {
  min-height: 0 !important;
  padding: 4px 10px !important;
  font-size: 12px;
  border-width: 4px !important;
}
.ground-pick {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  padding-top: 4px;
  border-top: 1px dashed #9098b0;
}
.ground-pick-item {
  width: 38px;
  height: 38px;
  min-height: 0 !important;
  padding: 0 !important;
  border-width: 4px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f8f0 !important;
}
.ground-pick-item img {
  image-rendering: pixelated;
}
.ground-pick-item.on {
  background: #fff0c8 !important;
  box-shadow: 0 0 0 2px #c05048 !important;
}
.ground-empty {
  margin: auto;
  font-size: 12px;
  color: #687080;
  text-align: center;
}
@media (max-height:470px) {
  .ground-turn button {
    padding: 2px 8px !important;
    font-size: 11px;
  }
  .ground-name {
    font-size: 12px;
  }
  .ground-pick-item {
    width: 32px;
    height: 32px;
  }
  .ground-pick-item img {
    width: 22px;
    height: 22px;
  }
}
.ground-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  align-self: center;
  width: 100%;
  width: min(100%, 200px);
  flex: none;
}
.ground-cell {
  position: relative;
  aspect-ratio: 1;
  --ar: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  gap: 1px;
  padding: 2px;
  background: #f0f4e8;
  border: 2px solid #9098b0;
  box-sizing: border-box;
}
.ground-cell.me {
  background: #e8e0f8;
  border-color: #8070b0;
}
.ground-cell.blocked {
  background:
    repeating-linear-gradient(
      45deg,
      #c8ccd4 0,
      #c8ccd4 4px,
      #b8bcc8 4px,
      #b8bcc8 8px);
  border-color: #a0a4b0;
}
.ground-cell.hover {
  background: #f8e8b0;
  border-color: #c09038;
}
.ground-me {
  position: absolute;
  left: 2px;
  top: 1px;
  font-size: 10px;
  color: #6050a0;
  font-weight: 700;
}
.ground-chip {
  position: relative !important;
  pointer-events: auto !important;
  width: 24px;
  height: 24px;
  flex: none;
  cursor: grab;
  touch-action: none;
  border: 1px solid transparent;
}
.ground-chip .inv-icon {
  position: static;
  width: 22px;
  height: 22px;
  display: flex;
}
.ground-chip.selected {
  border-color: #c05048;
  background: #fff0e0;
}
.ground-chip.found::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 4px;
  background: #f0c040;
}
.ground-more {
  font-size: 10px;
  color: #505868;
}
@media (max-height:470px) {
  .ground-grid {
    width: 100%;
    width: min(100%, 138px);
    gap: 2px;
  }
  .ground-chip {
    width: 18px;
    height: 18px;
  }
  .ground-chip .inv-icon {
    width: 17px;
    height: 17px;
  }
  .ground-cell {
    padding: 1px;
    border-width: 1px;
  }
}
.pack-top-acts {
  display: flex;
  gap: 6px;
  align-items: center;
}
.shop-stash {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  background: #e0e8e0;
  border: 2px dashed #9098b0;
  overflow: auto;
}
.shop-stash.hover {
  background: #f0e0b0;
  border-color: #c09038;
}
.shop-stash .stash-list {
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 4px 10px;
}
.shop-stash .stash-group h4 {
  margin-bottom: 1px;
}
.pack-run .pack-side.ground {
  flex: none;
  overflow: visible;
  gap: 4px;
}
.pack-run .pack-info {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.ground-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}
.ground-grid {
  display: grid !important;
  grid-template-columns: repeat(3, var(--gc)) !important;
  grid-auto-rows: var(--gc);
  width: auto !important;
  gap: 0 !important;
  flex: none;
  background-color: #78a060;
  background-size: 100% 100%;
  image-rendering: pixelated;
  border: 3px solid #303850;
  box-shadow: 0 0 0 2px #f8f8f0, 2px 3px 0 3px #30385060;
}
.ground-cell {
  width: var(--gc);
  height: var(--gc);
  aspect-ratio: auto !important;
  padding: 3px !important;
  gap: 2px !important;
  align-content: center;
  background: #ffffff26 !important;
  border: 1px solid #ffffffa0 !important;
  box-shadow: inset 1px 1px 0 #ffffff40;
  border-radius: 0;
}
.ground-cell.me {
  background: #fff8e81a !important;
  align-content: flex-start;
}
.ground-cell.blocked {
  background:
    repeating-linear-gradient(
      45deg,
      #2018186b 0,
      #2018186b 3px,
      #30202052 3px,
      #30202052 6px) !important;
  border-color: #20101070 !important;
}
.ground-cell.hover {
  background: #f8e8b0b0 !important;
  border-color: #c09038 !important;
}
.ground-player {
  position: absolute;
  left: 50%;
  bottom: 1px;
  transform: translateX(-50%);
  width: calc(var(--gc)*.44);
  height: calc(var(--gc)*.88);
  background-size: 900% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
  filter: drop-shadow(0 1px 0 #00000055);
}
.ground-me {
  display: none;
}
.ground-chip {
  position: relative !important;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f8f0;
  border: 2px solid #606880 !important;
  box-shadow: inset -1px -1px 0 #d0d0c8;
  box-sizing: border-box;
}
.ground-chip .inv-icon {
  position: static;
  display: flex;
  width: auto;
  height: auto;
}
.ground-chip.selected {
  border-color: #c05048 !important;
  background: #fff0e0;
}
.ground-more {
  position: absolute;
  right: 2px;
  bottom: 1px;
  font-size: 10px;
  color: #fff;
  text-shadow: 1px 1px 0 #303850;
}
.ground-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}
.ground-detail .ground-stage {
  flex: none;
  padding: 0;
}
.ground-body > .ground-empty {
  flex: 1;
  margin: 0;
  font-size: 11px;
}
@media (max-height:470px) {
  .pack-side .inv-head {
    display: none;
  }
  .ground-turn button {
    padding: 2px 6px !important;
    font-size: 10px;
  }
}
.pack-run .pack-main.split .pack-right {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
  align-items: start;
}
.pack-run .pack-main.split .pack-right > :first-child {
  grid-column: 1;
  grid-row: 1;
}
.pack-run .pack-main.split .pack-right > .pack-side.ground {
  grid-column: 2;
  grid-row: 1;
}
.pack-run .pack-main.split .pack-right > .pack-info {
  grid-column: 1/-1;
  grid-row: 2;
  align-self: stretch;
}
.pack-run .pack-main.split .ground-body {
  flex-direction: column;
  gap: 4px;
}
.ground-cell.me {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: center;
}
.ground-cell.me .ground-player {
  left: 3px;
  transform: none;
}
.pack-main.run3 {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) minmax(220px, auto) !important;
  gap: 10px;
}
.pack-main.run3 .pack-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 0;
}
.pack-main.run3 .pack-mid > .pack-info {
  align-self: stretch;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.pack-main.run3 .pack-right > .pack-side.ground {
  flex: 1 1 auto;
  justify-content: flex-start;
}
.pack-main.run3 .ground-body {
  flex-direction: column;
  gap: 6px;
}
.pack-main.run3 .pack-mid {
  flex-direction: row;
  align-items: stretch;
}
.pack-main.run3 .pack-mid > .inv-box,
.pack-main.run3 .pack-mid > :first-child {
  flex: none;
  align-self: center;
}
.pack-main.run3 .pack-mid > .pack-info {
  flex: 1 1 0;
  min-width: 0;
}
.expand-preview.pickable {
  grid-template-columns: repeat(var(--cols), 22px);
  gap: 2px;
  padding: 4px;
}
.expand-preview.pickable i {
  width: 22px;
  height: 22px;
}
.expand-preview .pick-cell {
  width: 22px;
  height: 22px;
  min-height: 0;
  padding: 0 !important;
  border: 1px dashed #8890a8 !important;
  border-image: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background:
    repeating-linear-gradient(
      45deg,
      #505870 0,
      #505870 3px,
      #465068 3px,
      #465068 6px) !important;
  cursor: pointer;
}
.expand-preview .pick-cell:hover {
  background: #7080a0 !important;
}
.expand-preview .pick-cell.picked {
  background: #f0d060 !important;
  border: 2px solid #fff8d8 !important;
  box-shadow: 0 0 0 2px #c08020 !important;
  animation: pick-blink .8s steps(2) infinite;
}
@keyframes pick-blink {
  50% {
    background: #f8e8a0 !important;
  }
}
@media (max-height:470px) {
  .expand-preview.pickable {
    grid-template-columns: repeat(var(--cols), 17px);
  }
  .expand-preview.pickable i,
  .expand-preview .pick-cell {
    width: 17px;
    height: 17px;
  }
}
@media (max-width:700px) {
  .pack-main.run3 {
    grid-template-columns: max-content minmax(0, 1fr) minmax(180px, auto) !important;
    gap: 6px;
  }
  .pack-main.run3 .pack-mid .inv-head small {
    display: none;
  }
  .pack-main.run3 .pack-mid > .pack-info {
    min-width: 110px;
  }
}
.ground-cell.me .ground-player {
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 0;
  width: calc(var(--gc)*.47);
  height: calc(var(--gc)*.94);
}
.ground-cell.me {
  display: block !important;
}
.ground-cell.me .ground-chip {
  position: absolute !important;
  right: 1px;
  z-index: 2;
}
.ground-cell.me .ground-chip:nth-of-type(1) {
  top: 1px;
}
.ground-cell.me .ground-chip:nth-of-type(2) {
  bottom: 1px;
}
.ground-cell:not(.me) .ground-chip .inv-icon img,
.ground-chip .inv-icon img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.ground-chip .inv-icon {
  width: 100% !important;
  height: 100% !important;
  padding: 1px;
  box-sizing: border-box;
}
.ground-cell.me {
  overflow: visible;
}
.ground-cell.me .ground-player {
  width: calc(var(--gc)*.6);
  height: calc(var(--gc)*1.2);
  bottom: 1px;
}
.ground-cell.me .ground-player {
  width: calc(var(--gc)*.68);
  height: calc(var(--gc)*1.36);
}
.ground-cell.me .ground-chip {
  top: auto !important;
  bottom: 1px !important;
}
.ground-cell.me .ground-chip:nth-of-type(1) {
  right: 1px;
  left: auto;
}
.ground-cell.me .ground-chip:nth-of-type(2) {
  left: 1px;
  right: auto;
}
.inv-box {
  max-width: 100%;
}
.inv-box > .inv-head:not(.on-bag) {
  flex-wrap: wrap;
  row-gap: 0;
  justify-content: center;
  text-align: center;
}
.inv-box > .inv-head:not(.on-bag) small {
  flex: 0 0 100%;
  white-space: normal;
}
.pack-camp .pack-side .stash-list {
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 4px 12px;
}
.pack-info .pack-acts {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.pack-info .pack-acts button {
  min-height: 0 !important;
  padding: 3px 9px !important;
  font-size: 12px;
  border-width: 4px !important;
  white-space: nowrap;
}
@media (max-height:470px) {
  .pack-info .pack-acts button {
    padding: 2px 7px !important;
    font-size: 11px;
  }
  .pack-info p {
    margin: 3px 0;
  }
}
.inv-box > .inv-note {
  display: block;
  margin-top: 4px;
  text-align: center;
  font-size: 11px;
  line-height: 1.3;
  color: #687080;
}
@media (max-height:470px) {
  .inv-box > .inv-note {
    font-size: 10px;
    margin-top: 2px;
  }
}
.inv-item > .inv-uses {
  position: absolute;
  right: 2px;
  bottom: 1px;
  z-index: 2;
  font-size: 10px;
  line-height: 1;
  color: #fff;
  text-shadow:
    1px 0 0 #303850,
    -1px 0 0 #303850,
    0 1px 0 #303850,
    0 -1px 0 #303850;
  pointer-events: none;
}
.inv-item.half .inv-icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 50%;
  background: #e8e8e8b0;
  pointer-events: none;
}
.inv-item.empty .inv-icon img {
  filter: grayscale(1) brightness(1.2) opacity(.6);
}
.inv-item.empty > .inv-uses {
  color: #d8d8d8;
}
.ground-chip.half .inv-icon {
  position: relative;
}
.inv-item.charm .inv-part {
  background: #efe4ff;
  border-color: #7b4fd6;
  box-shadow: inset -2px -2px 0 #cfb8f2;
}
.inv-bag {
  position: relative;
}
.inv-sling-box {
  position: absolute;
  z-index: 2;
  padding: 3px 2px;
  border-radius: 6px;
  background: linear-gradient(#9a6a3a, #7a4e28);
  box-shadow:
    inset 0 0 0 2px #5a3618,
    inset 0 2px 0 #c08850,
    1px 2px 0 #0004;
}
.inv-sling-box.unbought {
  opacity: .45;
  filter: grayscale(.6);
}
.inv-sling-box.unbought .inv-cell {
  border-style: dotted;
}
.inv-sling-box .inv-grid {
  position: relative;
}
.inv-sling-box .inv-cell {
  background: #3a2412a0;
  border: 1px dashed #e8c89080;
  border-radius: 50%;
}
.inv-sling-box::before {
  content: "";
  display: block;
  width: 60%;
  height: 4px;
  margin: 0 auto 2px;
  border-radius: 3px;
  background: #5a3618;
}
.sling-row .sling-preview {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 3px;
  border-radius: 6px;
  background: linear-gradient(#9a6a3a, #7a4e28);
}
.sling-row .sling-preview i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px dashed #e8c890;
  background: #3a2412a0;
}
.sling-row .sling-preview i.on {
  background: #e8c89060;
}