@import url("v10.css");
@import url("/build-view.css");
@import url("/roam.css");
@import url("/cutout.css");
@import url("/harbor.css");
:root {
  color-scheme: dark;
  --bg: #12151c;
  --panel: #1c212a;
  --panel2: #222934;
  --edge: #333b46;
  --muted: #a0a8b5;
  --faint: #868f9f;
  --text: #f1f3ef;
  --lime: #bcf48e;
  --lime-ink: #1d2a1b;
  --mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --type: #b3f18c
}

* {
  box-sizing: border-box
}

html {
  min-height: 100%;
  scrollbar-gutter: stable
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--sans);
  background: radial-gradient(ellipse at 66% 3%, #20233166, transparent 45%), var(--bg);
  -webkit-font-smoothing: antialiased
}

a,
button {
  touch-action: manipulation
}

a {
  color: inherit;
  text-decoration: none
}

button,
input {
  font: inherit
}

button {
  cursor: pointer;
  color: inherit;
  background: none;
  border: 0
}

button:disabled {
  cursor: not-allowed;
  opacity: .43
}

a,
button,
input,
summary {
  outline-offset: 4px
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--lime)
}

button:enabled,
.btn,
a {
  transition: background .17s, color .17s, border-color .17s, transform .17s
}

button:enabled:active,
.btn:active {
  transform: translateY(1px)
}

button svg,
span svg,
a svg {
  flex: none
}

.shell {
  width: min(1272px, 92%);
  margin-inline: auto
}

.skip {
  position: fixed;
  left: -10000px;
  top: 8px;
  z-index: 99;
  background: var(--lime);
  color: var(--lime-ink);
  padding: 8px 15px
}

.skip:focus {
  left: 8px
}

h1,
h2,
h3,
p {
  margin: 0
}

button,
a {
  text-underline-offset: 3px
}

button svg,
a svg {
  vertical-align: middle
}

.bar {
  height: 78px;
  border-bottom: 1px solid #2b313d;
  background: #151920eF
}

.bar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px
}

.brand,
.header-right,
.desktop-nav,
.nav-link,
.save-indicator,
.guide-btn,
.text-btn,
.btn,
.section-label,
.eyebrow,
.pass-top,
.rank-tag,
.card-status,
.type,
.detail-line,
.detail-line>span,
.utility-row,
.photo-status,
.privacy-line,
.energy-label,
.battle-read,
.battle-read b,
.hero-weather,
.glass-label,
.card-name,
.card-link,
.label,
.evolution {
  display: inline-flex;
  align-items: center
}

.brand {
  gap: 12px;
  white-space: nowrap
}

.brand-icon {
  flex: none;
  overflow: hidden;
  width: 43px;
  height: 45px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 3px 0 #080b0e)
}

.brand-icon :is(svg, img) {
  width: 44px;
  height: 44px
}

.brand-head {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: auto
}

.brand b {
  display: block;
  font-size: 23px;
  font-weight: 850;
  letter-spacing: 2px;
  line-height: 1.12
}

.brand small {
  display: block;
  font: 700 8.5px/1.5 var(--mono);
  letter-spacing: 2.15px;
  color: var(--lime);
  margin-top: 4px
}

.desktop-nav {
  height: 100%;
  gap: 9px
}

.nav-link {
  justify-content: center;
  gap: 9px;
  color: #aab0ba;
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
  padding: 10px 17px;
  border: 1px solid transparent;
  border-radius: 8px
}

.nav-link:hover {
  color: #f8faf5;
  background: #20262f
}

.nav-link.active {
  background: #29332c;
  border-color: #42523e;
  color: #c2f59a
}

.header-right {
  gap: 15px
}

.save-indicator {
  gap: 7px;
  color: #b2bbbe;
  font-size: 12px
}

.status-dot,
.eyeline,
.section-label i,
.pass-stats em,
.hero-tags i,
.glass-label i,
.footer i,
.card-status i {
  display: inline-block
}

.status-dot,
.hero-tags .glass-label i,
.glass-label i {
  width: 6px;
  height: 6px;
  background: var(--lime);
  box-shadow: 0 0 7px #a8ff7655;
  border-radius: 50%
}

.status-dot.temporary {
  background: #ffbd74
}

.header-line {
  height: 18px;
  width: 1px;
  background: #373e48
}

.icon-button {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #36404b;
  border-radius: 8px;
  color: #bdc5cd;
  background: #20252e
}

.icon-button:hover,
.guide-btn:hover {
  border-color: #6c7d78;
  color: #e2f6d8;
  background: #2a3238
}

.mobile-nav {
  display: none
}

.loading {
  padding: 48px;
  color: var(--muted)
}

main {
  padding: 35px 0 0;
  min-height: calc(100dvh - 185px)
}

main:focus {
  outline: none
}

.intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 23px
}

.eyebrow,
.section-label,
.region-code,
.pass-code,
.tiny,
.fighter-label,
.card-number,
.hero-pager,
.glass-label,
.card-status i,
.field-scene>.glass-label {
  font-family: var(--mono)
}

.eyebrow,
.section-label {
  gap: 9px;
  color: var(--lime);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.85px;
  line-height: 1.5
}

.eyeline {
  width: 20px;
  height: 3px;
  background: var(--lime);
  box-shadow: 6px -3px 0 -1px #87b66a
}

.intro h1 {
  font-size: clamp(31px, 3.35vw, 48px);
  line-height: 1.22;
  font-weight: 850;
  letter-spacing: .8px;
  margin: 7px 0 7px
}

.intro p {
  font-size: 14px;
  line-height: 1.65;
  color: #abb3bf;
  letter-spacing: .24px
}

.guide-btn {
  color: #c1c8d2;
  border: 1px solid #39414e;
  background: #1b2028;
  border-radius: 7px;
  padding: 9px 12px;
  gap: 7px;
  line-height: 1.4;
  font-weight: 550;
  font-size: 12px;
  white-space: nowrap
}

.guide-btn>svg:last-child {
  margin-left: 3px;
  color: #8b98a6
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.29fr) minmax(292px, 1fr);
  gap: 18px;
  align-items: stretch
}

.hero,
.passport,
.spec-card,
.gym-card,
.trail-panel,
.empty,
.resume,
.match-guide {
  border: 1px solid var(--edge);
  border-radius: 13px;
  overflow: hidden
}

.hero {
  isolation: isolate;
  position: relative;
  min-height: 332px;
  background: #28243b;
  box-shadow: 0 12px 38px #080b111c
}

.hero-img,
.hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1
}

.hero-img {
  object-fit: cover;
  object-position: 68% 50%
}

.hero-shade {
  background: linear-gradient(90deg, #0d102b75 0%, #1411283d 39%, transparent 68%), linear-gradient(0deg, #101222d9 0%, #17122d3d 34%, transparent 66%)
}

.hero-tags {
  position: absolute;
  top: 19px;
  left: 22px;
  right: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px
}

.glass-label,
.hero-weather {
  gap: 7px;
  border: 1px solid #c0bfe045;
  background: #17172baf;
  backdrop-filter: blur(6px);
  border-radius: 5px;
  font-size: 11px;
  font-weight: 650;
  padding: 5px 9px;
  letter-spacing: .45px;
  color: #e9e8ee
}

.hero-weather {
  font-size: 11px;
  background: #262138c9;
  letter-spacing: .3px
}

.hero-weather svg {
  color: #ffdba5
}

.hero-info {
  position: absolute;
  left: 29px;
  right: 23px;
  bottom: 27px;
  pointer-events: none
}

.region-code {
  color: #e8f7bc;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 2.1px;
  text-shadow: 0 1px 2px #121022
}

.region-code b {
  color: #b6ce91;
  margin-inline: 4px
}

.hero h2 {
  font-size: clamp(43px, 4.55vw, 68px);
  line-height: 1.16;
  font-weight: 900;
  letter-spacing: 2px;
  margin: 7px 0 8px;
  text-shadow: 0 2px 7px #1b102977
}

.hero-info p {
  color: #f0e9f0;
  font-size: 13px;
  line-height: 1.7;
  text-shadow: 0 1px 4px #070a15;
  max-width: 76%;
  font-weight: 500;
  letter-spacing: .2px
}

.hero-ctas,
.sheet-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap
}

.hero-ctas {
  margin-top: 18px;
  pointer-events: auto;
  width: fit-content
}

.btn {
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  min-height: 40px;
  padding: 9px 15px;
  font-size: 13px;
  font-weight: 720;
  line-height: 1.4;
  letter-spacing: .15px;
  text-align: center
}

.btn.primary {
  color: var(--lime-ink);
  background: var(--lime);
  border-color: #c6fa9e;
  box-shadow: 0 2px 0 #0a130d25
}

.btn.primary:hover:enabled,
a.btn.primary:hover {
  background: #d3ffa9;
  border-color: #ddffbd
}

.btn.glass {
  background: #242235c4;
  color: #f5f0f1;
  border: 1px solid #b5adbc86;
  backdrop-filter: blur(8px)
}

.btn.glass:hover {
  background: #403648e6
}

.btn.secondary {
  color: #e1e5e3;
  background: #28303b;
  border-color: #444f5b
}

.btn.secondary:hover:enabled {
  background: #333e46;
  border-color: #74836d
}

.hero-pager {
  position: absolute;
  right: 18px;
  bottom: 24px;
  display: flex;
  align-items: center
}

.hero-pager button {
  padding: 10px 3px;
  display: inline-grid;
  place-items: center
}

.hero-pager button i {
  width: 8px;
  height: 4px;
  background: #ffffff66;
  border-radius: 2px;
  box-shadow: 0 0 3px #0009
}

.hero-pager button[aria-pressed=true] i {
  width: 21px;
  background: var(--lime)
}

.passport {
  background: radial-gradient(ellipse at 100% 0, #38423460, transparent 52%), linear-gradient(140deg, #222932, #1b2129);
  padding: 20px 21px 18px;
  position: relative;
  display: flex;
  flex-direction: column
}

.pass-top,
.team-label,
.team-row,
.card-name,
.detail-line,
.xp-label,
.energy-label,
.battle-read,
.utility-row,
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px
}

.pass-code {
  color: #8d979d;
  font-size: 9px;
  letter-spacing: 1.3px
}

.section-label {
  font-size: 9px;
  letter-spacing: 1.8px
}

.section-label i {
  width: 5px;
  height: 5px;
  background: var(--lime);
  box-shadow: 2px -2px 0 #749557
}

.pass-person {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 20px 0 16px
}

.avatar-box {
  background: repeating-linear-gradient(0deg, #323e35 0 2px, #354238 2px 4px);
  border: 1px solid #53634f;
  box-shadow: inset 0 0 0 4px #2b352e;
  width: 62px;
  height: 62px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: none
}

.avatar-box svg,
.avatar-box img {
  width: 47px;
  height: 47px
}

.tiny {
  font-size: 10px;
  color: #a2adb2;
  letter-spacing: 1.15px
}

.pass-person h2 {
  font-size: 21px;
  line-height: 1.4;
  margin: 2px 0 3px;
  letter-spacing: .3px
}

.rank-tag {
  font: 700 9px/1.5 var(--mono);
  letter-spacing: .75px;
  gap: 4px;
  color: #d4e8b9
}

.pass-stamp {
  position: absolute;
  z-index: -1;
  right: -1px;
  top: -3px;
  color: #acda8c15;
  transform: rotate(-13deg)
}

.pass-stats {
  border-top: 1px dashed #44505a;
  border-bottom: 1px dashed #44505a;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 15px 0 14px
}

.pass-stats>div {
  flex: 1;
  text-align: center;
  position: relative
}

.pass-stats>div+div:before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  height: 65%;
  width: 1px;
  background: #37424a
}

.pass-stats strong {
  font: 700 23px/1.1 var(--mono);
  letter-spacing: -1px;
  color: #e8eee9
}

.pass-stats em {
  font: 500 11px var(--mono);
  color: #929da6;
  letter-spacing: 0;
  margin-left: 1px
}

.pass-stats small {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
  color: #a7b3bd;
  font-size: 11px;
  margin-top: 6px
}

.pass-stats small svg {
  opacity: .9
}

.team-label {
  margin: 16px 0 8px;
  font-size: 12px
}

.team-label b {
  font-size: 12px;
  letter-spacing: .5px
}

.team-label span {
  font: 10px var(--mono);
  color: #9ca7b2
}

.team-row {
  margin-top: auto
}

.slots {
  display: flex;
  gap: 5px
}

.slot {
  height: 35px;
  width: 35px;
  border: 1px dashed #526068;
  border-radius: 6px;
  color: #7d8b94;
  display: grid;
  place-items: center;
  background: #1c232a
}

.slot:hover {
  border-color: var(--lime);
  color: var(--lime)
}

.slot.full {
  border-style: solid;
  border-color: color-mix(in srgb, var(--type) 36%, #293239)
}

.slot img {
  width: 31px;
  height: 31px
}

.text-btn {
  gap: 7px;
  font-size: 12px;
  color: #b6c0c7;
  font-weight: 620;
  line-height: 1.5;
  padding: 5px 0
}

.text-btn:hover,
.text-btn.accent {
  color: var(--lime)
}

.text-btn:hover svg {
  transform: translateX(1px)
}

.section {
  margin-top: 32px
}

.section-head {
  align-items: flex-end;
  margin-bottom: 15px
}

.section-head>div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px
}

.section-head h2,
.trail-intro h2 {
  font-size: 25px;
  line-height: 1.35;
  letter-spacing: .6px
}

.card-grid,
.gym-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px
}

.t-ember {
  --type: #ffb686;
  --scene1: #483338;
  --scene2: #33292e;
  --mist: #bd786c
}

.t-grove {
  --type: #b3e7a4;
  --scene1: #2d433b;
  --scene2: #23312f;
  --mist: #85b891
}

.t-tide {
  --type: #9acbff;
  --scene1: #303e56;
  --scene2: #252d40;
  --mist: #8fa4d9
}

.spec-card {
  position: relative;
  display: block;
  min-width: 0;
  text-align: left;
  padding: 0;
  background: #202630;
  border-color: #363e49;
  color: var(--text)
}

.spec-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--type) 65%, #36404d);
  box-shadow: 0 6px 16px #070b102e
}

.sprite {
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  user-select: none
}

.sprite-scene {
  min-height: 130px;
  height: clamp(140px, 11.4vw, 165px);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 80%, color-mix(in srgb, var(--mist) 29%, transparent), transparent 60%), linear-gradient(120deg, var(--scene1), var(--scene2))
}

.scene-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(#eee8e805 1px, transparent 1px), linear-gradient(90deg, #eee8e805 1px, transparent 1px), radial-gradient(#ddd8d414 .75px, transparent .9px);
  background-size: 20px 20px, 20px 20px, 5px 5px
}

.scene-mark {
  position: absolute;
  left: 6%;
  bottom: -20px;
  color: var(--mist);
  opacity: .13;
  transform: rotate(-14deg)
}

.scene-mark svg {
  width: 95px;
  height: 95px;
  stroke-width: .8
}

.sprite-scene>.sprite {
  width: clamp(105px, 10.2vw, 145px);
  height: calc(100% - 10px);
  max-width: 56%;
  position: relative;
  filter: drop-shadow(0 4px 0 #11121944);
  z-index: 2;
  transform: translateY(5px)
}

.perch {
  position: absolute;
  width: 31%;
  height: 8px;
  border-radius: 50%;
  background: #070a1345;
  bottom: 9%;
  filter: blur(2px)
}

.pixel-star {
  color: var(--mist);
  opacity: .7;
  position: absolute;
  width: 3px;
  height: 9px;
  background: currentColor;
  z-index: 1
}

.pixel-star:after {
  content: '';
  width: 9px;
  height: 3px;
  position: absolute;
  background: currentColor;
  left: -3px;
  top: 3px
}

.ps1 {
  left: 19%;
  top: 43%;
  transform: scale(.68)
}

.ps2 {
  right: 22%;
  top: 52%
}

.ps3 {
  right: 14%;
  top: 69%;
  transform: scale(.55)
}

.stage-star {
  position: absolute;
  top: 12px;
  right: 12px;
  color: #ffe4a1;
  letter-spacing: 3px;
  font-size: 20px
}

.stage-1 .perch,
.stage-2 .perch {
  background: var(--type);
  box-shadow: 0 -12px 27px 11px color-mix(in srgb, var(--type) 21%, transparent)
}

.stage-2>.sprite {
  filter: drop-shadow(0 0 5px var(--type))
}

.card-number,
.card-status {
  position: absolute;
  top: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .9px
}

.card-number {
  left: 14px;
  color: color-mix(in srgb, var(--type) 72%, #c0bdc2);
  font-size: 10px
}

.card-status {
  right: 12px;
  gap: 4px;
  font-size: 10px;
  letter-spacing: .2px;
  color: #d0d3d1;
  background: #1b202293;
  border: 1px solid #f4f2ff24;
  border-radius: 4px;
  padding: 3px 6px
}

.card-status i {
  width: 4px;
  height: 4px;
  background: #bbc4bd;
  border-radius: 50%
}

.card-status.owned {
  color: #ccedbb
}

.card-copy {
  position: relative;
  border-top: 1px solid #ffffff0e;
  padding: 15px 17px 16px;
  background: linear-gradient(120deg, #222831, #1f252e)
}

.card-name {
  justify-content: flex-start;
  gap: 9px
}

.card-name h3 {
  font-size: 21px;
  letter-spacing: .8px;
  line-height: 1.4
}

.type {
  color: var(--type);
  background: color-mix(in srgb, var(--type) 10%, #1a2229);
  border: 1px solid color-mix(in srgb, var(--type) 26%, #28303a);
  font-size: 10px;
  line-height: 1.3;
  padding: 3px 6px;
  gap: 4px;
  border-radius: 5px;
  font-weight: 650;
  white-space: nowrap
}

.type svg {
  width: 12px;
  height: 12px
}

.card-copy p {
  font-size: 12px;
  color: #a7b1bd;
  margin-top: 5px;
  max-width: 85%;
  line-height: 1.55
}

.card-link {
  position: absolute;
  right: 16px;
  bottom: 21px;
  width: 26px;
  height: 26px;
  justify-content: center;
  border: 1px solid #3a434f;
  border-radius: 6px;
  color: #a6b3be
}

.trail-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 25px;
  padding: 20px 24px;
  background: linear-gradient(120deg, #222a2b, #1b2027);
  border-color: #343e44
}

.trail-intro h2 {
  font-size: 19px;
  margin-top: 3px
}

.trail-steps {
  display: flex;
  align-items: center;
  gap: 23px
}

.trail-steps button {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #cbd1d3;
  font-size: 12px;
  padding: 5px 0
}

.trail-steps i {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  background: #283133;
  border: 1px solid #46524e;
  border-radius: 6px;
  color: #bdc6c3;
  font: 10px var(--mono)
}

.trail-steps i.done {
  color: var(--lime);
  border-color: #6a8058
}

.footer {
  margin: 33px auto 0;
  padding: 19px 0 24px;
  border-top: 1px solid #282f38;
  display: flex;
  justify-content: space-between;
  color: #808d98;
  font: 9px/1.5 var(--mono);
  letter-spacing: 1.2px
}

.footer i {
  width: 5px;
  height: 5px;
  background: #8ba876;
  margin-right: 5px;
  vertical-align: 1px
}

.footer span:last-child {
  letter-spacing: .8px
}

.journal-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px
}

.seg,
.filters,
.switcher {
  display: flex;
  align-items: center;
  gap: 3px
}

.seg,
.switcher {
  padding: 4px;
  background: #1c222a;
  border: 1px solid #343d48;
  border-radius: 8px
}

.seg button,
.filters button,
.switcher button {
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 5px;
  color: #a9b4bc;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  white-space: nowrap
}

.seg button.sel,
.switcher button.sel {
  background: #374239;
  color: var(--lime)
}

.seg b {
  font: 10px var(--mono);
  opacity: .85
}

.filters button {
  border: 1px solid transparent
}

.filters button.sel {
  border-color: #475344;
  background: #2a332d;
  color: #c7efaf
}

.album-grid .spec-card {
  margin-bottom: 3px
}

.empty {
  padding: 50px 18px;
  grid-column: 1/-1;
  text-align: center;
  background: #1b2229
}

.empty-icon {
  color: var(--lime);
  margin-bottom: 14px
}

.empty h3 {
  font-size: 21px
}

.empty p {
  font-size: 13px;
  color: var(--muted);
  margin: 10px 0 17px;
  line-height: 1.7
}

.gym-card,
.resume,
.match-guide {
  background: #1d242d
}

.gym-art {
  height: 155px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: grid;
  place-items: center
}

.gym-art>.glass-label {
  position: absolute;
  top: 12px;
  left: 12px;
  font: 9px var(--mono);
  letter-spacing: 1px
}

.gym-badge {
  filter: drop-shadow(0 4px 2px #060c16a0);
  width: 70px;
  transform: rotate(-4deg);
  height: 76px
}

.gym-copy {
  padding: 17px
}

.gym-copy .card-name {
  margin-top: 3px
}

.gym-copy h2 {
  font-size: 22px
}

.gym-copy p {
  color: var(--muted);
  font-size: 12px;
  margin: 7px 0 14px
}

.gym-copy>.btn {
  width: 100%
}

.reward-line,
.resume,
.match-guide,
.match-guide>span,
.match-guide>div {
  display: flex;
  align-items: center;
  gap: 7px
}

.reward-line {
  border-top: 1px dashed #404955;
  color: #c8cece;
  padding: 12px 0;
  font-size: 12px
}

.reward-line>span {
  margin-left: auto;
  font-size: 10px;
  color: #b0baae
}

.match-guide,
.resume {
  margin: 18px 0;
  padding: 15px 19px;
  flex-wrap: wrap;
  gap: 17px
}

.match-guide strong {
  font-size: 14px
}

.match-guide>div>svg {
  color: var(--lime)
}

.match-guide small {
  color: var(--muted);
  font-size: 12px
}

.resume {
  justify-content: space-between;
  color: #cde3c2
}

.match-guide .type {
  background: #2a3039
}

.modal-open {
  overflow: hidden
}

dialog {
  color: var(--text);
  background: linear-gradient(150deg, #242c35, #1b212b 65%);
  border: 1px solid #495561;
  border-radius: 14px;
  padding: 0;
  width: min(520px, 92vw);
  max-width: 92vw;
  max-height: min(92dvh, 900px);
  box-shadow: 0 20px 110px #000b
}

dialog::backdrop {
  background: rgba(7, 10, 16, .76);
  backdrop-filter: blur(4px)
}

#sheet {
  max-height: min(91dvh, 895px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #515e66 transparent
}

.dialog-head {
  padding: 18px 21px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border-bottom: 1px solid #37414b;
  background: #222a33;
  position: sticky;
  top: 0;
  z-index: 4
}

.dialog-head h2 {
  font-size: 23px;
  line-height: 1.4;
  letter-spacing: .4px;
  margin-top: 3px
}

.dialog-head h2 em {
  font: 10px var(--mono);
  letter-spacing: 1px;
  color: #a7b1bd;
  text-transform: uppercase
}

.dialog-body {
  padding: 19px 21px 21px
}

.dialog-body>.lead:first-child {
  margin-top: 0
}

.lead,
.story,
.subtle {
  font-size: 14px;
  line-height: 1.78;
  color: #c7d0d4
}

.lead {
  margin: 9px 0 15px
}

.subtle {
  font-size: 12px;
  color: #a6b4bd
}

.sheet-actions {
  margin-top: 15px
}

.dialog-body .sheet-actions .btn {
  min-height: 42px
}

.choice-list {
  display: grid;
  gap: 9px
}

.choice {
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
  padding: 9px 12px;
  background: #283139;
  border: 1px solid #414c55;
  border-radius: 9px
}

.choice:hover:enabled {
  border-color: var(--type);
  background: #2c383d
}

.choice-art {
  width: 61px;
  height: 60px;
  display: grid;
  place-items: center;
  flex: none;
  background: linear-gradient(125deg, var(--scene1), var(--scene2));
  border: 1px solid color-mix(in srgb, var(--type) 22%, #28323d);
  border-radius: 6px
}

.choice-art img {
  width: 56px;
  height: 56px
}

.choice small {
  font: 9px var(--mono);
  letter-spacing: 1px;
  color: #abb9bc
}

.choice h3 {
  font-size: 17px;
  margin: 2px 0 2px;
  display: flex;
  align-items: center;
  gap: 6px
}

.choice p {
  font-size: 12px;
  color: #aeb9c2
}

.choice>svg:last-child,
.compact .choice>small:last-child {
  margin-left: auto
}

.compact .choice>img {
  width: 35px;
  height: 35px
}

.compact .choice {
  padding: 6px 10px
}

.big-scene {
  height: 164px;
  border-radius: 8px;
  border: 1px solid #ffffff12
}

.big-scene>.sprite {
  height: 96%;
  width: 160px
}

.detail-line {
  margin: 13px 0;
  gap: 8px;
  justify-content: flex-start
}

.detail-line>span:not(.type) {
  font-size: 12px;
  color: #aab6bf;
  gap: 4px
}

.fact-rows {
  margin: 11px 0;
  border-top: 1px dashed #404b56
}

.fact-rows>div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  border-bottom: 1px solid #35404a;
  padding: 9px 0
}

.fact-rows>div>span,
.xp-label small,
.energy-label small,
.label small {
  color: var(--muted)
}

.fact-rows b {
  font-weight: 600;
  color: #e0e6e3
}

.xp-label {
  font: 700 12px var(--mono);
  margin: 12px 0 7px
}

.xp-label small {
  font-size: 10px;
  font-weight: 500
}

.meter,
.hp {
  height: 5px;
  border-radius: 3px;
  background: #111820;
  overflow: hidden
}

.meter>i,
.hp>i {
  display: block;
  height: 100%;
  background: var(--lime);
  border-radius: inherit
}

.utility-row {
  margin: 13px 0 0;
  padding-top: 10px;
  border-top: 1px solid #36414b
}

.utility-row .text-btn {
  font-size: 12px
}

.label {
  gap: 5px;
  display: flex;
  font-size: 13px;
  font-weight: 620;
  margin: 12px 0 7px
}

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

input:not([type=file]) {
  width: 100%;
  background: #161d25;
  border: 1px solid #48545f;
  border-radius: 6px;
  color: #f1f4f1;
  font-size: 15px;
  padding: 11px 12px
}

.field-scene {
  height: 170px;
  position: relative;
  overflow: hidden;
  border: 1px solid #ffffff24;
  border-radius: 8px;
  background-size: cover;
  background-position: 50% 65%
}

.field-scene>.glass-label {
  position: absolute;
  top: 10px;
  left: 10px;
  letter-spacing: 1px;
  font-size: 9px
}

.field-scene>.sprite {
  position: absolute;
  bottom: 5px;
  left: 31%;
  width: 35%;
  height: 73%;
  filter: drop-shadow(0 4px 2px #0b112bd4)
}

.enc-platform {
  position: absolute;
  bottom: 5px;
  left: 32%;
  width: 32%;
  height: 13px;
  border-radius: 50%;
  background: #131627b0
}

.subhead {
  margin: 13px 0 4px;
  font-size: 20px
}

.clue {
  color: #dce4e6
}

.option-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 14px
}

.option-grid .btn {
  padding: 9px 4px;
  font-size: 12px
}

.retry {
  margin-top: 5px;
  color: #f3c392;
  font-size: 12px
}

.celebrate {
  font-size: 22px;
  margin: 13px 0 2px;
  display: flex;
  gap: 10px;
  align-items: center
}

.reward-emblem {
  display: grid;
  place-items: center;
  height: 126px;
  border: 1px solid #ffffff1d;
  border-radius: 8px;
  background: radial-gradient(ellipse at 50% 55%, #a4b68833, transparent 65%), #242b34
}

.reward-emblem svg {
  width: 74px;
  height: 82px;
  color: var(--lime);
  filter: drop-shadow(0 4px 2px #0c121a82)
}

.guide-list {
  display: grid;
  gap: 15px
}

.guide-list section {
  display: flex;
  gap: 12px
}

.guide-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: #303b34;
  border: 1px solid #485846;
  border-radius: 7px;
  color: var(--lime);
  flex: none
}

.guide-list section small {
  float: right;
  margin-left: 10px;
  color: #76838b;
  font: 10px var(--mono)
}

.guide-list h3 {
  font-size: 15px;
  margin: 1px 0 3px
}

.guide-list p {
  font-size: 13px;
  color: #b6c2ca;
  line-height: 1.75
}

.arena {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  background-size: cover;
  background-position: center;
  border: 1px solid #44515e;
  border-radius: 8px;
  text-align: center;
  padding: 10px 14px 12px;
  align-items: center;
  gap: 11px
}

.fighter {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 3px
}

.fighter-label,
.fighter small {
  font: 10px var(--mono);
  color: #c2cbd1;
  letter-spacing: .2px
}

.fighter .sprite {
  width: 80px;
  height: 71px
}

.fighter b {
  font-size: 14px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.fighter .hp {
  height: 5px;
  width: min(100%, 110px);
  margin-top: 4px;
  background: #1e202b;
  outline: 1px solid #90939655
}

.fighter .hp i {
  background: var(--type)
}

.fighter small {
  font-size: 9px
}

.vs {
  font: 900 17px var(--mono);
  color: #f5d69b;
  font-style: italic
}

.battle-read {
  background: #2c333a;
  border: 1px solid #414b53;
  border-radius: 6px;
  padding: 8px 10px;
  margin: 10px 0;
  gap: 6px;
  font-size: 12px
}

.battle-read b {
  gap: 5px;
  color: #e3dfab;
  white-space: nowrap
}

.battle-read span {
  color: #cbd4d7;
  text-align: right
}

.energy-label {
  font-size: 12px;
  margin: 11px 0
}

.energy-label b {
  color: #bdeb97;
  letter-spacing: 2px
}

.energy-label small {
  font-size: 11px
}

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

.move {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #29343d;
  border: 1px solid #46525e;
  padding: 10px 12px;
  border-radius: 7px;
  text-align: left
}

.move>b,
.move small,
.move b {
  display: block
}

.move b {
  font-size: 13px
}

.move small {
  font-size: 10px;
  color: #b6c2ca;
  margin-top: 2px
}

.move.special {
  color: var(--type);
  border-color: color-mix(in srgb, var(--type) 40%, #35424d);
  background: color-mix(in srgb, var(--type) 9%, #252b34)
}

.move:hover:enabled {
  border-color: var(--lime)
}

.turn-log {
  font-size: 12px;
  color: #abb8c1;
  margin-top: 13px
}

.turn-log summary {
  cursor: pointer
}

.turn-log ul {
  margin: 5px 0 0;
  padding-left: 17px;
  line-height: 1.7
}

.evolution {
  gap: 8px;
  color: var(--lime);
  font-size: 13px
}

.camera-pad {
  height: 169px;
  background: radial-gradient(ellipse at center, #394a3e, transparent 70%), repeating-linear-gradient(0deg, transparent 0 13px, #cadab907 14px), repeating-linear-gradient(90deg, transparent 0 13px, #cadab907 14px), #202b2b;
  border-radius: 8px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--lime)
}

.camera-pad>b {
  font-size: 17px;
  color: #e8f5df;
  margin-top: 3px
}

.camera-pad small {
  font: 9px var(--mono);
  letter-spacing: 1.7px;
  color: #a5bba4
}

.finder {
  position: absolute;
  width: 19px;
  height: 19px;
  border: solid #a5ca8b;
  opacity: .7
}

.tl {
  left: 14px;
  top: 14px;
  border-width: 2px 0 0 2px
}

.tr {
  right: 14px;
  top: 14px;
  border-width: 2px 2px 0 0
}

.bl {
  left: 14px;
  bottom: 14px;
  border-width: 0 0 2px 2px
}

.br {
  right: 14px;
  bottom: 14px;
  border-width: 0 2px 2px 0
}

.privacy-line,
.photo-status {
  gap: 6px;
  font-size: 12px;
  color: #a1b6ab;
  margin: 13px 0 0
}

.photo-status {
  font-weight: 650;
  color: #c7edb6
}

.photo-status.manual {
  color: #f0c39f
}

.photo-display {
  width: 100%;
  height: clamp(180px, 38vh, 335px);
  height: clamp(180px, 38dvh, 335px);
  background-color: #11171d;
  border: 1px solid #414d58;
  border-radius: 8px;
  overflow: hidden;
  position: relative
}

.photo-display.short {
  height: clamp(145px, 30vh, 245px);
  height: clamp(145px, 30dvh, 245px)
}

.photo-display>img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center
}

.photo-display.pixelated>img {
  image-rendering: pixelated
}

.switcher {
  margin-top: 8px;
  width: fit-content
}

.switcher button {
  font-size: 11px;
  padding: 6px 10px
}

.photo-avatars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px
}

.photo-avatars button {
  min-width: 0;
  text-align: center;
  background: #222a33;
  border: 1px solid #3e4a55;
  border-radius: 6px;
  padding: 3px
}

.photo-avatars button.sel {
  border-color: var(--type);
  background: var(--scene1)
}

.photo-avatars img {
  width: 100%;
  height: 45px;
  display: block
}

.photo-avatars span {
  font-size: 11px;
  line-height: 1.6
}

.photo-loading {
  text-align: center;
  padding: 33px 6px;
  color: #c6d6cd;
  font-size: 14px
}

.scan-spin {
  display: block;
  width: 32px;
  height: 32px;
  border: 3px solid #425144;
  border-top-color: var(--lime);
  border-radius: 50%;
  margin: 0 auto 21px;
  animation: spin 1s linear infinite
}

.exported-img {
  max-width: 100%;
  max-height: 52vh;
  display: block;
  margin: 0 auto 8px
}

.photo-display+.lead {
  margin-top: 12px
}

#notice {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translate(-50%, 20px);
  max-width: 90vw;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #596755;
  background: #2b372f;
  color: #e5f5db;
  font-size: 13px;
  box-shadow: 0 6px 28px #080c1080;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s
}

#notice.shown {
  opacity: 1;
  transform: translate(-50%, 0)
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

@media(min-width:1500px) {
  .hero {
    min-height: 365px
  }

  .passport {
    padding: 23px 24px
  }

  .pass-person {
    margin: 22px 0
  }

  .pass-stats {
    padding: 18px 0
  }

  .section {
    margin-top: 37px
  }
}

@media(max-width:1020px) {
  .shell {
    width: 93%
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1.85fr) minmax(260px, 1fr);
    gap: 13px
  }

  .passport {
    padding: 17px 16px
  }

  .hero-info {
    left: 22px;
    bottom: 23px
  }

  .hero-info p {
    max-width: 85%
  }

  .desktop-nav {
    gap: 2px
  }

  .nav-link {
    padding: 9px 12px
  }

  .trail-steps {
    gap: 15px
  }

  .card-grid,
  .gym-grid {
    gap: 12px
  }

  .pass-stamp {
    right: -6px
  }

  .header-right {
    gap: 10px
  }
}

@media(max-width:780px) {
  .bar {
    height: 67px
  }

  .desktop-nav .nav-link {
    padding: 8px;
    font-size: 12px;
    gap: 5px
  }

  .brand {
    gap: 6px
  }

  .brand b {
    font-size: 20px
  }

  .brand small {
    font-size: 7px
  }

  .brand-icon,
  .brand-icon :is(svg, img) {
    width: 36px;
    height: 36px
  }

  .pass-stats strong {
    font-size: 21px
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(232px, 1fr);
    gap: 11px
  }

  .hero {
    min-height: 310px
  }

  .hero-tags {
    left: 15px;
    right: 15px;
    top: 15px
  }

  .hero-info {
    left: 16px;
    bottom: 21px;
    right: 12px
  }

  .hero-info p {
    max-width: 99%;
    font-size: 12px
  }

  .hero h2 {
    font-size: 43px
  }

  .hero-ctas {
    gap: 6px
  }

  .hero-ctas .btn {
    padding: 8px 11px;
    font-size: 12px
  }

  .hero-pager {
    right: 9px;
    bottom: 70px
  }

  .pass-person {
    gap: 9px
  }

  .avatar-box {
    width: 49px;
    height: 52px
  }

  .avatar-box svg,
  .avatar-box img {
    width: 41px;
    height: 41px
  }

  .pass-person h2 {
    font-size: 19px
  }

  .card-copy {
    padding: 13px
  }

  .trail-panel {
    align-items: flex-start;
    padding: 16px
  }

  .trail-steps {
    flex-wrap: wrap;
    gap: 9px 15px
  }

  .gym-copy {
    padding: 12px
  }

  .gym-copy h2 {
    font-size: 18px
  }

  .gym-art {
    height: 125px
  }

  .card-link {
    right: 12px
  }

  .card-number {
    left: 9px
  }

  .card-status {
    right: 8px
  }
}

@media(max-width:640px) {
  html {
    scrollbar-gutter: auto
  }

  .shell {
    width: calc(100% - 32px)
  }

  .bar {
    height: 62px
  }

  .brand b {
    font-size: 19px
  }

  .brand small {
    font-size: 7px;
    letter-spacing: 1.8px
  }

  .brand-icon,
  .brand-icon :is(svg, img) {
    width: 36px;
    height: 36px
  }

  .brand {
    gap: 8px
  }

  .desktop-nav {
    display: none
  }

  .header-right {
    gap: 10px
  }

  .header-right .icon-button {
    width: 35px;
    height: 35px
  }

  .save-indicator {
    font-size: 11px
  }

  .mobile-nav {
    display: flex;
    position: fixed;
    z-index: 8;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1a1f28f5;
    backdrop-filter: blur(12px);
    border-top: 1px solid #38424d;
    padding: 4px max(12px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom));
    justify-content: space-around
  }

  .mobile-nav .nav-link {
    flex: 1;
    max-width: 120px;
    min-height: 47px;
    gap: 2px;
    flex-direction: column;
    padding: 3px 8px;
    color: #aab6be;
    font-size: 10px;
    line-height: 1.4;
    border-color: transparent;
    border-radius: 6px
  }

  .mobile-nav .nav-link.active {
    background: #303a3085;
    color: var(--lime)
  }

  main {
    padding-top: 23px;
    min-height: calc(100dvh - 228px)
  }

  .intro {
    align-items: center;
    margin-bottom: 16px;
    gap: 6px
  }

  .eyebrow {
    font-size: 9px;
    letter-spacing: 1.4px
  }

  .intro h1 {
    font-size: 30px;
    margin: 6px 0
  }

  .intro p {
    font-size: 12px;
    line-height: 1.6
  }

  .intro>.btn {
    min-height: 36px;
    padding: 7px 9px;
    font-size: 11px;
    white-space: nowrap
  }

  .guide-btn {
    padding: 7px 8px;
    gap: 4px;
    font-size: 11px
  }

  .guide-btn>svg:last-child {
    display: none
  }

  .hero-grid {
    display: flex;
    flex-direction: column;
    gap: 12px
  }

  .hero {
    min-height: 300px;
    border-radius: 11px
  }

  .hero-img {
    object-position: 70% 50%
  }

  .hero-shade {
    background: linear-gradient(90deg, #13122854, transparent 76%), linear-gradient(0deg, #161324e8, transparent 74%)
  }

  .hero-info {
    left: 17px;
    right: 14px;
    bottom: 17px
  }

  .hero-info p {
    max-width: 92%;
    font-size: 12px
  }

  .hero h2 {
    font-size: 46px;
    margin: 5px 0
  }

  .region-code {
    font-size: 9px;
    letter-spacing: 1.5px
  }

  .hero-ctas {
    margin-top: 13px
  }

  .hero-ctas .btn {
    min-height: 40px;
    padding: 8px 12px
  }

  .hero-pager {
    right: 13px;
    bottom: 23px
  }

  .hero-tags {
    top: 12px;
    left: 13px;
    right: 13px
  }

  .hero-weather,
  .glass-label {
    font-size: 10px;
    padding: 4px 7px
  }

  .passport {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    column-gap: 12px;
    align-items: center;
    border-radius: 10px;
    padding: 13px 14px
  }

  .pass-top {
    grid-column: 1/-1
  }

  .pass-person {
    grid-row: 2;
    grid-column: 1;
    margin: 12px 0 0
  }

  .pass-person h2 {
    font-size: 16px;
    line-height: 1.3
  }

  .pass-person .tiny {
    display: none
  }

  .pass-stamp {
    display: none
  }

  .avatar-box {
    width: 43px;
    height: 44px;
    border-radius: 6px
  }

  .avatar-box img,
  .avatar-box svg {
    width: 33px;
    height: 33px
  }

  .rank-tag {
    font-size: 8px
  }

  .pass-code {
    font-size: 8px
  }

  .pass-stats {
    margin-top: 13px;
    grid-row: 2;
    grid-column: 2;
    border: 0;
    padding: 0
  }

  .pass-stats strong {
    font-size: 17px
  }

  .pass-stats small {
    font-size: 9px;
    gap: 2px;
    margin-top: 4px
  }

  .pass-stats small svg {
    width: 10px;
    height: 10px
  }

  .pass-stats em {
    font-size: 8px
  }

  .team-label {
    border-top: 1px dashed #3c4650;
    margin: 12px 0 0;
    padding-top: 10px;
    grid-column: 1;
    grid-row: 3;
    justify-content: flex-start;
    gap: 8px
  }

  .team-label b {
    font-size: 10px
  }

  .team-label span {
    font-size: 9px
  }

  .team-row {
    grid-column: 2;
    grid-row: 3;
    justify-content: flex-end;
    gap: 6px;
    position: relative;
    align-self: stretch;
    border-top: 1px dashed #3c4650;
    margin-top: 12px;
    padding-top: 9px
  }

  .team-row .text-btn {
    font-size: 10px;
    padding: 0;
    gap: 2px;
    white-space: nowrap
  }

  .slots {
    gap: 3px
  }

  .slot {
    width: 22px;
    height: 22px;
    border-radius: 4px
  }

  .slot svg {
    width: 12px;
    height: 12px
  }

  .slot img {
    height: 20px;
    width: 20px
  }

  .section {
    margin-top: 24px
  }

  .section-head h2 {
    font-size: 22px
  }

  .section-head {
    margin-bottom: 11px
  }

  .section-label {
    font-size: 8px;
    letter-spacing: 1.45px
  }

  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px
  }

  .featured {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(149px, 44%);
    grid-template-columns: none;
    overflow: auto;
    scroll-snap-type: x proximity;
    padding: 1px 1px 6px;
    scrollbar-width: thin;
    scrollbar-color: #4b5c4c transparent
  }

  .featured .spec-card {
    scroll-snap-align: start
  }

  .card-number {
    font-size: 8px;
    top: 8px;
    left: 8px
  }

  .card-status {
    font-size: 8px;
    top: 7px;
    right: 6px;
    padding: 2px 4px
  }

  .sprite-scene {
    min-height: 103px;
    height: 107px
  }

  .sprite-scene>.sprite {
    width: 95px;
    max-width: 63%;
    height: calc(100% - 12px)
  }

  .card-copy {
    padding: 9px 10px
  }

  .card-name {
    gap: 5px
  }

  .card-name h3 {
    font-size: 16px
  }

  .card-copy p {
    font-size: 10px;
    margin-top: 3px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
  }

  .type {
    font-size: 9px;
    padding: 2px 4px;
    gap: 2px
  }

  .type svg {
    width: 10px;
    height: 10px
  }

  .card-link {
    display: none
  }

  .scene-mark svg {
    width: 57px;
    height: 57px
  }

  .trail-panel {
    margin-top: 18px;
    padding: 13px;
    display: block
  }

  .trail-intro {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-direction: row-reverse;
    justify-content: flex-end
  }

  .trail-intro h2 {
    font-size: 16px;
    margin: 0
  }

  .trail-steps {
    margin-top: 10px;
    gap: 7px;
    align-items: flex-start
  }

  .trail-steps button {
    font-size: 10px;
    gap: 4px
  }

  .trail-steps i {
    width: 18px;
    height: 18px;
    font-size: 8px
  }

  .footer {
    margin: 20px auto 0;
    padding: 14px 0 84px;
    font-size: 8px
  }

  .footer span:last-child {
    font-size: 7px
  }

  .journal-tools {
    display: block
  }

  .seg,
  .switcher {
    width: fit-content
  }

  .seg button,
  .filters button {
    font-size: 11px;
    padding: 7px 9px
  }

  .filters {
    margin: 9px 0
  }

  .gym-grid {
    grid-template-columns: 1fr;
    gap: 12px
  }

  .gym-card {
    display: grid;
    grid-template-columns: 32% 68%
  }

  .gym-art {
    height: 100%;
    min-height: 159px
  }

  .gym-badge {
    width: 53px;
    height: 62px
  }

  .gym-copy {
    padding: 12px
  }

  .gym-copy .btn {
    min-height: 35px;
    padding: 5px 10px
  }

  .gym-copy .section-label {
    font-size: 8px
  }

  .gym-copy h2 {
    font-size: 17px
  }

  .gym-copy p {
    font-size: 11px;
    margin: 4px 0 8px
  }

  .reward-line {
    padding: 7px 0;
    font-size: 11px
  }

  .match-guide,
  .resume {
    gap: 8px;
    padding: 12px
  }

  .match-guide small {
    width: 100%;
    font-size: 11px
  }

  .match-guide strong {
    font-size: 12px
  }

  .match-guide>span {
    gap: 3px
  }

  .empty {
    padding: 27px 10px
  }

  .empty h3 {
    font-size: 17px
  }

  dialog {
    width: calc(100% - 20px);
    max-width: 470px;
    border-radius: 12px;
    max-height: 92dvh
  }

  .dialog-head {
    padding: 13px 14px 10px
  }

  .dialog-head h2 {
    font-size: 20px
  }

  .dialog-body {
    padding: 14px
  }

  .big-scene {
    height: 145px
  }

  .big-scene>.sprite {
    width: 135px;
    height: 95%
  }

  .moves {
    gap: 6px
  }

  .move {
    padding: 9px 8px;
    gap: 6px
  }

  .photo-avatars img {
    height: 35px
  }

  .trail-panel .section-label {
    font-size: 7px
  }

  .footer span:first-child {
    white-space: nowrap
  }

  .photo-avatars {
    gap: 3px
  }

  .photo-avatars span {
    font-size: 10px
  }

  #notice {
    bottom: 70px;
    font-size: 12px;
    max-width: calc(100% - 26px);
    width: max-content
  }

  .btn,
  .guide-btn,
  .nav-link {
    -webkit-tap-highlight-color: transparent
  }
}

@media(max-width:360px) {
  .shell {
    width: calc(100% - 24px)
  }

  .hero {
    min-height: 290px
  }

  .save-indicator {
    font-size: 10px
  }

  .header-line {
    display: none
  }

  .hero-pager {
    bottom: 60px
  }

  .hero-weather {
    display: none
  }

  .passport {
    column-gap: 4px
  }

  .team-label span {
    display: none
  }

  .trail-steps {
    gap: 6px
  }

  .trail-steps i {
    display: none
  }

  .hero-info p {
    max-width: 100%
  }

  .photo-avatars {
    grid-template-columns: repeat(3, 1fr)
  }

  .photo-avatars img {
    height: 34px
  }

  .photo-avatars button {
    display: flex;
    align-items: center
  }

  .photo-avatars img {
    width: 32px
  }

  .option-grid {
    grid-template-columns: 1fr
  }

  .intro p {
    max-width: 230px
  }

  .mobile-nav .nav-link {
    min-height: 45px
  }
}

@media(prefers-reduced-motion:reduce) {

  *,
  *:before,
  *:after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important
  }
}

#modal-notice {
  position: absolute;
  left: 50%;
  bottom: 11px;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 25px);
  background: #334035;
  color: #e2f6dc;
  font-size: 12px;
  border: 1px solid #667d60;
  border-radius: 7px;
  padding: 8px 11px;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 3px 16px #0b12196b
}

#modal-notice.shown {
  opacity: 1
}

@media(max-width:640px) {
  .team-label {
    display: none
  }

  .team-row {
    grid-column: 1/-1;
    justify-content: flex-start;
    gap: 10px
  }

  .team-row:before {
    content: '出发小队';
    color: #c6ced0;
    font-size: 11px;
    font-weight: 600
  }

  .team-row>.text-btn {
    margin-left: auto;
    min-height: 27px;
    font-size: 11px
  }

  .slot {
    width: 27px;
    height: 27px
  }

  .slot img {
    width: 24px;
    height: 24px
  }

  .hero-info p {
    max-width: 97%;
    text-wrap: pretty
  }
}

@media(max-width:360px) {
  .hero-ctas {
    gap: 5px
  }
}
.cat-field{width:100%;padding:10px;color:#eff5ea;background:#19232b;border:1px solid #506153;border-radius:7px;font-size:15px}.breed-tile{border:1px solid #3c494b;border-radius:9px;padding:14px;background:linear-gradient(130deg,#283530,#1c252e)}.breed-tile small{font:10px var(--mono);color:#bddeac}.breed-tile h3{margin:7px 0 2px;font-size:17px}.breed-tile p{color:#bec8cb;font:12px var(--mono);margin-bottom:10px}.album-photo{width:100%;height:100%;object-fit:contain}.fighter img.battle-photo{border-radius:9px;width:86px;height:76px;object-fit:contain;background:#162027}

/* Harbor casebook and the shared club */
.case-banner{display:block;position:relative;overflow:hidden;isolation:isolate;margin:18px 0 0;padding:clamp(19px,3.6vw,42px);border:1px solid #5c6757;border-radius:13px;color:#f4f0dc;background:#19252f url('art/harbor-lighthouse.svg') 69% 53%/cover no-repeat;text-decoration:none}
.case-banner::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#151e2aed 0%,#19232bde 24%,#17222975 46%,transparent 68%)}.case-banner>div{max-width:63%}.case-banner h2{font-size:clamp(23px,3.3vw,42px);margin:7px 0;font-weight:780;line-height:1.2}.case-banner p{margin:0 0 12px;color:#d7d8c8;font-size:14px;line-height:1.6}.case-banner b{font-size:13px;color:#d3f3ae}.case-banner .section-label{color:#e4c594}.case-large{min-height:205px;margin:0 0 12px;display:flex;align-items:center}.exp-tabs{display:flex;gap:5px;flex-wrap:wrap;margin:16px 0 20px;padding:5px;border:1px solid #3b484a;border-radius:10px;background:#192229;width:fit-content}.exp-tabs a{display:flex;align-items:center;gap:6px;border-radius:6px;padding:9px 15px;font-size:13px;color:#bcc6c2;text-decoration:none}.exp-tabs a[aria-current=page]{color:#d8f2ba;background:#334438}.exp-grid,.exp-routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:13px;margin:14px 0}.exp-panel,.route-card,.camp-head,.club-share{border:1px solid #3f4c4e;border-radius:11px;background:linear-gradient(140deg,#263239,#1e2930);padding:19px;margin:13px 0}.exp-grid>.exp-panel,.exp-routes>.route-card{margin:0}.exp-panel h3,.route-card h3,.exp-panel h2{margin:6px 0;font-size:20px}.exp-panel p,.route-card p,.exp-byline,.club-intro{color:#c2cfca;line-height:1.72;font-size:14px;margin:7px 0 12px}.exp-panel small,.exp-byline,.club-side,.club-fighter small,.exp-panel details{font-size:12px;color:#aebeb4}.exp-panel details{margin-top:15px}.exp-panel summary{cursor:pointer;color:#d1e1c3}.exp-actions,.case-options{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 4px}.case-options{align-items:stretch;flex-direction:column}.case-options .btn{justify-content:flex-start;text-align:left}.exp-actions .btn,.club-shell .btn,.work-row .btn,.route-card .btn,.exp-panel .btn{white-space:normal;line-height:1.45;min-height:38px}.route-card{display:flex;gap:13px;align-items:flex-start}.route-card>img,.case-stamp{width:46px;height:46px;flex-shrink:0;image-rendering:pixelated}.case-stamp{width:64px;height:64px}.case-setting,.club-side{font:600 12px var(--mono);color:#e7cda1;margin:4px 0 12px}.exp-byline b{color:#c8e8a9}.job-progress{display:flex;align-items:center;gap:12px;font:12px var(--mono);color:#c9ddbe}.job-progress i{width:110px;height:6px;border-radius:3px;background:linear-gradient(to right,#badb91 var(--progress),#142029 var(--progress))}.camp-head,.work-row{display:flex;align-items:center;gap:14px}.camp-portrait{width:83px;height:75px;flex:none;border-radius:8px;background:#19252b;overflow:hidden}.camp-portrait img,.memory-photo img{width:100%;height:100%;object-fit:contain}.camp-portrait img:not(.exp-cat-real){image-rendering:pixelated}.camp-head p{color:#c1d3b7;font-size:12px;margin:5px 0 0}.camp-choice,.obs-file,.exp-panel form label{display:block;color:#cdd8ca;font-size:13px;margin:7px 0}.camp-choice select,.work-row select{margin-top:4px}.work-row{justify-content:space-between;padding:13px 0;border-top:1px solid #42504d}.work-row p{font-size:12px;margin:5px 0}.work-row>.btn{flex-shrink:0}.obs-file input{display:block;max-width:100%;font-size:12px;margin:6px 0 12px}.observation-wall{display:flex;gap:5px;flex-wrap:wrap;margin-top:13px}.observation-wall>div{padding:6px 9px;border:1px solid #496055;border-radius:6px}.observation-wall b,.observation-wall small{display:block;font-size:11px}.observation-wall img{width:85px;height:65px;object-fit:contain;display:block;background:#101820}.memory-photo{background:#1e2f39 url('art/harbor-lighthouse.svg') center/cover no-repeat;min-height:170px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;padding:16px}.memory-photo>div{width:105px;height:85px;border:4px solid #e7d9b8;background:#2b383c;transform:rotate(-3deg)}.memory-photo b{padding:2px 7px;background:#1c292ceb;color:#e6dfc8}.club-shell{max-width:760px;margin:auto;padding:25px 17px 65px}.club-shell>.eyebrow{margin-top:26px}.club-shell>h1{font-size:clamp(28px,4vw,42px);margin:7px 0}.club-picks{margin:12px 0;border:1px solid #455452;border-radius:7px;padding:10px}.club-picks legend{font-size:13px;color:#dce7d7}.club-picks label,.club-consent{display:flex;align-items:center;gap:8px;font-size:14px;padding:4px 0}.club-shell input[type=checkbox],.club-shell input[type=radio]{width:17px;height:17px;flex:none;accent-color:#b8d995}.club-consent{font-size:12px}.club-share{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.club-share input{width:auto!important;flex:1;min-width:140px}.club-arena{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;background:#18242d;border-radius:8px;padding:12px;margin:12px 0}.club-fighter{display:flex;align-items:center;gap:4px;flex-direction:column;text-align:center}.club-fighter img{width:85px;height:75px;object-fit:contain}.club-fighter .hp{width:80%;background:#4b4145}.club-side{display:block;text-align:center}.room-result,.room-wait,#club-message{color:#c4e9a6}.room-log{padding-left:18px;color:#d0d7d2;font-size:13px;line-height:1.7}.room-log li+li{margin-top:3px}
@media(max-width:700px){.mobile-nav{grid-template-columns:repeat(4,minmax(0,1fr))}.mobile-nav .nav-link{flex:1;min-width:0}.case-banner>div{max-width:75%}.case-banner{background-position:62% center}.case-large{min-height:165px}.exp-panel,.route-card,.camp-head,.club-share{padding:14px}.exp-tabs{width:100%;gap:2px}.exp-tabs a{justify-content:center;flex:1 1 19%;padding:7px 2px;font-size:12px}.exp-tabs svg{width:13px}.club-shell{padding:17px 12px 50px}.club-share{align-items:stretch}.route-card p{font-size:13px}.case-large h2{font-size:25px}}
@media(max-width:370px){.exp-tabs a{font-size:11px}.exp-tabs a svg{display:none}.case-banner p{font-size:12px}.club-fighter img{width:60px;height:62px}}

/* The harbor courier's correspondence and two-sided battle board. */
.rival-entry,.rival-heading,.rival-summary { display:flex; align-items:center; gap:16px; }
.rival-entry { color:var(--text,#f3ebd6); margin:16px 0; padding:16px 20px; border:1px solid #696457; border-radius:10px; background:#242d31; text-decoration:none; }
.rival-entry:hover,.rival-entry:focus-visible { background:#30393b; border-color:#d8af78; }
.postmark { width:66px; height:66px; flex:none; image-rendering:pixelated; }
.rival-entry span { flex:1; }.rival-entry small,.rival-heading small,.rival-letter small,.rival-note small { color:#d0b68b; font-size:12px; }
.rival-entry b,.rival-entry em { display:block; }.rival-entry b { font-size:19px; margin:2px 0; }.rival-entry em,.rival-heading p { color:#d0d4c9; font-size:14px; font-style:normal; }.rival-entry strong { color:#e3c286; white-space:nowrap; }
.rival-heading { padding:20px 3px; }.rival-heading h2 { margin:4px 0; }.rival-heading p { margin:0; }
.rival-summary { justify-content:space-between; margin:14px 0; }.rival-summary b { color:#dfc495; }
.rival-letter { display:flex; flex-direction:column; align-items:flex-start; }.rival-letter details { margin:0 0 16px; }.rival-letter .btn { margin-top:auto; }
.rival-fighters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:16px 0 22px; }
.rival-side { min-width:0; display:flex; flex-direction:column; align-items:center; gap:5px; padding:13px 6px; background:#19252d; border:1px solid #435051; border-radius:7px; }
.rival-side>small,.rival-side>span { color:#b5c6bd; font-size:12px; }.rival-side>img { width:96px; height:82px; object-fit:contain; }.rival-side img.sprite { image-rendering:pixelated; }
.rival-side progress { width:76%; height:8px; accent-color:#a5cf8c; }.rival-reserves { display:flex; flex-wrap:wrap; justify-content:center; gap:3px 8px; color:#b1b7af; font-size:11px; }.rival-reserves .on { color:#e6d4a9; }
@media(max-width:600px){.rival-entry,.rival-heading {gap:10px;}.rival-entry {padding:12px;}.postmark {width:49px;height:49px;}.rival-entry strong {font-size:12px;}.rival-summary {align-items:flex-start;}.rival-entry em {font-size:12px;}}

/* The long voyage: shared additions keep the field-journal rhythm. */
.loadout-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0}.loadout-grid label{display:grid;gap:8px;color:#b7c8c4;font-size:13px}.move-library{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}.move-library article{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:16px;border:1px solid #3d4a50;background:#1a252c;border-radius:12px}.move-library article.known{border-color:#657e55;background:#25332c}.move-library article>div{display:flex;width:100%;justify-content:space-between;gap:10px;align-items:baseline}.move-library article small{font-size:11px;color:#a9bab5;white-space:nowrap}.move-library p{flex:1;font-size:13px;line-height:1.7;margin:0}.move-library .btn{font-size:12px;padding:9px 12px;min-height:36px}.move-known{color:#b8dc94;font-size:12px}.move-academy>h3{margin-top:22px}.move-academy>h3:first-of-type{margin-top:10px}.battle-status{min-height:1.5em;color:#f0d8a4!important;font-size:12px}.coverage-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.coverage-grid .exp-panel{margin:0}.coverage-row>h3{margin-top:15px}.coverage-row>p{font-size:14px;line-height:1.9}.coverage-state{display:inline-block;border:1px solid #59656d;padding:4px 9px;border-radius:5px;font-size:11px}.coverage-state.implemented{color:#c3e8a9;border-color:#617e51}.coverage-state.partial{color:#eed3a0;border-color:#8c7959}.coverage-state.not-included{color:#b7bbc6;border-color:#656a76}.coverage-counts{display:flex;gap:16px;flex-wrap:wrap;margin:24px 0}.coverage-counts>span{display:flex;align-items:center;gap:8px;font-size:13px;background:#26332e;border-radius:8px;padding:10px 16px}.coverage-counts b{font-size:25px;color:#cbdfb3}.source-links{padding-left:20px;line-height:2.2;font-size:13px}.source-links a{color:#bdd9a9;text-decoration:underline;text-underline-offset:4px}.guide-link{text-align:right;margin:18px 0 26px}.campaign-link{background:linear-gradient(115deg,#273a3b,#1b2630)}.exp-tabs{overflow-x:auto}.exp-tabs a{flex-shrink:0}.club-fighter small{overflow-wrap:anywhere}.club-fighter .battle-photo{object-fit:contain}.rival-photo{object-fit:contain}
@media(max-width:780px){.move-library{grid-template-columns:repeat(2,minmax(0,1fr))}.loadout-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.coverage-grid{grid-template-columns:1fr}}
@media(max-width:450px){.move-library{grid-template-columns:1fr}.coverage-counts{gap:8px}.coverage-counts>span{padding:8px;font-size:11px}.move-library article>div{gap:4px}.guide-link{text-align:left}.exp-tabs{scrollbar-width:thin}.rival-entry em{font-size:12px}.rival-entry strong{font-size:12px}}
.endgame-goals,.endgame-bosses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}.endgame-goal{padding:15px;border:1px solid #415654;border-radius:10px;background:#202e33;min-width:0}.endgame-goal h3{margin:8px 0;font-size:17px}.endgame-goal>small{color:#b5c8b4;letter-spacing:.06em}.endgame-goal p{font-size:13px;line-height:1.75;color:#c5d2cb}.endgame-goal progress{display:block;width:100%;height:7px;accent-color:#cbdba4;margin:12px 0 5px}.endgame-goal.claimed{background:#273c32;border-color:#6e8a61}.endgame-goal.claimed>b{color:#d9e4ac}.endgame-goal .btn{white-space:normal}.endgame-boss{width:86px;height:86px;object-fit:contain;image-rendering:pixelated;display:block;margin:0 auto 8px}@media(max-width:760px){.endgame-goals,.endgame-bosses{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:420px){.endgame-bosses{grid-template-columns:1fr}.endgame-goal{padding:12px}.endgame-goal h3{font-size:15px}}
.campaign-chapters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:24px 0}.campaign-chapters>a,.campaign-chapters>button{display:flex;flex-direction:column;gap:6px;text-align:left;padding:14px;border:1px solid #d8d2be;border-radius:12px;background:#f7f5e9;color:inherit;text-decoration:none;font:inherit;cursor:pointer}.campaign-chapters small{font-size:11px;letter-spacing:.05em;opacity:.7}.campaign-chapters b{font-size:13px}.campaign-chapters .on{background:#e7eddd;border-color:#71865a;box-shadow:inset 0 0 0 1px #71865a}.campaign-chapters button:disabled{opacity:.5;cursor:default}.campaign-map{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;align-items:center;padding:24px 0}.campaign-map>img{width:100%;height:280px;object-fit:cover;border-radius:18px;background:#ecebda}.campaign-map p,.campaign-scene p,.campaign-ending p,.campaign-commissions p{line-height:1.85}.campaign-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0}.campaign-choices .btn{justify-content:flex-start;text-align:left;white-space:normal;height:auto;min-height:58px;padding:14px}.campaign-task{padding:16px;margin:20px 0;border:1px solid #d8dfcb;background:#f0f3e9;border-radius:12px}.campaign-task>div{display:flex;justify-content:space-between;gap:16px}.campaign-task p{margin:8px 0}.campaign-task progress{width:100%;height:9px;accent-color:#687b4c}.campaign-task small{display:block;margin-top:8px;font-size:11px;opacity:.7}.campaign-response{padding-left:14px;border-left:3px solid #9daa83}.campaign-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.campaign-grid .exp-panel{margin:0}.campaign-commissions{margin-top:36px}.campaign-hidden{background:#eff1e7}.campaign-hidden-hint{margin-top:28px}.campaign-arena .rival-photo{object-fit:contain!important;background:#eeeadd}.campaign-page button:disabled{cursor:default;opacity:.45}.campaign-ending details{margin-top:20px}.campaign-page .btn span{white-space:normal}.campaign-page .room-log{max-height:200px;overflow:auto}@media(max-width:680px){.campaign-chapters{grid-template-columns:repeat(2,minmax(0,1fr))}.campaign-map{grid-template-columns:1fr;gap:16px;padding:12px 0}.campaign-map>img{height:220px}.campaign-grid,.campaign-choices{grid-template-columns:1fr}.campaign-commissions{margin-top:28px}.campaign-arena .rival-fighters{gap:8px}}

.collection-seal{display:block;width:42px;height:42px;image-rendering:pixelated;margin:0 0 10px}.endgame-goal>small{display:block}

.campaign-chapters>a,.campaign-chapters>button{background:#202e34;border-color:#42544e;color:#e3e9dd}.campaign-chapters .on{background:#304334;border-color:#a6bb87;box-shadow:inset 0 0 0 1px #82956c}.campaign-chapters button:disabled{opacity:.56}.campaign-map{display:block;padding:0;margin:20px 0 28px;overflow:hidden;background:#1f2b32;border:1px solid #3b4b4c;border-radius:16px}.campaign-map>img{display:block;width:100%;height:auto;aspect-ratio:720/260;object-fit:contain;border-radius:0;background:#253535;image-rendering:pixelated}.campaign-map>div{padding:22px 26px}.campaign-map h2{font-size:27px;margin:10px 0}.campaign-map p{color:#c2ccc4;margin-bottom:0}.campaign-task{background:#26382e;border-color:#526448}.campaign-task small{opacity:1;color:#b6c2ad}.campaign-hidden{background:#22342f}.campaign-response{border-color:#93b16e}.campaign-page .btn span{white-space:normal}.campaign-arena .rival-photo{background:#1a252d}.photo-subject{background:#212e35;border:1px solid #45534f;border-radius:12px;padding:14px;margin:18px 0}.photo-subject summary{cursor:pointer;color:#d6e5bb;font-weight:600}.photo-subject p,.photo-subject small{font-size:12px;line-height:1.8;color:#bbc8c2}.photo-subject input[type=range]{width:100%;accent-color:#d0bd83}
@media(max-width:680px){.campaign-map>div{padding:17px}.campaign-map h2{font-size:23px}.campaign-map>img{height:auto}.campaign-chapters{gap:8px}.campaign-chapters>a,.campaign-chapters>button{padding:12px}}
.chart-pin[data-act]{border:0;padding:0;background:transparent;cursor:pointer}.chart-pin[data-act]:hover b,.chart-pin[data-act]:focus-visible b{background:#dae9bd;color:#20352d}.chart-pin[data-act]:focus-visible{outline:2px solid #dae9bd;outline-offset:4px}

/* V9 journey and photo studio entry */
.new-journey{margin:32px 0}.version-pill{font:12px var(--mono);color:var(--lime);border:1px solid #566c4c;padding:5px 10px;border-radius:20px}.journey-features{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.journey-features>a{display:flex;flex-direction:column;align-items:flex-start;gap:12px;background:linear-gradient(150deg,#27332d,#1b222b 70%);border:1px solid #3a4b42;border-radius:14px;padding:22px;color:var(--text);text-decoration:none}.journey-features>a:nth-child(2){background:linear-gradient(150deg,#3b302a,#1b222b 70%)}.journey-features>a:nth-child(3){background:linear-gradient(150deg,#29313d,#1b222b 70%)}.journey-features>a:nth-child(4){background:linear-gradient(150deg,#342c3c,#1b222b 70%)}.journey-features i{color:var(--lime)}.journey-features b{font-size:18px}.journey-features span{font-size:13px;color:var(--muted);line-height:1.7}.journey-features em{margin-top:auto;font:12px var(--sans);color:var(--lime)}.journey-features a:hover{border-color:var(--lime);transform:translateY(-2px)}.extended-breeds{padding:16px;margin:16px 0;border:1px solid #4c5e6a;border-radius:12px;background:#1b2731}.extended-breeds>div{display:grid;gap:6px}.extended-breeds small,.extended-breeds p{font-size:12px;line-height:1.7;color:var(--muted)}.extended-breeds progress{display:block;width:100%;margin:12px 0;accent-color:var(--lime)}.extended-breeds #extended-status:empty{display:none}.switcher{flex-wrap:wrap}.photo-display:has(img[src^="data:image/png"]){background-color:#26303a}.album-photo,.battle-photo,.rival-photo,.exp-cat-real{object-fit:contain!important}
@media(max-width:850px){.journey-features{grid-template-columns:repeat(2,1fr)}}@media(max-width:440px){.journey-features{gap:8px}.journey-features>a{padding:15px;gap:9px}.journey-features b{font-size:16px}}
/* V11: resident interiors, simultaneous doubles and a phone playtest desk. */
.trial-banner{margin:30px 0;padding:26px;display:flex;gap:24px;justify-content:space-between;align-items:center;border:1px solid #425442;border-radius:14px;background:linear-gradient(110deg,#23352c,#19232c)}.trial-banner small{color:#b7ef8c;letter-spacing:.1em}.trial-banner h3{margin:8px 0;font-size:23px}.trial-banner p{color:#aebbac;margin:0}.interior-frame{max-width:640px;margin:auto;background:#c2a67c}.interior-map{width:100%;display:block;image-rendering:pixelated}.roam-journal ol{padding-left:23px;line-height:2.1}.double-arena{gap:18px!important}.double-team{min-width:0;flex:1}.double-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.double-pair .club-fighter{padding:12px 6px;min-width:0}.double-pair .club-fighter b{overflow-wrap:anywhere}.double-pair .sprite{max-width:110px;height:110px}.double-orders{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}.double-orders fieldset{min-width:0;border:1px solid #3c4b4a;border-radius:10px;padding:16px}.double-orders label{display:block;margin-bottom:12px}.double-orders small{color:#a9b7b1;line-height:1.7}.field-status{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0;padding:12px 16px;border-radius:8px;background:#263b37;color:#dbe7c0}.preset-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:15px}.preset-list article{padding:16px;border:1px solid #394a42;border-radius:9px}.preset-list .btn{margin:4px 4px 0 0}.trial-task{display:grid;grid-template-columns:1fr 145px;gap:22px;align-items:center;border-top:1px solid #35433d;padding:20px 0}.trial-task p{color:#adbbb3}.trial-task label{font-size:12px;color:#afbeb7}.cat-field{max-width:100%}textarea.cat-field{display:block;width:100%;box-sizing:border-box;padding:14px;line-height:1.7;margin:10px 0 18px;resize:vertical}.club-shell .exp-panel{margin-top:24px}.photo-subject[open]{border:1px solid #4c5a47;padding:16px;border-radius:10px;margin:16px 0}.photo-subject summary{cursor:pointer;color:#c9e5a7}.interior-frame:focus-visible{outline:3px solid #b7ef8c}.roam-control-row .btn{white-space:normal;line-height:1.5}.preset-list p{overflow-wrap:anywhere}
@media(max-width:620px){.trial-banner{align-items:stretch;flex-direction:column;padding:20px}.double-arena{display:block!important}.double-team{margin:16px 0}.double-pair .club-fighter{min-height:175px}.double-orders{grid-template-columns:1fr}.trial-task{grid-template-columns:1fr;gap:10px}.trial-task label{display:grid;grid-template-columns:1fr 140px;align-items:center}.club-shell .exp-panel{padding:18px}.interior-map{max-height:58vh}.field-status{font-size:13px}.preset-list{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.interior-map,.double-pair{animation:none}}

/* Individual adventure routes: cosmetic frames never crop the source portrait. */
.path-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0}.path-card{display:flex;flex-direction:column;align-items:flex-start;border:1px solid #46534f;border-radius:14px;padding:20px;background:#19252b}.path-card.is-tracking{border-color:#badc90;background:linear-gradient(145deg,#2d3b31,#19252b)}.path-card>img{width:88px;height:88px;align-self:center;margin-bottom:14px}.path-card h4{font-size:21px;margin:7px 0}.path-card ul{list-style:none;padding:0;margin:8px 0 18px;width:100%;font-size:12px;color:#c4d3c6}.path-card li{padding:8px 0;border-bottom:1px solid #3c4947;line-height:1.6;display:flex;justify-content:space-between;gap:12px}.path-card li b{white-space:nowrap;color:#d7e8be}.path-card .btn{margin-top:auto;width:100%}.path-card>p{font-size:12px}.path-card>small{color:#c8dcae}.route-portrait{position:relative;display:inline-block;vertical-align:middle;isolation:isolate;line-height:0}.route-portrait>.sprite{width:100%;height:100%;max-width:100%;object-fit:contain}.route-portrait>.route-overlay{position:absolute!important;inset:0;width:100%!important;height:100%!important;max-width:100%;object-fit:fill!important;z-index:2;pointer-events:none;filter:none;image-rendering:auto!important;border:0;background:none;transform:none}.route-photo{display:block;width:100%;height:100%}.route-battle{width:min(100%,128px);height:108px}.route-battle>.battle-photo{width:100%!important;height:100%!important}.club-fighter>.route-portrait{width:85px;height:85px}.double-pair .club-fighter>.route-portrait{width:min(100%,110px);height:110px}.camp-portrait>.route-portrait,.avatar-box>.route-portrait,.slot>.route-portrait{width:100%;height:100%}.path-card>img{background:radial-gradient(ellipse,#738a6640,transparent 66%)}
@media(max-width:850px){.path-grid{grid-template-columns:1fr}.path-card{display:block}.path-card>img{float:right;width:72px;height:72px;margin:0 0 10px 12px}.path-card>small{display:block}.path-card h4{margin-bottom:14px}.path-card ul{clear:both}.path-card .btn{margin-top:5px}.route-battle{width:min(100%,108px);height:98px}}

.path-preview{width:112px;height:112px;align-self:center;margin:0 auto 14px;background:radial-gradient(ellipse,#738a6640,transparent 66%)}.path-preview>.route-portrait{width:100%;height:100%}.rival-side .route-battle>.rival-photo{width:100%;height:100%;object-fit:contain}
@media(max-width:850px){.path-preview{float:right;width:82px;height:82px;margin:0 0 10px 12px}}
/* V14: the registered collection and shared lamps path */
.asset-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:20px 0}.asset-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 12px;border:1px solid #bfa56b40;border-radius:14px;background:linear-gradient(145deg,#2b3837,#1c242b);text-align:center}.asset-card>img,.asset-card>.cat-sprite{width:120px;height:112px;object-fit:contain}.asset-card small{color:#c4c9b9}.asset-card code{font-size:10px;letter-spacing:1px;color:#a9b1ac}.asset-card p{margin:0;color:#edd28c}.trade-pair{grid-template-columns:1fr 1fr}.co-board{display:grid;grid-template-columns:repeat(7,1fr);aspect-ratio:1;max-width:440px;margin:22px auto;border:8px solid #536757;border-radius:14px;overflow:hidden;background:#b1b993;box-shadow:0 12px 32px #0004}.co-cell{position:relative;display:flex;align-items:center;justify-content:center;border:1px solid #768c6c25;background:#c9c6a4;min-width:0}.co-cell:nth-child(3n){background:#c0bf9a}.co-cell.wall{background:#60756b;box-shadow:inset 0 0 0 4px #7e8b76}.co-cell.plate{box-shadow:inset 0 0 0 4px #d0a644;background:#f0df9e}.co-cell.plate.seat-1{box-shadow:inset 0 0 0 4px #4a91a7;background:#b0d9db}.co-cell>span{position:absolute;top:2px;left:5px;font-size:11px;color:#465443}.co-player{position:relative;display:grid;place-items:center;width:30px;height:32px;background:#bc693f;color:#fff4d9;border:2px solid #ffe4a6;border-radius:45% 45% 35% 35%;box-shadow:0 3px 0 #445040}.co-player:before{content:'';position:absolute;top:-6px;width:25px;height:10px;background:inherit;clip-path:polygon(0 0,40% 80%,65% 80%,100% 0,100% 100%,0 100%)}.co-player.seat-1{background:#467f91;border-color:#b6eff1}.co-pad{margin:12px auto 24px}.co-pad button{touch-action:manipulation}.league-choice{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px}.league-choice>b{grid-column:1/-1}.branch-comparison{display:grid;gap:12px;padding:18px;background:#b39d5a0d;border:1px solid #af995d40;border-radius:12px;margin:16px 0}.branch-comparison article{padding:14px;border-left:3px solid #bcaa70;background:#27312e}.branch-comparison small{line-height:1.8}.evolution-panel{margin-top:26px;padding-top:18px;border-top:1px solid #c3ad733b}.evolution-panel .path-card{min-height:0}.post-route-panel h3{line-height:1.5}#asset-msg{min-height:24px;color:#e5ca8c;line-height:1.6}.asset-desk [aria-pressed=true]{background:#a89660;color:#171e26}@media(max-width:600px){.asset-card{padding:14px 7px}.asset-card>img{width:95px;height:100px}.asset-cards{gap:8px}.co-board{border-width:5px}.co-player{width:25px;height:27px;font-size:12px}.branch-comparison{padding:12px}.post-route-panel .exp-actions{flex-wrap:wrap}}

.guild-update{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:1000;display:flex;align-items:center;gap:16px;width:min(600px,calc(100% - 32px));padding:16px 20px;background:#26372c;border:1px solid #a9d88c;border-radius:14px;box-shadow:0 8px 30px #0008}.guild-update p{flex:1;margin:0;font-size:14px;line-height:1.6}.guild-update button{flex-shrink:0}@media(max-width:640px){.guild-update{bottom:calc(84px + env(safe-area-inset-bottom));align-items:stretch;flex-direction:column;gap:8px;padding:12px 16px}.guild-update button{align-self:flex-end}}

.growth-portrait{width:100%;line-height:0}.growth-portrait>span{min-width:0;min-height:0;width:100%;height:100%}.companion-growth .growth-portrait{width:148px;height:148px;align-self:center;margin:0 auto 12px}.companion-growth .growth-portrait>span>.sprite{width:148px;height:148px}.spec-card>.growth-portrait{display:block!important;width:100%}.sprite-scene>.growth-portrait{width:100%;height:100%}

.economy-status{margin:0 0 20px;padding:12px 16px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;background:#1c2d29;border:1px solid #3e5b46;border-radius:10px;font-size:12px;line-height:1.7}.economy-status span{flex:1;min-width:180px}.economy-status a{color:#bce8a0}


/* V21: usable phone controls and screen insets, including landscape. */
body {
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.club-shell { padding-bottom: calc(65px + env(safe-area-inset-bottom, 0px)); }
.club-shell > .eyebrow { display: flex; }
dialog {
  max-width: calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  max-height: min(92dvh, calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
}
#sheet {
  max-height: min(91dvh, calc(100dvh - 28px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
  scroll-padding-block: 80px 100px;
}
.dialog-head > div { min-width: 0; }
.dialog-head .close { flex-shrink: 0; }
.dialog-body :is(input, select, textarea) { scroll-margin-block: 85px; }

@media (max-width: 850px), (any-pointer: coarse) {
  /* Text fields stay readable without disabling the user's pinch zoom. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
  select, textarea, .cat-field, .secret-box input {
    font-size: 16px;
    min-height: 44px;
    min-width: 0;
    max-width: 100%;
  }
  input[type=file] { width: 100%; max-width: 100%; min-height: 44px; font-size: 16px; }
  input[type=file]::file-selector-button { min-height: 44px; font: inherit; }
  body button, body .btn, body .guide-btn, body .text-btn,
  body .exp-tabs a, body summary, body .save-indicator,
  body .club-picks label, body .club-consent {
    min-height: 44px;
  }
  body :is(.intro, .gym-copy, .hero-ctas, .exp-actions, .club-shell, .work-row, .route-card, .exp-panel, .move-library, .dialog-body .sheet-actions) .btn { min-height: 44px; }
  body .icon-button, body .slot { min-width: 44px; min-height: 44px; }
  body .text-btn, body .save-indicator { align-items: center; }
  body summary { align-content: center; padding-block: 10px; }
  body .roam-pad { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 44px); }
  body .btn { max-width: 100%; white-space: normal; height: auto; }
  body .btn span { min-width: 0; overflow-wrap: anywhere; }
  .club-share, .exp-panel, .route-card, .trial-task, .loadout-grid > * { min-width: 0; }
  .club-shell :is(p, dd, code), .photo-preview :is(p, small) { overflow-wrap: anywhere; }
  .club-shell dd { margin-inline-start: 12px; }
}

@media (max-width: 640px) {
  .bar-inner { gap: 8px; }
  .header-right { gap: 6px; }
  .mobile-nav {
    padding: 5px max(12px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  }
  .footer { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
  #notice { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .growth-celebration { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  .hero-pager { top: 45px; bottom: auto; right: 10px; }
  .hero-pager button { min-width: 44px; min-height: 44px; }
  .slot { width: 44px; height: 44px; }
  .slot img { width: 35px; height: 35px; }
  .team-row { flex-wrap: wrap; row-gap: 8px; }
  .photo-sticky { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .photo-steps { flex-wrap: wrap; gap: 8px 12px; }
  .photo-steps > * { min-width: 0; }
}

@media (max-width: 360px) {
  .brand b { font-size: 16px; }
  .brand-icon, .brand-icon :is(svg, img) { width: 32px; height: 32px; }
  .hero-pager { top: 45px; bottom: auto; }
  .trial-task label { grid-template-columns: 1fr; gap: 6px; }
  .loadout-grid { grid-template-columns: 1fr; }
}
/* AI companions entry spans the existing four-card discovery grid. */
.journey-features>a[href="/companions.html"]{grid-column:1/-1;flex-direction:row;align-items:center;flex-wrap:wrap;border-color:#87aa68;background:linear-gradient(115deg,#34462d,#1d2b2a)}
.journey-features>a[href="/companions.html"] span{flex:1;min-width:180px}.journey-features>a[href="/companions.html"] em{margin-top:0}