:root {
  color-scheme: light;
  --cream: #fff8df;
  --paper: #fff9d8;
  --ink: #516a50;
  --muted: #7f9a70;
  --teal: #159c97;
  --teal-dark: #087a78;
  --gold: #c49a00;
  --gold-dark: #a37d00;
  --green: #7eaa58;
  --green-dark: #72a45c;
  --focus-cream: #fff8e2;
  --focus-cream-soft: rgba(255, 253, 237, 0.95);
  --focus-mint: #dcf7ee;
  --focus-sage: #a7dc78;
  --focus-coffee: #536a4a;
  --focus-line: rgba(145, 193, 115, 0.24);
  --focus-shadow: rgba(115, 153, 98, 0.08);
  --seed-gold: #ffcf4a;
  --seed-gold-soft: #fff39a;
  --energy-blue: #78abe8;
  --energy-blue-soft: #dff0ff;
  --energy-mint: #5ed7b2;
  --energy-lime: #c8ef63;
  --pixel-cream: #fff0c6;
  --pixel-paper: #fff8df;
  --pixel-line: #63865c;
  --pixel-border: #c9e8a5;
  --pixel-sprout: #e8f89d;
  --pixel-sun: #ffd763;
  --pixel-green: #8caf68;
  --pixel-muted-green: #92bd78;
  --pixel-green-dark: #95bd75;
  --pixel-blue: #aee2e8;
  --pixel-blue-dark: #8cc4d0;
  --pixel-label-hidden: 1px;
  --ui-side-gap: clamp(1.9rem, 6.2vw, 4.2rem);
  --parchment: #fff4ca;
  --parchment-deep: #ead895;
  --moss-glass: rgba(105, 145, 82, 0.58);
  --wood-line: rgba(134, 103, 55, 0.34);
  --leaf-glow: rgba(196, 225, 127, 0.48);
  --panel-shadow: rgba(78, 66, 42, 0.28);
  --white-line: rgba(255, 255, 255, 0.72);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

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

button {
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.botanical-card-skin,
.soft-game-skin {
  border-color: var(--focus-line);
  background:
    radial-gradient(ellipse at 16% 0%, rgba(255, 255, 255, 0.86), transparent 46%),
    linear-gradient(180deg, var(--focus-cream-soft), rgba(255, 245, 218, 0.9));
  box-shadow:
    0 0.42rem 1rem var(--focus-shadow),
    0 0.1rem 0 rgba(255, 255, 255, 0.78) inset;
}

.game {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.32), transparent 42rem),
    linear-gradient(180deg, #8ccae5 0%, #b7d995 46%, #82ad65 100%);
}

.garden-stage {
  position: relative;
  width: min(100vw, 1215px);
  height: min(100vh, 1230px);
  height: min(100svh, 1230px);
  aspect-ratio: 1215 / 1230;
  overflow: hidden;
  background: #9fbd70;
  box-shadow: 0 24px 80px rgba(43, 73, 39, 0.35);
}

.garden-panorama,
.fallback-garden {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.garden-panorama {
  z-index: 1;
  display: block;
  object-fit: cover;
  opacity: 1;
}

.garden-panorama.is-missing {
  display: none;
}

.fallback-garden {
  z-index: 0;
  display: block;
  background:
    radial-gradient(circle at 26% 74%, #8dd2e2 0 8%, transparent 8.5%),
    radial-gradient(circle at 49% 23%, #f8edd3 0 12%, transparent 12.5%),
    radial-gradient(circle at 17% 18%, #f7b7bc 0 9%, transparent 9.5%),
    linear-gradient(180deg, #86d4f4 0 14%, #a7d779 14% 100%);
}

.fallback-garden::before {
  content: "";
  position: absolute;
  inset: 8% 4% 0;
  border: min(1vw, 12px) solid rgba(255, 255, 255, 0.85);
  border-bottom: 0;
  border-radius: 12% 12% 0 0;
}

.garden-light-field,
.breeze-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.garden-light-field {
  z-index: 11;
  overflow: hidden;
  mix-blend-mode: screen;
}

.garden-light-field::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 5%;
  top: 0;
  height: 62%;
  background:
    linear-gradient(112deg, transparent 0 18%, rgba(255, 255, 226, 0.2) 22%, transparent 36%),
    linear-gradient(134deg, transparent 0 38%, rgba(255, 245, 169, 0.18) 43%, transparent 57%),
    radial-gradient(ellipse at 48% 46%, rgba(255, 251, 184, 0.32), transparent 48%);
  filter: blur(0.3px);
  opacity: 0.86;
  transform-origin: 50% 10%;
  animation: gardenLightBreathe 7.8s ease-in-out infinite;
}

.garden-light-field::after {
  content: "";
  position: absolute;
  left: 37%;
  top: 49%;
  width: 20%;
  aspect-ratio: 1;
  border: 0.16rem solid rgba(255, 241, 131, 0.42);
  border-radius: 50%;
  box-shadow:
    0 0 0 0.42rem rgba(255, 249, 179, 0.12),
    0 0 2.6rem rgba(255, 232, 108, 0.42);
  opacity: 0.76;
  transform: translate(-50%, -50%);
  animation: gardenCenterGleam 3.8s ease-in-out infinite;
}

.garden-glimmer {
  position: absolute;
  width: clamp(0.38rem, 1vw, 0.74rem);
  height: clamp(0.38rem, 1vw, 0.74rem);
  background: #fff6a6;
  clip-path: polygon(50% 0, 65% 36%, 100% 50%, 65% 64%, 50% 100%, 35% 64%, 0 50%, 35% 36%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  animation: gardenGlimmer 4.8s steps(4, end) infinite;
}

.garden-glimmer--a {
  left: 24%;
  top: 34%;
}

.garden-glimmer--b {
  left: 79%;
  top: 29%;
  animation-delay: 0.9s;
}

.garden-glimmer--c {
  left: 43%;
  top: 63%;
  animation-delay: 1.8s;
}

.garden-glimmer--d {
  left: 18%;
  top: 76%;
  animation-delay: 2.7s;
}

.breeze-layer {
  z-index: 18;
  overflow: hidden;
}

.breeze-leaf,
.breeze-thread {
  position: absolute;
  left: -12%;
  top: var(--breeze-y);
  opacity: 0;
}

.breeze-leaf {
  width: clamp(0.68rem, 1.8vw, 1.18rem);
  height: clamp(0.38rem, 1vw, 0.72rem);
  border-radius: 68% 18% 70% 28%;
  background:
    linear-gradient(135deg, rgba(255, 253, 190, 0.96), rgba(171, 213, 116, 0.82));
  box-shadow: 0 0 0.55rem rgba(255, 243, 154, 0.28);
  transform: rotate(var(--breeze-r));
  animation: breezeLeafDrift var(--breeze-time) ease-in-out infinite;
}

.breeze-leaf--a {
  --breeze-y: 28%;
  --breeze-r: -18deg;
  --breeze-time: 11s;
}

.breeze-leaf--b {
  --breeze-y: 43%;
  --breeze-r: 16deg;
  --breeze-time: 13s;
  animation-delay: 2.2s;
}

.breeze-leaf--c {
  --breeze-y: 63%;
  --breeze-r: -8deg;
  --breeze-time: 14s;
  animation-delay: 4.6s;
}

.breeze-leaf--d {
  --breeze-y: 76%;
  --breeze-r: 22deg;
  --breeze-time: 12s;
  animation-delay: 6.1s;
}

.breeze-thread {
  width: clamp(5.5rem, 18vw, 13rem);
  height: 0.52rem;
  border-top: 0.12rem solid rgba(255, 255, 227, 0.5);
  border-radius: 50%;
  filter: blur(0.1px);
  animation: breezeThreadDrift var(--breeze-time) ease-in-out infinite;
}

.breeze-thread--a {
  --breeze-y: 36%;
  --breeze-time: 10.5s;
}

.breeze-thread--b {
  --breeze-y: 57%;
  --breeze-time: 12.5s;
  animation-delay: 4.2s;
}

.weather-scene {
  position: absolute;
  inset: 0;
  z-index: 16;
  overflow: hidden;
  pointer-events: none;
}

.weather-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  opacity: 1;
}

.weather-scene::before,
.weather-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.garden-stage[data-weather="sunny"] .weather-scene::before {
  opacity: 0.42;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 248, 178, 0.62) 0 4%, transparent 10%),
    radial-gradient(circle at 74% 24%, rgba(255, 255, 225, 0.44) 0 3%, transparent 9%),
    linear-gradient(135deg, rgba(255, 238, 145, 0.18), transparent 48%);
  animation: weatherSunGlow 5.6s ease-in-out infinite;
}

.garden-stage[data-weather="rain"] .weather-scene::before,
.garden-stage[data-weather="storm"] .weather-scene::before {
  opacity: 0.34;
  background:
    linear-gradient(180deg, rgba(158, 189, 211, 0.24), rgba(201, 221, 226, 0.1) 38%, transparent 58%),
    radial-gradient(ellipse at 38% 20%, rgba(176, 205, 222, 0.18), transparent 42%);
  mix-blend-mode: multiply;
  animation: weatherRainMist 6s ease-in-out infinite;
}

.garden-stage[data-weather="rain"] .weather-scene::after {
  opacity: 0.22;
  background:
    linear-gradient(180deg, rgba(106, 146, 185, 0.1), transparent 70%),
    radial-gradient(circle at 20% 78%, rgba(79, 121, 158, 0.2) 0 0.12rem, transparent 0.16rem),
    radial-gradient(circle at 64% 82%, rgba(79, 121, 158, 0.16) 0 0.1rem, transparent 0.14rem),
    radial-gradient(circle at 44% 68%, rgba(79, 121, 158, 0.14) 0 0.09rem, transparent 0.13rem);
  background-size: 100% 100%, 5rem 4rem, 6rem 4.6rem, 4.6rem 3.8rem;
  animation: weatherRainMist 7s ease-in-out infinite;
}

.garden-stage[data-weather="storm"] .weather-scene::after {
  opacity: 0.24;
  background: rgba(255, 247, 174, 0.92);
  animation: weatherLightning 3.8s steps(1, end) infinite;
}

.garden-stage[data-weather="snow"] .weather-scene::before {
  opacity: 0.72;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.92) 0 0.12rem, transparent 0.14rem),
    radial-gradient(circle, rgba(237, 250, 255, 0.8) 0 0.1rem, transparent 0.12rem);
  background-position: 0 0, 1.6rem 2.2rem;
  background-size: 3.8rem 4.2rem, 4.6rem 5.1rem;
  animation: weatherSnow 8s linear infinite;
}

.garden-stage[data-weather="rainbow"] .weather-scene::before {
  inset: 7% auto auto 8%;
  width: 48%;
  aspect-ratio: 1.7 / 1;
  opacity: 0.54;
  border: 0.44rem solid transparent;
  border-top-color: rgba(255, 126, 119, 0.62);
  border-left-color: rgba(255, 214, 105, 0.5);
  border-right-color: rgba(120, 203, 155, 0.5);
  border-radius: 50% 50% 0 0;
  filter: drop-shadow(0 0.35rem 0 rgba(151, 180, 207, 0.22));
  transform: rotate(-6deg);
}

.garden-stage[data-weather="cloud"] .weather-scene::before {
  opacity: 0.56;
  background:
    radial-gradient(ellipse at 13% 9%, rgba(244, 244, 226, 0.86) 0 8%, transparent 20%),
    radial-gradient(ellipse at 36% 5%, rgba(211, 224, 205, 0.82) 0 13%, transparent 30%),
    radial-gradient(ellipse at 68% 10%, rgba(235, 239, 220, 0.78) 0 11%, transparent 27%),
    radial-gradient(ellipse at 91% 7%, rgba(206, 219, 203, 0.68) 0 9%, transparent 24%),
    linear-gradient(180deg, rgba(170, 187, 164, 0.18), rgba(202, 211, 185, 0.08) 36%, transparent 70%);
  animation: weatherCloudDrift 9s ease-in-out infinite;
}

.garden-stage[data-weather="cloud"] .weather-scene::after {
  opacity: 0.14;
  background: rgba(87, 104, 92, 0.48);
  mix-blend-mode: multiply;
}

.garden-stage[data-weather="mist"] .weather-scene::before {
  opacity: 0.22;
  background:
    linear-gradient(180deg, rgba(224, 239, 224, 0.52), transparent 42%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.16) 0 0.4rem, transparent 0.4rem 2rem);
  animation: weatherMist 7s ease-in-out infinite;
}

@keyframes weatherSunGlow {
  50% {
    opacity: 0.58;
    transform: translateY(-0.25rem);
  }
}

@keyframes weatherRainMist {
  50% {
    opacity: 0.18;
    transform: translateY(0.25rem);
  }
}

@keyframes weatherSnow {
  to {
    background-position: 0 8.4rem, 1.6rem 7.3rem;
  }
}

@keyframes weatherMist {
  50% {
    transform: translateX(0.9rem);
  }
}

@keyframes weatherCloudDrift {
  50% {
    opacity: 0.42;
    transform: translateX(0.7rem) translateY(0.16rem);
  }
}

@keyframes weatherLightning {
  0%,
  92%,
  100% {
    opacity: 0;
  }
  93%,
  95% {
    opacity: 0.32;
  }
}

@keyframes gardenLightBreathe {
  0%,
  100% {
    opacity: 0.62;
    transform: rotate(-1deg) scaleX(0.98);
  }

  50% {
    opacity: 0.96;
    transform: rotate(1deg) scaleX(1.03);
  }
}

@keyframes gardenCenterGleam {
  0%,
  100% {
    opacity: 0.48;
    transform: translate(-50%, -50%) scale(0.9);
  }

  50% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@keyframes gardenGlimmer {
  0%,
  30%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.45) rotate(0deg);
  }

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

@keyframes breezeLeafDrift {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(var(--breeze-r));
  }

  12% {
    opacity: 0.82;
  }

  56% {
    opacity: 0.74;
    transform: translate3d(58vw, -1.6rem, 0) rotate(calc(var(--breeze-r) + 56deg));
  }

  100% {
    opacity: 0;
    transform: translate3d(122vw, 0.6rem, 0) rotate(calc(var(--breeze-r) + 120deg));
  }
}

@keyframes breezeThreadDrift {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) skewX(-16deg);
  }

  18%,
  58% {
    opacity: 0.44;
  }

  100% {
    opacity: 0;
    transform: translate3d(120vw, -0.8rem, 0) skewX(-16deg);
  }
}

.fallback-house,
.fallback-pond,
.fallback-path,
.fallback-bed {
  position: absolute;
  border: 0.28rem solid rgba(99, 79, 42, 0.5);
  box-shadow: 0 0.6rem 0 rgba(99, 79, 42, 0.18);
}

.fallback-house {
  left: 38%;
  top: 13%;
  width: 28%;
  height: 22%;
  display: grid;
  place-items: center;
  color: #5e4b2f;
  background: #fff2c5;
  border-radius: 18% 18% 6% 6%;
  font-weight: 900;
}

.fallback-house::before {
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  top: -28%;
  height: 42%;
  background: #78a84d;
  border: inherit;
  transform: skewY(-16deg);
}

.fallback-pond {
  left: 2%;
  bottom: 15%;
  width: 35%;
  height: 22%;
  background: #72c6d5;
  border-radius: 45%;
}

.fallback-path {
  left: 45%;
  top: 34%;
  width: 10%;
  height: 42%;
  background: rgba(235, 209, 130, 0.7);
  border: 0;
  transform: rotate(7deg);
}

.fallback-bed {
  width: 17%;
  height: 10%;
  background: #edc66a;
  border-radius: 8%;
}

.bed-one {
  left: 9%;
  top: 27%;
}

.bed-two {
  right: 9%;
  top: 26%;
}

.bed-three {
  right: 8%;
  bottom: 22%;
}

.hud {
  position: absolute;
  z-index: 20;
}

.hud--top {
  left: clamp(0.8rem, 2vw, 2rem);
  right: clamp(0.8rem, 2vw, 2rem);
  top: clamp(0.8rem, 2vw, 1.8rem);
  display: grid;
  grid-template-areas: "profile tools";
  grid-template-columns: minmax(11rem, auto) minmax(0, 1fr);
  gap: clamp(0.55rem, 1.3vw, 1rem);
  align-items: start;
  pointer-events: none;
}

.hud--top > * {
  pointer-events: auto;
}

.user-chip {
  grid-area: profile;
}

.hud-resources {
  display: inline-flex;
  flex-wrap: nowrap;
  flex: 1 1 auto;
  justify-content: end;
  gap: clamp(0.42rem, 1vw, 0.72rem);
  min-width: 0;
}

.hud-tools {
  grid-area: tools;
  display: inline-flex;
  align-items: center;
  justify-content: end;
  gap: clamp(0.42rem, 1vw, 0.72rem);
  min-width: 0;
}

.user-chip,
.pill,
.stamina-pill,
.round-button,
.clock,
.dock button,
.knowledge-pop,
.sprig-info-card,
.panel {
  border: 0.14rem solid var(--focus-line);
  box-shadow:
    0 0.42rem 1rem var(--focus-shadow),
    0 0.08rem 0 rgba(255, 255, 255, 0.75) inset;
}

.user-chip,
.pill,
.stamina-pill,
.clock,
.round-button {
  min-height: clamp(2.72rem, 5.4vw, 4.25rem);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.48rem;
  padding: 0 clamp(0.72rem, 1.8vw, 1.2rem);
  font-size: clamp(0.92rem, 2vw, 1.35rem);
  font-weight: 900;
}

.photo-tool-button {
  display: grid;
  place-items: center;
  width: clamp(2.82rem, 5.2vw, 3.55rem);
  min-width: clamp(2.82rem, 5.2vw, 3.55rem);
  min-height: clamp(2.82rem, 5.2vw, 3.55rem);
  padding: 0;
}

.pixel-camera-icon,
.pixel-album-icon {
  --camera-line: #5f7455;
  --camera-body: #fff1b8;
  --camera-accent: #9fcd75;
  --camera-glass: #9fcbd8;
  position: relative;
  display: block;
  width: 1.95rem;
  height: 1.55rem;
  margin: auto;
  overflow: hidden;
  image-rendering: pixelated;
  isolation: isolate;
}

.pixel-camera-icon::before,
.pixel-camera-icon::after,
.pixel-camera-icon i,
.pixel-album-icon::before,
.pixel-album-icon::after,
.pixel-album-icon i {
  content: "";
  position: absolute;
  display: block;
  image-rendering: pixelated;
}

.svg-icon-frame {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.svg-icon-frame::before,
.svg-icon-frame::after,
.svg-icon-frame i {
  display: none !important;
}

.svg-icon-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.camera-tool-icon.svg-icon-frame {
  width: clamp(2.08rem, 4vw, 2.48rem);
  height: clamp(2.08rem, 4vw, 2.48rem);
}

.photo-tool-button .camera-tool-icon img {
  width: 100%;
  height: 100%;
}

.garden-action-button--nursery .svg-icon-frame img {
  width: 88%;
  height: 88%;
}

.nursery-drop-icon.svg-icon-frame img {
  width: 62%;
  height: 78%;
}

.pixel-camera-icon::before {
  z-index: 1;
  left: 0.04rem;
  right: 0.04rem;
  bottom: 0;
  height: 1.22rem;
  border: 0.14rem solid var(--camera-line);
  border-radius: 0.16rem;
  background: var(--camera-body);
  box-shadow:
    0 -0.24rem 0 var(--camera-accent) inset,
    0.42rem -0.68rem 0 -0.31rem #e5bd73 inset,
    -0.42rem -0.68rem 0 -0.31rem #e5bd73 inset;
}

.pixel-camera-icon::after {
  z-index: 2;
  right: 0.34rem;
  top: 0.46rem;
  width: 0.34rem;
  height: 0.34rem;
  border: 0.1rem solid var(--camera-line);
  border-radius: 0.08rem;
  background: var(--camera-accent);
  box-shadow: none;
}

.pixel-camera-icon i {
  z-index: 3;
  left: 50%;
  top: 62%;
  width: 0.84rem;
  height: 0.84rem;
  border: 0.14rem solid var(--camera-line);
  border-radius: 50%;
  background: var(--camera-glass);
  box-shadow:
    0 0 0 0.11rem #fff8cc inset,
    0.16rem -0.12rem 0 -0.08rem #fffdf0 inset;
  transform: translate(-50%, -50%);
}

.pixel-album-icon {
  width: 1.68rem;
  height: 1.48rem;
}

.pixel-album-icon::before {
  inset: 0.18rem 0.06rem 0.06rem 0.16rem;
  border: 0.13rem solid #5f7455;
  border-radius: 0.14rem;
  background: #fff1b8;
  box-shadow:
    -0.18rem -0.18rem 0 #dfeec1,
    -0.18rem -0.18rem 0 0.12rem #5f7455;
}

.pixel-album-icon::after {
  left: 0.58rem;
  top: 0.5rem;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: #f2cf69;
}

.pixel-album-icon i {
  left: 0.38rem;
  bottom: 0.22rem;
  width: 0.96rem;
  height: 0.44rem;
  background: #9fcd75;
  clip-path: polygon(0 100%, 34% 34%, 52% 72%, 72% 20%, 100% 100%);
}

.user-chip {
  border-color: rgba(62, 108, 172, 0.2);
  color: var(--focus-coffee);
  background: rgba(255, 252, 241, 0.94);
}

.user-chip span:last-child {
  display: grid;
  gap: 0.08rem;
  justify-items: start;
}

.user-chip b {
  font-size: clamp(0.95rem, 1.8vw, 1.25rem);
  line-height: 1.1;
}

.user-chip small {
  color: #8b725c;
  font-size: clamp(0.7rem, 1.3vw, 0.9rem);
  font-weight: 800;
}

.user-avatar,
.profile-avatar {
  display: grid;
  place-items: center;
  color: #5e4b2f;
  background: #fff1a0;
  border: 0.22rem solid rgba(95, 79, 45, 0.32);
  border-radius: 50%;
  font-weight: 900;
}

.user-avatar {
  width: clamp(2.08rem, 4vw, 2.88rem);
  height: clamp(2.08rem, 4vw, 2.88rem);
  border: 0;
  background: transparent;
  box-shadow: none;
}

.user-avatar img {
  width: 86%;
  height: 86%;
}

.user-avatar img,
.user-avatar svg,
.profile-avatar svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.avatar-sprout {
  position: relative;
  display: block;
  width: 82%;
  aspect-ratio: 1;
  image-rendering: pixelated;
}

.avatar-sprout::before,
.avatar-sprout::after {
  content: "";
  position: absolute;
  image-rendering: pixelated;
}

.avatar-sprout::before {
  left: 50%;
  bottom: 8%;
  width: 34%;
  height: 46%;
  border-radius: 0.18rem;
  background: #6f9a52;
  transform: translateX(-50%);
  box-shadow:
    -0.52rem -0.2rem 0 -0.08rem #9fcd75,
    0.52rem -0.28rem 0 -0.08rem #8caf68;
}

.avatar-sprout::after {
  left: 50%;
  top: 7%;
  width: 78%;
  height: 52%;
  border-radius: 60% 18% 60% 18%;
  background:
    radial-gradient(circle at 35% 36%, #fff1b8 0 12%, transparent 14%),
    linear-gradient(135deg, #b8dc76, #7fae5b);
  transform: translateX(-50%) rotate(-10deg);
}

.weather-pill {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 0.48rem;
  align-items: center;
  min-height: clamp(2.4rem, 5vw, 3.2rem);
  padding: 0 clamp(0.72rem, 1.7vw, 1rem);
  border: 0.12rem solid rgba(95, 131, 79, 0.22);
  border-radius: 999px;
  color: #4e6337;
  background: rgba(255, 248, 205, 0.9);
  box-shadow: none;
  font-size: clamp(0.82rem, 1.55vw, 1rem);
  font-weight: 900;
}

.weather-icon {
  position: relative;
  display: block;
  width: 2.28rem;
  height: 1.82rem;
  min-width: 2.28rem;
  border: 0;
  border-radius: 0.24rem;
  background: #fff6d4;
  overflow: hidden;
  image-rendering: pixelated;
}

.weather-icon::before,
.weather-icon::after,
.weather-icon i {
  position: absolute;
  display: block;
  content: "";
  image-rendering: pixelated;
}

.weather-icon__sun {
  left: 0.34rem;
  top: 0.34rem;
  width: 0.56rem;
  height: 0.56rem;
  border-radius: 0;
  background: #f5cf65;
  box-shadow:
    0.68rem 0.12rem 0 -0.12rem #f5cf65,
    0.16rem 0.66rem 0 -0.12rem #f5cf65;
}

.weather-icon__cloud {
  left: 0.62rem;
  top: 0.92rem;
  width: 1.1rem;
  height: 0.36rem;
  border-radius: 0;
  background: #dcebb8;
  box-shadow:
    -0.26rem 0.14rem 0 #dcebb8,
    0.22rem -0.24rem 0 0.08rem #dcebb8,
    0.56rem 0.04rem 0 #dcebb8;
}

.weather-icon__drop {
  left: 0.68rem;
  top: 1.34rem;
  width: 0.18rem;
  height: 0.34rem;
  border-radius: 0;
  background: #8fc7d8;
  box-shadow:
    0.42rem -0.08rem 0 #8fc7d8,
    0.84rem -0.02rem 0 #8fc7d8;
  opacity: 0;
}

.weather-icon__flake {
  left: 0.64rem;
  top: 1.3rem;
  width: 0.24rem;
  height: 0.24rem;
  background: #f8fbeb;
  box-shadow:
    0.44rem 0.02rem 0 #f8fbeb,
    0.86rem -0.02rem 0 #f8fbeb,
    0.44rem 0.34rem 0 #f8fbeb;
  opacity: 0;
}

.weather-icon--calm .weather-icon__sun {
  opacity: 0.72;
}

.weather-icon--sunny .weather-icon__cloud,
.weather-icon--rainbow .weather-icon__cloud {
  opacity: 0.18;
}

.weather-icon--cloud .weather-icon__sun,
.weather-icon--mist .weather-icon__sun {
  opacity: 0.45;
}

.weather-icon--rain .weather-icon__sun,
.weather-icon--storm .weather-icon__sun,
.weather-icon--snow .weather-icon__sun {
  opacity: 0;
}

.weather-icon--rain .weather-icon__drop,
.weather-icon--storm .weather-icon__drop {
  opacity: 1;
}

.weather-icon--snow .weather-icon__flake {
  opacity: 1;
}

.weather-icon--mist::after {
  left: 0.42rem;
  right: 0.32rem;
  bottom: 0.28rem;
  height: 0.12rem;
  border-top: 0.12rem solid #c8dcb0;
  border-bottom: 0.12rem solid #c8dcb0;
}

.weather-icon--storm::after {
  left: 1.18rem;
  top: 1.24rem;
  width: 0.18rem;
  height: 0.18rem;
  background: #f1d36e;
  box-shadow:
    0.16rem 0.16rem 0 #f1d36e,
    -0.1rem 0.32rem 0 #f1d36e;
}

.pill--level {
  color: #fff8ee;
  background: var(--focus-sage);
  border-color: rgba(58, 107, 57, 0.22);
}

.pill--level span {
  color: #e8f8d8;
}

.pill--seed {
  color: #6f7148;
  background: #fff2c4;
  border-color: #c9e8a5;
}

.pill--seed span {
  display: grid;
  width: 1.62rem;
  height: 1.62rem;
  place-items: center;
  overflow: visible;
}

.pill--seed span img {
  display: block;
  width: 1.48rem;
  height: 1.48rem;
  max-height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  image-rendering: pixelated;
  transform: translateY(-0.03rem) scale(1.05);
}

.stamina-pill {
  min-width: clamp(6.8rem, 14vw, 9.8rem);
  color: #5d7b76;
  background: #eef8d4;
  border-color: #b8ddaa;
}

.stamina-pill > span {
  display: grid;
  width: 1.52rem;
  height: 1.8rem;
  place-items: center;
}

.stamina-pill > span img,
.adventure-energy > span img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.stamina-pill > span img {
  transform: scale(0.78);
}

.stamina-pill i,
.adventure-energy i {
  position: relative;
  display: block;
  width: clamp(2.8rem, 6vw, 4.2rem);
  height: 0.52rem;
  overflow: hidden;
  border: 0.1rem solid #9fc8bd;
  border-radius: 0.18rem;
  background: #fff8df;
}

.stamina-pill em,
.adventure-energy em {
  position: absolute;
  inset: 0 auto 0 0;
  width: 80%;
  border-radius: inherit;
  background: #9fded0;
  transition: width 0.25s ease;
}

.round-button {
  width: clamp(3.4rem, 7vw, 5.4rem);
  padding: 0;
  color: #6f6a5c;
  background: rgba(255, 252, 241, 0.86);
  font-size: clamp(1.15rem, 2.6vw, 2rem);
}

.clock {
  color: #6f6a5c;
  background: rgba(255, 252, 241, 0.78);
  letter-spacing: 0;
}

.clock::first-letter {
  color: #4d8a27;
}

.guide-help-button {
  display: grid;
  flex: 0 0 auto;
  width: clamp(3.4rem, 7vw, 5.4rem);
  aspect-ratio: 1;
  place-items: center;
  border: 0.14rem solid rgba(65, 112, 61, 0.22);
  border-radius: 50%;
  color: #fff8e8;
  background: var(--focus-sage);
  box-shadow: 0 0.42rem 1rem var(--focus-shadow);
  font-size: clamp(1.1rem, 2.5vw, 1.65rem);
  font-weight: 900;
}

.guide-help-button:hover,
.guide-help-button:focus-visible {
  background: #69a65d;
}

.sprig {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 12;
  width: clamp(5.75rem, 10vw, 8.4rem);
  height: clamp(5.75rem, 10vw, 8.4rem);
  border: 0;
  background: transparent;
  transform: translate(-50%, -50%);
  transition:
    left 1.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    top 1.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.25s ease;
  --sprig-scale: 0.9;
}

.sprig::before,
.sprig::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 4%;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.72);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.sprig::before {
  width: clamp(1.35rem, 3vw, 2rem);
  aspect-ratio: 1;
  border: 0.16rem solid rgba(255, 248, 168, 0.92);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 18%, transparent 20%),
    radial-gradient(circle, rgba(255, 243, 120, 0.52), transparent 68%);
  box-shadow: 0 0 1.1rem rgba(255, 241, 123, 0.72);
}

.sprig::after {
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 50%;
  background: #fff8a8;
  box-shadow:
    -1.15rem 0.25rem 0 #fff8a8,
    1.05rem 0.12rem 0 #f5d96e,
    -0.35rem -0.95rem 0 #f7f0b0,
    0.62rem -0.78rem 0 #fffdf1;
}

.sprig.is-hidden {
  display: none;
}

.sprig img,
.ar-target,
.atlas-list b {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0.35rem 0 rgba(79, 61, 33, 0.18));
}

.sprig img {
  transform: scale(var(--sprig-scale));
  animation: float 4.6s ease-in-out infinite;
}

.sprig:hover,
.sprig:focus-visible {
  z-index: 18;
}

.sprig:hover::before,
.sprig:hover::after,
.sprig:focus-visible::before,
.sprig:focus-visible::after,
.sprig.is-expressing::before,
.sprig.is-expressing::after {
  opacity: 1;
  transform: translate(-50%, -88%) scale(1);
}

.sprig:hover::before,
.sprig:focus-visible::before {
  animation: sprigSignal 1.05s ease-in-out infinite;
}

.sprig:hover::after,
.sprig:focus-visible::after {
  animation: sprigSparkle 1.05s ease-in-out infinite;
}

.sprig:hover img,
.sprig:focus-visible img,
.sprig.is-petted img,
.sprig.is-expressing img {
  animation: sprigInvite 0.9s ease-in-out infinite;
  filter:
    drop-shadow(0 0.35rem 0 rgba(79, 61, 33, 0.18))
    drop-shadow(0 0 0.55rem rgba(255, 248, 168, 0.72));
}

.sprig.is-petted::after {
  content: "";
  left: 50%;
  top: 22%;
  width: 0.46rem;
  height: 0.46rem;
  border: 0;
  border-radius: 50%;
  background: #ffe96f;
  box-shadow:
    -1.35rem 0.14rem 0 #ffd7a1,
    -0.92rem -0.8rem 0 #fff5a8,
    0.92rem -0.72rem 0 #bfe58b,
    1.32rem 0.08rem 0 #f5b7c6,
    -0.2rem -1.18rem 0 #ffffff,
    0.3rem 0.72rem 0 #fff0a8;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: sprigMoodStickers 1.35s ease-out both;
}

.sprig[data-mood="happy"]::before {
  border-color: rgba(255, 215, 99, 0.95);
  background: radial-gradient(circle, #fff8a8 0 26%, transparent 28%), rgba(255, 215, 99, 0.5);
}

.sprig[data-mood="sleepy"]::before {
  border-color: rgba(134, 169, 189, 0.85);
  background: radial-gradient(circle, #e5f5ff 0 22%, transparent 24%), rgba(134, 169, 189, 0.42);
}

.sprig[data-mood="focused"]::before {
  border-color: rgba(129, 166, 92, 0.9);
  background: #f5edb7;
}

.sprig[data-mood="rainy"]::before {
  border-color: rgba(104, 148, 174, 0.9);
  background: #d9eff4;
}

.sprig[data-mood="grumpy"]::before {
  border-color: rgba(178, 128, 87, 0.9);
  background: #f3d69b;
}

.sprig[data-action="reading"]::after,
.sprig[data-action="sleeping"]::after,
.sprig[data-action="singing"]::after,
.sprig[data-action="rain"]::after,
.sprig[data-action="grumpy"]::after,
.sprig[data-action="playing"]::after,
.sprig[data-action="snow"]::after {
  left: 50%;
  top: 14%;
  display: block;
  width: 1.38rem;
  height: 1.08rem;
  border: 0;
  border-radius: 50%;
  color: #5e7549;
  background: #fff4bd;
  box-shadow: none;
  font-size: 0;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  image-rendering: pixelated;
}

.sprig[data-action="reading"]::after,
.sprig[data-action="sleeping"]::after,
.sprig[data-action="singing"]::after,
.sprig[data-action="rain"]::after,
.sprig[data-action="grumpy"]::after,
.sprig[data-action="playing"]::after,
.sprig[data-action="snow"]::after {
  border-radius: 0.12rem;
}

.sprig[data-action="reading"]::before,
.sprig[data-action="sleeping"]::before,
.sprig[data-action="singing"]::before,
.sprig[data-action="rain"]::before,
.sprig[data-action="grumpy"]::before,
.sprig[data-action="playing"]::before,
.sprig[data-action="snow"]::before {
  width: 1.72rem;
  height: 1.36rem;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0.14rem;
  background: #fff8d8;
  box-shadow: 0 0.18rem 0 rgba(111, 142, 88, 0.22);
}

.sprig[data-action="reading"]::after {
  content: "";
  width: 1.12rem;
  height: 0.72rem;
  border-radius: 0;
  background:
    linear-gradient(#7fa46c 0 0) 50% 0 / 0.12rem 100% no-repeat,
    #fff1b8;
  box-shadow:
    -0.42rem 0.14rem 0 -0.14rem #bfe58b,
    0.42rem 0.14rem 0 -0.14rem #c8eee7,
    0 -0.48rem 0 -0.18rem #fff8df;
}

.sprig[data-action="sleeping"]::after {
  content: "";
  width: 0.28rem;
  height: 0.28rem;
  background: #86a9bd;
  box-shadow:
    0.36rem -0.24rem 0 #a9c9d2,
    0.76rem -0.5rem 0 #d8eef0;
}

.sprig[data-action="singing"]::after {
  content: "";
  width: 0.22rem;
  height: 0.92rem;
  background: #8d9f55;
  box-shadow:
    0.34rem 0 0 #8d9f55,
    0.34rem -0.22rem 0 #f2cf69,
    -0.18rem 0.68rem 0 0.16rem #fff0a8,
    0.58rem 0.56rem 0 0.16rem #f2cf69;
}

.sprig[data-action="rain"]::after {
  content: "";
  color: #527a94;
  width: 0.22rem;
  height: 0.4rem;
  background: #7db9cd;
  box-shadow:
    0.42rem -0.08rem 0 #7db9cd,
    -0.42rem 0.04rem 0 #7db9cd,
    0 -0.54rem 0 0.12rem #d9eff4;
  transform: translate(-50%, -88%) scale(1);
}

.sprig[data-action="grumpy"]::after {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  background: #d8a063;
  box-shadow:
    -0.32rem 0.26rem 0 #f3d69b,
    0.34rem -0.22rem 0 #ffd7a1,
    0 0.58rem 0 #8d6740;
}

.sprig[data-action="playing"]::after {
  content: "";
  color: #6f9660;
  width: 0.36rem;
  height: 0.36rem;
  background: #bfe58b;
  box-shadow:
    -0.52rem 0.22rem 0 #fff5a8,
    0.54rem 0.08rem 0 #f5b7c6,
    0 -0.5rem 0 #c8eee7;
}

.sprig[data-action="snow"]::after {
  content: "";
  width: 0.26rem;
  height: 0.26rem;
  background: #f0fbff;
  box-shadow:
    -0.44rem 0.28rem 0 #f0fbff,
    0.46rem -0.26rem 0 #d9eff4,
    0.5rem 0.34rem 0 #f0fbff;
}

.sprig[data-action="reading"] img {
  animation: sprigRead 2.4s steps(2, end) infinite;
}

.sprig[data-action="sleeping"] img {
  animation: sprigSleep 3.2s ease-in-out infinite;
}

.sprig[data-action="singing"] img {
  animation: sprigSing 1.4s steps(2, end) infinite;
}

.sprig[data-action="rain"] img,
.sprig[data-action="grumpy"] img {
  animation: sprigRainListen 2.2s ease-in-out infinite;
}

.sprig[data-action="playing"] img {
  animation: sprigPlay 1.2s steps(2, end) infinite;
}

.sprig[data-action="snow"] img {
  animation: sprigSnowWatch 2.8s ease-in-out infinite;
}

.sprig[data-animation-state="requested"]::before {
  opacity: 1;
  transform: translate(-50%, -88%) scale(1);
}

.sprig--plantain {
  --sprig-scale: 1.2;
}

.sprig--fern,
.sprig--clover,
.sprig--fisheye,
.sprig--orchid {
  --sprig-scale: 0.82;
}

.sprig--tea,
.sprig--huangjing {
  --sprig-scale: 0.95;
}

.sprig--dandelion {
  --sprig-scale: 0.78;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(-1.2deg) scale(var(--sprig-scale));
  }

  50% {
    transform: translateY(-7%) rotate(2deg) scale(var(--sprig-scale));
  }
}

@keyframes sprigInvite {
  50% {
    transform: translateY(-14%) scale(calc(var(--sprig-scale) * 1.08));
  }
}

@keyframes sprigRead {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg) scale(var(--sprig-scale));
  }
  50% {
    transform: translateY(-5%) rotate(2deg) scale(var(--sprig-scale));
  }
}

@keyframes sprigSleep {
  0%,
  100% {
    transform: translateY(0) scale(calc(var(--sprig-scale) * 0.98));
  }
  50% {
    transform: translateY(3%) scale(calc(var(--sprig-scale) * 0.95));
  }
}

@keyframes sprigSing {
  0%,
  100% {
    transform: translateY(-4%) scale(var(--sprig-scale));
  }
  50% {
    transform: translateY(-12%) scale(calc(var(--sprig-scale) * 1.05));
  }
}

@keyframes sprigRainListen {
  0%,
  100% {
    transform: translateY(0) rotate(-3deg) scale(var(--sprig-scale));
  }
  50% {
    transform: translateY(1%) rotate(3deg) scale(calc(var(--sprig-scale) * 0.98));
  }
}

@keyframes sprigPlay {
  0%,
  100% {
    transform: translate(-5%, -4%) scale(var(--sprig-scale));
  }
  50% {
    transform: translate(5%, -10%) scale(calc(var(--sprig-scale) * 1.04));
  }
}

@keyframes sprigSnowWatch {
  0%,
  100% {
    transform: translateY(0) rotate(0deg) scale(var(--sprig-scale));
  }
  50% {
    transform: translateY(-7%) rotate(-4deg) scale(var(--sprig-scale));
  }
}

@keyframes sprigSignal {
  50% {
    transform: translate(-50%, -103%) scale(1.14);
  }
}

@keyframes sprigSparkle {
  50% {
    transform: translate(-50%, -118%) scale(0.88) rotate(12deg);
  }
}

@keyframes sprigMoodStickers {
  0% {
    opacity: 0;
    transform: translate(-50%, -20%) scale(0.72);
  }

  24% {
    opacity: 1;
    transform: translate(-50%, -82%) scale(1.08);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -142%) scale(1);
  }
}

.knowledge-pop,
.sprig-info-card,
.panel {
  position: absolute;
  z-index: 30;
  color: var(--focus-coffee);
  background:
    radial-gradient(ellipse at 16% 0%, rgba(255, 255, 255, 0.82), transparent 44%),
    linear-gradient(180deg, rgba(255, 252, 241, 0.96), rgba(255, 243, 219, 0.92));
}

.knowledge-pop {
  left: 50%;
  top: 50%;
  width: fit-content;
  min-width: min(7.2rem, calc(100vw - 2rem));
  max-width: min(18rem, calc(100vw - 2rem));
  min-height: 0;
  padding: 0.62rem 0.9rem;
  border-radius: 1.45rem;
  color: var(--focus-coffee);
  font-size: clamp(0.82rem, 1.7vw, 1.05rem);
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
  overflow-wrap: anywhere;
  transform: translate(-50%, calc(-100% - 0.85rem));
}

.knowledge-pop::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.44rem;
  width: 0.32rem;
  height: 0.32rem;
  border: 0;
  border-radius: 0.04rem;
  background: #fff8df;
  box-shadow:
    -0.32rem -0.18rem 0 #fff8df,
    0.32rem -0.18rem 0 #fff8df,
    0 0 0 0.08rem rgba(145, 193, 115, 0.18);
  transform: translateX(-50%);
}

.knowledge-pop.is-hidden {
  display: none;
}

.feature-tip {
  position: absolute;
  z-index: 74;
  max-width: min(12rem, 60vw);
  padding: 0.42rem 0.62rem;
  border: 0.12rem solid var(--focus-line);
  border-radius: 999px;
  color: var(--focus-coffee);
  background: var(--focus-cream-soft);
  box-shadow: 0 0.36rem 0.9rem var(--focus-shadow);
  font-size: clamp(0.72rem, 1.45vw, 0.86rem);
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
}

.feature-tip.is-hidden {
  display: none;
}

.guide-layer {
  position: absolute;
  inset: 0;
  z-index: 80;
  overflow: hidden;
  background: rgba(45, 65, 34, 0.36);
  backdrop-filter: blur(0.8px);
  pointer-events: none;
}

.guide-layer.is-observing {
  background: rgba(45, 65, 34, 0.08);
  backdrop-filter: none;
}

.guide-layer.is-hidden {
  display: none;
}

.guide-layer.is-entering-garden .guide-highlight,
.guide-layer.is-entering-garden .guide-cursor,
.guide-layer.is-entering-garden .guide-card {
  opacity: 0;
  pointer-events: none;
}

.guide-garden-intro {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff9d5;
  text-shadow:
    0 0.12rem 0 rgba(81, 106, 80, 0.42),
    0 0 1.1rem rgba(255, 244, 160, 0.64);
  background:
    linear-gradient(180deg, rgba(255, 248, 203, 0.18), rgba(118, 170, 91, 0.1) 42%, rgba(36, 66, 34, 0.16)),
    radial-gradient(ellipse at center, rgba(255, 245, 165, 0.3), transparent 58%);
  animation: guideGardenIntroFade 1.24s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  pointer-events: none;
}

.guide-garden-intro.is-hidden {
  display: none;
}

.guide-garden-intro b {
  position: relative;
  z-index: 3;
  margin-top: 17%;
  padding: 0.22rem 0.52rem;
  color: #fffbe4;
  font-size: clamp(1.3rem, 4.8vw, 2.25rem);
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  transform: translateY(0.4rem);
  animation: guideEntryText 1.05s ease-out both;
}

.guide-entry-gate {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(46%, 24rem);
  aspect-ratio: 1.24 / 1;
  border: 0.28rem solid rgba(255, 245, 185, 0.88);
  border-bottom: 0;
  border-radius: 48% 48% 8% 8%;
  box-shadow:
    0 0 0 0.28rem rgba(135, 174, 91, 0.32),
    0 0 2.4rem rgba(255, 244, 155, 0.52);
  transform: translate(-50%, -50%) scale(0.82);
  animation: guideEntryGateOpen 1.18s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.guide-entry-gate::before,
.guide-entry-gate::after {
  content: "";
  position: absolute;
  top: 16%;
  bottom: 0;
  width: 50%;
  border: 0.12rem solid rgba(255, 249, 206, 0.62);
  background:
    linear-gradient(90deg, rgba(139, 179, 99, 0.5), rgba(229, 242, 173, 0.38));
  transform-origin: 0 100%;
  animation: guideEntryDoorOpen 1.06s ease-out both;
}

.guide-entry-gate::before {
  left: 0;
  border-radius: 0.3rem 0 0.18rem 0.8rem;
}

.guide-entry-gate::after {
  right: 0;
  border-radius: 0 0.3rem 0.8rem 0.18rem;
  transform-origin: 100% 100%;
  animation-name: guideEntryDoorOpenRight;
}

.guide-entry-light {
  position: absolute;
  left: 50%;
  top: 47%;
  width: 38%;
  height: 46%;
  background:
    linear-gradient(180deg, rgba(255, 251, 189, 0.58), rgba(255, 232, 105, 0.18) 54%, transparent 88%);
  clip-path: polygon(48% 0, 62% 0, 100% 100%, 0 100%);
  filter: blur(0.08rem);
  opacity: 0;
  transform: translate(-50%, -16%) scaleY(0.7);
  animation: guideEntryLightFall 1.2s ease-out both;
}

.guide-entry-leaf {
  position: absolute;
  top: 45%;
  width: clamp(0.7rem, 1.8vw, 1.1rem);
  height: clamp(0.42rem, 1vw, 0.68rem);
  border-radius: 68% 20% 72% 22%;
  background: rgba(229, 246, 145, 0.92);
  box-shadow: 0 0 0.58rem rgba(255, 246, 166, 0.35);
  opacity: 0;
  animation: guideEntryLeafSweep 1.24s ease-in-out both;
}

.guide-entry-leaf--a {
  left: 17%;
  animation-delay: 0.08s;
}

.guide-entry-leaf--b {
  left: 39%;
  top: 32%;
  animation-delay: 0.2s;
}

.guide-entry-leaf--c {
  left: 76%;
  top: 55%;
  animation-delay: 0.14s;
}

.guide-highlight {
  position: absolute;
  border: 0.18rem solid rgba(186, 219, 132, 0.95);
  border-radius: 1.25rem;
  box-shadow:
    0 0 0 999rem rgba(25, 38, 20, 0.18),
    0 0.35rem 1rem rgba(86, 131, 54, 0.22);
  pointer-events: none;
  transition:
    left 0.42s cubic-bezier(0.2, 0.8, 0.2, 1),
    top 0.42s cubic-bezier(0.2, 0.8, 0.2, 1),
    width 0.42s cubic-bezier(0.2, 0.8, 0.2, 1),
    height 0.42s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.2s ease;
}

.guide-layer:not(.is-awaiting-target) .guide-cursor {
  opacity: 0;
}

.guide-layer.is-observing .guide-highlight {
  opacity: 1;
  border-color: rgba(151, 190, 102, 0.88);
  box-shadow:
    0 0 0 999rem rgba(255, 252, 222, 0.1),
    0 0 0 0.14rem rgba(255, 246, 180, 0.68);
}

.guide-layer.is-observing .guide-card {
  pointer-events: auto;
}

.guide-layer.is-awaiting-target .guide-highlight {
  border-color: rgba(108, 170, 77, 0.95);
  box-shadow:
    0 0 0 999rem rgba(25, 38, 20, 0.12),
    0 0 0 0.18rem rgba(255, 248, 190, 0.72),
    0 0.45rem 1.1rem rgba(86, 131, 54, 0.24);
  animation: guideLeafPulse 1.08s steps(2, end) infinite;
}

.guide-layer.is-confirming .guide-highlight {
  border-color: rgba(151, 196, 88, 0.98);
  box-shadow:
    0 0 0 999rem rgba(25, 38, 20, 0.1),
    0 0 0 0.24rem rgba(255, 244, 165, 0.82),
    0 0.4rem 1.1rem rgba(126, 170, 88, 0.24);
  animation: guideConfirmPulse 0.42s ease-out both;
}

.guide-layer.is-confirming .guide-card {
  transform: translateY(-0.08rem);
}

.guide-cursor {
  position: absolute;
  left: var(--guide-x);
  top: var(--guide-y);
  z-index: 3;
  width: 3.35rem;
  height: 3.35rem;
  filter: drop-shadow(0 0.18rem 0 rgba(80, 111, 54, 0.22));
  transform: translate(0.1rem, -2.9rem) rotate(-18deg);
  animation: guideCursorTap 1.35s cubic-bezier(0.45, 0, 0.2, 1) infinite;
  pointer-events: none;
}

.guide-cursor::before,
.guide-cursor::after {
  content: "";
  position: absolute;
  image-rendering: pixelated;
}

.guide-cursor::before {
  left: 0.36rem;
  top: 0.12rem;
  width: 2.55rem;
  height: 2.55rem;
  border: 0.24rem solid #638a4b;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 24% 54%, #a8cf73 0 14%, transparent 16%),
    radial-gradient(ellipse at 74% 28%, #d6ec9b 0 13%, transparent 15%);
  transform: rotate(38deg);
}

.guide-cursor::after {
  left: 1.52rem;
  top: 2.18rem;
  width: 1.36rem;
  height: 0.42rem;
  border-radius: 999px 999px 999px 0;
  background: #7ea45c;
  box-shadow:
    -0.52rem -0.42rem 0 -0.1rem #b8dc76,
    0.18rem 0.28rem 0 #557a42;
  transform: rotate(42deg);
}

.guide-cursor.is-shaking {
  animation: guideCursorShake 0.34s ease-in-out;
}

.guide-highlight::before,
.guide-highlight::after {
  content: "";
  position: absolute;
  width: 0.9rem;
  height: 0.55rem;
  border-radius: 70% 20% 70% 20%;
  background: rgba(173, 215, 116, 0.88);
  transform: rotate(-28deg);
}

.guide-highlight::before {
  left: 0.8rem;
  top: -0.42rem;
}

.guide-highlight::after {
  right: 0.8rem;
  bottom: -0.38rem;
  transform: rotate(152deg);
}

.guide-highlight.is-stepping {
  animation: guideLeafFocus 1.8s ease-in-out infinite;
}

.guide-highlight.is-hidden {
  display: none;
}

.guide-card {
  position: absolute;
  display: grid;
  grid-template-columns: clamp(5.4rem, 18vw, 7.2rem) minmax(0, 1fr);
  gap: 0.55rem;
  align-items: end;
  width: min(31rem, calc(100% - 1.2rem));
  color: var(--ink);
  pointer-events: auto;
  transition:
    left 0.52s cubic-bezier(0.2, 0.8, 0.2, 1),
    top 0.52s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.24s ease;
}

.guide-target-nudge {
  animation: guideTargetNudge 0.58s steps(2, end);
}

.guide-observe-glow {
  animation: guideObserveGlow 1.2s ease-in-out 2;
}

.panel--identity.guide-scroll-glow::after {
  content: "⌄";
  position: absolute;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 30;
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border: 0.12rem solid rgba(171, 210, 128, 0.72);
  border-radius: 50%;
  color: #5f7b42;
  background: rgba(255, 248, 210, 0.92);
  font-size: 1.45rem;
  font-weight: 950;
  transform: translateX(-50%);
  animation: guideScrollHint 1.25s ease-in-out infinite;
  pointer-events: none;
}

@keyframes guideTargetNudge {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.12rem);
  }
}

@keyframes guideObserveGlow {
  0%,
  100% {
    outline: 0 solid rgba(255, 231, 111, 0);
  }
  50% {
    outline: 0.22rem solid rgba(255, 231, 111, 0.48);
  }
}

@keyframes guideScrollHint {
  0%,
  100% {
    transform: translate(-50%, 0);
    opacity: 0.72;
  }
  50% {
    transform: translate(-50%, 0.38rem);
    opacity: 1;
  }
}

@keyframes guideGardenIntroFade {
  0% {
    opacity: 0;
  }

  16%,
  72% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes guideEntryText {
  0% {
    opacity: 0;
    transform: translateY(0.85rem) scale(0.96);
  }

  38%,
  76% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-0.2rem) scale(1.02);
  }
}

@keyframes guideEntryGateOpen {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72);
  }

  26%,
  76% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

@keyframes guideEntryDoorOpen {
  0%,
  30% {
    transform: perspective(20rem) rotateY(0deg);
  }

  76%,
  100% {
    transform: perspective(20rem) rotateY(-42deg);
  }
}

@keyframes guideEntryDoorOpenRight {
  0%,
  30% {
    transform: perspective(20rem) rotateY(0deg);
  }

  76%,
  100% {
    transform: perspective(20rem) rotateY(42deg);
  }
}

@keyframes guideEntryLightFall {
  0% {
    opacity: 0;
    transform: translate(-50%, -22%) scaleY(0.55);
  }

  28%,
  78% {
    opacity: 0.92;
    transform: translate(-50%, -14%) scaleY(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -8%) scaleY(1.08);
  }
}

@keyframes guideEntryLeafSweep {
  0% {
    opacity: 0;
    transform: translate3d(-1rem, 0.4rem, 0) rotate(-18deg);
  }

  22%,
  72% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: translate3d(5.4rem, -2.8rem, 0) rotate(88deg);
  }
}

.guide-card.is-stepping {
  animation: guideCardArrive 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.guide-card.is-leaving {
  opacity: 0;
  transform: translateY(0.4rem) scale(0.985);
  pointer-events: none;
}

.guide-layer.is-transitioning .guide-highlight {
  opacity: 0.72;
}

.guide-mascot-frame {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0.22rem;
  width: 100%;
  margin: 0;
  padding: 0;
  justify-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform-origin: 50% 86%;
}

.guide-mascot-frame.is-acting[data-motion="nod"] {
  animation: guidePlantNod 1.85s ease-in-out infinite;
}

.guide-mascot-frame.is-acting[data-motion="leaf-wave"] {
  animation: guideLeafWave 1.9s ease-in-out infinite;
}

.guide-mascot-frame.is-acting[data-motion="peek"] {
  animation: guidePlantPeek 2s ease-in-out infinite;
}

.guide-mascot-frame.is-acting[data-motion="sway"] {
  animation: guidePlantSway 2.15s ease-in-out infinite;
}

.guide-mascot-frame.is-acting[data-motion="step"] {
  animation: guidePlantStep 1.9s ease-in-out infinite;
}

.guide-mascot-frame.is-acting[data-motion="tilt"] {
  animation: guidePlantThink 2.1s ease-in-out infinite;
}

.guide-mascot-frame.is-acting[data-motion="bounce"] {
  animation: guidePlantBounce 1.7s ease-in-out infinite;
}

.guide-mascot {
  display: block;
  width: min(112%, 6.9rem);
  aspect-ratio: 1;
  object-fit: contain;
  filter:
    drop-shadow(0 0.34rem 0 rgba(78, 66, 42, 0.14))
    drop-shadow(0 0 0.48rem rgba(255, 248, 176, 0.48));
  transform-origin: 50% 82%;
}

.guide-speaker {
  display: block;
  width: fit-content;
  max-width: 100%;
  min-height: 1.48rem;
  margin: 0;
  padding: 0.24rem 0.42rem;
  border: 0.1rem solid rgba(104, 122, 96, 0.32);
  border-radius: 0.46rem;
  color: #546b40;
  background: rgba(255, 248, 220, 0.92);
  box-shadow: 0 0.14rem 0 rgba(110, 126, 83, 0.14);
  font-size: clamp(0.66rem, 1.35vw, 0.82rem);
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
}

@keyframes guideCursorTap {
  0%,
  100% {
    transform: translate(0.1rem, -2.9rem) rotate(-18deg) scale(1);
  }
  50% {
    transform: translate(-0.04rem, -2.62rem) rotate(-14deg) scale(1.04);
  }
}

@keyframes guideCursorShake {
  0%,
  100% {
    transform: translate(0.1rem, -2.9rem) rotate(-18deg);
  }
  35% {
    transform: translate(-0.18rem, -2.86rem) rotate(-26deg);
  }
  70% {
    transform: translate(0.48rem, -2.82rem) rotate(-8deg);
  }
}

@keyframes guideLeafPulse {
  0%,
  100% {
    outline: 0 solid rgba(142, 198, 93, 0);
  }
  50% {
    outline: 0.28rem solid rgba(142, 198, 93, 0.38);
  }
}

@keyframes guideConfirmPulse {
  0% {
    outline: 0 solid rgba(255, 244, 165, 0);
  }
  60% {
    outline: 0.36rem solid rgba(255, 244, 165, 0.58);
  }
  100% {
    outline: 0.08rem solid rgba(255, 244, 165, 0);
  }
}

.guide-mascot-frame::after {
  content: "";
  position: absolute;
  right: 2%;
  top: 8%;
  width: 0.86rem;
  height: 0.58rem;
  border-radius: 64% 24% 64% 24%;
  background: rgba(126, 170, 88, 0.86);
  pointer-events: none;
  transform: rotate(28deg);
}

.guide-mascot-frame::before {
  content: "";
  position: absolute;
  right: 18%;
  top: 3%;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: rgba(255, 248, 168, 0.92);
  opacity: 0;
  pointer-events: none;
}

.guide-mascot-frame[data-expression="happy"]::before,
.guide-mascot-frame[data-expression="bright"]::before {
  opacity: 1;
}

.guide-mascot-frame[data-expression="focused"]::after {
  background: rgba(21, 156, 151, 0.78);
  transform: rotate(8deg);
}

.guide-mascot-frame[data-expression="thinking"]::after {
  background: rgba(196, 154, 0, 0.78);
  transform: rotate(-18deg);
}

.guide-mascot-frame[data-expression="ready"]::after {
  width: 1.05rem;
  height: 0.72rem;
  background: rgba(126, 170, 88, 0.9);
}

.guide-bubble {
  position: relative;
  z-index: 1;
  padding: clamp(0.78rem, 1.8vw, 1rem);
  border: 0.14rem solid var(--focus-line);
  border-radius: 1.2rem;
  background: var(--focus-cream-soft);
  box-shadow: 0 0.5rem 1.25rem var(--focus-shadow);
}

.guide-bubble::before {
  content: "";
  position: absolute;
  left: -0.34rem;
  top: auto;
  bottom: 1.08rem;
  width: 0.34rem;
  height: 0.34rem;
  border: 0;
  border-radius: 0.04rem;
  background: var(--focus-cream-soft);
  box-shadow:
    -0.2rem 0.2rem 0 var(--focus-cream-soft),
    -0.28rem 0.28rem 0 0.06rem rgba(118, 154, 86, 0.18);
  transform: none;
}

.guide-count {
  margin: 0 0 0.22rem;
  color: #79a86a;
  font-size: clamp(0.72rem, 1.45vw, 0.86rem);
  font-weight: 900;
}

.guide-bubble .guide-speaker {
  margin: 0 0 0.22rem;
  min-height: 0;
  color: var(--pixel-green-dark);
  font-size: clamp(0.72rem, 1.45vw, 0.88rem);
  font-weight: 900;
  line-height: 1.2;
}

.guide-bubble h2 {
  margin: 0 0 0.35rem;
  color: #314f2c;
  font-size: clamp(1.12rem, 2.7vw, 1.52rem);
  font-weight: 950;
  line-height: 1.15;
}

.guide-bubble p {
  margin: 0;
  min-height: 2.1em;
  color: #6f7c5a;
  font-size: clamp(0.78rem, 1.65vw, 0.92rem);
  font-weight: 780;
  line-height: 1.42;
}

.guide-bubble p[data-legacy-guide-height] {
  min-height: 4.55em;
}

.guide-bubble .guide-count,
.guide-bubble .guide-speaker {
  min-height: 0;
}

.guide-bubble p.is-typing::after {
  content: "";
  display: inline-block;
  width: 0.48em;
  height: 1em;
  margin-left: 0.12rem;
  border-radius: 999px;
  background: var(--focus-sage);
  vertical-align: -0.14em;
  animation: guideCursorBlink 0.72s steps(2, start) infinite;
}

.guide-meter {
  position: relative;
  height: 0.55rem;
  margin: 0.9rem 0 1rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(112, 91, 63, 0.14);
}

.guide-meter i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--focus-sage), var(--seed-gold));
  transition: width 0.48s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes guideCardArrive {
  0% {
    opacity: 1;
    transform: translateY(0.42rem) scale(0.985);
  }

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

@keyframes guideLeafFocus {
  0%,
  100% {
    box-shadow:
      0 0 0 999rem rgba(25, 38, 20, 0.18),
      0 0.35rem 1rem rgba(86, 131, 54, 0.2);
  }

  50% {
    box-shadow:
      0 0 0 999rem rgba(25, 38, 20, 0.18),
      0 0.45rem 1.2rem rgba(126, 170, 88, 0.34);
  }
}

@keyframes guidePlantNod {
  0%,
  100% {
    transform: rotate(0deg) translateY(0);
  }

  50% {
    transform: rotate(3deg) translateY(0.16rem);
  }
}

@keyframes guideLeafWave {
  0%,
  100% {
    transform: rotate(-2deg);
  }

  50% {
    transform: rotate(5deg) translateY(-0.1rem);
  }
}

@keyframes guidePlantPeek {
  0%,
  100% {
    transform: translateX(0) scale(1);
  }

  50% {
    transform: translateX(0.24rem) scale(1.03);
  }
}

@keyframes guidePlantSway {
  0%,
  100% {
    transform: rotate(-3deg);
  }

  50% {
    transform: rotate(4deg);
  }
}

@keyframes guidePlantStep {
  0%,
  100% {
    transform: translateX(0) rotate(0deg);
  }

  50% {
    transform: translateX(0.18rem) rotate(2deg);
  }
}

@keyframes guidePlantThink {
  0%,
  100% {
    transform: rotate(-4deg);
  }

  50% {
    transform: rotate(2deg) translateY(0.08rem);
  }
}

@keyframes guidePlantBounce {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  45% {
    transform: translateY(-0.22rem) scale(1.03);
  }
}

@keyframes guideCursorBlink {
  50% {
    opacity: 0;
  }
}

.guide-actions {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 0.5rem;
}

.guide-primary,
.guide-secondary {
  min-height: 2.75rem;
  padding: 0 0.9rem;
  border: 0;
  border-radius: 999px;
  font-weight: 900;
}

.guide-primary {
  color: #eafbf5;
  background: #78abe8;
  box-shadow: 0 0.42rem 1rem rgba(70, 131, 196, 0.2);
}

.guide-primary:hover,
.guide-primary:focus-visible {
  transform: translateY(-0.08rem);
  box-shadow:
    0 0.52rem 1.2rem rgba(70, 131, 196, 0.26),
    0 0 0 0.22rem rgba(255, 248, 168, 0.32);
}

.guide-secondary {
  color: #6b5b40;
  background: rgba(255, 252, 241, 0.82);
  box-shadow: 0 0.26rem 0.75rem var(--focus-shadow);
}

.guide-secondary:hover,
.guide-secondary:focus-visible {
  background: rgba(255, 255, 255, 0.94);
}

.guide-secondary:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.sprig-info-card {
  z-index: 58;
  left: 5%;
  right: 5%;
  bottom: 9.5%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  align-items: center;
  min-height: 6.4rem;
  padding: 0.9rem 1.1rem;
  overflow: hidden;
  border-radius: 1.75rem;
}

.sprig-info-card::before {
  content: "";
  position: absolute;
  right: 1.15rem;
  top: 0.72rem;
  width: 3.8rem;
  height: 1.35rem;
  border-radius: 70% 24% 70% 24%;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.5), transparent 48%),
    linear-gradient(135deg, rgba(121, 182, 106, 0.54), rgba(121, 182, 106, 0.24));
  box-shadow:
    -2.7rem 1.85rem 0 -0.5rem rgba(144, 178, 85, 0.26),
    0 0 0 0.12rem rgba(92, 124, 61, 0.12);
  transform: rotate(-10deg);
  pointer-events: none;
}

.sprig-info-card.is-hidden {
  display: none;
}

.sprig-info-card img {
  width: 4.8rem;
  height: 4.8rem;
  object-fit: contain;
}

.sprig-info-card h1 {
  margin: 0 0 0.25rem;
  font-size: clamp(1.2rem, 3vw, 1.75rem);
}

.sprig-info-card p {
  margin: 0;
  color: var(--muted);
  font-weight: 900;
}

.bubble-label,
.panel-kicker {
  margin: 0 0 0.45rem;
  color: #79a86a;
  font-weight: 900;
}

.panel-helper {
  margin: 0;
  color: #7b8a67;
  font-size: clamp(0.84rem, 1.75vw, 1rem);
  font-weight: 760;
  line-height: 1.45;
}

.panel-header {
  display: grid;
  gap: 0.34rem;
  width: 100%;
  margin: 0 0 clamp(0.72rem, 1.8vw, 1rem);
  padding-right: 2.7rem;
}

.panel-header h2 {
  color: #4f6544;
  font-size: clamp(1.55rem, 4.3vw, 2.15rem);
  line-height: 1.12;
}

.panel-header h2,
.panel-header p {
  margin: 0;
}

.panel-header p {
  color: #7b8a67;
  font-size: clamp(0.78rem, 1.55vw, 0.92rem);
  font-weight: 720;
  line-height: 1.45;
}

.panel h2 {
  margin: 0 0 0.8rem;
  font-size: clamp(1.4rem, 4vw, 2.5rem);
  line-height: 1.1;
}

.panel p {
  margin-bottom: 0;
  font-size: clamp(0.95rem, 2vw, 1.2rem);
  line-height: 1.65;
}

.panel .panel-header h2 {
  margin: 0;
  color: #4f6544;
  font-size: clamp(1.42rem, 3.7vw, 1.92rem);
  line-height: 1.12;
}

.panel .panel-header p {
  margin: 0;
  color: #7b8a67;
  font-size: clamp(0.76rem, 1.45vw, 0.9rem);
  font-weight: 720;
  line-height: 1.42;
}

.close-panel {
  position: absolute;
  right: clamp(1rem, 2.5vw, 2rem);
  top: clamp(0.7rem, 2vw, 1.4rem);
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  color: #9b8a71;
  background: transparent;
  font-size: 2rem;
  line-height: 1;
}

.panel {
  display: none;
  left: var(--ui-side-gap);
  right: var(--ui-side-gap);
  top: 16%;
  max-height: 70%;
  overflow: auto;
  padding: clamp(1.2rem, 3vw, 2.2rem);
  border-radius: 1.9rem;
  isolation: isolate;
}

.panel::before {
  content: "";
  position: absolute;
  left: clamp(1.2rem, 4vw, 2.8rem);
  right: clamp(3.8rem, 8vw, 5rem);
  top: 0.72rem;
  height: 0.72rem;
  border-radius: 999px;
  background: var(--focus-mint);
  opacity: 0.88;
  pointer-events: none;
}

.panel.is-open {
  display: block;
}

.panel--profile {
  inset: 0;
  max-height: none;
  display: none;
  overflow: auto;
  padding: clamp(3rem, 6vw, 5rem) clamp(1.2rem, 4vw, 3rem);
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.65), transparent 11rem),
    radial-gradient(circle at 84% 92%, rgba(255, 255, 255, 0.5), transparent 13rem),
    repeating-radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.42) 0 0.08rem, transparent 0.09rem 1.35rem),
    linear-gradient(180deg, #fff0c7, #ffe2aa);
  box-shadow: none;
}

.panel--profile.is-open {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: clamp(1.2rem, 3vw, 2rem);
}

.phone-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: min(100%, 44rem);
  color: #514017;
}

.phone-header img {
  width: clamp(3.1rem, 7vw, 4.4rem);
  height: clamp(3.1rem, 7vw, 4.4rem);
  object-fit: contain;
}

.phone-header h2 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.5rem);
}

.phone-card {
  width: min(100%, 44rem);
  min-height: clamp(34rem, 64vh, 48rem);
  padding: clamp(1.6rem, 4vw, 2.8rem);
  border-radius: clamp(2.2rem, 6vw, 4.4rem);
  background: rgba(255, 253, 247, 0.9);
  box-shadow: 0 0.75rem 2.5rem rgba(120, 88, 36, 0.16);
}

.phone-status {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  color: #b5a286;
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  font-weight: 900;
}

.phone-status span {
  display: grid;
  width: 3.2rem;
  height: 2.35rem;
  place-items: center;
  border-radius: 999px;
  background: transparent;
}

.phone-status span img {
  width: 2.35rem;
  height: 2.35rem;
  object-fit: contain;
  image-rendering: pixelated;
}

.phone-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.3rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem);
  margin-top: clamp(3rem, 8vw, 6rem);
}

.phone-app {
  display: grid;
  gap: 0.9rem;
  justify-items: center;
  border: 0;
  background: transparent;
  color: #4a3a16;
  font-size: clamp(1rem, 2.2vw, 1.45rem);
  font-weight: 900;
}

.phone-app span {
  display: grid;
  width: clamp(5.6rem, 13vw, 9.2rem);
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border-radius: 26%;
  box-shadow: inset 0 0 1.4rem rgba(255, 255, 255, 0.38), 0 0.35rem 0 rgba(120, 88, 36, 0.08);
  font-size: clamp(2.5rem, 7vw, 5rem);
}

.phone-app.app-id span {
  background: #bde4c4;
}

.phone-app.app-map span {
  background: #dce893;
}

.phone-app.app-camera span {
  background: #bfe0fa;
}

.phone-app.app-ar span {
  color: #fff;
  background: #ffe0a9;
}

.phone-app.app-atlas span {
  background: #f5dfbe;
}

.phone-app.app-garden span {
  background: #ffc2c7;
}

.phone-icon {
  position: relative;
}

.phone-icon::before,
.phone-icon::after {
  content: "";
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.phone-icon--id::before {
  width: 48%;
  height: 58%;
  border: 0.28rem solid #3f8a59;
  border-radius: 0.8rem;
  background:
    radial-gradient(circle at 50% 32%, #3f8a59 0 0.42rem, transparent 0.46rem),
    linear-gradient(#3f8a59 0 0) 50% 72% / 58% 0.28rem no-repeat,
    rgba(255, 255, 255, 0.72);
}

.phone-icon--map::before {
  width: 60%;
  height: 60%;
  border: 0.26rem solid #6f8d25;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 46%, #6f8d25 47% 53%, transparent 54%),
    linear-gradient(transparent 46%, #6f8d25 47% 53%, transparent 54%),
    rgba(255, 255, 255, 0.62);
}

.phone-icon--map::after {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50% 50% 50% 0;
  background: #e37d62;
  transform: translate(12%, -82%) rotate(-45deg);
}

.phone-icon--camera::before {
  width: 60%;
  height: 44%;
  border: 0.26rem solid #3577a8;
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.7);
}

.phone-icon--camera::after {
  width: 24%;
  aspect-ratio: 1;
  border: 0.24rem solid #3577a8;
  border-radius: 50%;
  background: #bfe0fa;
}

.phone-icon--ar::before {
  width: 58%;
  height: 58%;
  border: 0.26rem solid #bc7b2a;
  border-radius: 0.8rem;
  background:
    linear-gradient(45deg, transparent 42%, #bc7b2a 43% 57%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, #bc7b2a 43% 57%, transparent 58%),
    rgba(255, 255, 255, 0.62);
}

.phone-icon--atlas::before {
  width: 52%;
  height: 58%;
  border: 0.26rem solid #8a6535;
  border-radius: 0.5rem 0.9rem 0.9rem 0.5rem;
  background:
    linear-gradient(#8a6535 0 0) 50% 36% / 58% 0.22rem no-repeat,
    linear-gradient(#8a6535 0 0) 50% 56% / 58% 0.22rem no-repeat,
    rgba(255, 255, 255, 0.68);
}

.phone-icon--garden::before {
  width: 56%;
  height: 42%;
  top: auto;
  bottom: 22%;
  border: 0.24rem solid #a94d5b;
  border-radius: 0.45rem;
  background: rgba(255, 255, 255, 0.68);
  transform: translateX(-50%);
}

.phone-icon--garden::after {
  width: 66%;
  height: 34%;
  top: 22%;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: #a94d5b;
  transform: translateX(-50%);
}

.phone-dots {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: clamp(3.6rem, 7vw, 6rem);
}

.phone-dots i {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: #d9d9d9;
}

.phone-dots i:first-child {
  outline: 0.35rem solid #52c2b8;
  background: #fff8e9;
}

.phone-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  align-self: center;
  min-width: min(100%, 25rem);
  width: min(100%, 25rem);
  min-height: 5.1rem;
  padding: 0 1.8rem;
  border: 0;
  border-radius: 1.7rem;
  color: #fff;
  background: linear-gradient(135deg, #60b884, #7fcfa1);
  box-shadow: 0 0.4rem 0 rgba(94, 116, 63, 0.22);
  font-size: clamp(1.25rem, 3vw, 1.9rem);
  font-weight: 900;
}

.phone-home span {
  display: grid;
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: 0.72rem;
  color: #65b984;
  background: #fff;
}

.phone-reset,
.phone-hidden-stats {
  display: none;
}

.phone-panel .level-bar {
  display: none;
}

.panel--identity {
  inset: 0;
  max-height: none;
  padding:
    clamp(1rem, 2.8vw, 2rem)
    clamp(1.55rem, 4.4vw, 3rem)
    calc(clamp(3.8rem, 8vw, 6.5rem) + 4.4rem);
  border: 0;
  border-radius: 0;
  color: #443922;
  background: #fbf4df;
  box-shadow: none;
}

.panel--identity.is-open {
  display: block;
}

.identity-topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  width: min(100%, 68rem);
  margin: 0 auto clamp(1rem, 2.4vw, 1.6rem);
}

.identity-topbar h2 {
  margin: 0;
  color: #4d4126;
  text-align: center;
  font-size: clamp(1.65rem, 4vw, 2.8rem);
}

.identity-back,
.identity-tools button {
  display: grid;
  width: clamp(2.82rem, 5.2vw, 3.72rem);
  aspect-ratio: 1;
  place-items: center;
  border: 0.12rem solid #a9c885;
  border-radius: 0.38rem;
  color: #5f7d49;
  background: #fff7cf;
  box-shadow: none;
  font-size: 0;
  font-weight: 900;
}

.identity-back:hover,
.identity-back:focus-visible,
.identity-tools button:hover,
.identity-tools button:focus-visible {
  background: #f4ffd0;
  border-color: #86b86a;
  outline: none;
}

.identity-tools {
  display: flex;
  gap: 0.48rem;
}

.identity-top-icon {
  position: relative;
  display: block;
  width: 1.82rem;
  height: 1.82rem;
  image-rendering: pixelated;
}

.identity-top-icon.svg-icon-frame {
  display: grid;
  place-items: center;
  overflow: visible;
  background: transparent;
}

.identity-top-icon.svg-icon-frame img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.identity-top-icon::before,
.identity-top-icon::after,
.identity-top-icon i {
  content: "";
  position: absolute;
  display: block;
  image-rendering: pixelated;
}

.identity-top-icon.svg-icon-frame::before,
.identity-top-icon.svg-icon-frame::after,
.identity-top-icon.svg-icon-frame i {
  display: none;
}

.identity-top-icon--back::before {
  left: 50%;
  top: 50%;
  width: 0.96rem;
  height: 0.2rem;
  border-radius: 0.08rem;
  background: #6f9466;
  transform: translate(-42%, -50%);
}

.identity-top-icon--back::after {
  left: 0.42rem;
  top: 50%;
  width: 0.68rem;
  height: 0.68rem;
  border-left: 0.2rem solid #6f9466;
  border-bottom: 0.2rem solid #6f9466;
  transform: translateY(-50%) rotate(45deg);
}

.identity-top-icon--back i {
  right: 0.38rem;
  top: 0.48rem;
  width: 0.52rem;
  height: 0.34rem;
  border-radius: 70% 20% 70% 20%;
  background: #9fcd75;
  transform: rotate(-18deg);
}

.identity-top-icon--share::before {
  left: 50%;
  top: 52%;
  width: 1.18rem;
  height: 1.32rem;
  border: 0.12rem solid #6f9466;
  border-radius: 0.14rem;
  background: #fff1b8;
  transform: translate(-50%, -50%);
}

.identity-top-icon--share::after {
  right: 0.3rem;
  top: 0.22rem;
  width: 0.44rem;
  height: 0.44rem;
  border-left: 0.12rem solid #6f9466;
  border-bottom: 0.12rem solid #6f9466;
  background: #d9ef9f;
}

.identity-top-icon--share i {
  left: 50%;
  top: 56%;
  width: 0.58rem;
  height: 0.58rem;
  border: 0.1rem solid #86a56e;
  border-radius: 50%;
  background: #f4edc4;
  box-shadow:
    -0.36rem -0.44rem 0 -0.2rem #9fcd75,
    0.36rem -0.44rem 0 -0.2rem #9fcd75;
  transform: translate(-50%, -50%);
}

.identity-top-icon--edit::before {
  left: 50%;
  top: 52%;
  width: 1.12rem;
  height: 0.26rem;
  border-radius: 0.08rem;
  background: #6f9466;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.identity-top-icon--edit::after {
  right: 0.36rem;
  bottom: 0.36rem;
  width: 0.34rem;
  height: 0.28rem;
  background: #dfbd72;
  transform: rotate(-45deg);
}

.identity-hero,
.identity-section {
  width: min(100%, 68rem);
  margin: 0 auto clamp(0.75rem, 1.8vw, 1rem);
  border: 0.12rem solid rgba(121, 102, 60, 0.16);
  border-radius: 1.35rem;
  background: #fffdf5;
  box-shadow: none;
}

.identity-hero {
  display: grid;
  grid-template-columns: minmax(12.2rem, 0.82fr) minmax(17rem, 1.18fr);
  gap: clamp(1.65rem, 3.4vw, 2.7rem);
  align-items: stretch;
  padding: clamp(1.65rem, 3.4vw, 2.55rem) clamp(1.9rem, 4.6vw, 3.4rem);
}

.identity-page.is-hidden {
  display: none;
}

.identity-portrait {
  position: relative;
  min-height: clamp(14rem, 29vw, 17rem);
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 0.42rem;
  background: #eef4cf;
}

.identity-portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.identity-portrait img {
  position: absolute;
  left: 50%;
  bottom: 10%;
  width: 63%;
  height: 66%;
  object-fit: contain;
  transform: translateX(-50%);
}

.identity-portrait button {
  display: none;
}

.identity-profile h3 {
  margin: 0 0 0.42rem;
  color: #4c3a21;
  font-size: clamp(1.7rem, 3.2vw, 2.35rem);
  line-height: 1.06;
  overflow-wrap: anywhere;
}

.identity-profile {
  position: relative;
  display: grid;
  align-content: center;
  min-width: 0;
  padding: clamp(0.4rem, 1.1vw, 0.7rem) clamp(0.35rem, 0.8vw, 0.62rem);
}

.identity-profile p,
.growth-card p,
.story-section p {
  margin: 0;
  color: #4e493d;
  font-size: clamp(0.95rem, 1.8vw, 1.25rem);
  line-height: 1.7;
}

.identity-world-line {
  margin-top: 0.42rem !important;
  padding: 0.1rem 0;
  border: 0;
  color: #64885a !important;
  background: transparent;
  font-size: clamp(0.86rem, 1.55vw, 1rem) !important;
  font-weight: 900;
}

.identity-profile ul {
  display: grid;
  gap: 0.52rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.identity-profile li {
  display: grid;
  grid-template-columns: 1.35rem 2.75rem minmax(0, 1fr);
  gap: 0.52rem;
  align-items: center;
  min-height: 1.82rem;
  font-size: clamp(0.95rem, 1.8vw, 1.18rem);
}

.identity-profile li span {
  display: grid;
  width: 1.35rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 0;
  color: #72995c;
  background: transparent;
  opacity: 0.82;
}

.identity-profile li b {
  font-weight: 900;
}

.identity-profile li em {
  min-width: 0;
  font-style: normal;
  overflow-wrap: anywhere;
}

.identity-certified-mark {
  flex: 0 0 auto;
  align-self: center;
  margin-left: -0.2rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #68a858;
  background: transparent;
  font-size: clamp(1rem, 2vw, 1.28rem);
  font-weight: 1000;
  line-height: 1.05;
  letter-spacing: 0;
  transform: none;
}

.growth-card {
  align-self: center;
  overflow: hidden;
  border: 0.1rem solid rgba(130, 116, 81, 0.13);
  border-radius: 1rem;
  background: rgba(255, 250, 232, 0.62);
}

.growth-card[hidden] {
  display: none;
}

.growth-card h4 {
  margin: 0;
  padding: 0.75rem 1rem;
  color: #335c25;
  background: rgba(235, 232, 202, 0.58);
  text-align: center;
  font-size: clamp(1rem, 2vw, 1.3rem);
}

.growth-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.35rem;
  padding: 1.2rem 0.7rem 0.7rem;
  text-align: center;
}

.growth-steps span {
  display: grid;
  gap: 0.35rem;
  color: #aaa18d;
  font-size: 1.8rem;
  filter: grayscale(0.9);
}

.growth-steps span.is-active {
  color: #4f992d;
  filter: none;
}

.growth-steps b {
  font-size: 0.72rem;
}

.growth-card i,
.stat-grid i {
  position: relative;
  display: block;
  height: 0.7rem;
  overflow: hidden;
  border-radius: 999px;
  background: #e5dfc9;
}

.growth-card i {
  margin: 0.45rem 1rem 0.9rem;
}

.growth-card i em,
.stat-grid i em {
  position: absolute;
  inset: 0 auto 0 0;
  width: 58%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5ea83d, #7fc857);
}

.growth-card p {
  padding: 0 1rem 1.1rem;
}

.identity-section {
  padding: clamp(0.95rem, 2vw, 1.35rem);
}

.panel--identity .identity-section {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: clamp(0.65rem, 1.6vw, 1rem) clamp(0.18rem, 0.8vw, 0.55rem);
}

.identity-page {
  box-sizing: border-box;
}

.identity-section h3 {
  margin: 0 0 0.9rem;
  color: #4d4126;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
}

.stat-grid article {
  display: grid;
  gap: 0.6rem;
  min-width: 0;
  padding: 0.9rem;
  border: 0.1rem solid rgba(130, 116, 81, 0.14);
  border-radius: 0.9rem;
  background: rgba(255, 252, 242, 0.75);
}

.stat-grid strong {
  font-size: clamp(0.88rem, 1.7vw, 1rem);
}

.stat-grid b {
  font-size: clamp(1.45rem, 3vw, 2rem);
}

.stat-grid small {
  color: #6e6654;
  font-size: 0.55em;
}

.identity-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.75rem, 1.8vw, 1rem);
  width: min(100%, 68rem);
  margin: 0 auto;
}

.item-row,
.relation-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}

.item-row article,
.relation-row article {
  display: grid;
  gap: 0.35rem;
  justify-items: center;
  text-align: center;
  font-weight: 800;
}

.item-row article {
  padding: 0.25rem 0;
  border: 0;
  border-radius: 0;
}

.item-row img,
.relation-row img {
  width: 3.6rem;
  height: 3.6rem;
  object-fit: contain;
}

.add-item {
  place-items: center;
  color: #c9b99a;
  font-size: 2rem;
}

.house-section > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
}

.house-pixel {
  width: clamp(8.5rem, 18vw, 13rem);
  aspect-ratio: 520 / 405;
}

.house-pixel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.house-section p {
  margin: 0;
  line-height: 1.7;
  font-weight: 800;
}

.house-section button {
  justify-self: start;
  min-height: 2.9rem;
  margin-top: 0.6rem;
  padding: 0 1.2rem;
  border: 0;
  border-radius: 0.7rem;
  color: #fff;
  background: #6db343;
  font-weight: 900;
}

.relation-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.relation-row--empty article {
  min-height: 5.4rem;
  padding: 0.35rem 0.15rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.relation-row--empty b {
  display: grid;
  width: 2.9rem;
  height: 2.9rem;
  place-items: center;
  border: 0.1rem dashed rgba(126, 164, 91, 0.42);
  border-radius: 50%;
  color: rgba(104, 135, 83, 0.52);
  background: rgba(237, 247, 210, 0.58);
  font-size: 1.7rem;
}

.relation-row--empty small {
  color: #8b8b6c;
  font-size: 0.74rem;
  font-weight: 850;
  line-height: 1.35;
}

.relation-row i {
  display: flex;
  gap: 0.15rem;
}

.relation-row i em {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: #f36ea0;
}

.story-section p {
  font-weight: 700;
}

.achievement-grid,
.outfit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.72rem;
}

.achievement-grid article,
.outfit-grid article,
.passport-story-card {
  padding: 0.45rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.achievement-grid article,
.outfit-grid article {
  display: grid;
  gap: 0.35rem;
  min-height: 4.7rem;
}

.achievement-grid article::before,
.outfit-grid article::before {
  content: "□";
  color: #9ebc7c;
  font-weight: 1000;
}

.achievement-grid article.is-earned::before,
.outfit-grid article.is-active::before {
  content: "◆";
  color: #75a65f;
}

.achievement-grid b,
.outfit-grid b {
  color: #4d6f45;
  font-size: 1rem;
}

.achievement-grid span,
.outfit-grid span,
.passport-story-card span {
  color: #726a58;
  font-size: 0.84rem;
  font-weight: 850;
  line-height: 1.45;
}

.passport-story-card {
  display: grid;
  gap: 0.6rem;
}

.identity-tabs {
  position: static;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.58rem, 1.8vw, 1rem);
  width: min(100%, 40rem);
  margin: 0 auto clamp(1.05rem, 2.3vw, 1.45rem);
  padding: 0 clamp(0.25rem, 1vw, 0.6rem);
  border: 0;
  border-radius: 0;
  background: transparent;
}

.identity-atlas-page {
  margin-top: 0;
}

.identity-atlas-page .atlas-map {
  position: absolute;
  right: clamp(0.7rem, 2vw, 1rem);
  top: clamp(0.7rem, 2vw, 1rem);
}

.identity-atlas-page .atlas-book-layout {
  width: 100%;
  margin-top: clamp(0.85rem, 2vw, 1.2rem);
  column-gap: 0.48rem;
}

.identity-tabs button {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(2.9rem, auto) auto;
  align-items: center;
  justify-items: center;
  justify-content: center;
  gap: 0.18rem;
  min-width: 0;
  min-height: 4rem;
  padding: 0.28rem 0.18rem 0.24rem;
  border: 0;
  border-radius: 0.28rem;
  color: rgba(92, 112, 74, 0.62);
  background: transparent;
  font-size: clamp(1.08rem, 2.4vw, 1.42rem);
  font-weight: 900;
}

.identity-tabs button b {
  font: inherit;
  letter-spacing: 0;
}

.identity-tabs button.is-active {
  color: #557c3d;
  background: transparent;
  border-color: transparent;
}

.identity-tabs button.is-active::after {
  content: "";
  position: absolute;
  left: 34%;
  right: 34%;
  bottom: 0.02rem;
  height: 0.18rem;
  border-radius: 999px;
  background: #a8cf86;
}

.backpack-tab-icon,
.atlas-tab-icon {
  position: relative;
  display: block;
  width: clamp(2.18rem, 5.9vw, 2.86rem);
  height: clamp(2.18rem, 5.9vw, 2.86rem);
  flex: 0 0 auto;
  image-rendering: pixelated;
}

.backpack-tab-icon::before,
.backpack-tab-icon::after,
.backpack-tab-icon i,
.atlas-tab-icon::before,
.atlas-tab-icon::after,
.atlas-tab-icon em {
  content: "";
  position: absolute;
  display: block;
  image-rendering: pixelated;
}

.backpack-tab-icon--passport::before {
  inset: 0.22rem 0.34rem;
  border: 0.14rem solid #6f9466;
  border-radius: 0.16rem;
  background: #ffe7df;
}

.backpack-tab-icon--passport::after {
  right: 0.28rem;
  bottom: 0.22rem;
  width: 0.9rem;
  height: 0.9rem;
  border: 0.12rem solid #6f9466;
  border-radius: 50%;
  background: #f5e8b1;
}

.backpack-tab-icon--passport i {
  left: 0.56rem;
  top: 0.54rem;
  width: 0.62rem;
  height: 0.62rem;
  background: #9fcd75;
  box-shadow: 0 0.74rem 0 #9fcbd8;
}

.backpack-tab-icon--atlas::before {
  left: 50%;
  top: 50%;
  width: 1.84rem;
  height: 1.42rem;
  border: 0.14rem solid #6f9466;
  border-radius: 0.12rem;
  background: #fff1b8;
  box-shadow: inset 0.78rem 0 0 -0.56rem #c8eee7;
  transform: translate(-50%, -50%);
}

.backpack-tab-icon--atlas::after {
  left: 50%;
  top: 50%;
  width: 0.12rem;
  height: 1.42rem;
  background: #6f9466;
  transform: translate(-50%, -50%);
}

.backpack-tab-icon--atlas i {
  left: 50%;
  top: 50%;
  width: 0.34rem;
  height: 0.46rem;
  border-radius: 0.14rem 0.14rem 0.08rem 0.08rem;
  background: #9fcd75;
  box-shadow:
    -0.54rem 0.26rem 0 -0.04rem #dfbd72,
    0.58rem -0.18rem 0 -0.04rem #9fcd75;
  transform: translate(-50%, -50%);
}

.backpack-tab-icon--items::before {
  left: 50%;
  top: 55%;
  width: 1.68rem;
  height: 1.22rem;
  border: 0.14rem solid #6f9466;
  border-radius: 0.16rem;
  background: #fff1b8;
  transform: translate(-50%, -50%);
}

.backpack-tab-icon--items::after {
  left: 50%;
  top: 31%;
  width: 0.78rem;
  height: 0.46rem;
  border: 0.14rem solid #6f9466;
  border-bottom: 0;
  border-radius: 0.3rem 0.3rem 0 0;
  transform: translate(-50%, -50%);
}

.backpack-tab-icon--items i {
  left: 50%;
  top: 58%;
  width: 0.7rem;
  height: 0.3rem;
  background: #9fcd75;
  box-shadow: 0 -0.42rem 0 #f2cf69;
  transform: translate(-50%, -50%);
}

.identity-name-row {
  display: flex;
  gap: 0.48rem;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}

.identity-name-row h3 {
  flex: 0 1 auto;
}

.identity-name-row #editIdentityName {
  margin-left: 0.08rem;
}

.identity-name-row button,
.identity-name-editor button,
.identity-bio-editor button,
.identity-signature button {
  min-width: 2.8rem;
  min-height: 2.1rem;
  border: 0;
  border-radius: 0;
  color: #6f9466;
  background: transparent;
  font-weight: 900;
}

.identity-name-block {
  display: grid;
  gap: 0.18rem;
}

.identity-name-hint {
  margin: 0;
  color: rgba(108, 131, 84, 0.7);
  font-size: 0.78rem;
  font-weight: 900;
}

.identity-name-editor,
.identity-bio-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: end;
  margin: 0.7rem 0;
}

.identity-name-editor.is-hidden,
.identity-bio-editor.is-hidden {
  display: none;
}

.identity-name-editor span,
.identity-bio-editor span {
  grid-column: 1 / -1;
  color: #7c735f;
  font-weight: 900;
}

.identity-name-editor input,
.identity-bio-editor input {
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 0.12rem solid var(--pixel-border);
  border-radius: 0.45rem;
  color: var(--pixel-line);
  background: #fff8e8;
  font: inherit;
  font-weight: 900;
}

.identity-inline-input {
  width: min(100%, 12rem);
  min-width: 0;
  min-height: 2.35rem;
  padding: 0 0.28rem;
  border: 0;
  border-bottom: 0.12rem solid rgba(122, 161, 95, 0.78);
  border-radius: 0;
  color: #4c3a21;
  background: transparent;
  font: inherit;
  font-size: clamp(1.78rem, 5.4vw, 2.42rem);
  font-weight: 1000;
  line-height: 1.02;
  outline: 0;
}

.identity-inline-input.is-hidden {
  display: none;
}

.identity-inline-input:focus {
  background: rgba(255, 248, 215, 0.52);
}

.identity-inline-input--bio {
  width: 100%;
  min-height: 2.1rem;
  color: #6e7f5b;
  font-size: clamp(0.92rem, 2.4vw, 1.08rem);
  font-weight: 900;
  line-height: 1.45;
}

.identity-signature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.62rem;
  align-items: start;
  padding: 0.48rem 0;
  border-top: 0.1rem solid rgba(126, 164, 91, 0.22);
  border-bottom: 0.1rem solid rgba(126, 164, 91, 0.18);
}

.atlas-link-summary {
  display: grid;
  gap: 0.52rem;
  padding: 0.78rem;
  border: 0.11rem solid rgba(126, 164, 91, 0.58);
  border-radius: 0.58rem;
  background:
    linear-gradient(180deg, rgba(255, 250, 223, 0.78), rgba(229, 244, 192, 0.68)),
    rgba(255, 248, 232, 0.58);
}

.atlas-link-summary strong {
  color: #587745;
  font-size: clamp(1.08rem, 2.4vw, 1.35rem);
}

.atlas-link-summary span {
  color: #6a684d;
  font-weight: 900;
}

.atlas-link-summary i {
  display: block;
  height: 0.95rem;
  padding: 0.1rem;
  border: 0.1rem solid rgba(126, 164, 91, 0.72);
  border-radius: 0.35rem;
  background:
    repeating-linear-gradient(90deg, rgba(129, 163, 94, 0.13) 0 0.08rem, transparent 0.08rem 1.35rem),
    #fff8e8;
}

.atlas-link-summary em {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 0.12rem;
  background:
    linear-gradient(180deg, rgba(255, 250, 214, 0.42), transparent),
    linear-gradient(90deg, #b8d879, #89b960);
}

.identity-friends,
.identity-atlas-grid,
.specialty-shelf {
  display: grid;
  gap: 0.78rem;
}

.identity-section-note {
  margin: -0.25rem 0 0.72rem;
  color: #73845b;
  font-size: 0.84rem;
  font-weight: 820;
  line-height: 1.45;
}

.specialty-section,
.seed-pouch-section {
  position: relative;
  display: grid;
  gap: 0.65rem;
}

.specialty-section {
  padding-inline: clamp(0.42rem, 1.4vw, 0.8rem);
  border-left: 0.18rem solid #c9aa6f;
  background: rgba(255, 244, 203, 0.32);
}

.seed-pouch-section {
  padding-inline: clamp(0.42rem, 1.4vw, 0.8rem);
  border-left: 0.18rem solid #9fc879;
  background: rgba(244, 255, 216, 0.34);
}

.specialty-section h3,
.seed-pouch-section h3 {
  position: relative;
  display: inline-flex;
  gap: 0.46rem;
  align-items: center;
  margin-bottom: 0.1rem;
  color: #6a5437;
  font-size: clamp(1.02rem, 2.55vw, 1.22rem);
  line-height: 1.18;
}

.specialty-section h3 b,
.seed-pouch-section h3 b {
  font: inherit;
}

.section-title-icon {
  display: grid;
  width: clamp(2.1rem, 5vw, 2.52rem);
  height: clamp(2.1rem, 5vw, 2.52rem);
  place-items: center;
  flex: 0 0 auto;
}

.section-title-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.specialty-section h3::before,
.specialty-section h3::after {
  display: none;
}

.specialty-section h3::before,
.seed-pouch-section h3::before {
  content: "";
  display: block;
  width: 1.58rem;
  height: 1.58rem;
  flex: 0 0 auto;
  border: 0.12rem solid #6f9466;
  border-radius: 0.18rem;
  background: #fff1b8;
  image-rendering: pixelated;
}

.specialty-section h3::after,
.seed-pouch-section h3::after {
  content: "";
  position: absolute;
  left: 0.42rem;
  top: 50%;
  display: block;
  image-rendering: pixelated;
  transform: translateY(-50%);
}

.specialty-section h3::after {
  width: 0.82rem;
  height: 0.62rem;
  border: 0.1rem solid #6f9466;
  border-top: 0.22rem solid #d9ad62;
  background: #9fcbd8;
}

.seed-pouch-section h3::after {
  width: 0.74rem;
  height: 0.9rem;
  border: 0.1rem solid #8f6a41;
  border-radius: 50% 46% 48% 54%;
  background: #d9ad62;
  box-shadow:
    0.18rem -0.42rem 0 -0.26rem #6f9466,
    0.34rem 0.18rem 0 -0.3rem #fff1b8 inset;
}

.specialty-section h3::before,
.specialty-section h3::after {
  display: none;
}

.identity-friends {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0 1rem 1rem;
}

.identity-friends article,
.identity-atlas-grid article,
.specialty-card,
.specialty-empty {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.35rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.specialty-section .specialty-empty {
  min-height: 3.8rem;
  align-content: center;
  padding: 0.84rem 0.9rem;
  border: 0.12rem dashed rgba(194, 166, 105, 0.72);
  border-radius: 0.46rem;
  color: #8a744d;
  background: rgba(255, 244, 203, 0.58);
}

.landform-overview {
  display: grid;
  gap: clamp(0.56rem, 1.8vw, 0.82rem);
  min-width: 0;
  padding: clamp(0.56rem, 1.8vw, 0.82rem);
  border: 0.12rem solid rgba(181, 158, 104, 0.52);
  border-radius: 0.54rem;
  background: #fff6d4;
}

.landform-panorama {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 7;
  border: 0.12rem solid rgba(132, 165, 103, 0.42);
  border-radius: 0.46rem;
  background: #d9edbf;
}

.landform-panorama img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.landform-overview-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.46rem;
  align-items: center;
  min-width: 0;
}

.landform-overview-copy strong {
  color: #6a5437;
  font-size: clamp(1.02rem, 2.7vw, 1.28rem);
  line-height: 1.12;
}

.landform-overview-copy span {
  color: #7d7356;
  font-size: clamp(0.72rem, 1.8vw, 0.82rem);
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
}

.landform-switcher {
  display: grid;
  grid-template-columns: repeat(2, clamp(2rem, 5.6vw, 2.5rem));
  gap: 0.38rem;
  justify-content: end;
  margin-top: -0.08rem;
}

.landform-switcher button {
  display: grid;
  width: clamp(2rem, 5.6vw, 2.5rem);
  height: clamp(2rem, 5.6vw, 2.5rem);
  place-items: center;
  padding: 0;
  border: 0.1rem solid rgba(126, 155, 94, 0.46);
  border-radius: 0.38rem;
  background: #f4ffd0;
  color: #648b55;
  font-size: clamp(1.36rem, 4.1vw, 1.72rem);
  font-weight: 950;
  line-height: 1;
}

.landform-switcher button:active {
  background: #e5f5bd;
  transform: translateY(0.06rem);
}

.landform-region-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(5.8rem, 28%);
  gap: 0.44rem;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.08rem;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.landform-region-strip::-webkit-scrollbar {
  display: none;
}

.landform-region-chip {
  display: grid;
  grid-template-columns: 1.48rem minmax(0, 1fr);
  gap: 0.1rem 0.42rem;
  min-width: 0;
  align-items: center;
  padding: 0.48rem 0.5rem;
  border: 0.1rem solid rgba(146, 169, 103, 0.48);
  border-radius: 0.42rem;
  background: #fbffd8;
  color: #67573d;
  text-align: left;
  scroll-snap-align: start;
}

.landform-region-chip.is-active {
  border-color: rgba(111, 148, 102, 0.82);
  background: #f4ffd0;
  color: #557c3d;
}

.landform-region-chip i {
  position: relative;
  grid-row: span 2;
  display: block;
  width: 1.36rem;
  height: 1.36rem;
  border: 0.1rem solid currentColor;
  border-radius: 0.22rem;
  background: #d8e8a8;
  image-rendering: pixelated;
}

.landform-region-chip i::before,
.landform-region-chip i::after {
  content: "";
  position: absolute;
  display: block;
  image-rendering: pixelated;
}

.landform-region-chip strong,
.landform-region-chip em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landform-region-chip strong {
  font-size: clamp(0.78rem, 1.9vw, 0.9rem);
  line-height: 1.1;
}

.landform-region-chip em {
  color: #6f9466;
  font-size: clamp(0.66rem, 1.55vw, 0.76rem);
  font-style: normal;
  font-weight: 900;
}

.landform-region-chip--jiangnan {
  border-color: rgba(129, 177, 171, 0.62);
  background: #edf8dd;
  color: #57948b;
}

.landform-region-chip--mountain {
  border-color: rgba(142, 182, 111, 0.62);
  background: #f4ffd8;
  color: #6f9466;
}

.landform-region-chip--northwest {
  border-color: rgba(205, 176, 113, 0.64);
  background: #fff1be;
  color: #b08a4e;
}

.landform-region-chip--coast {
  border-color: rgba(133, 187, 204, 0.62);
  background: #e2f9f8;
  color: #6cacc1;
}

.landform-region-chip--plateau {
  border-color: rgba(174, 157, 198, 0.62);
  background: #f5ecfa;
  color: #9c88b8;
}

.landform-region-chip--jiangnan i::before {
  left: 0.18rem;
  right: 0.18rem;
  bottom: 0.28rem;
  height: 0.18rem;
  background: currentColor;
  box-shadow: 0 -0.36rem 0 #8cc3ca;
}

.landform-region-chip--mountain i::before {
  left: 0.16rem;
  bottom: 0.22rem;
  width: 0.92rem;
  height: 0.72rem;
  background: currentColor;
  clip-path: polygon(0 100%, 45% 16%, 100% 100%);
}

.landform-region-chip--northwest i::before {
  left: 0.18rem;
  top: 0.26rem;
  width: 0.9rem;
  height: 0.18rem;
  background: currentColor;
  box-shadow: 0.18rem 0.32rem 0 #d6b85a, -0.08rem 0.64rem 0 currentColor;
}

.landform-region-chip--coast i::before {
  left: 0.18rem;
  top: 0.32rem;
  width: 0.92rem;
  height: 0.18rem;
  background: currentColor;
  box-shadow: 0 0.32rem 0 #8cc3ca, 0 0.64rem 0 currentColor;
}

.landform-region-chip--plateau i::before {
  left: 0.18rem;
  bottom: 0.28rem;
  width: 0.92rem;
  height: 0.5rem;
  background: currentColor;
  clip-path: polygon(0 100%, 20% 38%, 48% 68%, 72% 12%, 100% 100%);
}

.specialty-region {
  display: grid;
  gap: 0.56rem;
  min-width: 0;
  padding: 0;
  border: 0.1rem solid rgba(199, 177, 119, 0.58);
  border-radius: 0.42rem;
  background: rgba(255, 248, 221, 0.52);
  overflow: hidden;
}

.specialty-region-toggle {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.24rem;
  min-width: 0;
  padding: clamp(0.72rem, 2vw, 1rem);
  border: 0;
  border-radius: 0;
  color: inherit;
  background: #fff6d4;
  text-align: left;
}

.specialty-region-toggle::after {
  content: "";
  position: absolute;
  right: 0.72rem;
  bottom: 0.68rem;
  width: 0.62rem;
  height: 0.62rem;
  border-right: 0.14rem solid #8a744d;
  border-bottom: 0.14rem solid #8a744d;
  transform: rotate(45deg);
  transform-origin: center;
}

.specialty-region:not(.is-collapsed) .specialty-region-toggle::after {
  transform: rotate(225deg);
}

.specialty-region-toggle div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.62rem;
  min-width: 0;
}

.specialty-region h4 {
  margin: 0;
  color: #6a5437;
  font-size: clamp(0.98rem, 2.7vw, 1.18rem);
  line-height: 1.15;
}

.specialty-region-toggle span,
.specialty-region-toggle small,
.specialty-region-toggle em {
  color: #8a744d;
  font-weight: 850;
  line-height: 1.35;
}

.specialty-region-toggle span {
  flex: 0 1 auto;
  font-size: clamp(0.68rem, 1.7vw, 0.78rem);
  text-align: right;
}

.specialty-region-toggle small {
  font-size: clamp(0.72rem, 1.8vw, 0.82rem);
}

.specialty-region-toggle em {
  padding-right: 1.15rem;
  color: #6f9466;
  font-size: clamp(0.7rem, 1.7vw, 0.8rem);
  font-style: normal;
}

.specialty-region-grid {
  display: grid;
  gap: 0.48rem;
  padding: 0 clamp(0.64rem, 1.8vw, 0.9rem) clamp(0.64rem, 1.8vw, 0.9rem);
}

.specialty-region-grid[hidden] {
  display: none;
}

.specialty-region--jiangnan {
  border-color: rgba(129, 177, 171, 0.62);
  background: rgba(232, 251, 239, 0.5);
}

.specialty-region--mountain {
  border-color: rgba(142, 182, 111, 0.62);
  background: rgba(244, 255, 216, 0.5);
}

.specialty-region--northwest {
  border-color: rgba(205, 176, 113, 0.64);
  background: rgba(255, 241, 190, 0.46);
}

.specialty-region--coast {
  border-color: rgba(133, 187, 204, 0.62);
  background: rgba(226, 249, 248, 0.48);
}

.specialty-region--plateau {
  border-color: rgba(174, 157, 198, 0.62);
  background: rgba(245, 236, 250, 0.46);
}

.identity-friends article {
  grid-template-columns: 2.2rem minmax(0, 1fr);
  align-items: center;
}

.identity-friends img,
.identity-atlas-grid img {
  width: 2.2rem;
  aspect-ratio: 1;
  object-fit: contain;
  image-rendering: pixelated;
}

.identity-friends b,
.identity-atlas-grid strong,
.specialty-card strong {
  color: var(--pixel-line);
  font-size: 0.9rem;
}

.identity-friends span,
.identity-atlas-grid span,
.specialty-card span,
.specialty-empty {
  color: #746b58;
  font-size: 0.78rem;
  font-weight: 850;
}

.identity-atlas-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.identity-atlas-grid article {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.identity-atlas-grid article span {
  grid-column: 2;
}

.specialty-card {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  padding: 0.54rem 0.62rem;
  border: 0.1rem solid rgba(199, 177, 119, 0.62);
  border-radius: 0.46rem;
  background: rgba(255, 248, 221, 0.68);
}

.seed-pouch-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.9rem;
  align-items: center;
  padding: 0.72rem 0.7rem;
  border: 0.1rem solid rgba(159, 200, 121, 0.68);
  border-radius: 0.46rem;
  background: rgba(244, 255, 216, 0.68);
}

.seed-pouch-card > span {
  position: relative;
  display: grid;
  width: 3.35rem;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.seed-pouch-card > span::before {
  display: none;
}

.seed-pouch-card img {
  position: relative;
  z-index: 1;
  width: 3.18rem;
  height: 3.18rem;
  object-fit: contain;
  object-position: 50% 50%;
  image-rendering: pixelated;
  transform: none;
}

.seed-pouch-card strong {
  display: block;
  color: var(--pixel-line);
  font-size: 0.96rem;
}

.seed-pouch-card p {
  margin: 0.12rem 0 0;
  color: #746b58;
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.45;
}

.seed-pouch-card button {
  min-width: 4.2rem;
  min-height: 2.25rem;
  border: 0.12rem solid #d99826;
  border-radius: 0.5rem;
  color: #65481e;
  background: var(--pixel-sun);
  font-weight: 900;
}

.specialty-icon,
.expedition-loot > .specialty-icon {
  --icon-fill: #9fcd75;
  --icon-accent: #fff1b8;
  --icon-base: #d99826;
  position: relative;
  display: grid;
  width: 2.4rem;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 0.12rem solid var(--pixel-border);
  border-radius: 0.24rem;
  background: #fff6d4;
  image-rendering: pixelated;
}

.specialty-icon i,
.specialty-icon::before,
.specialty-icon::after {
  content: "";
  display: block;
}

.specialty-icon i {
  position: relative;
  width: 64%;
  height: 64%;
  background: var(--icon-fill);
}

.specialty-icon::before,
.specialty-icon::after {
  position: absolute;
}

.specialty-icon--common {
  --icon-fill: #9fcd75;
}

.specialty-icon--uncommon {
  --icon-fill: #93c5a2;
}

.specialty-icon--fine {
  --icon-fill: #8ec4cb;
}

.specialty-icon--rare {
  --icon-fill: #d8b769;
}

.specialty-icon--legend {
  --icon-fill: #caa4cf;
}

.specialty-icon--seed i {
  width: 58%;
  height: 68%;
  border-radius: 48% 52% 44% 56%;
  background: #d9ad62;
}

.specialty-icon--seed i::before {
  content: "";
  position: absolute;
  left: 48%;
  bottom: 72%;
  width: 0.18rem;
  height: 0.74rem;
  background: #6f9660;
}

.specialty-icon--seed i::after {
  content: "";
  position: absolute;
  left: 46%;
  bottom: 100%;
  width: 0.74rem;
  height: 0.46rem;
  border-radius: 70% 20% 70% 20%;
  background: #9fcd75;
}

.specialty-icon--tea i,
.specialty-icon--bamboo i {
  width: 0.34rem;
  height: 70%;
  background: #6f9660;
  box-shadow:
    -0.48rem -0.18rem 0 0.16rem #9fcd75,
    0.48rem 0.08rem 0 0.16rem #9fcd75;
}

.specialty-icon--tile i,
.specialty-icon--brick i {
  width: 74%;
  height: 54%;
  background: #8fb6bd;
  box-shadow:
    0 -0.32rem 0 #fff1b8 inset,
    -0.58rem 0 0 -0.34rem #5f7455 inset,
    0.58rem 0 0 -0.34rem #5f7455 inset;
}

.specialty-icon--rice i,
.specialty-icon--grape i {
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 0.12rem;
  background: #fff1b8;
  box-shadow:
    -0.54rem -0.34rem 0 #fff1b8,
    0.54rem -0.34rem 0 #fff1b8,
    -0.36rem 0.38rem 0 #d8b769,
    0.36rem 0.38rem 0 #d8b769;
}

.specialty-icon--shell i,
.specialty-icon--stone i {
  width: 68%;
  height: 54%;
  border-radius: 52% 48% 42% 58%;
  background: #d8b769;
  box-shadow: 0.26rem -0.18rem 0 #fff1b8 inset;
}

.specialty-icon--parcel i {
  width: 68%;
  height: 58%;
  background: #d9ad62;
  box-shadow:
    0 -0.28rem 0 #fff1b8 inset,
    0.52rem 0 0 -0.34rem #8b6f3e inset;
}

.specialty-icon--empty,
.specialty-icon--locked {
  opacity: 0.72;
  filter: grayscale(0.25);
}

.specialty-icon--locked i {
  background: #cfc7ad;
}

.rarity-pips {
  display: flex;
  gap: 0.12rem;
  justify-content: flex-end;
}

.rarity-pips i {
  display: block;
  width: 0.38rem;
  height: 0.38rem;
  border: 0.08rem solid #b78b3b;
  border-radius: 0.08rem;
  background: #f2cf69;
}

.rarity-pips--locked i {
  border-color: #9b927e;
  background: #d8d0bd;
}

.specialty-card em,
.specialty-reward-card em {
  color: #d99826;
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0;
}

.specialty-card--rare,
.specialty-card--legend {
  border-color: #d99826;
  background: #fff1bd;
}

.specialty-card--locked {
  color: #9b927e;
  opacity: 0.78;
}

.specialty-card--locked em {
  color: #9b927e;
}

.expedition-loot {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
  margin-top: 0.2rem;
  padding: 0.65rem;
  border: 0.12rem solid var(--pixel-border);
  border-radius: 0.55rem;
  background: #fff8df;
}

.expedition-loot.is-empty {
  grid-template-columns: auto minmax(0, 1fr);
}

.loot-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.8rem, 1fr));
  gap: 0.5rem;
  width: 100%;
}

.loot-chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.42rem;
  align-items: center;
  min-height: 3.2rem;
  padding: 0.45rem;
  border: 0.1rem solid var(--pixel-border);
  border-radius: 0.45rem;
  background: #fff8e8;
}

.loot-chip .specialty-icon {
  display: grid;
  width: 2rem;
  aspect-ratio: 1;
}

.loot-chip span,
.loot-chip em {
  min-width: 0;
  font-size: 0.8rem;
  font-weight: 900;
}

.loot-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loot-chip em {
  color: #d99826;
  font-style: normal;
}

.loot-chip--rare,
.loot-chip--legend {
  border-color: #d99826;
  background: #fff1bd;
}

.expedition-loot strong,
.expedition-loot p {
  margin: 0;
}

.expedition-loot p {
  color: #746b58;
  font-size: 0.84rem;
  font-weight: 850;
}

.eight-bit-ui .panel--identity {
  color: var(--pixel-line);
  background: #fbf4df;
}

.eight-bit-ui .identity-hero,
.eight-bit-ui .identity-section {
  border: 0.12rem solid rgba(135, 158, 94, 0.45);
  border-radius: 0.74rem;
  box-shadow: none;
}

.eight-bit-ui .identity-hero {
  background: #fff3d6;
}

.eight-bit-ui .passport-card {
  border: 0;
}

.eight-bit-ui .identity-section {
  background: var(--pixel-paper);
}

.passport-card {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 0.62rem;
  background: #fff3d6;
  outline: 0;
}

.passport-card::before {
  content: "";
  position: absolute;
  inset: clamp(0.92rem, 1.8vw, 1.28rem);
  border: 0.1rem dashed rgba(116, 151, 92, 0.28);
  border-radius: 0.4rem;
  box-shadow: none;
  pointer-events: none;
}

.passport-card::after {
  display: none;
}

.passport-id-strip {
  position: absolute;
  right: clamp(0.35rem, 1vw, 0.62rem);
  top: auto;
  bottom: clamp(-0.2rem, -0.4vw, -0.08rem);
  z-index: 4;
  display: inline-flex;
  gap: 0.24rem;
  justify-self: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: rgba(104, 134, 90, 0.48);
  background: transparent;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0;
}

.passport-id-strip b {
  color: rgba(63, 97, 65, 0.52);
  font-size: 0.68rem;
}

.identity-name-row #editIdentityName {
  border: 0;
  color: #6f9466;
  background: transparent;
  box-shadow: none;
}

.passport-stamp {
  position: absolute;
  right: clamp(0.8rem, 2vw, 1.35rem);
  bottom: clamp(-1.65rem, -2.6vw, -1.1rem);
  z-index: 3;
  display: block;
  width: clamp(8.7rem, 15.2vw, 10.6rem);
  height: clamp(5.35rem, 9.4vw, 6.55rem);
  color: #6f9466;
  transform: rotate(-7deg);
  opacity: 0.78;
  pointer-events: none;
}

.passport-stamp img {
  position: absolute;
  right: clamp(0.82rem, 1.55vw, 1.08rem);
  top: 50%;
  z-index: 2;
  display: block;
  width: clamp(3.9rem, 6.8vw, 4.85rem);
  height: clamp(3.9rem, 6.8vw, 4.85rem);
  object-fit: contain;
  image-rendering: pixelated;
  opacity: 0.5;
  filter:
    brightness(0)
    saturate(100%)
    invert(51%)
    sepia(18%)
    saturate(850%)
    hue-rotate(55deg)
    brightness(92%)
    contrast(88%);
  transform: translateY(-50%);
  mix-blend-mode: multiply;
}

.passport-stamp span {
  display: none;
}

.passport-stamp::before {
  content: "";
  position: absolute;
  right: 0.18rem;
  top: 50%;
  width: clamp(5.9rem, 10.4vw, 7.2rem);
  aspect-ratio: 1;
  border: 0.16rem solid currentColor;
  border-radius: 50%;
  background: rgba(245, 232, 177, 0.5);
  box-shadow:
    inset 0 0 0 0.16rem rgba(114, 153, 92, 0.34),
    0 0 0 0.08rem rgba(126, 155, 91, 0.12);
  transform: translateY(-50%);
}

.passport-stamp::after {
  content: "SG";
  position: absolute;
  right: clamp(2.35rem, 4vw, 2.85rem);
  top: 0.5rem;
  color: rgba(114, 153, 92, 0.74);
  font-size: clamp(0.58rem, 1.2vw, 0.72rem);
  font-weight: 900;
}

.passport-stamp i {
  position: absolute;
  left: 0;
  top: 1.46rem;
  width: clamp(5.35rem, 9.45vw, 6.55rem);
  height: clamp(3.05rem, 5.45vw, 3.72rem);
  overflow: hidden;
  background:
    url("data:image/svg+xml,%3Csvg width='96' height='56' viewBox='0 0 96 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 9C12 1 22 17 32 9C42 1 52 17 62 9C72 1 82 17 94 9' stroke='%2372995C' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M2 25C12 17 22 33 32 25C42 17 52 33 62 25C72 17 82 33 94 25' stroke='%2372995C' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M2 41C12 33 22 49 32 41C42 33 52 49 62 41C72 33 82 49 94 41' stroke='%2372995C' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.88;
}

.passport-stamp i::before,
.passport-stamp i::after {
  display: none;
}

.passport-share-card {
  position: fixed;
  right: clamp(1rem, 4vw, 2.4rem);
  top: clamp(4.6rem, 8vw, 6.2rem);
  z-index: 96;
  display: grid;
  gap: 0.3rem;
  width: min(18.5rem, calc(100% - 2rem));
  padding: 1rem 1.1rem;
  border: 0.12rem solid #9f8d59;
  border-radius: 0.65rem;
  color: #584326;
  background:
    radial-gradient(circle at 86% 10%, rgba(255, 222, 126, 0.65), transparent 4.8rem),
    #fff4cf;
  box-shadow: 0 0.45rem 1.3rem rgba(111, 94, 50, 0.16);
}

.passport-share-card.is-hidden {
  display: none;
}

.passport-share-card button {
  position: absolute;
  right: 0.45rem;
  top: 0.35rem;
  border: 0;
  color: #8a6b42;
  background: transparent;
  font-size: 1.2rem;
}

.passport-share-card p,
.passport-share-card h3,
.passport-share-card em {
  margin: 0;
}

.passport-share-card p {
  color: #71905d;
  font-size: 0.75rem;
  font-weight: 900;
}

.passport-share-card h3 {
  font-size: 1.45rem;
}

.passport-share-card strong {
  color: #3f6141;
}

.passport-share-card em {
  color: #8a7550;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 850;
}

.secondary {
  width: 100%;
  min-height: 3.1rem;
  border: 0.12rem solid var(--focus-line);
  border-radius: 999px;
  color: var(--focus-coffee);
  background: rgba(255, 252, 241, 0.86);
  box-shadow: 0 0.34rem 0.9rem var(--focus-shadow);
  font-weight: 900;
}

.name-screen,
.login-screen,
.boot-loading {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: rgba(96, 126, 70, 0.45);
  backdrop-filter: blur(3px);
}

.name-screen {
  z-index: 70;
  background:
    linear-gradient(rgba(255, 244, 223, 0.28), rgba(215, 240, 233, 0.46)),
    url("./assets/garden-panorama-cottage.png") center / cover;
}

.name-screen.is-hidden,
.login-screen.is-hidden,
.boot-loading.is-hidden {
  display: none;
}

.name-card,
.login-card,
.boot-loading-card {
  width: min(92%, 32rem);
  padding: clamp(1.4rem, 4vw, 2.4rem);
  color: var(--focus-coffee);
  background: var(--focus-cream-soft);
  border: 0.14rem solid var(--focus-line);
  border-radius: 2rem;
  box-shadow: 0 0.7rem 1.8rem var(--focus-shadow);
}

.name-card {
  width: min(92%, 34rem);
}

.boot-loading {
  z-index: 72;
  overflow: hidden;
  background:
    radial-gradient(circle at 48% 38%, rgba(255, 252, 204, 0.82), transparent 10rem),
    linear-gradient(90deg, rgba(255, 238, 163, 0.18) 0 8%, transparent 8% 15%, rgba(255, 246, 196, 0.2) 15% 23%, transparent 23% 100%),
    radial-gradient(ellipse at 50% 48%, rgba(255, 249, 211, 0.6), rgba(210, 236, 184, 0.28) 60%, rgba(246, 226, 170, 0.16)),
    url("./assets/garden-panorama-cottage.png") center / cover;
  animation: bootDreamRevealScene 6.8s cubic-bezier(0.18, 0.8, 0.2, 1) both;
}

.boot-loading::before,
.boot-loading::after {
  display: none;
}

.eye-lash {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  height: 51%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 247, 213, 0.9) 0 1.18rem, rgba(255, 229, 157, 0.5) 1.18rem 1.36rem, rgba(255, 255, 255, 0.26) 1.36rem 1.54rem),
    rgba(255, 243, 202, 0.72);
  box-shadow: 0 0.45rem 2rem rgba(224, 184, 93, 0.18);
  transform-origin: center;
  pointer-events: none;
}

.eye-lash::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  height: 1.1rem;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 238, 0.88), transparent 70%),
    rgba(255, 230, 150, 0.46);
}

.eye-lash--top {
  top: 0;
  animation: topLashOpen 6.8s cubic-bezier(0.18, 0.8, 0.2, 1) both;
}

.eye-lash--top::after {
  bottom: -0.52rem;
  border-radius: 0 0 55% 55%;
}

.eye-lash--bottom {
  bottom: 0;
  animation: bottomLashOpen 6.8s cubic-bezier(0.18, 0.8, 0.2, 1) both;
}

.eye-lash--bottom::after {
  top: -0.52rem;
  border-radius: 55% 55% 0 0;
}

.boot-loading-card {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  width: min(84%, 34rem);
  padding: 0;
  border: 0;
  color: #fff8e8;
  background: transparent;
  box-shadow: none;
  text-align: center;
  text-shadow: 0 0.1rem 0.45rem rgba(255, 245, 190, 0.78);
  opacity: 0;
  transform: translateY(0.5rem);
  animation: bootWhisper 6.8s ease both;
}

.boot-loading-card p {
  margin: 0;
  color: rgba(90, 106, 60, 0.84);
  font-weight: 900;
}

.boot-loading-card h2 {
  margin: 0;
  color: #5b6339;
  font-size: clamp(1.2rem, 3.2vw, 2.05rem);
  line-height: 1.35;
}

.starter-reveal {
  position: absolute;
  inset: 0;
  z-index: 73;
  display: block;
  pointer-events: none;
}

.starter-reveal.is-hidden {
  display: none;
}

.starter-reveal-stage {
  position: absolute;
  left: 50%;
  top: 54%;
  display: grid;
  width: clamp(6.8rem, 24vw, 10.5rem);
  aspect-ratio: 1;
  place-items: center;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.starter-reveal-stage::before {
  content: "";
  position: absolute;
  inset: 50% 12% 5%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 62%, rgba(126, 170, 88, 0.32), transparent 66%),
    radial-gradient(ellipse at 50% 44%, rgba(255, 226, 120, 0.22), transparent 52%);
  filter: blur(0.06rem);
}

.starter-light-button {
  position: absolute;
  z-index: 4;
  width: clamp(3.4rem, 13vw, 5.2rem);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff9b8 0 16%, #f2d884 17% 26%, transparent 28%),
    radial-gradient(circle, rgba(255, 244, 162, 0.75) 0 32%, rgba(184, 220, 118, 0.28) 33% 54%, transparent 56%);
  box-shadow:
    0 0 0 0.16rem rgba(255, 248, 190, 0.34),
    0 0 1.25rem rgba(255, 229, 120, 0.88);
  cursor: pointer;
  image-rendering: pixelated;
  animation: starterGlowPulse 1.35s steps(2, end) infinite;
}

.starter-reveal-stage[data-phase="listening"] .starter-light-button {
  animation: starterGlowSink 0.9s ease both;
}

.starter-light-button::before,
.starter-light-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  background: #fff8c6;
  box-shadow:
    -1.5rem 0.35rem 0 -0.1rem #d9ec8d,
    1.3rem -0.55rem 0 -0.12rem #fff1b8,
    0.6rem 1.25rem 0 -0.16rem #b8dc76;
  transform: translate(-50%, -50%) rotate(45deg);
}

.starter-light-button::after {
  width: 2.9rem;
  height: 2.9rem;
  border: 0.14rem solid rgba(255, 248, 190, 0.58);
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  transform: translate(-50%, -50%);
  animation: starterGlowRing 1.55s ease-out infinite;
}

.starter-seed {
  position: absolute;
  z-index: 2;
  width: clamp(3.4rem, 12vw, 5.4rem);
  aspect-ratio: 1;
  border: 0.14rem solid rgba(126, 96, 54, 0.28);
  border-radius: 54% 46% 50% 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 247, 190, 0.95) 0 16%, transparent 18%),
    linear-gradient(135deg, #d7a95a, #8caf68);
  box-shadow:
    0 0.38rem 0 rgba(104, 82, 42, 0.14),
    0 0 1.4rem rgba(255, 225, 119, 0.72);
  transform: rotate(-18deg);
  opacity: 0;
  animation: starterSeedPulse 1.45s ease-in-out infinite;
}

.starter-reveal-stage[data-phase="seed"] .starter-light-button,
.starter-reveal-stage[data-phase="sprout"] .starter-light-button,
.starter-reveal-stage[data-phase="sprig"] .starter-light-button {
  display: none;
}

.starter-reveal-stage[data-phase="seed"] .starter-seed,
.starter-reveal-stage[data-phase="sprout"] .starter-seed {
  opacity: 1;
  animation: starterSeedWake 1.65s ease-in-out infinite;
}

.starter-seed::before,
.starter-seed::after {
  content: "";
  position: absolute;
  opacity: 0;
  transform-origin: 50% 100%;
}

.starter-seed::before {
  left: 50%;
  bottom: 72%;
  width: 0.28rem;
  height: 1.75rem;
  border-radius: 0.18rem;
  background: #719b55;
  transform: translateX(-50%) scaleY(0);
}

.starter-seed::after {
  left: 50%;
  bottom: 102%;
  width: 1.72rem;
  height: 1rem;
  border-radius: 70% 20% 70% 20%;
  background: #b8dc76;
  transform: translateX(-6%) rotate(-22deg) scale(0);
}

.starter-reveal-stage[data-phase="sprout"] .starter-seed::before,
.starter-reveal-stage[data-phase="sprig"] .starter-seed::before {
  opacity: 1;
  animation: starterSproutGrow 0.95s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.starter-reveal-stage[data-phase="sprout"] .starter-seed::after,
.starter-reveal-stage[data-phase="sprig"] .starter-seed::after {
  opacity: 1;
  animation: starterLeafGrow 0.95s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.starter-reveal-stage img {
  position: relative;
  z-index: 2;
  width: 82%;
  height: 82%;
  object-fit: contain;
  image-rendering: pixelated;
  opacity: 0;
  transform: translateY(0.8rem) scale(0.7);
  filter:
    drop-shadow(0 0.42rem 0 rgba(78, 66, 42, 0.16))
    drop-shadow(0 0 1.2rem rgba(255, 241, 184, 0.82));
}

.starter-reveal-stage[data-phase="sprig"] .starter-seed {
  opacity: 0;
  transform: translateY(0.7rem) scale(0.54);
  transition: opacity 0.38s ease, transform 0.38s ease;
}

.starter-reveal-stage[data-phase="sprig"] img {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 0.46s ease,
    transform 0.58s cubic-bezier(0.2, 0.8, 0.2, 1);
  animation: starterSprigBreathe 1.8s ease-in-out 0.5s infinite;
}

.starter-dialogue {
  position: absolute;
  left: 50%;
  bottom: clamp(7rem, 17vh, 10rem);
  display: grid;
  gap: 0.18rem;
  width: min(88%, 27rem);
  padding: clamp(0.9rem, 3vw, 1.2rem);
  border: 0.12rem solid var(--pixel-border);
  border-radius: 0.55rem;
  color: var(--pixel-line);
  background: var(--pixel-paper);
  box-shadow: none;
  pointer-events: auto;
  transform: translateX(-50%);
}

.starter-reveal-stage[data-phase="glow"] + .starter-dialogue {
  display: none;
}

.starter-reveal-stage[data-phase="listening"] + .starter-dialogue,
.starter-reveal-stage[data-phase="seed"] + .starter-dialogue,
.starter-reveal-stage[data-phase="sprout"] + .starter-dialogue {
  opacity: 0.92;
  transform: translateX(-50%) translateY(0.2rem);
}

.starter-reveal-stage[data-phase="listening"] + .starter-dialogue h2,
.starter-reveal-stage[data-phase="seed"] + .starter-dialogue h2,
.starter-reveal-stage[data-phase="sprout"] + .starter-dialogue h2 {
  font-size: clamp(1.18rem, 3.3vw, 1.58rem);
}

.starter-reveal-stage[data-phase="listening"] + .starter-dialogue p:last-child,
.starter-reveal-stage[data-phase="seed"] + .starter-dialogue p:last-child,
.starter-reveal-stage[data-phase="sprout"] + .starter-dialogue p:last-child {
  font-size: clamp(0.74rem, 2vw, 0.86rem);
}

.starter-dialogue p,
.starter-dialogue h2 {
  margin: 0;
}

.starter-dialogue p:first-child {
  color: #7e9b5f;
  font-size: 0.76rem;
  font-weight: 900;
}

.starter-dialogue h2 {
  font-size: clamp(1.62rem, 5vw, 2.42rem);
  line-height: 1.06;
}

.starter-dialogue p:last-child {
  color: #5c6548;
  font-size: clamp(0.78rem, 2.1vw, 0.92rem);
  font-weight: 780;
  line-height: 1.45;
}

.starter-accept-button {
  min-height: 2.8rem;
  margin-top: 0.55rem;
  border: 0.12rem solid #d99826;
  border-radius: 0.55rem;
  color: #65481e;
  background: var(--pixel-sun);
  font-weight: 900;
}

.starter-accept-button.is-hidden {
  display: none;
}

.hatch-reward,
.specialty-reward {
  position: absolute;
  inset: 0;
  z-index: 86;
  display: grid;
  grid-template-rows: 1fr auto auto auto 1fr;
  justify-items: center;
  align-items: center;
  padding: clamp(1.2rem, 4vw, 2rem);
  color: var(--focus-coffee);
  background: rgba(246, 250, 218, 0.82);
  image-rendering: pixelated;
}

.hatch-reward.is-hidden,
.specialty-reward.is-hidden {
  display: none;
}

.hatch-reward h2,
.specialty-reward h2 {
  grid-row: 2;
  margin: 0 0 clamp(0.85rem, 3vh, 1.4rem);
  color: #5f7b42;
  font-size: clamp(1.55rem, 6vw, 2.55rem);
  line-height: 1;
}

.hatch-reward h2 {
  text-shadow:
    0 0.12rem 0 #fff8df,
    0 0 0.72rem rgba(255, 231, 111, 0.72);
}

.specialty-reward {
  grid-template-rows: 1fr auto auto auto auto auto 1fr;
  background: rgba(246, 250, 218, 0.88);
  animation: rewardPopBack 0.34s steps(4, end);
}

.specialty-reward::before,
.specialty-reward::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.specialty-reward > * {
  position: relative;
  z-index: 1;
}

.specialty-reward::before {
  left: 50%;
  top: 42%;
  width: min(58vw, 18rem);
  aspect-ratio: 1;
  background:
    linear-gradient(#fff3a8, #fff3a8) 50% 0 / 0.32rem 2.6rem no-repeat,
    linear-gradient(#fff3a8, #fff3a8) 50% 100% / 0.32rem 2.6rem no-repeat,
    linear-gradient(#fff3a8, #fff3a8) 0 50% / 2.6rem 0.32rem no-repeat,
    linear-gradient(#fff3a8, #fff3a8) 100% 50% / 2.6rem 0.32rem no-repeat;
  opacity: 0.72;
  transform: translate(-50%, -50%);
  animation: rewardRaysPulse 0.9s steps(4, end) infinite;
}

.specialty-reward::after {
  left: 50%;
  top: 43%;
  width: 0.36rem;
  height: 0.36rem;
  background: #ffe77a;
  box-shadow:
    -5.4rem -1.9rem 0 #f6d56f,
    5.1rem -2.2rem 0 #f6d56f,
    -4.2rem 2.7rem 0 #d9eda0,
    4.4rem 2.5rem 0 #d9eda0,
    -1.2rem -3.9rem 0 #fff3a8,
    1.4rem 3.8rem 0 #fff3a8;
  transform: translate(-50%, -50%);
  animation: rewardSparkle 0.72s steps(2, end) infinite;
}

.reward-kicker {
  grid-row: 2;
  margin: 0 0 0.18rem;
  color: #78975c;
  font-size: clamp(0.82rem, 2.8vw, 1rem);
  font-weight: 900;
}

.specialty-reward h2 {
  grid-row: 3;
  margin-bottom: clamp(1rem, 4vh, 1.7rem);
  color: #5d7f3f;
  font-size: clamp(2.4rem, 10vw, 4rem);
  letter-spacing: 0;
  text-shadow:
    0 0.16rem 0 #fff8df,
    0 0 0.8rem rgba(255, 231, 111, 0.58);
}

.specialty-reward-list {
  grid-row: 4;
  display: grid;
  gap: 0.48rem;
  width: min(82%, 24rem);
}

.specialty-reward-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.62rem;
  align-items: center;
  padding: 0.58rem 0.72rem;
  border: 0.13rem solid #c9e8a5;
  border-radius: 0.58rem;
  color: #5f7350;
  background: #fff8df;
  font-weight: 900;
  animation: rewardItemRise 0.36s steps(4, end) both;
}

.specialty-reward-card .specialty-icon {
  width: 2.25rem;
  aspect-ratio: 1;
}

.specialty-reward-card strong {
  display: block;
  color: var(--pixel-line);
}

.specialty-reward-card span {
  display: block;
  color: #746b58;
  font-size: 0.78rem;
}

.specialty-reward-card em {
  color: #d99826;
  font-style: normal;
  letter-spacing: 0;
}

.specialty-reward > p:not(.reward-kicker) {
  grid-row: 5;
  width: min(82%, 24rem);
  margin: 0.75rem 0 0;
  color: #5f7350;
  font-size: clamp(0.88rem, 2.8vw, 1rem);
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
}

.specialty-reward .hatch-reward-button {
  grid-row: 6;
}

@keyframes rewardPopBack {
  0% {
    opacity: 0;
    transform: scale(0.96) translateY(0.5rem);
  }

  68% {
    opacity: 1;
    transform: scale(1.02) translateY(-0.08rem);
  }

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

@keyframes rewardRaysPulse {
  50% {
    opacity: 0.42;
    transform: translate(-50%, -50%) scale(1.06);
  }
}

@keyframes rewardSparkle {
  50% {
    transform: translate(-50%, -50%) scale(1.14);
  }
}

@keyframes rewardItemRise {
  0% {
    opacity: 0;
    transform: translateY(0.55rem);
  }

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

.hatch-reward-stage {
  grid-row: 3;
  position: relative;
  display: grid;
  width: clamp(8rem, 32vw, 12rem);
  aspect-ratio: 1;
  place-items: center;
  overflow: visible;
  border: 0;
  border-radius: 50%;
  background:
    linear-gradient(#ffe37d 0 0) 50% 0 / 0.2rem 100% no-repeat,
    linear-gradient(#ffe37d 0 0) 0 50% / 100% 0.2rem no-repeat,
    linear-gradient(45deg, transparent 45%, rgba(255, 227, 125, 0.72) 46% 54%, transparent 55%) center / 100% 100% no-repeat,
    linear-gradient(-45deg, transparent 45%, rgba(255, 227, 125, 0.72) 46% 54%, transparent 55%) center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 1.1rem rgba(255, 231, 111, 0.58));
}

.hatch-reward-stage::before,
.hatch-reward-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hatch-reward-stage::before {
  inset: -0.9rem;
  background:
    linear-gradient(#fff5a8 0 0) 50% 0 / 0.24rem 1.7rem no-repeat,
    linear-gradient(#fff5a8 0 0) 50% 100% / 0.24rem 1.7rem no-repeat,
    linear-gradient(#fff5a8 0 0) 0 50% / 1.7rem 0.24rem no-repeat,
    linear-gradient(#fff5a8 0 0) 100% 50% / 1.7rem 0.24rem no-repeat,
    linear-gradient(#bfe58b 0 0) 18% 18% / 0.42rem 0.42rem no-repeat,
    linear-gradient(#f5b7c6 0 0) 82% 20% / 0.38rem 0.38rem no-repeat,
    linear-gradient(#ffd7a1 0 0) 16% 76% / 0.34rem 0.34rem no-repeat,
    linear-gradient(#fff8df 0 0) 84% 78% / 0.46rem 0.46rem no-repeat;
  opacity: 0.72;
  animation: hatchRewardPulse 1.45s steps(2, end) infinite;
}

.hatch-reward-stage::after {
  inset: 14%;
  border: 0;
  border-radius: 50%;
  background:
    linear-gradient(#fff8df 0 0) 50% 6% / 0.34rem 0.34rem no-repeat,
    linear-gradient(#fff0a8 0 0) 72% 18% / 0.28rem 0.28rem no-repeat,
    linear-gradient(#bfe58b 0 0) 90% 50% / 0.36rem 0.36rem no-repeat,
    linear-gradient(#ffd7a1 0 0) 68% 84% / 0.3rem 0.3rem no-repeat,
    linear-gradient(#f5b7c6 0 0) 28% 82% / 0.32rem 0.32rem no-repeat,
    linear-gradient(#fff8df 0 0) 8% 48% / 0.28rem 0.28rem no-repeat,
    rgba(255, 248, 223, 0.62);
  box-shadow: 0 0 0 0.22rem rgba(255, 240, 168, 0.58);
  animation: hatchRewardHalo 1.8s ease-in-out infinite;
}

.hatch-reward-stage img {
  position: relative;
  z-index: 2;
  width: 82%;
  height: 82%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: none;
  animation: hatchRewardFloat 1.8s steps(2, end) infinite;
}

.hatch-reward p {
  grid-row: 4;
  width: min(82%, 24rem);
  margin: clamp(0.9rem, 3vh, 1.35rem) 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #5f7b42;
  background: transparent;
  box-shadow: none;
  font-size: clamp(1.06rem, 4vw, 1.42rem);
  font-weight: 950;
  text-align: center;
  text-shadow: 0 0.08rem 0 #fff8df;
}

.hatch-reward-button {
  grid-row: 5;
  min-width: min(70%, 14rem);
  min-height: 3.35rem;
  margin-top: clamp(1rem, 3vh, 1.4rem);
  border: 0.14rem solid #aacb76;
  border-radius: 0.66rem;
  color: #5f7b42;
  background: #e8f89d;
  box-shadow: none;
  font-size: clamp(1.05rem, 3.6vw, 1.4rem);
  font-weight: 900;
}

.hatch-reward-button:disabled {
  opacity: 0.72;
  transform: translateY(0.08rem);
}

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

@keyframes hatchRewardPulse {
  50% {
    transform: scale(1.08);
    opacity: 0.92;
  }
}

@keyframes hatchRewardHalo {
  50% {
    transform: scale(1.08);
    opacity: 0.78;
  }
}

@keyframes hatchRewardFloat {
  50% {
    transform: translateY(-0.36rem) scale(1.08);
  }
}

@keyframes starterGlowPulse {
  50% {
    transform: translateY(-0.16rem) scale(1.08);
  }
}

@keyframes starterGlowSink {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0.82;
    transform: translateY(1.25rem) scale(0.62);
  }
}

@keyframes starterGlowRing {
  from {
    opacity: 0.86;
    transform: translate(-50%, -50%) scale(0.76);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.42);
  }
}

@keyframes starterSeedPulse {
  50% {
    transform: translateY(-0.18rem) rotate(-12deg) scale(1.05);
  }
}

@keyframes starterSeedWake {
  0%,
  100% {
    transform: translateY(0) rotate(-18deg) scale(1);
  }
  50% {
    transform: translateY(-0.14rem) rotate(-12deg) scale(1.04);
  }
}

@keyframes starterSproutGrow {
  from {
    transform: translateX(-50%) scaleY(0);
  }
  to {
    transform: translateX(-50%) scaleY(1);
  }
}

@keyframes starterLeafGrow {
  from {
    transform: translateX(-6%) rotate(-22deg) scale(0);
  }
  to {
    transform: translateX(-6%) rotate(-22deg) scale(1);
  }
}

@keyframes starterSprigBreathe {
  50% {
    transform: translateY(-0.28rem) scale(1.025);
  }
}

.boot-progress {
  position: relative;
  width: min(22rem, 76vw);
  padding-top: 2.3rem;
}

.boot-progress img {
  position: absolute;
  left: var(--boot-progress, 0%);
  top: 0;
  width: clamp(2.2rem, 8vw, 3.4rem);
  filter: brightness(var(--wake-brightness, 0.58));
  image-rendering: pixelated;
  transform: translateX(-50%);
  animation: bootSprigNod 0.9s steps(2, end) infinite;
}

.boot-progress i {
  display: block;
  width: 100%;
  height: 0.72rem;
  padding: 0.12rem;
  border: 0.12rem solid var(--focus-line);
  border-radius: 0.3rem;
  background: rgba(255, 252, 241, 0.48);
}

.boot-progress em {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 0.16rem;
  background: var(--pixel-sprout);
  transition: width 120ms steps(2, end);
}

.setup-step {
  display: none;
  min-height: 19rem;
}

.setup-step.is-active {
  display: grid;
  align-content: start;
}

.setup-step h1 {
  margin: 1rem 0 0.7rem;
}

.birthday-picker {
  display: grid;
  margin-top: 0.85rem;
}

.birthday-wheel {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 0.9fr 0.9fr;
  gap: 0.35rem;
  padding: 0 clamp(0.2rem, 1vw, 0.5rem);
  background:
    linear-gradient(180deg, rgba(248, 237, 207, 0.68), transparent 32% 68%, rgba(248, 237, 207, 0.68));
}

.birthday-wheel::before,
.birthday-wheel::after {
  content: "";
  position: absolute;
  left: 0.35rem;
  right: 0.35rem;
  z-index: 2;
  height: 0.12rem;
  background: rgba(140, 175, 104, 0.78);
  pointer-events: none;
}

.birthday-wheel::before {
  top: calc(50% - 2.12rem);
}

.birthday-wheel::after {
  top: calc(50% + 2.02rem);
}

.birthday-column {
  height: calc(var(--birthday-row-height, 4.25rem) * 3);
  overflow-y: auto;
  padding: var(--birthday-row-height, 4.25rem) 0;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.birthday-column::-webkit-scrollbar {
  display: none;
}

.birthday-column button {
  display: grid;
  width: 100%;
  height: var(--birthday-row-height, 4.25rem);
  place-items: center;
  border: 0;
  color: rgba(104, 122, 96, 0.34);
  background: transparent;
  scroll-snap-align: center;
  font-size: clamp(1.18rem, 4.2vw, 1.85rem);
  font-weight: 900;
}

.birthday-column button.is-selected {
  color: var(--pixel-line);
  text-shadow: 0 0.08rem 0 rgba(255, 248, 205, 0.75);
  transform: scale(1.04);
}

.setup-actions {
  display: grid;
  grid-template-columns: minmax(6.5rem, 0.42fr) minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  margin-top: 1rem;
}

.setup-actions .primary.is-hidden,
.setup-actions .secondary.is-hidden {
  display: none;
}

.setup-actions #setupSubmit {
  grid-column: 2;
}

.location-arrow-button {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem;
  align-items: center;
  justify-self: start;
  min-height: 3rem;
  margin: 0.3rem 0 0.35rem;
  padding: 0 0.95rem;
  border: 0.12rem solid var(--pixel-border);
  border-radius: 0.55rem;
  color: #fff8e8;
  background: var(--pixel-green);
  font: inherit;
  font-weight: 900;
}

.location-arrow-button span {
  display: grid;
  width: 1.45rem;
  aspect-ratio: 1;
  place-items: center;
}

.location-arrow-button svg {
  width: 100%;
  height: 100%;
  transform: rotate(32deg);
}

.location-status {
  min-height: 1.5rem;
  margin: 0 0 0.55rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.setup-grid label {
  margin: 0;
}

.setup-grid label:last-child {
  grid-column: 1 / -1;
}

.name-card h1,
.login-card h2 {
  margin: 0 0 0.7rem;
  font-size: clamp(1.8rem, 5vw, 3rem);
}

.name-card p,
.login-card p {
  color: #7b8a67;
  font-weight: 850;
  line-height: 1.55;
}

.name-card label {
  display: grid;
  gap: 0.45rem;
  margin: 1.2rem 0;
  color: var(--muted);
  font-weight: 900;
}

.name-card input,
.name-card select {
  min-height: 3.4rem;
  padding: 0 1rem;
  border: 0.12rem solid var(--focus-line);
  border-radius: 1.15rem;
  color: var(--focus-coffee);
  background: rgba(255, 255, 255, 0.78);
  font: inherit;
  font-weight: 900;
}

.name-card select {
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, var(--focus-coffee) 50%) calc(100% - 1.15rem) 50% / 0.42rem 0.42rem no-repeat,
    rgba(255, 255, 255, 0.78);
}

@keyframes bootSprigNod {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0.18rem);
  }
}

@keyframes topLashOpen {
  0%,
  18% {
    transform: translateY(0);
  }
  42% {
    transform: translateY(-20%);
  }
  68%,
  100% {
    transform: translateY(-96%);
  }
}

@keyframes bottomLashOpen {
  0%,
  18% {
    transform: translateY(0);
  }
  42% {
    transform: translateY(20%);
  }
  68%,
  100% {
    transform: translateY(96%);
  }
}

@keyframes bootDreamRevealScene {
  0%,
  20% {
    filter: brightness(0.82) saturate(0.9) sepia(0.08);
  }
  58% {
    filter: brightness(1.04) saturate(1.02) sepia(0.04);
  }
  100% {
    filter: brightness(1.08) saturate(1.06);
  }
}

@keyframes bootWhisper {
  0%,
  18% {
    opacity: 0;
    transform: translateY(0.55rem);
  }
  30%,
  86% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-0.35rem);
  }
}

@keyframes bootLoad {
  0% {
    width: 18%;
  }
  45% {
    width: 58%;
  }
  100% {
    width: 92%;
  }
}

@media (max-width: 560px) {
  .setup-grid {
    grid-template-columns: 1fr;
  }

  .setup-grid label:last-child {
    grid-column: auto;
  }

  .setup-actions {
    grid-template-columns: 1fr;
  }

  .setup-actions #setupSubmit {
    grid-column: auto;
  }
}

.login-location {
  display: grid;
  gap: 0.2rem;
  margin: 1.2rem 0;
  padding: 1rem;
  border-radius: 1.2rem;
  background: rgba(126, 170, 88, 0.18);
}

.login-location span,
.login-location small {
  color: var(--muted);
  font-weight: 900;
}

.radar {
  position: relative;
  width: min(calc(100% - clamp(1rem, 3vw, 1.8rem)), 24rem);
  aspect-ratio: 1;
  min-height: 0;
  margin: 0 auto clamp(0.82rem, 2vw, 1.1rem);
  overflow: hidden;
  border: 0.14rem solid rgba(126, 170, 88, 0.36);
  border-radius: 0.95rem;
  background:
    radial-gradient(circle at center, rgba(126, 170, 88, 0.18), transparent 24%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.32) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.32) 1px, transparent 1px),
    #edf7d6;
  background-size: 2rem 2rem;
}

.radar-ring,
.player,
.map-dot {
  position: absolute;
}

.map-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.radar-ring {
  left: 50%;
  top: 50%;
  border: 0.14rem solid rgba(126, 170, 88, 0.32);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.ring-one {
  width: 38%;
  height: 38%;
}

.ring-two {
  width: 72%;
  height: 72%;
}

.player,
.map-dot {
  min-width: 3rem;
  min-height: 2.5rem;
  border: 0.18rem solid rgba(94, 75, 47, 0.36);
  border-radius: 999px;
  font-weight: 900;
}

.player {
  display: grid;
  place-items: center;
  left: 50%;
  top: 50%;
  color: #fff;
  background: #8fb56a;
  transform: translate(-50%, -50%);
}

.map-dot {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 7.4rem;
  padding: 0.16rem 0.5rem 0.16rem 0.2rem;
  color: var(--ink);
  background: #fff1a0;
  box-shadow: 0 0.22rem 0 rgba(111, 86, 40, 0.18);
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.map-dot:hover,
.map-dot:focus-visible {
  background: #fff7c6;
  transform: translate(-50%, -54%);
}

.map-dot img {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}

.map-dot span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-status {
  margin: 0;
  color: #7b8a67;
  font-size: 0.86rem;
  font-weight: 760;
  line-height: 1.45;
}

.map-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.55rem;
  width: min(calc(100% - clamp(0.72rem, 2.4vw, 1.4rem)), 24rem);
  margin-inline: auto;
}

.map-actions .primary,
.map-actions .secondary {
  min-height: 3.05rem;
}

.map-actions .secondary {
  width: 100%;
  border: 0.12rem solid rgba(91, 83, 70, 0.18);
  border-radius: 0.72rem;
  color: var(--focus-coffee);
  background: rgba(255, 252, 241, 0.88);
  box-shadow: none;
  font-weight: 900;
}

.map-results {
  display: grid;
  gap: 0.45rem;
  width: min(calc(100% - clamp(0.72rem, 2.4vw, 1.4rem)), 24rem);
  min-height: 4.2rem;
  max-height: clamp(5.4rem, 17vh, 8rem);
  margin: 0.72rem auto 0;
  overflow: auto;
}

.map-results p {
  display: grid;
  min-height: 4.2rem;
  place-items: center;
  margin: 0;
  padding: 0.75rem 1rem;
  border: 0.1rem dashed rgba(126, 170, 88, 0.42);
  border-radius: 0.72rem;
  color: #7b8a67;
  background: rgba(255, 252, 241, 0.52);
  font-size: 0.9rem;
  font-weight: 760;
  line-height: 1.42;
  text-align: center;
}

.map-result {
  display: grid;
  gap: 0.15rem;
  width: 100%;
  padding: 0.58rem 0.72rem;
  border: 0.1rem solid var(--focus-line);
  border-radius: 0.72rem;
  color: var(--focus-coffee);
  background: rgba(255, 252, 241, 0.72);
  text-align: left;
  font-weight: 900;
}

.map-result:hover,
.map-result:focus-visible {
  border-color: rgba(21, 156, 151, 0.55);
  background: #fffdf2;
}

.map-result span {
  color: var(--muted);
  font-size: 0.78rem;
}

.primary {
  width: 100%;
  min-height: 3.2rem;
  border: 0;
  border-radius: 999px;
  color: #eafbf5;
  background: #78abe8;
  box-shadow: 0 0.42rem 1rem rgba(70, 131, 196, 0.2);
  font-weight: 900;
}

.primary:disabled {
  opacity: 0.62;
  transform: translateY(0.12rem);
}

.ar-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.72rem;
  align-items: center;
}

.panel--discover.is-open {
  display: grid;
  align-content: start;
  gap: clamp(0.72rem, 1.9vw, 1rem);
}

.panel--discover .panel-header {
  margin: 0;
}

.panel--discover .ar-card,
.panel--discover .scan-actions,
.panel--discover .scan-records {
  margin-top: 0;
}

.ar-view {
  position: relative;
  min-height: clamp(8.8rem, 27vh, 13.5rem);
  overflow: hidden;
  border-radius: 0.72rem;
  border: 0.12rem solid rgba(112, 91, 63, 0.16);
  background: #bfe49a;
}

.ar-camera {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scaleX(-1);
}

.ar-camera.is-active {
  opacity: 1;
}

.scan {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(255, 248, 218, 0.08);
  mix-blend-mode: normal;
  pointer-events: none;
}

.ar-frame {
  display: none;
}

.ar-target {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: min(12rem, 52%);
  height: min(12rem, 56%);
  opacity: 0;
  transform: translate(-50%, -50%);
}

.ar-target.is-visible {
  opacity: 1;
}

.ar-target.is-encounter {
  animation: arEncounterPop 0.9s steps(4, end) both;
}

.ar-target[data-rarity="rare"],
.ar-target[data-rarity="epic"],
.ar-target[data-rarity="seasonal"] {
  filter:
    drop-shadow(0 0.35rem 0 rgba(79, 61, 33, 0.18))
    drop-shadow(0 0 0.65rem rgba(255, 236, 145, 0.52));
}

.scan-copy {
  display: grid;
  gap: 0.38rem;
  justify-items: center;
  text-align: center;
}

.scan-copy p {
  color: #7b8a67;
  font-size: clamp(0.78rem, 1.55vw, 0.92rem);
  font-weight: 720;
  line-height: 1.45;
}

.scan-copy small {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 0.18rem 0;
  border-radius: 0;
  color: #6b704e;
  background: transparent;
  font-weight: 900;
}

@keyframes arEncounterPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -42%) scale(0.72);
  }
  48% {
    opacity: 1;
    transform: translate(-50%, -52%) scale(1.08);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.scan-records {
  display: grid;
  gap: 0.48rem;
  margin-top: 0.72rem;
}

.scan-records h3 {
  margin: 0;
  color: #4f633d;
  font-size: 0.92rem;
  line-height: 1.2;
}

#scanRecordList {
  display: grid;
  gap: 0.55rem;
}

#scanRecordList > p {
  margin: 0;
  color: #7b8a67;
  font-size: 0.82rem;
  font-weight: 720;
  line-height: 1.42;
}

#scanRecordList article {
  display: grid;
  gap: 0.22rem;
  padding: 0.72rem 0.82rem;
  border: 0.1rem solid rgba(104, 134, 68, 0.18);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.62);
}

#scanRecordList article strong {
  color: #557348;
  font-size: 0.95rem;
}

#scanRecordList article span,
#scanRecordList article p {
  margin: 0;
  color: #76624a;
  font-size: 0.82rem;
  font-weight: 780;
  line-height: 1.35;
}

.panel--atlas {
  inset: 0;
  max-height: none;
  padding:
    clamp(1.6rem, 4vw, 2.6rem)
    clamp(1.6rem, 4vw, 2.6rem)
    calc(clamp(3.8rem, 8vw, 6.5rem) + 4.1rem);
  border: 0;
  border-radius: 0;
  background: #fffdf1;
  box-shadow: none;
}

.panel--atlas::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.34;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(122, 153, 76, 0.08) 0 0.12rem, transparent 0.12rem 4rem),
    linear-gradient(0deg, rgba(122, 153, 76, 0.06) 0 0.12rem, transparent 0.12rem 4rem);
  background-size: 8rem 7rem;
}

.panel--atlas.is-open {
  display: block;
}

.atlas-back,
.atlas-map {
  position: absolute;
  top: clamp(1.2rem, 3vw, 2rem);
  z-index: 2;
  display: grid;
  width: clamp(3.2rem, 7vw, 4.7rem);
  aspect-ratio: 1;
  place-items: center;
  border: 0;
  border-radius: 1.1rem;
  color: #285724;
  background: rgba(255, 255, 255, 0.9);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 900;
}

.atlas-back {
  left: clamp(1.2rem, 3vw, 2rem);
}

.atlas-map {
  right: clamp(1.2rem, 3vw, 2rem);
  font-size: clamp(1.55rem, 4vw, 2.4rem);
}

.atlas-summary {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 0.62rem 0.85rem;
  width: 100%;
  margin: 0 0 1rem;
  padding: 0.74rem 0.88rem;
  border: 0.12rem solid rgba(143, 199, 105, 0.7);
  border-radius: 0.62rem;
  color: #5f894e;
  background: #f7ffd7;
}

.atlas-summary p {
  margin: 0;
  color: #5f874e;
  font-size: clamp(0.82rem, 1.8vw, 1rem);
  font-weight: 900;
  line-height: 1.25;
  text-align: left;
}

.atlas-summary i {
  position: relative;
  width: 100%;
  height: clamp(1.05rem, 2.3vw, 1.32rem);
  overflow: hidden;
  border: 0.12rem solid rgba(134, 190, 93, 0.82);
  border-radius: 0.42rem;
  background: #fffde8;
}

.atlas-summary i em {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  border-radius: inherit;
  background: #bde878;
}

.atlas-reward-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.34rem, 1.1vw, 0.58rem);
  min-width: 0;
}

.atlas-reward-chip {
  justify-self: stretch;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  min-width: 0;
  justify-content: center;
  padding: 0.28rem 0.34rem;
  border: 0.1rem solid rgba(135, 192, 91, 0.62);
  border-radius: 0.5rem;
  background: rgba(229, 252, 166, 0.82);
  color: #5f6f43;
  font-size: clamp(0.7rem, 1.45vw, 0.86rem);
  font-weight: 900;
  line-height: 1.1;
}

.atlas-reward-chip i {
  position: relative;
  display: block;
  width: 1.18rem;
  min-width: 1.18rem;
  height: 1.18rem;
  image-rendering: pixelated;
}

.atlas-reward-chip i::before,
.atlas-reward-chip i::after {
  content: "";
  position: absolute;
  display: block;
  image-rendering: pixelated;
}

.atlas-reward-chip--seed i::before {
  left: 50%;
  top: 50%;
  width: 0.82rem;
  height: 1rem;
  border: 0.1rem solid #86a56e;
  border-radius: 50% 50% 46% 46%;
  background: #f2cb7d;
  transform: translate(-50%, -45%) rotate(-10deg);
}

.atlas-reward-chip--seed i::after {
  left: 0.56rem;
  top: 0.08rem;
  width: 0.42rem;
  height: 0.28rem;
  border-radius: 70% 20% 70% 20%;
  background: #9fcd75;
  transform: rotate(-22deg);
}

.atlas-reward-chip--stamina i::before {
  left: 50%;
  top: 50%;
  width: 0.92rem;
  height: 0.92rem;
  border: 0.1rem solid #6e9db5;
  border-radius: 50%;
  background: #c8eee7;
  transform: translate(-50%, -50%);
}

.atlas-reward-chip--stamina i::after {
  left: 0.5rem;
  top: 0.18rem;
  width: 0.24rem;
  height: 0.74rem;
  border-radius: 0.12rem;
  background: #78bbc7;
  box-shadow: 0.28rem 0.18rem 0 #9fcbd8;
  transform: rotate(16deg);
}

.atlas-reward-chip--badge i::before {
  left: 50%;
  top: 0.08rem;
  width: 0.86rem;
  height: 0.86rem;
  border: 0.1rem solid #b89b55;
  border-radius: 50%;
  background: #fff2ad;
  transform: translateX(-50%);
}

.atlas-reward-chip--badge i::after {
  left: 50%;
  bottom: 0.08rem;
  width: 0.62rem;
  height: 0.38rem;
  background: #d6b85a;
  clip-path: polygon(0 0, 50% 42%, 100% 0, 82% 100%, 18% 100%);
  transform: translateX(-50%);
}

.atlas-book-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  width: min(100%, 54rem);
  margin: clamp(1.75rem, 4vw, 2.8rem) auto 0;
  gap: clamp(0.62rem, 1.8vw, 1rem);
}

.atlas-pages {
  position: relative;
  min-width: 0;
}

.atlas-pages::before,
.atlas-pages::after {
  content: "";
  position: absolute;
  z-index: 4;
  display: block;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 0.08rem;
  background: #f6e889;
  pointer-events: none;
  image-rendering: pixelated;
  animation: atlasPixelGlow 2.8s steps(2, end) infinite;
}

.atlas-pages::before {
  right: 1.08rem;
  top: 1.2rem;
  box-shadow:
    -1.05rem 0.72rem 0 #d6ef9a,
    -2.16rem 2.35rem 0 #bfead8,
    0.48rem 3.38rem 0 #f6d481;
}

.atlas-pages::after {
  left: 1.18rem;
  bottom: 2.1rem;
  background: #bfead8;
  animation-delay: 0.7s;
  box-shadow:
    1.18rem -0.7rem 0 #f6e889,
    2.36rem -2.18rem 0 #d6ef9a,
    0.18rem -3.18rem 0 #f6d481;
}

.atlas-bookmarks {
  position: relative;
  top: auto;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(0.28rem, 1vw, 0.48rem);
  align-self: start;
  padding: 0;
}

.atlas-bookmarks button {
  --tab-bg: #fff6d7;
  --tab-line: #d6e7ae;
  --tab-active: #e9f6c8;
  --tab-icon: #9db66f;
  display: grid;
  position: relative;
  grid-template-rows: minmax(1.95rem, auto) auto;
  place-items: center;
  min-width: 0;
  min-height: clamp(3.35rem, 7vw, 4.15rem);
  padding: 0.34rem 0.2rem;
  border: 0.12rem solid var(--tab-line);
  border-radius: 0.58rem 0.58rem 0 0;
  color: #6d7d57;
  background: var(--tab-bg);
  font-weight: 900;
  text-align: center;
  box-shadow: none;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.atlas-bookmarks button[data-atlas-tone="all"] {
  --tab-line: #c8bb75;
  --tab-active: #fff2ad;
  --tab-icon: #d6b85a;
}

.atlas-bookmarks button[data-atlas-tone="region"] {
  --tab-line: #c9a66f;
  --tab-active: #f8ddb2;
  --tab-icon: #d0a06a;
}

.atlas-bookmarks button[data-atlas-tone="garden"] {
  --tab-line: #a6c987;
  --tab-active: #eef8c8;
  --tab-icon: #84ac6d;
}

.atlas-bookmarks button[data-atlas-tone="land"] {
  --tab-line: #a3c580;
  --tab-active: #e6f7b9;
  --tab-icon: #8fbd68;
}

.atlas-bookmarks button[data-atlas-tone="aquatic"] {
  --tab-line: #8cc3ca;
  --tab-active: #cff6f4;
  --tab-icon: #78bbc7;
}

.atlas-bookmarks button[data-atlas-tone="pot"] {
  --tab-line: #c59d6a;
  --tab-active: #f9dfb3;
  --tab-icon: #d7a45f;
}

.atlas-bookmarks button[data-atlas-tone="epiphyte"] {
  --tab-line: #aa9bc3;
  --tab-active: #e9def6;
  --tab-icon: #a696c8;
}

.atlas-bookmarks button.is-active {
  color: #566b43;
  background: var(--tab-active);
  border-color: var(--tab-line);
  border-bottom-color: transparent;
  outline: 0.08rem solid rgba(255, 250, 210, 0.72);
  outline-offset: -0.22rem;
  filter: none;
  transform: none;
  box-shadow: none;
}

.atlas-bookmarks button.is-active::after {
  content: "";
  position: absolute;
  right: 0.22rem;
  top: 0.22rem;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 0.08rem;
  background: #fff2a4;
  box-shadow:
    -0.38rem 0.52rem 0 #d5ef9b,
    0 1.02rem 0 #bfead8;
  animation: atlasPixelGlow 2.6s steps(2, end) infinite;
}

.atlas-bookmarks strong {
  width: clamp(2rem, 4.2vw, 2.44rem);
  height: clamp(2rem, 4.2vw, 2.44rem);
}

.atlas-tab-icon::before,
.atlas-tab-icon::after,
.atlas-tab-icon em {
  background: var(--tab-icon);
}

.atlas-tab-icon::before,
.atlas-tab-icon::after {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.atlas-tab-icon--all::before {
  left: 50%;
  top: 50%;
  width: 1.28rem;
  height: 1.1rem;
  border: 0.12rem solid #6f9466;
  border-radius: 0.18rem;
  background: #fff1b8;
  box-shadow:
    -0.34rem -0.24rem 0 -0.16rem #c8eee7,
    0.34rem 0.24rem 0 -0.16rem #e9d77d;
  transform: translate(-50%, -50%);
}

.atlas-tab-icon--all::after {
  left: 50%;
  top: 50%;
  width: 0.12rem;
  height: 1rem;
  background: #6f9466;
  box-shadow:
    -0.32rem -0.24rem 0 -0.04rem #9fcd75,
    0.32rem 0.2rem 0 -0.04rem #9fcbd8;
  transform: translate(-50%, -50%);
}

.atlas-tab-icon--region::before,
.atlas-tab-icon--garden::before {
  left: 0.32rem;
  top: 0.48rem;
  width: 1.36rem;
  height: 0.98rem;
  border: 0.12rem solid #6f9466;
  border-radius: 0.14rem;
  background: #fff1b8;
}

.atlas-tab-icon--region::after {
  left: 0.72rem;
  top: 0.78rem;
  width: 0.46rem;
  height: 0.46rem;
  border: 0.1rem solid #6f9466;
  border-radius: 50% 50% 50% 0;
  background: #c9a66f;
  transform: rotate(-45deg);
}

.atlas-tab-icon--garden::after {
  left: 50%;
  top: 0.12rem;
  width: 0.82rem;
  height: 1.02rem;
  border-radius: 0.12rem;
  background: #6f9466;
  clip-path: none;
  box-shadow:
    -0.42rem 0.2rem 0 0.14rem #9fcd75,
    0.42rem 0.2rem 0 0.14rem #bfe58b,
    0 -0.2rem 0 0.16rem #f2cf69;
  transform: translateX(-50%);
}

.atlas-tab-icon--land::before {
  left: 50%;
  top: 0.5rem;
  width: 0.28rem;
  height: 1.26rem;
  background: #6f9466;
  transform: translateX(-50%);
}

.atlas-tab-icon--land::after {
  left: 0.5rem;
  top: 0.28rem;
  width: 0.82rem;
  height: 0.56rem;
  border-radius: 70% 20% 70% 20%;
  background: #9fcd75;
  box-shadow:
    0.5rem 0.42rem 0 #8ebf98,
    -0.12rem 0.92rem 0 -0.08rem #e9d77d,
    0.64rem 0.96rem 0 -0.08rem #e9d77d;
}

.atlas-tab-icon--aquatic::before {
  left: 50%;
  top: 0.2rem;
  width: 0.86rem;
  height: 1.02rem;
  border-radius: 60% 60% 62% 62%;
  background: #c8eee7;
  box-shadow:
    inset 0 -0.16rem 0 #78bbc7,
    -0.5rem 1.06rem 0 -0.18rem #8cc3ca,
    0 1.06rem 0 -0.18rem #78bbc7,
    0.5rem 1.06rem 0 -0.18rem #9fcbd8;
  transform: translateX(-50%);
}

.atlas-tab-icon--pot::before {
  left: 0.42rem;
  bottom: 0.28rem;
  width: 1.22rem;
  height: 0.82rem;
  border: 0.12rem solid #6f9466;
  border-radius: 0.12rem 0.12rem 0.28rem 0.28rem;
  background: #fff1b8;
}

.atlas-tab-icon--pot::after {
  left: 50%;
  top: 0.26rem;
  width: 0.22rem;
  height: 0.88rem;
  background: #6f9466;
  box-shadow:
    -0.34rem -0.12rem 0 0.16rem #9fcd75,
    0.34rem 0.08rem 0 0.16rem #9fcd75;
  transform: translateX(-50%);
}

.atlas-tab-icon--epiphyte::before {
  left: 0.54rem;
  top: 0.28rem;
  width: 0.34rem;
  height: 1.48rem;
  border-radius: 0.18rem;
  background: #8a8f65;
  transform: rotate(4deg);
}

.atlas-tab-icon--epiphyte::after {
  left: 0.86rem;
  top: 0.46rem;
  width: 0.86rem;
  height: 0.46rem;
  border-radius: 70% 20% 70% 20%;
  background: #aa9bc3;
  box-shadow:
    -0.12rem 0.56rem 0 #9fcd75,
    -0.42rem 0.98rem 0 -0.08rem #d9c979;
}

.atlas-tab-icon--region::before,
.atlas-tab-icon--garden::before {
  left: 50%;
  top: 54%;
  width: 1.36rem;
  height: 0.98rem;
  transform: translate(-50%, -50%);
}

.atlas-tab-icon--region::after {
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.atlas-tab-icon--garden::after {
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
}

.atlas-tab-icon--land::before {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.atlas-tab-icon--land::after {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.atlas-tab-icon--aquatic::before,
.atlas-tab-icon--pot::before,
.atlas-tab-icon--epiphyte::before {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.atlas-tab-icon--pot::after,
.atlas-tab-icon--epiphyte::after {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.atlas-bookmarks i {
  color: rgba(91, 103, 72, 0.78);
  font-size: clamp(0.64rem, 1.35vw, 0.78rem);
  font-style: normal;
  line-height: 1;
}

.atlas-bookmarks span {
  position: absolute;
  left: 50%;
  top: calc(100% + 0.38rem);
  z-index: 4;
  width: min(14.2rem, 62vw);
  min-width: 10.6rem;
  padding: 0.58rem 0.7rem;
  border: 0.12rem solid var(--tab-line);
  border-radius: 0.5rem;
  color: #536442;
  background: #fff9dc;
  font-size: clamp(0.82rem, 1.65vw, 0.98rem);
  font-weight: 850;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  text-align: left;
  transform: translate(-50%, -0.25rem);
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.atlas-bookmarks span small {
  display: none;
}

.atlas-bookmarks button:hover span,
.atlas-bookmarks button:focus-visible span {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (hover: none) {
  .atlas-bookmarks button.is-active span {
    display: none;
  }
}

.atlas-card {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0 0 1.15rem;
  padding: clamp(0.9rem, 2.4vw, 1.45rem);
  border: 0.12rem solid var(--focus-line);
  border-radius: 0 0.8rem 0.8rem 0.52rem;
  background: var(--focus-cream-soft);
  box-shadow: none;
}

.atlas-card h2 {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  margin: 0 0 0.72rem;
  color: var(--focus-coffee);
  font-size: clamp(1.2rem, 3vw, 1.8rem);
}

.atlas-list {
  display: grid;
}

.atlas-list article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(0.85rem, 2.4vw, 1.5rem);
  align-items: center;
  min-height: clamp(5.4rem, 12vw, 7.8rem);
  padding: 0.65rem 0;
  border-bottom: 0.1rem solid rgba(160, 143, 104, 0.18);
}

.atlas-list article:last-child {
  border-bottom: 0;
}

.atlas-list article > b,
.locked-grid article > b {
  position: relative;
  display: grid;
  width: clamp(4.8rem, 10vw, 6.4rem);
  height: clamp(4.8rem, 10vw, 6.4rem);
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border-radius: 1rem;
  background: #eef4db;
  color: #b7b19f;
  font-size: 3.2rem;
  font-weight: 900;
}

.atlas-list article > b::before {
  content: "";
  position: absolute;
  inset: 0.38rem;
  z-index: 0;
  border-radius: 0.78rem;
  background:
    radial-gradient(circle at 50% 54%, rgba(246, 232, 137, 0.58) 0 32%, transparent 34%),
    radial-gradient(circle at 30% 28%, rgba(191, 234, 216, 0.62) 0 10%, transparent 12%);
  opacity: 0.86;
  animation: atlasSoftPulse 3.2s ease-in-out infinite;
}

.atlas-list img,
.locked-grid img {
  position: relative;
  z-index: 1;
  width: 82%;
  height: 82%;
  object-fit: contain;
  object-position: 50% 52%;
  image-rendering: pixelated;
}

.atlas-list article > div {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.atlas-list strong {
  color: #175421;
  font-size: clamp(1rem, 2.6vw, 1.6rem);
}

.atlas-list span {
  color: #747775;
  font-size: clamp(0.82rem, 1.9vw, 1.12rem);
  font-weight: 800;
  line-height: 1.35;
}

.atlas-list em {
  color: #72a04e;
  font-style: normal;
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  font-weight: 900;
}

.atlas-list .locked {
  opacity: 0.62;
}

.atlas-list .locked img {
  filter: grayscale(1) brightness(0.9);
}

.atlas-list .atlas-storybook {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.16rem;
  align-items: stretch;
  min-height: clamp(13rem, 28vw, 18rem);
  padding: 0;
  border: 0;
}

.atlas-story-page {
  position: relative;
  display: grid;
  align-content: start;
  gap: clamp(0.5rem, 1.5vw, 0.82rem);
  min-width: 0;
  padding: clamp(0.78rem, 2.1vw, 1.12rem);
  border: 0.12rem solid #bda772;
  background: #fff6d6;
  color: var(--focus-coffee);
  overflow: hidden;
}

.atlas-story-page--portrait {
  border-radius: 0.55rem 0.16rem 0.16rem 0.55rem;
}

.atlas-story-page--notes {
  border-left: 0;
  border-radius: 0.16rem 0.55rem 0.55rem 0.16rem;
}

.atlas-story-page--notes::before {
  content: "";
  position: absolute;
  left: 0.62rem;
  top: 0.85rem;
  bottom: 0.85rem;
  width: 0.1rem;
  background: rgba(155, 129, 76, 0.22);
}

.atlas-story-kicker {
  margin: 0;
  color: #8f7650;
  font-size: clamp(0.72rem, 1.7vw, 0.9rem);
  font-weight: 900;
  letter-spacing: 0;
}

.atlas-story-portrait {
  position: relative;
  display: grid;
  min-height: clamp(6.4rem, 12vw, 8rem);
  place-items: center;
  border: 0.12rem dashed #b9d68b;
  border-radius: 0.42rem;
  background: #fbffd8;
}

.atlas-story-portrait::before {
  content: "";
  position: absolute;
  inset: 0.75rem;
  border-radius: 0.35rem;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 239, 142, 0.62) 0 28%, transparent 30%),
    radial-gradient(circle at 68% 30%, rgba(189, 236, 216, 0.62) 0 7%, transparent 9%);
  opacity: 0.72;
  pointer-events: none;
  animation: atlasSoftPulse 3.4s ease-in-out infinite;
}

.atlas-story-portrait img {
  position: relative;
  z-index: 1;
  width: min(74%, 7.4rem);
  height: min(74%, 7.4rem);
  object-fit: contain;
  image-rendering: pixelated;
}

.atlas-storybook h3 {
  margin: 0;
  color: #356d42;
  font-size: clamp(1.25rem, 3.2vw, 2rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.atlas-storybook dl {
  display: grid;
  gap: 0.45rem;
  margin: 0;
}

.atlas-storybook dl div {
  display: grid;
  grid-template-columns: clamp(2.35rem, 6vw, 3.2rem) minmax(0, 1fr);
  gap: 0.45rem;
  align-items: start;
}

.atlas-storybook dt {
  color: #9a835b;
  font-size: clamp(0.7rem, 1.5vw, 0.84rem);
  font-weight: 900;
}

.atlas-storybook dd {
  min-width: 0;
  margin: 0;
  color: #5e604e;
  font-size: clamp(0.78rem, 1.65vw, 0.98rem);
  font-weight: 900;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.atlas-storybook blockquote,
.atlas-storybook p:not(.atlas-story-kicker) {
  margin: 0;
  color: #5b604d;
  font-size: clamp(0.82rem, 1.8vw, 1.02rem);
  font-weight: 900;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.atlas-storybook blockquote {
  padding: 0.68rem 0.72rem;
  border: 0.1rem solid #c5d89a;
  border-radius: 0.38rem;
  background: #fffbed;
}

.atlas-page-corner {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(3rem, 8vw, 4.25rem);
  height: clamp(3rem, 8vw, 4.25rem);
  padding: 0;
  border: 0;
  background: transparent;
  color: #567042;
  cursor: pointer;
}

.atlas-page-corner::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  border-style: solid;
  border-width: 0 0 clamp(3rem, 8vw, 4.25rem) clamp(3rem, 8vw, 4.25rem);
  border-color: transparent transparent #e5f29a transparent;
}

.atlas-page-corner span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: end;
  padding: 0 0.48rem 0.35rem 0;
  font-size: clamp(0.72rem, 1.8vw, 0.9rem);
  font-weight: 900;
}

.atlas-page-corner:not(:disabled):hover::before,
.atlas-page-corner:not(:disabled):focus-visible::before {
  border-bottom-color: #d7ea7a;
}

.atlas-page-corner:not(:disabled) span::after {
  content: "";
  position: absolute;
  right: 0.42rem;
  bottom: 0.44rem;
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 0.08rem;
  background: #fff2a4;
  box-shadow:
    -0.48rem -0.12rem 0 #d6ef9a,
    -0.12rem -0.5rem 0 #bfead8;
  animation: atlasPixelGlow 2.4s steps(2, end) infinite;
}

.atlas-page-corner:disabled {
  opacity: 0.42;
  cursor: default;
}

.locked-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.62rem, 1.8vw, 0.9rem);
}

.locked-grid article {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  aspect-ratio: 1;
  gap: 0.28rem;
  justify-items: center;
  min-width: 0;
  padding: clamp(0.42rem, 1.6vw, 0.62rem);
  border: 0.1rem solid #d8d9af;
  border-radius: 0.46rem;
  color: #938a72;
  background: #fff8df;
  font-weight: 900;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.locked-grid article:hover,
.locked-grid article:focus-visible {
  color: #6d7d57;
  border-color: #b8d48c;
  background: #fbffd8;
  outline: none;
}

.locked-grid article > b {
  width: min(100%, 4.65rem);
  height: auto;
  max-width: none;
  border-radius: 0.36rem;
  background: #f3efd9;
}

.locked-grid article > b::after {
  display: none;
}

.locked-grid article > div {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.locked-grid strong {
  color: #6f7b59;
  font-size: clamp(0.8rem, 1.65vw, 0.98rem);
  line-height: 1;
}

.locked-grid span {
  color: #9a8c70;
  font-size: clamp(0.66rem, 1.28vw, 0.78rem);
  line-height: 1.15;
}

.locked-grid em {
  display: none;
}

.locked-grid img {
  width: 68%;
  height: 68%;
  filter: brightness(0) saturate(0) opacity(0.32);
  transform: scale(0.9);
}

.atlas-storybook--locked .atlas-story-portrait img {
  width: min(72%, 6.5rem);
  height: min(72%, 6.5rem);
  filter: brightness(0) saturate(0) opacity(0.36);
  transform: none;
}

.atlas-storybook--locked .atlas-story-portrait::before {
  opacity: 0.28;
}

.atlas-page-controls {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(4rem, 1fr) minmax(0, auto);
  align-items: center;
  gap: 0.55rem;
  margin: -0.15rem 0 0.9rem;
}

.atlas-page-controls button {
  min-height: 2.45rem;
  padding: 0 0.72rem;
  border: 0.12rem solid var(--pixel-border);
  border-radius: 0.5rem;
  color: var(--pixel-line);
  background: var(--pixel-cream);
  font-weight: 900;
}

.atlas-page-controls button:disabled {
  opacity: 0.42;
}

.atlas-page-controls span {
  color: #7b6b4e;
  font-weight: 900;
  text-align: center;
}

.atlas-empty {
  display: block;
  grid-column: 1 / -1;
  box-sizing: border-box;
  width: 100%;
  min-height: 4.2rem;
  padding: 0.95rem 1rem;
  border: 0.12rem dashed var(--pixel-border);
  border-radius: 0.55rem;
  color: #8b9274;
  background: rgba(255, 248, 232, 0.54);
  font-size: clamp(0.82rem, 1.7vw, 0.98rem);
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
  overflow-wrap: anywhere;
}

.atlas-list .atlas-empty,
.locked-grid .atlas-empty {
  display: block;
  grid-column: 1 / -1;
  min-height: 4.2rem;
  padding: 0.95rem 1rem;
}

.atlas-card--locked p {
  margin: 1rem 0 0;
  color: #9db57b;
  text-align: center;
  font-weight: 900;
}

@keyframes atlasPixelGlow {
  0%,
  100% {
    opacity: 0.42;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(-0.12rem);
  }
}

@keyframes atlasSoftPulse {
  0%,
  100% {
    opacity: 0.58;
  }

  50% {
    opacity: 0.88;
  }
}

.panel--expedition {
  left: var(--ui-side-gap);
  right: var(--ui-side-gap);
  top: 5%;
  bottom: calc(5.6rem + env(safe-area-inset-bottom));
  max-height: none;
  padding: 0;
  overflow: auto;
  border-radius: 1.45rem;
  background: #f3e8bd;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.panel--expedition.is-open {
  display: grid;
  align-content: start;
}

.adventure-header {
  flex: 0 0 auto;
  margin: 0;
  padding: clamp(0.88rem, 2vw, 1.12rem) 4rem clamp(0.62rem, 1.4vw, 0.82rem) clamp(1.6rem, 3.5vw, 1.98rem);
  background: #f3e8bd;
}

.panel--expedition .close-panel {
  z-index: 4;
  left: auto;
  right: 0.72rem;
  top: 0.72rem;
  width: 2.72rem;
  height: 2.72rem;
  border-radius: 0.72rem;
  color: #1c1c1c;
  background: rgba(255, 252, 241, 0.78);
  font-size: 1.82rem;
}

.adventure-scene {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 518 / 346;
  width: 100%;
  max-height: min(34svh, 14rem);
  min-height: 0;
  overflow: hidden;
  background: transparent;
}

.adventure-scene > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.together-card img,
.quest-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.adventure-content {
  display: grid;
  position: relative;
  z-index: 2;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 0.52rem;
  min-height: 0;
  margin-top: 0;
  padding: clamp(0.97rem, 2.16vw, 1.35rem) clamp(0.97rem, 2.16vw, 1.35rem) calc(1rem + env(safe-area-inset-bottom));
  overflow: visible;
  border-radius: 0;
  background: #f3e8bd;
}

.adventure-status,
.adventure-energy,
.together-card,
.quest-card {
  border: 0.1rem solid rgba(108, 127, 80, 0.26);
  border-radius: 0.78rem;
  background: var(--focus-cream-soft);
  box-shadow: none;
}

.adventure-status,
.together-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.46rem 0.65rem;
}

.adventure-status span {
  color: #7b8a67;
  font-size: 0.86rem;
  font-weight: 820;
}

.adventure-energy {
  display: none;
  grid-template-columns: 2.35rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  min-height: 3.35rem;
  padding: 0.46rem 0.65rem;
  overflow: visible;
}

.adventure-status h2 {
  margin: 0;
  font-size: clamp(0.98rem, 2vw, 1.28rem);
}

.adventure-status > strong,
.adventure-energy > strong {
  font-size: clamp(0.88rem, 1.8vw, 1.18rem);
}

.adventure-energy > span,
.together-card > span {
  display: grid;
  flex: 0 0 auto;
  width: 2.55rem;
  height: 2.55rem;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #fff7d8;
  font-size: 1.7rem;
  font-weight: 900;
}

.adventure-energy > span {
  width: 2.35rem;
  height: 2.35rem;
  padding: 0.25rem;
}

.adventure-energy > span img {
  transform: scale(0.72);
}

.together-card img {
  transform: scale(1.18);
}

.adventure-energy div {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  flex: 1;
}

.adventure-energy i {
  width: 100%;
  height: 0.8rem;
}

.adventure-energy > strong {
  white-space: nowrap;
}

.duration-picker {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.duration-picker button {
  position: relative;
  min-height: 2.72rem;
  border: 0.1rem solid rgba(108, 127, 80, 0.26);
  border-radius: 0.7rem;
  color: var(--focus-coffee);
  background: rgba(255, 252, 241, 0.72);
  font-size: clamp(0.78rem, 1.55vw, 0.98rem);
  font-weight: 900;
}

.duration-picker button.is-selected {
  color: #fff8e8;
  border-color: rgba(65, 112, 61, 0.2);
  background: var(--focus-sage);
}

.duration-picker button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.duration-picker button::after {
  content: attr(data-cost);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.45rem);
  z-index: 5;
  padding: 0.35rem 0.55rem;
  border-radius: 0.55rem;
  color: #fff8e8;
  background: rgba(78, 62, 35, 0.92);
  box-shadow: 0 0.22rem 0 rgba(78, 62, 35, 0.22);
  font-size: 0.78rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0.25rem);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.duration-picker button:hover::after,
.duration-picker button:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.map-pack-picker {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.55rem;
  margin-top: 0.1rem;
}

.map-pack-picker p {
  margin: 0;
  color: #76624a;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.45;
}

.map-pack-picker button {
  display: grid;
  gap: 0.22rem;
  width: 100%;
  min-height: 4.2rem;
  padding: 0.72rem 0.85rem;
  border: 0.1rem solid rgba(108, 127, 80, 0.26);
  border-radius: 0.78rem;
  color: var(--focus-coffee);
  background: rgba(255, 252, 241, 0.84);
  text-align: left;
  box-shadow: none;
}

.map-pack-toggle {
  position: relative;
  min-height: 3rem;
  place-items: center;
  color: #556a43;
  background: #fff6d4;
  text-align: center;
}

.map-pack-toggle::after {
  content: "⌄";
  position: absolute;
  right: 0.82rem;
  top: 50%;
  color: #7f9b5f;
  font-size: 1rem;
  transform: translateY(-50%);
}

.map-pack-picker.is-expanded .map-pack-toggle::after {
  content: "⌃";
}

.map-pack-option {
  display: none !important;
}

.map-pack-picker.is-expanded .map-pack-option {
  display: grid !important;
}

.map-pack-picker button[data-status="available"] {
  border-color: rgba(89, 142, 57, 0.34);
}

.map-pack-picker button[data-status="growing"] {
  border-color: rgba(193, 151, 63, 0.34);
}

.map-pack-picker button strong {
  font-size: 0.96rem;
}

.map-pack-picker button span {
  color: #7a6a4d;
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.35;
}

.together-card {
  background: var(--focus-cream-soft);
}

.expedition-squad {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.62rem 0.7rem;
  border: 0.1rem solid rgba(108, 127, 80, 0.24);
  border-radius: 0.68rem;
  background: #fff6d4;
}

.expedition-squad header {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.expedition-squad h3,
.expedition-squad p {
  margin: 0;
}

.expedition-squad h3 {
  color: #5f7455;
  font-size: clamp(0.96rem, 2vw, 1.14rem);
  line-height: 1.1;
}

.expedition-squad p {
  overflow: hidden;
  color: #8a775c;
  font-size: clamp(0.72rem, 1.55vw, 0.84rem);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.squad-slots {
  display: flex;
  gap: 0.38rem;
  justify-content: end;
}

.squad-slot {
  position: relative;
  display: grid;
  width: clamp(2.72rem, 6.5vw, 3.4rem);
  aspect-ratio: 1;
  place-items: center;
  overflow: visible;
  border: 0.12rem solid #9fbf78;
  border-radius: 50%;
  color: #6f9466;
  background: #fbffe2;
  font-size: 1.25rem;
  font-weight: 950;
}

.squad-slot img {
  display: block;
  width: 86%;
  height: 86%;
  object-fit: contain;
  image-rendering: pixelated;
}

.squad-slot span {
  position: absolute;
  left: 50%;
  top: calc(100% + 0.1rem);
  max-width: 4rem;
  overflow: hidden;
  color: #7d8b61;
  font-size: 0.58rem;
  font-weight: 900;
  opacity: 0;
  pointer-events: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateX(-50%);
}

.squad-slot:hover span,
.squad-slot:focus-visible span {
  opacity: 1;
}

.squad-slot.is-empty {
  border-style: dashed;
  background: #fffdf2;
}

.together-card b {
  flex: 1;
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
}

.together-card button,
.quest-card button {
  min-width: 5.8rem;
  min-height: 3.2rem;
  border: 0;
  border-radius: 0.7rem;
  color: var(--focus-coffee);
  background: rgba(255, 252, 241, 0.92);
  box-shadow: none;
  font-weight: 900;
}

.expedition-note {
  display: block;
  color: #7b8a67;
  grid-column: 1 / -1;
  padding: 0.15rem 0.35rem;
  font-size: clamp(0.86rem, 1.75vw, 1rem);
  font-weight: 760;
  line-height: 1.45;
}

.goals-heading,
.daily-scoreboard {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem;
  border: 0.12rem solid var(--pixel-border);
  border-radius: 0.55rem;
  background: rgba(255, 248, 232, 0.78);
}

.goals-heading h3,
.daily-scoreboard h3 {
  margin: 0;
  font-size: clamp(1.12rem, 2.6vw, 1.55rem);
}

.goals-heading span,
.daily-scoreboard span {
  color: #7e725d;
  font-weight: 900;
}

.daily-checkin-button {
  min-width: 8.4rem;
  min-height: 2.7rem;
  border: 0.12rem solid #d99826;
  border-radius: 0.55rem;
  color: #65481e;
  background: var(--pixel-sun);
  font-weight: 900;
}

.daily-checkin-button:disabled {
  color: #66725b;
  background: #dbe8b4;
  border-color: var(--pixel-border);
}

.daily-checkin-modal {
  position: absolute;
  inset: 0;
  z-index: 88;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2rem);
  background: rgba(67, 84, 48, 0.34);
}

.daily-checkin-modal.is-hidden {
  display: none;
}

.daily-checkin-card {
  display: grid;
  gap: 0.72rem;
  width: min(88%, 20rem);
  padding: clamp(1rem, 4vw, 1.45rem);
  border: 0.14rem solid var(--pixel-border);
  border-radius: 0.6rem;
  background: var(--pixel-paper);
  color: var(--pixel-line);
  text-align: center;
  image-rendering: pixelated;
}

.daily-checkin-card p,
.daily-checkin-card h2 {
  margin: 0;
}

.daily-checkin-card p {
  color: #7c9a5b;
  font-size: 0.82rem;
  font-weight: 900;
}

.daily-checkin-card h2 {
  font-size: clamp(1.3rem, 5vw, 1.9rem);
}

.daily-task-card,
.daily-reward-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.58rem;
  align-items: center;
  min-height: 3.25rem;
  padding: 0.52rem 0.62rem;
  border: 0.12rem dashed #d99826;
  border-radius: 0.42rem;
  background: #fff3b8;
  text-align: left;
}

.daily-task-card {
  border-style: solid;
  border-color: #c9e8a5;
  background: #fff8df;
}

.daily-task-card strong,
.daily-reward-card strong {
  color: #65481e;
  font-size: 0.92rem;
  font-weight: 900;
}

.daily-task-card small {
  display: block;
  margin-top: 0.08rem;
  color: #746b58;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.35;
}

.daily-pixel-icon {
  position: relative;
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  flex: 0 0 2.4rem;
  place-items: center;
  overflow: hidden;
  border: 0.12rem solid var(--pixel-border);
  border-radius: 0.24rem;
  background: #f6df9a;
  image-rendering: pixelated;
  isolation: isolate;
}

.daily-pixel-icon i,
.daily-pixel-icon i::before,
.daily-pixel-icon i::after {
  content: "";
  position: absolute;
  display: block;
  image-rendering: pixelated;
}

.daily-pixel-icon i {
  left: 50%;
  top: 50%;
  width: 1.28rem;
  height: 1.28rem;
  background: #9fcd75;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.daily-pixel-icon i::before {
  z-index: 3;
}

.daily-pixel-icon i::after {
  z-index: 4;
}

.daily-pixel-icon--task i {
  width: 1.2rem;
  height: 1.24rem;
  border: 0.12rem solid #5f7455;
  border-radius: 0.12rem;
  background: #fff1b8;
  box-shadow: 0 -0.28rem 0 #9fcd75 inset;
}

.daily-pixel-icon--task i::before {
  left: 50%;
  top: -0.22rem;
  width: 0.62rem;
  height: 0.24rem;
  border: 0.1rem solid #5f7455;
  border-radius: 0.1rem;
  background: #d6ef9a;
  transform: translateX(-50%);
}

.daily-pixel-icon--task i::after {
  left: 0.18rem;
  top: 0.36rem;
  width: 0.58rem;
  height: 0.1rem;
  background: #7fa46c;
  box-shadow: 0 0.32rem 0 #7fa46c;
}

.daily-pixel-icon--energy i {
  width: 0.62rem;
  height: 1.3rem;
  background: #f2cf69;
  clip-path: polygon(58% 0, 100% 0, 70% 42%, 100% 42%, 34% 100%, 48% 56%, 16% 56%);
}

.daily-pixel-icon--seed i {
  width: 0.86rem;
  height: 1.08rem;
  border-radius: 48% 52% 44% 56%;
  background: #d8ad62;
  transform: translate(-50%, -42%) rotate(12deg);
}

.daily-pixel-icon--seed i::before {
  left: 0.42rem;
  top: -0.22rem;
  width: 0.12rem;
  height: 0.5rem;
  background: #6f9660;
  transform: rotate(-16deg);
}

.daily-pixel-icon--seed i::after {
  left: 0.48rem;
  top: -0.28rem;
  width: 0.5rem;
  height: 0.32rem;
  border-radius: 70% 20% 70% 20%;
  background: #9fcd75;
  transform: rotate(-18deg);
}

.daily-pixel-icon--scan i {
  width: 1.34rem;
  height: 0.92rem;
  border: 0.12rem solid #6f9466;
  border-radius: 0.12rem;
  background: #fff1b8;
  box-shadow: 0 -0.22rem 0 #9fcbd8 inset;
}

.daily-pixel-icon--scan i::before {
  left: 50%;
  top: 50%;
  width: 0.54rem;
  height: 0.54rem;
  border: 0.1rem solid #6f9466;
  border-radius: 50%;
  background: #c8eee7;
  transform: translate(-50%, -42%);
}

.daily-pixel-icon--scan i::after {
  left: 0.12rem;
  top: -0.24rem;
  width: 0.46rem;
  height: 0.22rem;
  border: 0.1rem solid #6f9466;
  border-bottom: 0;
  border-radius: 0.1rem 0.1rem 0 0;
  background: #fff1b8;
}

.daily-pixel-icon--expedition i {
  width: 1.24rem;
  height: 1.24rem;
  border: 0.12rem solid #6f9466;
  border-radius: 50%;
  background: #fff1b8;
  box-shadow:
    0 0 0 0.18rem #c8eee7 inset,
    0 -0.5rem 0 -0.42rem #6f9466 inset,
    0.5rem 0 0 -0.42rem #6f9466 inset,
    0 0.5rem 0 -0.42rem #6f9466 inset,
    -0.5rem 0 0 -0.42rem #6f9466 inset;
}

.daily-pixel-icon--expedition i::before {
  left: 50%;
  top: 50%;
  width: 0.42rem;
  height: 1.02rem;
  background: #8fc66b;
  clip-path: polygon(50% 0, 86% 50%, 58% 48%, 50% 100%, 42% 48%, 14% 50%);
  transform: translate(-50%, -50%) rotate(32deg);
}

.daily-pixel-icon--atlas i {
  width: 1.34rem;
  height: 1rem;
  border: 0.12rem solid #6f9466;
  border-radius: 0.1rem;
  background: #fff5c8;
  box-shadow:
    -0.36rem 0 0 #c8eee7 inset,
    0.36rem 0 0 #bfe58b inset;
}

.daily-pixel-icon--atlas i::before {
  left: 50%;
  top: 0;
  width: 0.12rem;
  height: 100%;
  background: #6f9466;
  transform: translateX(-50%);
}

.daily-pixel-icon--atlas i::after {
  left: 0.18rem;
  top: 0.34rem;
  width: 0.32rem;
  height: 0.12rem;
  background: #7fa46c;
  box-shadow:
    0 0.32rem 0 #7fa46c,
    0.76rem -0.08rem 0 #d8ad5e,
    0.76rem 0.24rem 0 #d8ad5e;
}

.daily-pixel-icon--plant i {
  width: 0.18rem;
  height: 1.1rem;
  border-radius: 0.06rem;
  background: #6f9466;
}

.daily-pixel-icon--plant i::before {
  left: -0.52rem;
  top: 0.18rem;
  width: 0.76rem;
  height: 0.5rem;
  border-radius: 70% 20% 70% 20%;
  background: #9fcd75;
  box-shadow: 0.68rem 0.22rem 0 #bfe58b;
}

.daily-pixel-icon--plant i::after {
  left: 50%;
  top: -0.28rem;
  width: 0.8rem;
  height: 0.58rem;
  border-radius: 50% 50% 42% 42%;
  background: #f6df9a;
  box-shadow:
    -0.28rem 0.14rem 0 #fff1b8,
    0.28rem 0.14rem 0 #fff1b8;
  transform: translateX(-50%);
}

.daily-pixel-icon--walk i {
  width: 0.58rem;
  height: 0.86rem;
  border: 0.12rem solid #6f9466;
  border-radius: 0.34rem 0.34rem 0.18rem 0.18rem;
  background: #d6ef9a;
  transform: translate(-88%, -42%) rotate(-10deg);
}

.daily-pixel-icon--walk i::before {
  left: 0.68rem;
  top: 0.38rem;
  width: 0.58rem;
  height: 0.86rem;
  border: 0.12rem solid #6f9466;
  border-radius: 0.34rem 0.34rem 0.18rem 0.18rem;
  background: #bfe58b;
  transform: rotate(18deg);
}

.daily-pixel-icon--water i {
  width: 0.9rem;
  height: 1.2rem;
  border: 0.12rem solid #6f9466;
  border-radius: 58% 58% 62% 62%;
  background: #9fcbd8;
  transform: translate(-50%, -50%) rotate(0deg);
}

.daily-pixel-icon--water i::before {
  left: 0.16rem;
  top: 0.22rem;
  width: 0.22rem;
  height: 0.22rem;
  border-radius: 50%;
  background: #e5fbff;
}

.daily-pixel-icon--water i::after {
  display: none;
}

.daily-pixel-icon--friend i {
  width: 0.58rem;
  height: 0.58rem;
  border: 0.12rem solid #6f9466;
  border-radius: 50%;
  background: #d6ef9a;
  box-shadow:
    0.64rem 0.06rem 0 -0.04rem #aee0d7,
    0.64rem 0.06rem 0 0.08rem #6f9466;
  transform: translate(-82%, -64%);
}

.daily-pixel-icon--friend i::before {
  left: -0.06rem;
  top: 0.62rem;
  width: 0.94rem;
  height: 0.56rem;
  border: 0.12rem solid #6f9466;
  border-radius: 0.42rem 0.42rem 0.2rem 0.2rem;
  background: #bfe58b;
  box-shadow:
    0.64rem 0.04rem 0 -0.04rem #c8eee7,
    0.64rem 0.04rem 0 0.08rem #6f9466;
}

.daily-checkin-close {
  min-height: 2.3rem;
  border: 0.12rem solid var(--pixel-border);
  border-radius: 0.45rem;
  color: var(--pixel-line);
  background: var(--pixel-cream);
  font-weight: 900;
}

.quest-section {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.58rem;
  padding: 0.72rem;
  border: 0.12rem solid rgba(111, 148, 102, 0.24);
  border-radius: 0.68rem;
  background: #f8efc9;
}

.quest-heading {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--pixel-line);
}

.quest-heading h3,
.quest-heading p {
  margin: 0;
}

.quest-heading h3 {
  color: #5f7455;
  font-size: clamp(0.98rem, 2.1vw, 1.18rem);
  line-height: 1.05;
}

.quest-heading p {
  margin-top: 0.08rem;
  color: #8a775c;
  font-size: clamp(0.72rem, 1.6vw, 0.84rem);
  font-weight: 900;
}

.quest-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  padding-bottom: 0;
}

.panel--expedition .quest-list {
  display: grid;
}

.quest-card {
  display: grid;
  grid-template-columns: 2.7rem minmax(0, 1fr) 2.15rem 2.15rem;
  gap: 0.5rem;
  align-items: center;
  min-height: 4rem;
  padding: 0.42rem 0.55rem;
  background: rgba(255, 252, 241, 0.9);
}

.quest-card > b {
  display: grid;
  width: 2.7rem;
  height: 2.7rem;
  place-items: center;
  overflow: hidden;
  border-radius: 0.36rem;
  background: transparent;
  font-size: 1.8rem;
}

.quest-card > b .daily-pixel-icon {
  width: 2.36rem;
  height: 2.36rem;
  flex-basis: 2.36rem;
}

.quest-card > b img {
  transform: scale(0.92);
}

.quest-card > b img[src*="plantain"] {
  transform: scale(1.16);
}

.quest-card > b img[src*="dandelion"],
.quest-card > b img[src*="orchid"] {
  transform: scale(0.72);
}

.quest-card > b img[src*="garden-icons"] {
  transform: scale(1.05);
}

.quest-card div {
  display: grid;
  gap: 0.2rem;
}

.quest-card small {
  color: #746b79;
  font-weight: 900;
}

.quest-card strong {
  color: var(--focus-coffee);
  font-size: clamp(0.82rem, 1.7vw, 1rem);
}

.quest-card span {
  color: #665f74;
  font-weight: 900;
}

.quest-card mark {
  display: grid;
  width: 2.15rem;
  height: 2.15rem;
  place-items: center;
  background: transparent;
}

.quest-card mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.quest-card button {
  min-width: 2.15rem;
  min-height: 2.15rem;
  padding: 0 0.42rem;
  border-radius: 0.44rem;
  color: #fff;
  background: #78abe8;
  font-size: 0.95rem;
  line-height: 1;
}

.quest-card button.is-ready {
  color: #6842c3;
  background: #e2daf6;
}

.quest-card button.is-try-target {
  outline: 0.18rem solid var(--pixel-sun);
  outline-offset: 0.12rem;
  animation: tryTargetBlink 0.9s steps(2, end) infinite;
}

.quest-card button.is-claimed {
  color: #fff;
  background: #6dab43;
  font-size: 0.98rem;
}

.quest-card button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.quest-card button.is-claimed:disabled {
  opacity: 1;
}

@keyframes tryTargetBlink {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.08rem);
  }
}

.level-bar {
  position: relative;
  min-height: 2.7rem;
  margin-top: 1rem;
  overflow: hidden;
  border: 0.2rem solid rgba(112, 91, 63, 0.24);
  border-radius: 999px;
  background: rgba(112, 91, 63, 0.12);
}

.level-bar span {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  font-weight: 900;
}

.level-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, #96d56e, #f0cd4f);
  transition: width 0.25s ease;
}

.dock {
  position: absolute;
  left: 50%;
  bottom: 0.85rem;
  z-index: 55;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.38rem, 1vw, 0.78rem);
  width: min(92%, 34rem);
  align-items: end;
  transform: translateX(-50%);
}

.dock::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.48rem;
  z-index: -1;
  width: calc(100% + 1.15rem);
  height: calc(100% + 0.9rem);
  border: 0.12rem solid var(--focus-line);
  border-radius: 1.65rem;
  background:
    linear-gradient(180deg, rgba(255, 252, 241, 0.92), rgba(215, 240, 233, 0.86)),
    var(--focus-mint);
  box-shadow: 0 0.55rem 1.4rem var(--focus-shadow);
  transform: translateX(-50%);
  backdrop-filter: blur(2px);
}

.dock button {
  position: relative;
  display: grid;
  min-height: clamp(3.5rem, 7vw, 5.4rem);
  padding: 0.45rem 0.55rem;
  overflow: hidden;
  place-items: center;
  align-content: center;
  border-radius: 1.25rem;
  color: #786250;
  background: transparent;
  box-shadow: none;
  font-size: clamp(0.78rem, 1.55vw, 1rem);
  font-weight: 900;
}

.dock button::before {
  content: "";
  position: absolute;
  right: 0.42rem;
  top: 0.34rem;
  width: 1.05rem;
  height: 0.62rem;
  border-radius: 70% 24% 70% 24%;
  background: rgba(121, 182, 106, 0.22);
  transform: rotate(-18deg);
  pointer-events: none;
}

.dock button b {
  position: relative;
  font: inherit;
}

.dock button:nth-child(1) {
  grid-column: 1;
}

.dock .home-button {
  grid-column: 2;
}

.dock button:nth-child(3) {
  grid-column: 3;
}

.dock-button-icon {
  position: relative;
  display: grid;
  width: clamp(1.55rem, 3.4vw, 2.25rem);
  height: clamp(1.55rem, 3.4vw, 2.25rem);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 999px;
  color: #fff8e8;
  background: var(--focus-sage);
  font-size: 1.1em;
  line-height: 1;
  overflow: hidden;
}

.pixel-icon {
  --icon-line: #5f7455;
  --icon-dark: #6f9660;
  --icon-mid: #9fcd75;
  --icon-light: #fff1b8;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  image-rendering: pixelated;
}

.pixel-icon::before,
.pixel-icon::after,
.pixel-icon i,
.scan-button::before,
.scan-button::after {
  content: "";
  position: absolute;
  display: block;
  image-rendering: pixelated;
}

.pixel-icon--identity::before {
  left: 50%;
  top: 50%;
  width: 84%;
  height: 64%;
  border: 0.16rem solid var(--icon-line);
  border-radius: 0.16rem;
  background: #fff1b8;
  box-shadow:
    -0.7rem 0 0 #c8eee7 inset,
    0 -0.34rem 0 #f6d481 inset;
  transform: translate(-50%, -50%);
}

.pixel-icon--identity::after {
  left: 36%;
  top: 50%;
  width: 0.58rem;
  height: 0.58rem;
  border: 0.12rem solid var(--icon-line);
  border-radius: 50%;
  background: #fff8cc;
  box-shadow:
    0 0.64rem 0 -0.18rem #9fcd75,
    0.86rem -0.22rem 0 -0.2rem var(--icon-line),
    0.86rem 0.18rem 0 -0.2rem var(--icon-line),
    0.86rem 0.58rem 0 -0.2rem var(--icon-line);
  transform: translate(-50%, -50%);
}

.pixel-icon--atlas::before {
  left: 50%;
  top: 50%;
  width: 82%;
  height: 68%;
  border: 0.14rem solid #5e7a5a;
  border-radius: 0.12rem;
  background: #fff5c8;
  box-shadow:
    -0.46rem 0 0 0 #aee0d7 inset,
    0.46rem 0 0 0 #b9dc82 inset;
  transform: translate(-50%, -50%);
}

.pixel-icon--atlas::after {
  left: 50%;
  top: 18%;
  width: 0.14rem;
  height: 64%;
  background: #5e7a5a;
  box-shadow:
    -0.72rem -0.18rem 0 -0.05rem #6e9e83,
    -0.72rem 0.28rem 0 -0.05rem #6e9e83,
    0.72rem -0.28rem 0 -0.05rem #d8ad5e,
    0.72rem 0.18rem 0 -0.05rem #d8ad5e,
    -0.36rem -0.52rem 0 -0.05rem rgba(255, 250, 218, 0.96),
    0.36rem 0.52rem 0 -0.05rem rgba(255, 250, 218, 0.96);
  transform: translateX(-50%);
}

.pixel-icon--garden::before {
  left: 50%;
  bottom: 12%;
  width: 84%;
  height: 42%;
  border: 0.14rem solid #6f9466;
  border-radius: 0.2rem;
  background: #cfe89b;
  box-shadow:
    0 -0.3rem 0 #9fcd75 inset,
    -0.52rem 0.12rem 0 -0.38rem #fff1b8 inset,
    0.52rem 0.12rem 0 -0.38rem #fff1b8 inset;
  transform: translateX(-50%);
}

.pixel-icon--garden i {
  left: 50%;
  bottom: 37%;
  width: 0.14rem;
  height: 0.88rem;
  background: #6f9466;
  border-radius: 999px;
  box-shadow:
    -0.62rem 0.18rem 0 #6f9466,
    0.62rem 0.18rem 0 #6f9466,
    -0.28rem 0.42rem 0 0.12rem #9fcd75,
    0.28rem 0.42rem 0 0.12rem #9fcd75;
  transform: translateX(-50%);
}

.pixel-icon--garden::after {
  left: 50%;
  top: 22%;
  width: 0.62rem;
  height: 0.62rem;
  border: 0;
  border-radius: 50%;
  background: #fff1b8;
  clip-path: none;
  box-shadow:
    0 0 0 0.12rem #6f9466,
    -0.62rem 0.18rem 0 #f6d481,
    -0.62rem 0.18rem 0 0.12rem #6f9466,
    0.62rem 0.18rem 0 #9fcbd8,
    0.62rem 0.18rem 0 0.12rem #6f9466;
  transform: translateX(-50%);
}

.pixel-icon--map::before {
  left: 50%;
  top: 50%;
  width: 78%;
  height: 64%;
  border: 0.16rem solid #6d7c8a;
  border-radius: 0.14rem;
  background: #fff0bd;
  box-shadow:
    -0.72rem 0 0 #d5ecbd inset,
    0.72rem 0 0 #9fcbd8 inset;
  transform: translate(-50%, -50%) skewY(-4deg);
}

.pixel-icon--map::after {
  top: 25%;
  left: 46%;
  width: 0.72rem;
  height: 0.72rem;
  border: 0.14rem solid #6f9466;
  border-radius: 50%;
  background: #eaf6cf;
  box-shadow:
    0.46rem 0.46rem 0 -0.22rem #6f9466,
    0.08rem -0.2rem 0 -0.12rem #fff8cc inset;
  transform: rotate(8deg);
}

.pixel-icon--expedition::before {
  left: 50%;
  top: 50%;
  width: 78%;
  height: 78%;
  border: 0.16rem solid #6f9466;
  border-radius: 50%;
  background: #fff8cc;
  box-shadow:
    0 0 0 0.2rem #d6ef9a inset,
    0 -0.7rem 0 -0.52rem #6f9466 inset,
    0 0.7rem 0 -0.52rem #6f9466 inset,
    -0.7rem 0 0 -0.52rem #6f9466 inset,
    0.7rem 0 0 -0.52rem #6f9466 inset;
  transform: translate(-50%, -50%);
}

.pixel-icon--expedition::after {
  left: 50%;
  top: 50%;
  width: 0.78rem;
  height: 1.7rem;
  background: #8fc66b;
  clip-path: polygon(50% 0, 100% 52%, 62% 48%, 50% 100%, 38% 48%, 0 52%);
  box-shadow: 0 0 0 0.12rem #6f9466;
  transform: translate(-50%, -50%) rotate(35deg);
}

.pixel-icon--nursery::before {
  left: 50%;
  bottom: 8%;
  width: 74%;
  height: 38%;
  border: 0.14rem solid #7f6c43;
  border-radius: 0.24rem;
  background: #fff1b8;
  box-shadow:
    0 -0.34rem 0 #e5bd73 inset,
    0 -0.72rem 0 #fff8cc inset;
  transform: translateX(-50%);
}

.pixel-icon--nursery::after {
  left: 50%;
  top: 12%;
  width: 1.36rem;
  height: 1.72rem;
  border: 0.15rem solid #7f6c43;
  border-radius: 52% 48% 50% 50%;
  background: #d9ad62;
  box-shadow: 0.22rem -0.08rem 0 #f4d585 inset;
  transform: translateX(-50%) rotate(-5deg);
}

.scan-button {
  position: relative;
  display: grid;
  grid-template-rows: 1.75rem auto;
  gap: 0.26rem;
  align-items: center;
  justify-items: center;
  padding: 0.48rem 0.58rem;
  color: transparent;
  font-size: 0;
  isolation: isolate;
}

.scan-button::before {
  z-index: 1;
  position: static;
  width: 1.34rem;
  height: 0.98rem;
  border: 0.14rem solid #5f7455;
  border-radius: 0.18rem;
  background: #fff1b8;
  box-shadow:
    0 -0.22rem 0 #9fcd75 inset,
    0.34rem 0 0 -0.24rem #9fcbd8 inset;
  pointer-events: none;
  transform: none;
}

.scan-button::after {
  content: attr(data-action-label);
  position: static;
  display: block;
  width: auto;
  height: auto;
  border: 0;
  color: #65481e;
  background: transparent;
  font-size: clamp(0.8rem, 1.55vw, 0.94rem);
  font-weight: 900;
  line-height: 1.05;
  transform: none;
}

.dock .home-button {
  min-width: 0;
  min-height: clamp(3.9rem, 7.5vw, 5.6rem);
  border-radius: 999px;
  color: #fff8e8;
  background: #78abe8;
  border-color: rgba(62, 108, 172, 0.24);
  box-shadow:
    0 0.5rem 1.2rem rgba(70, 131, 196, 0.22),
    0 0 0 0.36rem rgba(255, 252, 241, 0.7);
  font-size: clamp(0.96rem, 2vw, 1.25rem);
}

.garden-action-button {
  position: absolute;
  z-index: 54;
  display: grid;
  grid-template-rows: minmax(0, 2.45rem) auto;
  gap: 0.18rem;
  width: clamp(4.9rem, 8.4vw, 6.2rem);
  height: clamp(4.9rem, 8.4vw, 6.2rem);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  place-items: center;
  align-content: center;
  padding: 0.48rem 0.42rem 0.46rem;
  border: 0.12rem solid rgba(91, 83, 70, 0.18);
  border-radius: 1.45rem;
  color: var(--focus-coffee);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.7), transparent 58%),
    linear-gradient(180deg, rgba(255, 252, 241, 0.94), rgba(255, 240, 184, 0.9));
  box-shadow: 0 0.55rem 1.2rem var(--focus-shadow);
  font-weight: 900;
}

.garden-action-button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.34rem;
  width: 2rem;
  height: 0.82rem;
  border-radius: 70% 24% 70% 24%;
  background: rgba(121, 182, 106, 0.34);
  transform: translateX(-50%) rotate(-8deg);
  pointer-events: none;
}

.garden-action-button--expedition {
  right: max(4.2%, env(safe-area-inset-right));
  bottom: clamp(7.2rem, 14vh, 10.2rem);
}

.garden-action-button--nursery {
  left: max(4.2%, env(safe-area-inset-left));
  bottom: clamp(7.2rem, 14vh, 10.2rem);
}

.garden-action-button b {
  position: relative;
  display: block;
  max-width: 100%;
  line-height: 1;
  font-size: clamp(0.78rem, 1.45vw, 0.95rem);
  text-align: center;
}

.garden-stage.has-open-panel .garden-action-button {
  opacity: 0;
  transform: translateY(0.35rem);
  pointer-events: none;
}

.panel--nursery {
  left: 50%;
  top: 50%;
  width: min(84%, 22rem);
  max-height: min(82%, 34rem);
  padding: 1.25rem;
  transform: translate(-50%, -50%) scale(0.98);
}

.panel--nursery.is-open {
  display: grid;
  gap: 0.8rem;
  transform: translate(-50%, -50%) scale(1);
}

.panel--nursery h2 {
  margin: 0;
}

.nursery-drop {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.9rem;
  min-height: 13rem;
  place-items: center;
  padding: 1.2rem 1.05rem 1rem;
  border: 0.16rem dashed #c4e9a6;
  border-radius: 0.6rem;
  background: #fbf3d2;
  text-align: center;
}

.nursery-drop strong {
  max-width: 13rem;
  color: #58724c;
  font-size: clamp(0.98rem, 2.1vw, 1.12rem);
  line-height: 1.35;
}

.nursery-drop-icon {
  position: relative;
  display: block;
  width: clamp(6.2rem, 18vw, 7.8rem);
  height: clamp(5.05rem, 14vw, 6.35rem);
  border: 0;
  background: transparent;
  image-rendering: pixelated;
}

.nursery-drop-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.48rem;
  width: 82%;
  height: 1.48rem;
  border: 0.18rem solid #8f7a4e;
  border-radius: 0.32rem;
  background: #f1cf83;
  box-shadow:
    0 -0.36rem 0 #d6a85d inset,
    0 -0.74rem 0 #fff0bd inset;
  transform: translateX(-50%);
}

.nursery-drop-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.34rem;
  width: 2.36rem;
  height: 2.78rem;
  border: 0.18rem solid #7f6c43;
  border-radius: 52% 48% 50% 50%;
  background: #d9ad62;
  box-shadow: 0.34rem -0.12rem 0 #f4d585 inset;
  transform: translateX(-50%) rotate(-4deg);
}

.nursery-drop p,
.nursery-result p {
  margin: 0;
  color: #6d805c;
  font-size: 0.86rem;
  font-weight: 850;
  line-height: 1.45;
}

.nursery-drop.is-dragging,
.nursery-drop.is-growing {
  background: #fff0a7;
  border-color: #f2cf69;
}

.nursery-drop.is-dragging .nursery-drop-icon,
.nursery-drop.is-growing .nursery-drop-icon {
  background: transparent;
}

.nursery-drop.is-dragging .nursery-drop-icon::before,
.nursery-drop.is-growing .nursery-drop-icon::before {
  background: #f2cf69;
}

.nursery-drop.is-dragging .nursery-drop-icon::after,
.nursery-drop.is-growing .nursery-drop-icon::after {
  transform: translateX(-50%) translateY(-0.2rem) rotate(-4deg);
}

.nursery-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
  min-height: 4.2rem;
  padding: 0.7rem;
  border: 0.12rem solid var(--pixel-border);
  border-radius: 0.55rem;
  background: #fff6d4;
}

.nursery-result img {
  width: 3.4rem;
  height: 3.4rem;
  object-fit: contain;
  image-rendering: pixelated;
}

.nursery-result-icon {
  display: block;
  width: 3.2rem;
  height: 3.2rem;
  border: 0.12rem solid #8dbf78;
  border-radius: 0.44rem;
  background: #effbd1;
  image-rendering: pixelated;
}

.nursery-progress {
  display: block;
  width: 100%;
  height: 0.58rem;
  margin-top: 0.55rem;
  overflow: hidden;
  border: 0.1rem solid #adbd8c;
  border-radius: 0.18rem;
  background: rgba(255, 248, 232, 0.78);
}

.nursery-progress em {
  display: block;
  height: 100%;
  background: var(--pixel-sprout);
  transition: width 0.25s steps(3, end);
}

.garden-stage.is-photo-mode .hud,
.garden-stage.is-photo-mode .dock,
.garden-stage.is-photo-mode .panel,
.garden-stage.is-photo-mode .garden-action-button,
.garden-stage.is-photo-mode .feature-tip,
.garden-stage.is-photo-mode .guide-layer,
.garden-stage.is-photo-mode .hatch-reward,
.garden-stage.is-photo-mode .specialty-reward,
.garden-stage.is-photo-mode .daily-checkin-modal,
.garden-stage.is-photo-mode .sprig-info-card,
.garden-stage.is-photo-mode .knowledge-pop {
  opacity: 0;
  pointer-events: none;
}

.garden-stage.is-photo-mode::after {
  content: none;
}

@media (max-aspect-ratio: 1215 / 1230) {
  .garden-stage {
    width: 100vw;
    height: auto;
  }
}

.scan-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.64rem;
  width: min(100%, 27rem);
  margin: 0.72rem auto 0;
  align-items: stretch;
}

.scan-actions .primary,
.scan-actions .secondary {
  min-height: 4.2rem;
  border-radius: 0.82rem;
}

.scan-button,
.upload-photo-button {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1.45rem auto;
  align-items: center;
  justify-items: center;
  justify-content: center;
  gap: 0.22rem;
  padding: 0.42rem 0.58rem;
  border-color: rgba(111, 148, 102, 0.34);
  color: #6f7f5b;
  background: rgba(255, 248, 220, 0.42);
  box-shadow: none;
  font-size: clamp(0.8rem, 1.55vw, 0.94rem);
  font-weight: 900;
  line-height: 1.05;
}

.upload-photo-button .pixel-album-icon {
  position: relative;
  display: block;
  width: 1.42rem;
  height: 1.12rem;
  opacity: 1;
  overflow: visible;
  isolation: isolate;
  transform: none;
}

.upload-photo-button .pixel-album-icon::before {
  z-index: 1;
  left: 0.12rem;
  right: 0.12rem;
  top: 0.12rem;
  bottom: 0.08rem;
  border: 0.12rem solid #6f9466;
  border-radius: 0.08rem;
  background: #fff1b8;
  box-shadow: none;
}

.upload-photo-button .pixel-album-icon::after {
  z-index: 2;
  left: 50%;
  bottom: 0.22rem;
  width: 0.78rem;
  height: 0.32rem;
  border-radius: 0;
  background: #9fcd75;
  clip-path: polygon(0 100%, 32% 36%, 50% 70%, 72% 18%, 100% 100%);
  transform: translateX(-50%);
}

.upload-photo-button .pixel-album-icon i {
  z-index: 3;
  right: 0.16rem;
  top: 0.18rem;
  width: 0.22rem;
  height: 0.22rem;
  border: 0;
  border-radius: 50%;
  background: #f2cf69;
  box-shadow: none;
  clip-path: none;
  transform: none;
}

.upload-photo-button .scan-action-label {
  display: block;
  color: #65481e;
  font-size: clamp(0.8rem, 1.55vw, 0.94rem);
  font-weight: 900;
  line-height: 1.05;
}

.scan-actions .scan-button {
  color: transparent;
  font-size: 0;
}

@media (max-width: 720px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .game {
    min-height: 100svh;
    place-items: stretch;
  }

  .garden-stage {
    width: 100vw;
    height: 100svh;
    min-width: 0;
    min-height: 0;
    aspect-ratio: auto;
    box-shadow: none;
  }

  .garden-panorama {
    object-position: center;
  }

  .hud--top {
    left: 1.25rem;
    right: 1.25rem;
    display: grid;
    grid-template-areas: "profile tools";
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.42rem;
    align-items: start;
  }

  .user-chip,
  .pill,
  .stamina-pill,
  .round-button,
  .guide-help-button,
  .clock {
    min-height: 2.35rem;
    padding: 0 0.58rem;
    border-width: 0.12rem;
    box-shadow: none;
    font-size: 0.82rem;
  }

  .user-chip {
    justify-content: center;
    min-width: 0;
    width: 2.74rem;
    min-height: 2.74rem;
    padding: 0;
  }

  .user-chip span:last-child {
    display: none;
  }

  .pill--level,
  .clock {
    display: none;
  }

  .hud-resources {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    justify-content: end;
    gap: 0.22rem;
    overflow: hidden;
  }

  .hud-tools {
    align-items: center;
    justify-content: end;
    gap: 0.28rem;
    overflow: hidden;
  }

  .user-avatar {
    width: 2.28rem;
    height: 2.28rem;
  }

  .pill--seed {
    min-width: 3.25rem;
    padding: 0 0.42rem;
  }

  .pill--seed span,
  .stamina-pill > span {
    width: 1.12rem;
    height: 1.22rem;
  }

  .stamina-pill {
    min-width: 2.85rem;
    gap: 0.22rem;
    padding: 0 0.42rem;
  }

  .stamina-pill i {
    display: none;
  }

  .weather-pill {
    min-width: 0;
    max-width: 6.6rem;
    min-height: 2.35rem;
    padding: 0 0.42rem;
    gap: 0.28rem;
    font-size: 0.76rem;
  }

  .weather-icon {
    width: 2.16rem;
    height: 1.62rem;
    min-width: 2.16rem;
  }

  .weather-pill b {
    overflow: hidden;
    max-width: 4.25rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .round-button {
    width: 2.65rem;
    padding: 0;
  }

  .photo-tool-button {
    width: 2.82rem;
    min-width: 2.82rem;
    min-height: 2.82rem;
  }

  .camera-tool-icon.svg-icon-frame {
    width: 2.02rem;
    height: 2.02rem;
  }

  .guide-help-button {
    width: 2.32rem;
    min-width: 2.32rem;
    padding: 0;
    border-width: 0.16rem;
    box-shadow: 0 0.25rem 0 rgba(78, 66, 42, 0.22);
    font-size: 1rem;
  }

  .sprig {
    width: clamp(4.4rem, 20vw, 6.15rem);
    height: clamp(4.4rem, 20vw, 6.15rem);
  }

  .knowledge-pop {
    min-width: min(6.7rem, 76vw);
    max-width: min(18rem, 76vw);
    padding: 0.58rem 0.78rem;
    border-width: 0.18rem;
    font-size: 0.86rem;
  }

  .feature-tip {
    max-width: min(11rem, 72vw);
    border-width: 0.12rem;
    font-size: 0.74rem;
  }

  .guide-card {
    grid-template-columns: 5.2rem minmax(0, 1fr);
    gap: 0.5rem;
    width: min(23.8rem, calc(100% - 1.2rem));
  }

  .guide-mascot-frame {
    width: 5.2rem;
    margin: 0;
    padding: 0;
  }

  .guide-speaker {
    font-size: 0.66rem;
  }

  .guide-bubble {
    padding: 0.78rem;
    border-width: 0.16rem;
    border-radius: 1rem;
  }

  .guide-bubble::before {
    left: -0.32rem;
    top: auto;
    bottom: 1rem;
    width: 0.32rem;
    height: 0.32rem;
  }

  .guide-highlight {
    border-width: 0.18rem;
    border-radius: 0.9rem;
  }

  .guide-actions {
    grid-template-columns: 1fr 1fr;
  }

  .guide-primary {
    grid-column: 1 / -1;
  }

  .guide-primary,
  .guide-secondary {
    min-height: 2.55rem;
    border-radius: 0.72rem;
  }

  .panel,
  .panel--expedition {
    left: 9%;
    right: 9%;
    top: 5.2rem;
    max-height: calc(100svh - 10.2rem);
    border-width: 0.18rem;
    border-radius: 1.25rem;
    padding: 1.08rem;
  }

  .panel--expedition {
    bottom: 5.7rem;
    max-height: none;
    padding: 0;
  }

  .panel--nursery {
    left: 10%;
    right: 10%;
    top: 5.2rem;
    width: auto;
    padding: 1.2rem;
    transform: none;
  }

  .panel--nursery.is-open {
    transform: none;
  }

  .panel--atlas {
    inset: 0;
    max-height: none;
    padding: 1.1rem 1.56rem 8.6rem;
    border: 0;
    border-radius: 0;
  }

  .panel--profile {
    inset: 0;
    max-height: none;
    padding: 3.2rem 1.4rem 1.6rem;
    border: 0;
    border-radius: 0;
  }

  .panel--identity {
    inset: 0;
    max-height: none;
    padding: 1rem 1.72rem 8.8rem;
    border: 0;
    border-radius: 0;
  }

  .identity-topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.45rem;
    margin-bottom: 0.7rem;
  }

  .identity-tools {
    gap: 0.35rem;
  }

  .identity-tools button:last-child {
    display: none;
  }

  .identity-hero {
    grid-template-columns: 1fr;
    gap: 1.02rem;
    padding: 1.34rem 1.86rem 1.42rem;
    border-radius: 0.78rem;
  }

  .identity-profile {
    padding: 0.34rem 0.34rem 0;
  }

  .identity-portrait {
    min-height: 11.35rem;
    border-radius: 0.42rem;
  }

  .identity-portrait img {
    bottom: 9%;
    width: 56%;
    height: 64%;
  }

  .passport-stamp {
    right: 0.48rem;
    bottom: -1.75rem;
    width: 7.65rem;
    height: 4.72rem;
  }

  .passport-stamp img {
    right: 0.56rem;
    width: 3.55rem;
    height: 3.55rem;
  }

  .passport-stamp::before {
    width: 4.38rem;
  }

  .passport-stamp::after {
    right: 1.46rem;
    top: 0.34rem;
    font-size: 0.58rem;
  }

  .passport-stamp i {
    top: 1.18rem;
    width: 4.15rem;
    height: 2.46rem;
  }

  .passport-id-strip {
    right: 0.28rem;
    top: auto;
    bottom: -0.2rem;
    font-size: 0.56rem;
  }

  .passport-id-strip b {
    font-size: 0.6rem;
  }

  .identity-profile h3 {
    margin-top: 0.05rem;
    font-size: 1.62rem;
  }

  .identity-profile ul {
    gap: 0.5rem;
    margin-top: 0.72rem;
  }

  .identity-profile li {
    font-size: 0.9rem;
  }

  .growth-card h4 {
    padding: 0.55rem 0.8rem;
  }

  .growth-steps {
    padding: 0.65rem 0.45rem 0.35rem;
  }

  .growth-steps span {
    font-size: 1.35rem;
  }

  .growth-steps b {
    font-size: 0.58rem;
  }

  .growth-card i {
    margin-bottom: 0.62rem;
  }

  .growth-card p {
    padding-bottom: 0.72rem;
    font-size: 0.88rem;
  }

  .identity-section {
    padding: 0.68rem 0.42rem;
    border-radius: 0;
  }

  .identity-section h3 {
    margin-bottom: 0.6rem;
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.55rem;
  }

  .stat-grid article {
    padding: 0.68rem;
  }

  .identity-split {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .item-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .item-row img,
  .relation-row img {
    width: 2.9rem;
    height: 2.9rem;
  }

  .house-section > div {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .house-pixel {
    width: 7.2rem;
  }

  .relation-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .relation-row--empty article {
    min-height: 5.2rem;
    padding: 0.28rem 0.12rem;
  }

  .relation-row--empty b {
    width: 2.45rem;
    height: 2.45rem;
    font-size: 1.35rem;
  }

  .relation-row--empty small {
    font-size: 0.66rem;
  }

  .achievement-grid,
  .outfit-grid {
    grid-template-columns: 1fr;
  }

  .identity-tabs {
    position: static;
    gap: 0.32rem;
    justify-content: center;
    width: min(100%, 24rem);
    margin: 0 auto 0.72rem;
    padding: 0.28rem;
    background: transparent;
  }

  .identity-tabs button {
    grid-template-columns: auto auto;
    gap: 0.28rem;
    min-width: 6.2rem;
    min-height: 3.02rem;
    padding: 0.34rem 0.48rem;
    border-radius: 0.62rem;
    font-size: 1.02rem;
  }

  .phone-card {
    min-height: 0;
    padding: 1rem;
    border-radius: 1.75rem;
  }

  .phone-grid {
    gap: 1.45rem 0.65rem;
    margin-top: 2rem;
  }

  .phone-app {
    gap: 0.5rem;
    font-size: 0.84rem;
  }

  .phone-app span {
    width: min(19vw, 5.15rem);
  }

  .phone-home {
    width: 100%;
    min-height: 3.75rem;
    justify-self: stretch;
  }

  .phone-status {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.55rem;
    font-size: 0.92rem;
  }

  .phone-status span {
    width: 2.35rem;
  }

  .adventure-scene {
    flex-basis: auto;
    max-height: min(32svh, 13.5rem);
  }

  .adventure-content {
    grid-template-columns: 1fr;
    gap: 0.48rem;
    padding: 0.72rem;
  }

  .duration-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adventure-status,
  .adventure-energy,
  .together-card {
    align-items: start;
    gap: 0.55rem;
    border-radius: 1rem;
  }

  .adventure-status > strong,
  .adventure-energy > strong {
    white-space: nowrap;
    font-size: 0.9rem;
  }

  .together-card button {
    min-width: 3.3rem;
  }

  .quest-card button {
    min-width: 2.15rem;
    min-height: 2.15rem;
    font-size: 0.95rem;
  }

  .goals-heading,
  .daily-scoreboard {
    align-items: start;
    flex-direction: column;
    gap: 0.2rem;
  }

  .daily-checkin-button {
    width: 100%;
  }

  .quest-card {
    grid-template-columns: 2.7rem minmax(0, 1fr) 2.15rem 2.15rem;
    gap: 0.5rem;
    min-height: 4.25rem;
    border-radius: 1rem;
  }

  .quest-card > b {
    width: 2.7rem;
    height: 2.7rem;
  }

  .quest-card strong {
    font-size: 0.9rem;
  }

  .quest-card small,
  .quest-card span {
    font-size: 0.76rem;
  }

  .quest-list {
    grid-template-columns: 1fr;
  }

  .atlas-list {
    grid-template-columns: 1fr;
  }

  .atlas-summary {
    margin-bottom: 1rem;
    padding: 0.64rem 0.72rem;
    gap: 0.5rem;
  }

  .atlas-book-layout {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 0.58rem;
    margin-top: 3.1rem;
  }

  .atlas-bookmarks {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.32rem;
    padding-top: 0;
  }

  .atlas-bookmarks button {
    min-height: 3.32rem;
    padding: 0.3rem 0.18rem;
  }

  .atlas-bookmarks strong {
    width: 2rem;
    height: 2rem;
  }

  .atlas-bookmarks i {
    font-size: 0.62rem;
  }

  .atlas-bookmarks span {
    width: min(13rem, 62vw);
    min-width: 10rem;
    padding: 0.54rem 0.64rem;
    font-size: 0.8rem;
    line-height: 1.42;
  }

  .atlas-card {
    padding: 0.9rem;
    border-radius: 0 0.8rem 0.8rem 0.45rem;
  }

  .atlas-card h2 {
    gap: 0.42rem;
    font-size: 1.18rem;
    line-height: 1.15;
  }

  .atlas-list article {
    min-height: 5.1rem;
    gap: 0.72rem;
  }

  .atlas-list .atlas-storybook {
    grid-template-columns: 1fr;
    gap: 0.18rem;
    min-height: 0;
  }

  .atlas-story-page {
    padding: 0.84rem;
  }

  .atlas-story-page--portrait {
    border-radius: 0.48rem 0.48rem 0.18rem 0.18rem;
  }

  .atlas-story-page--notes {
    border-top: 0;
    border-left: 0.12rem solid #bda772;
    border-radius: 0.18rem 0.18rem 0.48rem 0.48rem;
  }

  .atlas-story-portrait {
    min-height: 7.8rem;
  }

  .atlas-story-portrait img {
    width: min(76%, 7.4rem);
    height: min(76%, 7.4rem);
  }

  .atlas-list article > b {
    width: 4.25rem;
    height: 4.25rem;
  }

  .atlas-list strong {
    font-size: 1rem;
  }

  .atlas-list span {
    font-size: 0.78rem;
  }

  .atlas-list em {
    font-size: 1.15rem;
  }

  .locked-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .locked-grid article > b {
    border-radius: 0.9rem;
  }

  .ar-card {
    grid-template-columns: 1fr;
  }

  .ar-view {
    min-height: 10.5rem;
  }

  .scan-actions {
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 0.44rem;
  }

  .scan-actions .primary,
  .scan-actions .secondary {
    min-height: 4.08rem;
    padding: 0.46rem 0.42rem;
  }

  .scan-button {
    font-size: 0.88rem;
  }

  .scan-button::before {
    width: 1.2rem;
    height: 0.88rem;
  }

  .scan-button::after {
    width: auto;
    height: auto;
  }

  .upload-photo-button {
    gap: 0.22rem;
    padding-inline: 0.42rem;
    font-size: 0.8rem;
    line-height: 1.05;
  }

  .upload-photo-button .pixel-album-icon {
    flex: 0 0 auto;
    transform: none;
  }

  .sprig-info-card {
    left: 7.2%;
    right: 7.2%;
    bottom: 5.7rem;
    min-height: 4.9rem;
    padding: 0.62rem 0.78rem;
    border-width: 0.18rem;
    border-radius: 1.15rem;
  }

  .sprig-info-card img {
    width: 3.4rem;
    height: 3.4rem;
  }

  .sprig-info-card h1 {
    font-size: 1.05rem;
  }

  .sprig-info-card p {
    font-size: 0.76rem;
  }

  .dock {
    left: 50%;
    bottom: 0.6rem;
    gap: 0.46rem;
    width: min(78%, 20.4rem);
    align-items: center;
  }

  .dock button {
    min-height: 3.72rem;
    padding: 0.32rem;
    border-width: 0.16rem;
    border-radius: 0.72rem;
    box-shadow: 0 0.25rem 0 rgba(78, 66, 42, 0.22);
    font-size: 0.76rem;
  }

  .dock .home-button {
    min-width: 0;
    min-height: 3.72rem;
    border-radius: 0.72rem;
    font-size: 0.92rem;
  }

  .garden-action-button--expedition {
    right: 9%;
    bottom: 6.1rem;
  }

  .garden-action-button--nursery {
    left: 9%;
    bottom: 6.1rem;
  }

  .eight-bit-ui .garden-action-button {
    grid-template-rows: minmax(0, 2.24rem) auto;
    gap: 0.14rem;
    padding: 0.5rem 0.52rem 0.5rem;
  }

  .eight-bit-ui .garden-action-button .dock-button-icon {
    width: 2.14rem;
    height: 2.14rem;
  }

  .eight-bit-ui .garden-action-button--nursery .dock-button-icon {
    width: 2.14rem;
    height: 2.14rem;
  }

  .eight-bit-ui .dock::before {
    width: calc(100% + 0.78rem);
    height: calc(100% + 0.62rem);
    bottom: -0.28rem;
    border-radius: 0.74rem;
  }

  .eight-bit-ui .dock button {
    min-height: 3.72rem;
    padding: 0.32rem;
    border-radius: 0.6rem;
  }

  .eight-bit-ui .dock-button-icon {
    width: 3rem;
    height: 3rem;
    margin: auto;
  }

  .eight-bit-ui .dock .home-button .dock-button-icon {
    width: 2.9rem;
    height: 2.9rem;
  }

  .eight-bit-ui .pixel-icon--garden::before {
    bottom: 12%;
    width: 2.42rem;
    height: 1.42rem;
  }

  .eight-bit-ui .pixel-icon--garden::after {
    top: 22%;
    width: 0.66rem;
    height: 0.66rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .guide-highlight.is-stepping,
  .guide-card.is-stepping,
  .guide-mascot-frame.is-acting,
  .guide-bubble p.is-typing::after,
  .guide-garden-intro,
  .guide-garden-intro b,
  .guide-entry-gate,
  .guide-entry-gate::before,
  .guide-entry-gate::after,
  .guide-entry-light,
  .guide-entry-leaf,
  .garden-light-field::before,
  .garden-light-field::after,
  .garden-glimmer,
  .breeze-leaf,
  .breeze-thread,
  .sprig img {
    animation: none;
  }

  .guide-highlight,
  .guide-card {
    transition: none;
  }
}

.pixel-flat-ui {
  box-shadow: none;
}

.pixel-flat-ui::before {
  box-shadow: none;
}

.eight-bit-ui {
  color: var(--pixel-line);
  image-rendering: pixelated;
}

.eight-bit-ui .user-chip,
.eight-bit-ui .pill,
.eight-bit-ui .stamina-pill,
.eight-bit-ui .round-button,
.eight-bit-ui .guide-help-button,
.eight-bit-ui .clock,
.eight-bit-ui .knowledge-pop,
.eight-bit-ui .sprig-info-card,
.eight-bit-ui .panel,
.eight-bit-ui .name-card,
.eight-bit-ui .login-card,
.eight-bit-ui .boot-loading-card,
.eight-bit-ui .guide-bubble,
.eight-bit-ui .guide-primary,
.eight-bit-ui .guide-secondary,
.eight-bit-ui .primary,
.eight-bit-ui .secondary,
.eight-bit-ui .map-actions .secondary,
.eight-bit-ui .map-result,
.eight-bit-ui .atlas-card,
.eight-bit-ui .adventure-status,
.eight-bit-ui .adventure-energy,
.eight-bit-ui .together-card,
.eight-bit-ui .quest-section,
.eight-bit-ui .quest-card,
.eight-bit-ui .duration-picker button,
.eight-bit-ui .map-pack-picker button,
.eight-bit-ui .garden-action-button,
.eight-bit-ui .dock button {
  border: 0.12rem solid var(--pixel-border);
  border-radius: 0.55rem;
  background: var(--pixel-paper);
  box-shadow: none !important;
  image-rendering: pixelated;
}

.eight-bit-ui .dock::before {
  border: 0.1rem solid rgba(190, 221, 152, 0.92);
  border-radius: 0.62rem;
  background: rgba(255, 247, 218, 0.94);
  box-shadow: none;
  backdrop-filter: none;
}

.eight-bit-ui .dock button {
  min-height: clamp(3.55rem, 7vw, 5rem);
  padding: 0.36rem;
  place-items: center;
  align-content: center;
  color: var(--pixel-line);
  background: #fff2c4;
  border-radius: 0.72rem;
  outline: 0.08rem solid rgba(255, 253, 232, 0.82);
  outline-offset: -0.28rem;
  box-shadow: none !important;
}

.eight-bit-ui .dock button::before {
  display: none;
}

.eight-bit-ui .dock-button-icon {
  width: clamp(2.55rem, 6vw, 3.35rem);
  height: clamp(2.55rem, 6vw, 3.35rem);
  border-radius: 0.18rem;
  background: transparent;
  color: #fff8e8;
}

.eight-bit-ui .dock-button-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.eight-bit-ui .dock button b {
  position: absolute;
  width: var(--pixel-label-hidden);
  height: var(--pixel-label-hidden);
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.eight-bit-ui .home-button {
  color: var(--pixel-line);
  background: #fff2c4;
  border-color: var(--pixel-border);
  box-shadow: none !important;
}

.eight-bit-ui .dock .home-button {
  color: var(--pixel-line);
  background: #fff2c4;
  border-color: var(--pixel-border);
}

.eight-bit-ui .home-button .dock-button-icon {
  background: transparent;
}

.eight-bit-ui .dock button.is-active {
  color: #5f7b42;
  background: var(--pixel-sprout);
  border-color: #aacb76;
}

.eight-bit-ui .dock button.is-active .dock-button-icon {
  transform: none;
}

.eight-bit-ui .dock-button-icon {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.eight-bit-ui .pixel-icon::before,
.eight-bit-ui .pixel-icon::after {
  transform-origin: 50% 50%;
}

.eight-bit-ui .pixel-icon--identity::before {
  left: 50%;
  top: 50%;
  width: 2.34rem;
  height: 1.78rem;
  transform: translate(-50%, -50%);
}

.eight-bit-ui .pixel-icon--identity::after {
  left: 36%;
  top: 50%;
  bottom: auto;
  width: 0.62rem;
  height: 0.62rem;
  transform: translate(-50%, -50%);
}

.eight-bit-ui .pixel-icon--atlas::before {
  left: 50%;
  top: 50%;
  width: 2.38rem;
  height: 1.98rem;
  border-color: #6f9466;
  background: #fff8cc;
  box-shadow:
    -0.58rem 0 0 0 #c8eee7 inset,
    0.58rem 0 0 0 #cce98b inset;
  transform: translate(-50%, -50%);
}

.eight-bit-ui .pixel-icon--atlas::after {
  left: 50%;
  top: 50%;
  width: 0.14rem;
  height: 1.7rem;
  background: #6f9466;
  box-shadow:
    -0.72rem -0.18rem 0 -0.05rem #8ebf98,
    -0.72rem 0.28rem 0 -0.05rem #8ebf98,
    0.72rem -0.28rem 0 -0.05rem #dfbd72,
    0.72rem 0.18rem 0 -0.05rem #dfbd72,
    -0.36rem -0.52rem 0 -0.05rem rgba(255, 250, 218, 0.96),
    0.36rem 0.52rem 0 -0.05rem rgba(255, 250, 218, 0.96);
  transform: translate(-50%, -50%);
}

.eight-bit-ui .pixel-icon--garden::before {
  left: 50%;
  top: auto;
  bottom: 12%;
  width: 2.42rem;
  height: 1.42rem;
  transform: translateX(-50%);
}

.eight-bit-ui .pixel-icon--garden::after {
  left: 50%;
  top: 22%;
  width: 0.66rem;
  height: 0.66rem;
  transform: translateX(-50%);
}

.eight-bit-ui .pixel-icon--map::before {
  left: 50%;
  top: 50%;
  width: 2.16rem;
  height: 1.82rem;
  transform: translate(-50%, -50%) skewY(-4deg);
}

.eight-bit-ui .pixel-icon--map::after {
  left: 46%;
  top: 25%;
  width: 0.7rem;
  height: 0.7rem;
  transform: rotate(8deg);
}

.eight-bit-ui .garden-action-button {
  width: clamp(4.9rem, 8.4vw, 6.2rem);
  height: clamp(4.9rem, 8.4vw, 6.2rem);
  min-width: 0;
  min-height: 0;
  grid-template-rows: minmax(0, 2.34rem) auto;
  gap: 0.16rem;
  padding: 0.48rem 0.48rem 0.5rem;
  color: #5f7b55;
  background: #fff2c4;
  border-radius: 0.78rem;
  outline: 0.08rem solid rgba(255, 253, 232, 0.82);
  outline-offset: -0.32rem;
  box-shadow: none !important;
}

.eight-bit-ui .garden-action-button b {
  font-size: clamp(0.66rem, 1.12vw, 0.82rem);
  line-height: 1;
  letter-spacing: 0;
}

.eight-bit-ui .garden-action-button::before,
.eight-bit-ui .sprig-info-card::before,
.eight-bit-ui .panel::before {
  display: none;
}

.eight-bit-ui .garden-action-button .dock-button-icon {
  align-self: center;
  width: clamp(2.08rem, 4.4vw, 2.42rem);
  height: clamp(2.08rem, 4.4vw, 2.42rem);
  background: transparent;
}

.eight-bit-ui .garden-action-button--nursery .dock-button-icon {
  width: clamp(2.08rem, 4.4vw, 2.42rem);
  height: clamp(2.08rem, 4.4vw, 2.42rem);
}

.eight-bit-ui .user-chip {
  color: var(--pixel-line);
  background: var(--pixel-paper);
}

.eight-bit-ui .pill--level,
.eight-bit-ui .guide-help-button,
.eight-bit-ui .duration-picker button.is-selected {
  color: #fff8e8;
  background: var(--pixel-green);
  border-color: var(--pixel-green-dark);
}

.eight-bit-ui .pill--seed {
  color: #6f7148;
  background: #fff2c4;
  border-color: #c9e8a5;
}

.eight-bit-ui .stamina-pill {
  color: #5d7b76;
  background: #eef8d4;
  border-color: #b8ddaa;
}

.eight-bit-ui .stamina-pill i,
.eight-bit-ui .adventure-energy i {
  border: 0.1rem solid #9fc8bd;
  border-radius: 0.2rem;
  background: #fff8df;
}

.eight-bit-ui .stamina-pill em,
.eight-bit-ui .adventure-energy em {
  background: #9fded0;
}

.eight-bit-ui .panel,
.eight-bit-ui .knowledge-pop,
.eight-bit-ui .sprig-info-card,
.eight-bit-ui .name-card,
.eight-bit-ui .login-card,
.eight-bit-ui .guide-bubble,
.eight-bit-ui .atlas-card,
.eight-bit-ui .daily-scoreboard,
.eight-bit-ui .loot-chip,
.eight-bit-ui .quest-section,
.eight-bit-ui .quest-card,
.eight-bit-ui .together-card,
.eight-bit-ui .map-pack-picker button {
  background: var(--pixel-paper);
}

.eight-bit-ui .boot-loading-card {
  border: 0;
  background: transparent;
  box-shadow: none !important;
}

.eight-bit-ui .primary {
  border-radius: 0.55rem;
  color: #65481e;
  background: var(--pixel-sun);
  border-color: #d99826;
}

.eight-bit-ui .secondary,
.eight-bit-ui .map-actions .secondary,
.eight-bit-ui .guide-secondary {
  color: var(--pixel-line);
  background: var(--pixel-cream);
}

.eight-bit-ui .guide-primary,
.eight-bit-ui .quest-card button {
  color: #65481e;
  background: var(--pixel-sun);
  border-color: #d99826;
}

.eight-bit-ui .radar,
.eight-bit-ui .ar-view {
  border: 0.12rem solid var(--pixel-border);
  border-radius: 0.45rem;
  box-shadow: none;
}

.eight-bit-ui .sprig img,
.eight-bit-ui .ar-target,
.eight-bit-ui .atlas-list b {
  filter: none;
}

.eight-bit-ui .panel--identity .identity-section {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
}

@media (max-width: 720px) {
  .panel--identity,
  .panel--atlas,
  .panel--map,
  .panel--nursery {
    padding-bottom: calc(9.25rem + env(safe-area-inset-bottom));
  }

  .panel--map {
    left: var(--ui-side-gap);
    right: var(--ui-side-gap);
    padding: 1.18rem 1.52rem calc(9.25rem + env(safe-area-inset-bottom));
  }

  .identity-tabs {
    position: static;
    margin-bottom: 1.1rem;
  }

  .eight-bit-ui .dock {
    bottom: calc(0.6rem + env(safe-area-inset-bottom));
    width: min(72%, 19rem);
    gap: 0.5rem;
  }

  .eight-bit-ui .dock::before {
    width: calc(100% + 0.78rem);
    height: calc(100% + 0.62rem);
    bottom: -0.28rem;
    border-radius: 0.74rem;
  }

  .eight-bit-ui .dock button,
  .eight-bit-ui .dock .home-button {
    min-height: 3.72rem;
    padding: 0.32rem;
    border-radius: 0.6rem;
  }

  .eight-bit-ui .dock-button-icon,
  .eight-bit-ui .dock .home-button .dock-button-icon {
    width: 2.92rem;
    height: 2.92rem;
    margin: auto;
  }

  .eight-bit-ui .pixel-icon--identity::before,
  .eight-bit-ui .pixel-icon--atlas::before,
  .eight-bit-ui .pixel-icon--map::before {
    width: 2.12rem;
    height: 1.78rem;
  }

  .eight-bit-ui .pixel-icon--identity::before {
    width: 2.22rem;
    height: 1.68rem;
  }

  .eight-bit-ui .pixel-icon--identity::after {
    width: 0.58rem;
    height: 0.58rem;
  }

  .eight-bit-ui .pixel-icon--atlas::after {
    height: 1.52rem;
  }

  .eight-bit-ui .pixel-icon--garden::before {
    bottom: 12%;
    width: 2.42rem;
    height: 1.42rem;
  }

  .eight-bit-ui .pixel-icon--garden::after {
    top: 22%;
    width: 0.66rem;
    height: 0.66rem;
  }

  .eight-bit-ui .pixel-icon--map::after {
    width: 0.68rem;
    height: 0.68rem;
  }

  .identity-atlas-page .atlas-book-layout {
    grid-template-columns: 4.05rem minmax(0, 1fr);
    column-gap: 0.42rem;
    margin-top: 0.8rem;
  }

  .identity-atlas-page .atlas-bookmarks button {
    min-height: 3.08rem;
  }

  .garden-stage.has-identity-panel .dock {
    opacity: 0;
    transform: translate(-50%, 1.1rem);
    pointer-events: none;
  }

  .panel--identity {
    padding: 0.95rem 1.45rem 6.75rem;
  }

  .identity-topbar {
    width: 100%;
    margin-bottom: 0.72rem;
  }

  .identity-hero {
    grid-template-columns: 1fr;
    gap: 1.08rem;
    padding: 1.24rem 1.28rem 1.32rem;
    border-radius: 0.78rem;
  }

  .identity-portrait {
    min-height: clamp(14.8rem, 48vw, 18.8rem);
  }

  .identity-portrait img {
    bottom: 7%;
    width: min(64%, 12.5rem);
    height: 74%;
  }

  .passport-stamp {
    right: 0.92rem;
    bottom: -1.15rem;
    width: clamp(8rem, 30vw, 9.8rem);
    height: clamp(4.8rem, 18vw, 5.65rem);
  }

  .passport-stamp img {
    width: clamp(3.6rem, 13vw, 4.35rem);
    height: clamp(3.6rem, 13vw, 4.35rem);
  }

  .passport-stamp::before {
    width: clamp(4.6rem, 16vw, 5.55rem);
  }

  .passport-stamp i {
    top: 1.22rem;
    width: clamp(4.2rem, 15vw, 5.1rem);
    height: clamp(2.28rem, 8vw, 2.78rem);
  }

  .identity-profile {
    padding: 0.78rem 0.24rem 0;
  }

  .identity-name-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.5rem;
    align-items: center;
  }

  .identity-profile h3 {
    margin-bottom: 0;
    font-size: clamp(1.72rem, 6vw, 2.15rem);
  }

  .identity-certified-mark {
    font-size: 1.12rem;
  }

  .identity-profile p {
    margin-top: 0.58rem;
    font-size: 1rem;
    line-height: 1.5;
  }

  .identity-profile ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.52rem;
    margin-top: 0.85rem;
  }

  .identity-profile li {
    grid-template-columns: 1.32rem 3.05rem minmax(0, 1fr);
    gap: 0.44rem;
    align-items: center;
    min-height: 2.3rem;
    padding: 0.08rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 1rem;
  }

  .identity-profile li span {
    width: 1.28rem;
  }

  .identity-profile li b {
    line-height: 1.05;
  }

  .identity-profile li em {
    grid-column: auto;
    font-size: 1rem;
    line-height: 1.24;
  }

  .passport-id-strip {
    right: 0.12rem;
    bottom: -0.22rem;
    font-size: 0.68rem;
  }
}

@media (max-width: 390px) {
  .panel--identity {
    padding: 0.82rem 1.22rem 6.35rem;
  }

  .identity-topbar {
    gap: 0.38rem;
    margin-bottom: 0.48rem;
  }

  .identity-topbar h2 {
    font-size: 1.72rem;
    line-height: 1.05;
  }

  .identity-back,
  .identity-tools button {
    width: 2.46rem;
    border-radius: 0.34rem;
    font-size: 0;
  }

  .identity-tabs {
    gap: 0.24rem;
    width: 100%;
    margin-bottom: 0.52rem;
    padding: 0.22rem;
  }

  .identity-tabs button {
    gap: 0.22rem;
    min-width: 0;
    flex: 1 1 0;
    min-height: 2.92rem;
    padding: 0.26rem 0.18rem;
    border-radius: 0.26rem;
    font-size: 0.96rem;
  }

  .backpack-tab-icon {
    display: block;
    width: 1.82rem;
    height: 1.82rem;
  }

  .identity-hero {
    gap: 0.94rem;
    padding: 1.12rem 1.16rem 1.24rem;
  }

  .passport-card::before {
    inset: 0.68rem;
  }

  .identity-portrait {
    min-height: 14.6rem;
  }

  .identity-portrait img {
    bottom: 7%;
    width: 66%;
    height: 74%;
  }

  .passport-stamp {
    right: 0.68rem;
    bottom: -1.08rem;
    width: 8.2rem;
    height: 4.92rem;
  }

  .passport-stamp img {
    width: 3.78rem;
    height: 3.78rem;
  }

  .passport-stamp::before {
    width: 4.72rem;
  }

  .passport-stamp i {
    top: 1.16rem;
    width: 4.18rem;
    height: 2.38rem;
  }

  .identity-profile h3 {
    font-size: 1.74rem;
  }

  .identity-certified-mark {
    font-size: 1rem;
  }

  .identity-name-row {
    gap: 0.38rem;
  }

  .identity-name-row button,
  .identity-name-editor button {
    min-width: 2.25rem;
    min-height: 2.18rem;
  }

  .identity-profile p {
    font-size: 0.98rem;
    line-height: 1.46;
  }

  .identity-profile ul {
    gap: 0.42rem;
    margin-top: 0.68rem;
  }

  .identity-profile li {
    grid-template-columns: 1.22rem 2.86rem minmax(0, 1fr);
    gap: 0.36rem;
    min-height: 2.22rem;
    padding: 0.08rem 0;
    border: 0;
    background: transparent;
    font-size: 0.98rem;
  }

  .identity-profile li span {
    width: 1.18rem;
    border-radius: 0;
  }

  .identity-atlas-page {
    padding-inline: 0.08rem;
  }

  .identity-atlas-page .atlas-book-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.48rem;
    margin-top: 0.52rem;
  }

  .identity-atlas-page .atlas-bookmarks {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.28rem;
    padding-top: 0;
  }

  .identity-atlas-page .atlas-bookmarks button {
    min-height: 3.05rem;
    padding: 0.24rem 0.12rem;
  }

  .identity-atlas-page .atlas-bookmarks strong {
    width: 1.82rem;
    height: 1.82rem;
  }

  .identity-atlas-page .atlas-bookmarks i {
    font-size: 0.52rem;
  }

  .identity-atlas-page .atlas-bookmarks span {
    width: min(12.2rem, 62vw);
    min-width: 9.6rem;
    padding: 0.5rem 0.6rem;
    font-size: 0.76rem;
    line-height: 1.42;
  }

  .identity-atlas-page .atlas-summary {
    gap: 0.38rem;
    padding: 0.52rem 0.56rem;
  }

  .identity-atlas-page .atlas-card {
    padding: 0.68rem;
  }

  .identity-atlas-page .atlas-card h2 {
    font-size: 1.03rem;
  }

  .identity-atlas-page .atlas-story-page {
    padding: 0.64rem;
  }

  .identity-atlas-page .atlas-story-portrait {
    min-height: 6.9rem;
  }

  .identity-atlas-page .atlas-storybook h3 {
    font-size: 1.42rem;
  }

  .seed-pouch-card {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.56rem;
  }

  .seed-pouch-card button {
    grid-column: 2;
    justify-self: start;
    min-height: 2.05rem;
  }
}

@media (min-width: 721px) {
  .garden-stage {
    border-radius: 1.4rem;
  }

  .game::before {
    content: "WEB DEMO";
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    color: rgba(73, 87, 54, 0.62);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0;
  }
}

.panel--identity .identity-tabs {
  width: min(100%, 40rem);
  margin-inline: auto;
  padding-inline: clamp(0.1rem, 0.8vw, 0.55rem);
  border: 0;
}

.panel--identity .identity-tabs button {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(2.45rem, auto) auto;
  min-height: clamp(3.68rem, 9.2vw, 4.42rem);
  min-width: 0;
  padding: 0.24rem 0.16rem 0.3rem;
  border-radius: 0.26rem;
}

.panel--identity .identity-tabs button b {
  font-size: clamp(1rem, 3vw, 1.24rem);
  line-height: 1;
}

.panel--identity .backpack-tab-icon {
  width: clamp(2.12rem, 6.2vw, 2.72rem);
  height: clamp(2.12rem, 6.2vw, 2.72rem);
}

.panel--identity .identity-hero {
  width: min(100%, 40rem);
  margin-top: clamp(0.45rem, 1.6vw, 0.9rem);
  padding: clamp(1.18rem, 3.4vw, 2rem) clamp(1.35rem, 4.2vw, 2.45rem);
}

.panel--identity .identity-name-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem 0.5rem;
  align-items: baseline;
}

.panel--identity .identity-name-row h3 {
  margin: 0;
  font-size: clamp(2rem, 7vw, 2.72rem);
}

.panel--identity .identity-certified-mark {
  margin-left: 0;
  color: #6eae5e;
  font-size: clamp(1.08rem, 3.9vw, 1.42rem);
}

.panel--identity .identity-certified-mark::after {
  content: "种种";
  margin-left: 0.24rem;
  color: rgba(111, 174, 94, 0.52);
}

.panel--identity .identity-name-row #editIdentityName {
  color: rgba(105, 137, 86, 0.8);
  font-size: 0.88rem;
  flex: 0 0 1.72rem;
  width: 1.72rem;
  min-width: 1.72rem;
  height: 1.72rem;
  min-height: 1.72rem;
}

.panel--identity .identity-name-hint {
  margin-top: -0.05rem;
}

.panel--identity .identity-signature {
  margin-top: 0.62rem;
}

.panel--identity .identity-profile ul {
  margin-top: 0.8rem;
}

.panel--identity .identity-profile li {
  grid-template-columns: 1.25rem 2.68rem minmax(0, 1fr);
}

.panel--identity .identity-bio-editor input {
  font-size: 0.95rem;
}

/* Late layout guard: keep core feature controls away from cramped edges. */
.garden-action-button--expedition {
  right: max(6.8%, env(safe-area-inset-right));
}

.garden-action-button--nursery {
  left: max(6.8%, env(safe-area-inset-left));
}

.panel--expedition .adventure-scene {
  overflow: hidden;
  background: transparent;
}

.panel--expedition .adventure-scene > img {
  object-fit: cover;
  object-position: center;
}

@media (max-width: 720px) {
  .panel,
  .panel--map,
  .panel--nursery {
    left: var(--ui-side-gap);
    right: var(--ui-side-gap);
  }

  .panel--expedition {
    left: var(--ui-side-gap);
    right: var(--ui-side-gap);
  }

  .panel--expedition .adventure-scene {
    max-height: min(35svh, 15.5rem);
  }

  .garden-action-button--expedition {
    right: var(--ui-side-gap);
  }

  .garden-action-button--nursery {
    left: var(--ui-side-gap);
  }

  .eight-bit-ui .dock {
    width: min(68%, 18.4rem);
  }
}

/* Passport cleanup: one sprig portrait, quieter text, aligned mobile margins. */
.garden-stage {
  --ui-side-gap: clamp(1.9rem, 6.2vw, 4.2rem);
}

.panel--identity {
  --ui-side-gap: clamp(1.9rem, 6.2vw, 4.2rem);
}

.panel--identity .identity-hero {
  width: min(100%, 42rem);
  padding: clamp(1.55rem, 4vw, 2.5rem) clamp(2rem, 5.4vw, 3.45rem);
}

.panel--identity .passport-card::before {
  inset:
    clamp(1.55rem, 4vw, 2.5rem)
    clamp(2rem, 5.4vw, 3.45rem);
}

.panel--identity .identity-portrait {
  min-height: clamp(11.4rem, 28vw, 15.8rem);
  background: #edf3cf;
  border: 0.12rem solid rgba(132, 156, 96, 0.28);
}

.panel--identity .identity-portrait::before {
  inset: clamp(0.74rem, 2vw, 1.05rem);
  border: 0.1rem solid rgba(255, 250, 225, 0.82);
  background: rgba(255, 250, 225, 0.18);
}

.panel--identity .identity-portrait img {
  bottom: clamp(1.05rem, 2.9vw, 1.55rem);
  width: min(48%, 9.6rem);
  height: 58%;
}

.panel--identity .passport-stamp {
  right: clamp(0.72rem, 2.2vw, 1.18rem);
  bottom: clamp(-1.18rem, -1.72vw, -0.82rem);
  width: clamp(9.5rem, 22.5vw, 12rem);
  max-width: calc(100% - 1.44rem);
  height: clamp(5.88rem, 13.75vw, 7.44rem);
  color: #79a85d;
  opacity: 0.72;
}

.panel--identity .passport-stamp img {
  display: block;
  width: clamp(4.88rem, 8.5vw, 6.06rem);
  height: clamp(4.88rem, 8.5vw, 6.06rem);
}

.panel--identity .passport-stamp span {
  display: none;
}

.panel--identity .passport-stamp::before {
  right: 0.1rem;
  width: clamp(5.88rem, 13.75vw, 7.75rem);
  background: #f4edc4;
  box-shadow: none;
}

.panel--identity .passport-stamp::after {
  content: "";
  right: clamp(2.02rem, 5vw, 2.6rem);
  top: clamp(1.98rem, 4.5vw, 2.65rem);
  width: clamp(1.65rem, 4vw, 2.15rem);
  height: clamp(1.65rem, 4vw, 2.15rem);
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

.panel--identity .passport-stamp i {
  left: 0.08rem;
  top: clamp(1.68rem, 3.88vw, 2.15rem);
  width: clamp(5.94rem, 13.75vw, 7.75rem);
  height: clamp(3rem, 7.38vw, 3.94rem);
}

.panel--identity .passport-id-strip {
  right: clamp(0.1rem, 0.9vw, 0.32rem);
  bottom: clamp(-0.25rem, -0.4vw, -0.12rem);
  color: rgba(83, 105, 72, 0.42);
  font-size: clamp(0.58rem, 1.3vw, 0.72rem);
}

.panel--identity .passport-id-strip span {
  display: none;
}

.panel--identity .passport-id-strip b {
  color: rgba(83, 105, 72, 0.5);
  font-size: inherit;
}

.panel--identity .identity-profile {
  padding: clamp(0.24rem, 0.9vw, 0.52rem) 0 0;
}

.panel--identity .identity-name-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0.3rem;
  align-items: center;
  min-width: 0;
}

.panel--identity .identity-name-row.is-editing {
  grid-template-columns: minmax(0, 1fr);
}

.panel--identity .identity-name-row.is-editing .identity-certified-mark,
.panel--identity .identity-name-row.is-editing #editIdentityName {
  display: none;
}

.panel--identity .identity-name-row h3 {
  color: #59482f;
  font-size: clamp(1.62rem, 5.2vw, 2.08rem);
  line-height: 1.08;
  flex: 0 1 auto;
  max-width: calc(100% - 4.2rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.panel--identity .identity-certified-mark {
  align-self: center;
  color: #70aa5e;
  font-size: clamp(0.86rem, 2.8vw, 1.05rem);
}

.panel--identity .identity-certified-mark::after {
  content: "";
}

.identity-icon-edit {
  position: relative;
  display: grid;
  width: 1.72rem;
  min-width: 1.72rem;
  height: 1.72rem;
  min-height: 1.72rem;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #7d8d58;
}

.identity-icon-edit span {
  position: relative;
  display: block;
  width: 1.08rem;
  height: 1.08rem;
}

.identity-icon-edit span::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.86rem;
  height: 0.86rem;
  border: 0.1rem solid currentColor;
  border-radius: 0.16rem;
  background: #fff4c6;
  transform: translate(-50%, -50%);
}

.identity-icon-edit span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.18rem;
  height: 0.18rem;
  border-radius: 0.04rem;
  background: #7d8d58;
  box-shadow:
    -0.28rem 0 0 #7d8d58,
    0.28rem 0 0 #7d8d58;
  transform: translate(-50%, -50%);
}

.identity-icon-edit--small {
  width: 1.9rem;
  min-width: 1.9rem;
  height: 1.9rem;
  min-height: 1.9rem;
}

.panel--identity .identity-name-hint,
.panel--identity .identity-world-line {
  display: none;
}

.panel--identity .identity-signature {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
  justify-items: center;
  margin-top: 0.6rem;
}

.panel--identity .identity-signature.is-editing {
  grid-template-columns: minmax(0, 1fr);
}

.panel--identity .identity-signature p {
  color: #6e7f5b;
  font-size: clamp(0.92rem, 2.4vw, 1.08rem);
  line-height: 1.5;
  cursor: text;
  text-align: center;
}

.panel--identity #editIdentityBio {
  display: none;
}

.panel--identity .identity-profile ul {
  grid-template-columns: 1fr;
  gap: 0.34rem;
  margin-top: 0.74rem;
  padding-top: 0.58rem;
  border-top: 0.1rem solid rgba(126, 151, 91, 0.2);
}

.panel--identity .identity-profile li {
  grid-template-columns: 2.72rem minmax(0, 1fr);
  gap: 0.62rem;
  min-height: 1.42rem;
  padding: 0;
  font-size: clamp(0.78rem, 2vw, 0.92rem);
}

.panel--identity .identity-profile li span {
  display: none;
}

.panel--identity .identity-profile li b {
  color: #7d8b61;
  font-size: 0.9em;
}

.panel--identity .identity-profile li em {
  color: #5d5238;
  font-weight: 800;
}

@media (max-width: 720px) {
  .hud--top {
    left: var(--ui-side-gap, 1.9rem);
    right: var(--ui-side-gap, 1.9rem);
  }

  .panel,
  .panel--map,
  .panel--nursery {
    left: var(--ui-side-gap, 1.9rem);
    right: var(--ui-side-gap, 1.9rem);
  }

  .panel--expedition {
    left: var(--ui-side-gap, 1.9rem);
    right: var(--ui-side-gap, 1.9rem);
  }

  .panel--identity {
    padding: 1rem var(--ui-side-gap, 1.9rem) 8.8rem;
  }

  .panel--identity .identity-tabs,
  .panel--identity .identity-hero,
  .panel--identity .identity-section {
    width: 100%;
  }

  .panel--identity .identity-hero {
    padding: 1.12rem 1.42rem 1.28rem;
    gap: 0.72rem;
  }

  .panel--identity .passport-card::before {
    inset: 1.12rem 1.42rem;
  }

  .panel--identity .identity-portrait {
    min-height: clamp(9.6rem, 27svh, 11.8rem);
  }

  .panel--identity .identity-portrait img {
    bottom: 0.88rem;
    width: min(44%, 7.25rem);
    height: 52%;
  }

  .panel--identity .passport-stamp {
    right: 0.74rem;
    bottom: -0.74rem;
    width: 8.5rem;
    max-width: calc(100% - 1.48rem);
    height: 5.19rem;
  }

  .panel--identity .passport-stamp img {
    width: 3.94rem;
    height: 3.94rem;
  }

  .panel--identity .passport-stamp::before {
    width: 5.15rem;
  }

  .panel--identity .passport-stamp i {
    top: 1.28rem;
    width: 4.9rem;
    height: 2.63rem;
  }

  .panel--identity .identity-name-row {
    flex-wrap: nowrap;
    gap: 0.24rem;
  }

  .panel--identity .identity-profile {
    padding-top: 0.16rem;
  }

  .panel--identity .identity-name-row h3 {
    font-size: clamp(1.52rem, 5.4vw, 1.86rem);
  }

  .panel--identity .identity-certified-mark {
    font-size: 0.86rem;
  }

  .identity-icon-edit {
    width: 1.56rem;
    min-width: 1.56rem;
    height: 1.56rem;
    min-height: 1.56rem;
  }

  .panel--identity .identity-name-row #editIdentityName {
    flex-basis: 1.56rem;
    width: 1.56rem;
    min-width: 1.56rem;
    height: 1.56rem;
    min-height: 1.56rem;
  }

  .panel--identity .identity-signature {
    margin-top: 0.42rem;
  }

  .panel--identity .identity-profile ul {
    margin-top: 0.58rem;
    padding-top: 0.5rem;
  }

  .panel--identity .identity-profile ul {
    grid-template-columns: 1fr;
  }

  .garden-action-button--expedition {
    right: var(--ui-side-gap, 1.9rem);
  }

  .garden-action-button--nursery {
    left: var(--ui-side-gap, 1.9rem);
  }
}

@media (max-width: 390px) {
  .panel--identity {
    --ui-side-gap: 1.36rem;
  }

  .panel--identity .identity-hero {
    padding-inline: 1.34rem;
  }

  .panel--identity .identity-profile li {
    grid-template-columns: 2.62rem minmax(0, 1fr);
    gap: 0.46rem;
  }
}

/* Passport final alignment guard: keep the cream paper inside the dashed passport edge. */
.panel--identity .passport-card {
  --passport-edge-block: clamp(1.32rem, 3.4vw, 2.1rem);
  --passport-edge-inline: var(--passport-edge-block);
  --passport-inner-block: var(--passport-edge-block);
  --passport-inner-inline: var(--passport-edge-inline);
  padding:
    calc(var(--passport-edge-block) + var(--passport-inner-block))
    calc(var(--passport-edge-inline) + var(--passport-inner-inline));
  color: #6a5437;
  background: transparent;
}

.panel--identity .passport-card::before {
  z-index: 0;
  inset:
    var(--passport-edge-block)
    var(--passport-edge-inline);
  background: #fff3d6;
}

.panel--identity .identity-portrait,
.panel--identity .identity-profile {
  z-index: 1;
}

.panel--identity .identity-topbar h2,
.panel--identity .identity-tabs button b {
  color: #6a5437;
}

.panel--identity .identity-profile h3 {
  color: #6a4f30;
}

.panel--identity .identity-profile p,
.panel--identity .identity-signature p {
  color: #7a6748;
  font-size: clamp(0.9rem, 2.35vw, 1.04rem);
  line-height: 1.46;
}

.panel--identity .identity-signature {
  border: 0;
  padding-bottom: 0.14rem;
  justify-items: stretch;
  text-align: left;
}

.panel--identity .identity-signature .identity-inline-input--bio {
  max-width: 100%;
  margin-inline: 0;
  text-align: left;
}

.panel--identity .identity-profile ul {
  border-top: 0.1rem solid rgba(138, 115, 80, 0.2);
}

.panel--identity .identity-profile li {
  font-size: clamp(0.82rem, 2.05vw, 0.96rem);
}

.panel--identity .identity-profile li b {
  color: #8a7350;
  font-size: 1.12em;
}

.panel--identity .identity-profile li em {
  color: #66563b;
  font-size: 1em;
}

@media (max-width: 720px) {
  .panel--identity .passport-card {
    --passport-edge-block: 0.86rem;
    --passport-edge-inline: var(--passport-edge-block);
  }
}

@media (max-width: 390px) {
  .panel--identity .passport-card {
    --passport-edge-block: 0.72rem;
    --passport-edge-inline: var(--passport-edge-block);
  }
}

/* Passport name block final tune: equal paper margins and a clearer edit control. */
.panel--identity .identity-profile {
  display: grid;
  align-content: start;
  gap: clamp(0.74rem, 2.4vw, 1.02rem);
}

.panel--identity .identity-name-block,
.panel--identity .identity-signature,
.panel--identity .identity-profile ul {
  width: 100%;
}

.panel--identity .identity-name-row {
  gap: clamp(0.44rem, 1.5vw, 0.68rem);
  width: 100%;
}

.panel--identity .identity-name-row h3 {
  max-width: min(100%, 13.6rem);
  font-size: clamp(1.78rem, 5.45vw, 2.28rem);
}

.panel--identity .identity-certified-mark {
  flex: 0 0 auto;
}

.panel--identity .identity-name-row #editIdentityName {
  flex: 0 0 auto;
  margin-left: auto;
}

.identity-icon-edit {
  width: 2.14rem;
  min-width: 2.14rem;
  height: 2.14rem;
  min-height: 2.14rem;
  border: 0.1rem solid rgba(126, 141, 88, 0.3);
  border-radius: 0.42rem;
  background: #fff4c6;
}

.identity-icon-edit span {
  width: 1.28rem;
  height: 1.28rem;
}

.identity-icon-edit span::before {
  left: 50%;
  top: 50%;
  width: 0.92rem;
  height: 0.22rem;
  border: 0;
  border-radius: 0.05rem;
  background: #7d8d58;
  transform: translate(-50%, -50%) rotate(-38deg);
}

.identity-icon-edit span::after {
  left: 0.78rem;
  top: 0.24rem;
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 0.03rem;
  background: #d8b86b;
  box-shadow: -0.58rem 0.52rem 0 #7d8d58;
  transform: none;
}

.panel--identity .identity-signature {
  margin-top: 0;
  padding: 0;
}

.panel--identity .identity-signature p {
  max-width: 100%;
  margin: 0;
  text-align: left;
}

.panel--identity .identity-profile ul {
  margin-top: 0;
  padding-top: clamp(0.62rem, 1.8vw, 0.84rem);
}

@media (max-width: 720px) {
  .panel--identity .identity-name-row h3 {
    max-width: min(100%, 10.4rem);
  }

  .identity-icon-edit {
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    min-height: 2rem;
  }
}

/* Atlas final layout guard: align atlas content with the passport page rhythm. */
.panel--identity .identity-atlas-page {
  --atlas-page-inline: clamp(1.65rem, 5.8vw, 3.28rem);
  display: grid;
  align-content: start;
  gap: clamp(0.86rem, 2.4vw, 1.24rem);
  padding: 0 var(--atlas-page-inline) 1.2rem;
  overflow: visible;
}

.panel--identity .identity-atlas-page .atlas-map,
.panel--identity .identity-atlas-page .atlas-pages::before,
.panel--identity .identity-atlas-page .atlas-pages::after {
  display: none;
}

.panel--identity .identity-atlas-page .atlas-book-layout,
.panel--identity .identity-atlas-page .atlas-pages {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}

.panel--identity .identity-atlas-page .atlas-book-layout {
  margin-top: 0.72rem;
  gap: 0;
}

.panel--identity .identity-atlas-page .atlas-pages {
  display: grid;
  gap: clamp(0.86rem, 2.4vw, 1.24rem);
  min-width: 0;
}

.panel--identity .identity-atlas-page .atlas-summary {
  margin: 0;
  padding: clamp(0.92rem, 2.7vw, 1.22rem);
  gap: clamp(0.62rem, 1.8vw, 0.86rem);
  border-color: rgba(138, 181, 95, 0.72);
  min-width: 0;
}

.panel--identity .identity-atlas-page .atlas-summary p {
  font-size: clamp(1.02rem, 3.1vw, 1.32rem);
  color: #6a5437;
}

.panel--identity .identity-atlas-page .atlas-summary i {
  height: clamp(1.22rem, 3.2vw, 1.58rem);
}

.panel--identity .identity-atlas-page .atlas-reward-list {
  gap: clamp(0.48rem, 1.6vw, 0.76rem);
}

.panel--identity .identity-atlas-page .atlas-reward-chip {
  min-height: clamp(2.3rem, 5.8vw, 2.8rem);
  padding: 0.42rem 0.5rem;
  font-size: clamp(0.82rem, 2.1vw, 0.98rem);
}

.panel--identity .identity-atlas-page .atlas-bookmarks {
  order: 2;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(0.36rem, 1.3vw, 0.58rem);
  width: 100%;
  padding: 0;
  min-width: 0;
}

.panel--identity .identity-atlas-page .atlas-bookmarks button {
  min-height: clamp(3.62rem, 8.2vw, 4.48rem);
  padding: 0.36rem 0.22rem;
}

.panel--identity .identity-atlas-page .atlas-bookmarks strong {
  width: clamp(2.18rem, 5vw, 2.72rem);
  height: clamp(2.18rem, 5vw, 2.72rem);
}

.panel--identity .identity-atlas-page .atlas-bookmarks i {
  font-size: clamp(0.66rem, 1.7vw, 0.82rem);
}

.panel--identity .identity-atlas-page .atlas-card {
  margin: 0;
  padding: clamp(0.98rem, 2.8vw, 1.38rem);
  min-width: 0;
}

.panel--identity .identity-atlas-page .atlas-card h2 {
  font-size: clamp(1.24rem, 3.5vw, 1.62rem);
}

@media (max-width: 720px) {
  .panel--identity .identity-atlas-page {
    --atlas-page-inline: clamp(1.08rem, 5.2vw, 1.64rem);
  }

  .panel--identity .identity-atlas-page .atlas-bookmarks {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(4.2rem, 1fr);
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 0.16rem;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .panel--identity .identity-atlas-page .atlas-bookmarks::-webkit-scrollbar {
    display: none;
  }

  .panel--identity .identity-atlas-page .atlas-bookmarks button {
    scroll-snap-align: start;
    min-height: 4.1rem;
  }
}

@media (max-width: 390px) {
  .panel--identity .identity-atlas-page {
    --atlas-page-inline: 1rem;
  }
}

/* Atlas responsive debug guard: tabs and content share one page width. */
.panel--atlas,
.panel--identity .identity-atlas-page {
  --atlas-content-inline: clamp(1.12rem, 4.8vw, 2.18rem);
  --atlas-content-gap: clamp(0.78rem, 2.4vw, 1.18rem);
}

.panel--atlas .atlas-book-layout,
.panel--identity .identity-atlas-page .atlas-book-layout {
  width: min(100%, 42rem);
  max-width: 100%;
  margin-inline: auto;
}

.panel--atlas .atlas-pages,
.panel--identity .identity-atlas-page .atlas-pages {
  display: grid;
  gap: var(--atlas-content-gap);
  min-width: 0;
  width: 100%;
}

.panel--atlas .atlas-summary,
.panel--atlas .atlas-bookmarks,
.panel--atlas .atlas-card,
.panel--identity .identity-atlas-page .atlas-summary,
.panel--identity .identity-atlas-page .atlas-bookmarks,
.panel--identity .identity-atlas-page .atlas-card {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin-inline: auto;
}

.panel--atlas .atlas-summary,
.panel--identity .identity-atlas-page .atlas-summary {
  padding: clamp(0.82rem, 2.6vw, 1.14rem) var(--atlas-content-inline);
  margin: 0;
}

.panel--atlas .atlas-reward-list,
.panel--identity .identity-atlas-page .atlas-reward-list {
  grid-template-columns: repeat(auto-fit, minmax(min(7.2rem, 100%), 1fr));
}

.panel--atlas .atlas-bookmarks,
.panel--identity .identity-atlas-page .atlas-bookmarks {
  order: initial;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(4.72rem, 100%), 1fr));
  gap: clamp(0.42rem, 1.5vw, 0.64rem);
  padding: 0;
  overflow: visible;
}

.panel--atlas .atlas-bookmarks button,
.panel--identity .identity-atlas-page .atlas-bookmarks button {
  grid-template-rows: minmax(2.24rem, auto) auto;
  min-height: clamp(4.1rem, 9vw, 4.85rem);
  padding: 0.42rem 0.28rem;
  scroll-snap-align: unset;
}

.panel--atlas .atlas-bookmarks strong,
.panel--identity .identity-atlas-page .atlas-bookmarks strong {
  width: clamp(2.24rem, 5.6vw, 2.86rem);
  height: clamp(2.24rem, 5.6vw, 2.86rem);
}

.panel--atlas .atlas-bookmarks i,
.panel--identity .identity-atlas-page .atlas-bookmarks i {
  max-width: 100%;
  overflow: hidden;
  color: #6a6f52;
  font-size: clamp(0.68rem, 1.8vw, 0.86rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel--atlas .atlas-bookmarks span,
.panel--identity .identity-atlas-page .atlas-bookmarks span {
  width: min(15rem, calc(100vw - 3rem));
  min-width: min(11rem, calc(100vw - 3rem));
}

.panel--atlas .atlas-card,
.panel--identity .identity-atlas-page .atlas-card {
  padding: clamp(0.92rem, 2.8vw, 1.34rem) var(--atlas-content-inline);
  margin: 0;
  overflow: hidden;
}

.panel--atlas .atlas-card h2,
.panel--identity .identity-atlas-page .atlas-card h2 {
  flex-wrap: wrap;
  min-width: 0;
  font-size: clamp(1.14rem, 3.5vw, 1.56rem);
  line-height: 1.12;
}

.panel--atlas .atlas-list,
.panel--identity .identity-atlas-page .atlas-list,
.panel--atlas .locked-grid,
.panel--identity .identity-atlas-page .locked-grid {
  min-width: 0;
}

.panel--atlas .atlas-list .atlas-storybook,
.panel--identity .identity-atlas-page .atlas-list .atlas-storybook {
  grid-template-columns: repeat(auto-fit, minmax(min(14.5rem, 100%), 1fr));
}

.panel--atlas .locked-grid,
.panel--identity .identity-atlas-page .locked-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(7.35rem, 100%), 1fr));
}

.panel--atlas .locked-grid article,
.panel--identity .identity-atlas-page .locked-grid article {
  min-width: 0;
}

.panel--atlas .atlas-page-controls,
.panel--identity .identity-atlas-page .atlas-page-controls {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

@media (max-width: 720px) {
  .panel--atlas,
  .panel--identity .identity-atlas-page {
    --atlas-content-inline: clamp(0.88rem, 4.2vw, 1.22rem);
  }

  .panel--identity .identity-atlas-page .atlas-bookmarks {
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: repeat(auto-fit, minmax(min(4.32rem, 100%), 1fr));
    overflow: visible;
    scroll-snap-type: none;
  }

  .panel--atlas .atlas-bookmarks,
  .panel--identity .identity-atlas-page .atlas-bookmarks {
    grid-template-columns: repeat(auto-fit, minmax(min(4.32rem, 100%), 1fr));
  }

  .panel--atlas .atlas-bookmarks button,
  .panel--identity .identity-atlas-page .atlas-bookmarks button {
    min-height: 4.25rem;
  }
}

/* Backpack stability guard: one rhythm for passport, atlas, and items. */
.panel--identity .identity-tabs,
.panel--identity .identity-page {
  width: min(100%, 42rem);
  margin-inline: auto;
}

.panel--identity .identity-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.46rem, 1.5vw, 0.72rem);
  margin-bottom: clamp(0.82rem, 2.4vw, 1.18rem);
  padding: 0;
}

.panel--identity .identity-tabs button {
  min-height: clamp(4rem, 9.5vw, 4.72rem);
  padding: 0.32rem 0.24rem 0.34rem;
  border: 0.1rem solid rgba(159, 200, 121, 0.36);
  border-radius: 0.52rem;
  background: #fff8df;
  color: #73845b;
}

.panel--identity .identity-tabs button.is-active {
  border-color: rgba(111, 148, 102, 0.42);
  background: #f4ffd0;
  color: #557c3d;
}

.panel--identity .identity-tabs button b {
  font-size: clamp(1.12rem, 3.2vw, 1.36rem);
  line-height: 1.04;
}

.panel--identity .backpack-tab-icon {
  width: clamp(2.35rem, 6.8vw, 3.05rem);
  height: clamp(2.35rem, 6.8vw, 3.05rem);
}

.panel--identity .identity-page.is-hidden {
  display: none !important;
}

.panel--identity .identity-page:not(.is-hidden) {
  display: grid;
}

.panel--identity .identity-hero {
  grid-template-columns: minmax(9.4rem, 0.82fr) minmax(0, 1.18fr);
  max-width: 42rem;
}

.panel--identity .identity-section {
  max-width: 42rem;
  padding-inline: clamp(0.95rem, 3.2vw, 1.45rem);
}

.panel--identity .specialty-section,
.panel--identity .seed-pouch-section {
  border-left: 0;
  background: transparent;
}

@media (max-width: 720px) {
  .panel--identity .identity-tabs,
  .panel--identity .identity-page {
    width: 100%;
  }

  .panel--identity .identity-tabs button {
    min-height: 4.18rem;
  }

  .panel--identity .identity-tabs button b {
    font-size: clamp(1.08rem, 4.1vw, 1.28rem);
  }

  .panel--identity .backpack-tab-icon {
    width: clamp(2.18rem, 8.2vw, 2.72rem);
    height: clamp(2.18rem, 8.2vw, 2.72rem);
  }

  .panel--identity .identity-hero {
    grid-template-columns: 1fr;
  }

  .panel--identity .identity-section {
    padding-inline: clamp(0.72rem, 3.8vw, 1.08rem);
  }
}

@media (max-width: 720px) {
  .expedition-squad {
    grid-template-columns: 1fr;
    gap: 0.52rem;
  }

  .expedition-squad header {
    text-align: left;
  }

  .squad-slots {
    justify-content: start;
  }

  .squad-slot {
    width: 3rem;
  }
}

/* Backpack page alignment: passport, atlas, and items share the same visual width. */
.panel--identity {
  --backpack-page-width: min(100%, 44rem);
  --backpack-page-pad: clamp(1.08rem, 4.2vw, 1.72rem);
}

.panel--identity .identity-tabs,
.panel--identity .identity-page {
  width: var(--backpack-page-width);
}

.panel--identity .identity-page:not(.is-hidden) {
  margin-inline: auto;
}

.panel--identity .identity-hero.passport-card {
  min-height: clamp(34rem, 72vh, 45rem);
  align-self: center;
  align-items: center;
  max-width: var(--backpack-page-width);
  margin-block: clamp(0.72rem, 2.6vh, 1.6rem) clamp(1.05rem, 3vh, 1.9rem);
}

.panel--identity .identity-section {
  max-width: var(--backpack-page-width);
  padding-inline: var(--backpack-page-pad);
}

.panel--identity .specialty-section,
.panel--identity .seed-pouch-section {
  padding-inline: var(--backpack-page-pad);
}

.panel--identity .identity-atlas-page {
  --atlas-page-inline: var(--backpack-page-pad);
}

@media (max-width: 720px) {
  .panel--identity {
    --backpack-page-width: 100%;
    --backpack-page-pad: clamp(0.92rem, 4.6vw, 1.22rem);
  }

  .panel--identity .identity-hero.passport-card {
    min-height: clamp(39rem, 78vh, 48rem);
    margin-block: clamp(0.48rem, 1.6vh, 0.9rem) 1.2rem;
  }
}

/* Backpack top icons: one SVG layer, centered in every button. */
.panel--identity .identity-topbar {
  width: var(--backpack-page-width, min(100%, 44rem));
}

.panel--identity .identity-back,
.panel--identity .identity-tools button {
  position: relative;
  display: grid;
  width: clamp(2.72rem, 6vw, 3.42rem);
  min-width: clamp(2.72rem, 6vw, 3.42rem);
  height: clamp(2.72rem, 6vw, 3.42rem);
  place-items: center;
  padding: 0;
  overflow: hidden;
}

.panel--identity .identity-tools {
  display: grid;
  grid-auto-flow: column;
  gap: clamp(0.38rem, 1.4vw, 0.56rem);
  align-items: center;
}

.panel--identity .identity-top-icon {
  position: relative;
  display: grid;
  width: 76%;
  height: 76%;
  place-items: center;
  overflow: visible;
}

.panel--identity .identity-top-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.panel--identity .identity-top-icon::before,
.panel--identity .identity-top-icon::after,
.panel--identity .identity-top-icon i {
  display: none !important;
}

@media (max-width: 720px) {
  .panel--identity .identity-back,
  .panel--identity .identity-tools button {
    width: 2.58rem;
    min-width: 2.58rem;
    height: 2.58rem;
  }

  .panel--identity .identity-top-icon {
    width: 78%;
    height: 78%;
  }
}

/* Passport portrait fit: larger photo, even inner margin, no face overlap. */
.panel--identity .identity-hero.passport-card {
  grid-template-columns: minmax(12.8rem, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(1.28rem, 3.4vw, 2rem);
}

.panel--identity .identity-portrait {
  display: grid;
  min-height: clamp(15.6rem, 36vw, 20.5rem);
  place-items: center;
  overflow: visible;
}

.panel--identity .identity-portrait::before {
  inset: clamp(1rem, 3vw, 1.44rem);
}

.panel--identity .identity-portrait > img {
  left: 50%;
  bottom: clamp(1.58rem, 4vw, 2.18rem);
  width: min(72%, 13.2rem);
  height: min(72%, 13.2rem);
  object-fit: contain;
  object-position: 50% 56%;
  transform: translateX(-50%);
}

.panel--identity .passport-stamp {
  right: clamp(0.96rem, 2.8vw, 1.44rem);
  bottom: clamp(-1.05rem, -1.7vw, -0.62rem);
  width: clamp(8.6rem, 19vw, 10.8rem);
  max-width: calc(100% - 1.92rem);
}

.panel--identity .passport-stamp img {
  width: clamp(4.28rem, 7.8vw, 5.42rem);
  height: clamp(4.28rem, 7.8vw, 5.42rem);
}

@media (max-width: 720px) {
  .panel--identity .identity-hero.passport-card {
    gap: 1.02rem;
  }

  .panel--identity .identity-portrait {
    min-height: clamp(17.6rem, 52vw, 22rem);
  }

  .panel--identity .identity-portrait > img {
    bottom: 1.78rem;
    width: min(68%, 13rem);
    height: min(68%, 13rem);
  }

  .panel--identity .passport-stamp {
    right: 1rem;
    bottom: -0.86rem;
    width: 8.4rem;
    max-width: calc(100% - 2rem);
  }
}

/* Backpack no-pull guard: fit the current page inside the viewport. */
.panel--identity {
  height: 100vh;
  height: 100svh;
  max-height: 100vh;
  max-height: 100svh;
  overflow: hidden;
  overscroll-behavior: none;
}

.panel--identity.is-open {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
}

.panel--identity .identity-page:not(.is-hidden) {
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

.panel--identity .identity-hero.passport-card {
  height: min(45rem, calc(100svh - 13.8rem));
  min-height: min(34rem, calc(100svh - 13.8rem));
  margin-block: clamp(0.48rem, 1.8vh, 1rem);
}

@media (max-width: 720px) {
  .panel--identity .identity-hero.passport-card {
    height: calc(100svh - 12.9rem);
    min-height: calc(100svh - 12.9rem);
    margin-block: 0.42rem 0.72rem;
  }

  .panel--identity .identity-portrait {
    min-height: min(17.6rem, 42svh);
  }
}

/* Passport viewport fit: keep the card readable without page pull-down. */
.panel--identity .identity-hero.passport-card {
  box-sizing: border-box;
  align-content: center;
  overflow: hidden;
}

@media (max-width: 720px) {
  .panel--identity .identity-hero.passport-card {
    grid-template-rows: minmax(12.4rem, 0.42fr) minmax(0, 1fr);
    gap: clamp(0.58rem, 1.9vh, 0.88rem);
    align-items: stretch;
    align-content: stretch;
    padding:
      calc(var(--passport-edge-block) + clamp(0.56rem, 2.2vw, 0.78rem))
      calc(var(--passport-edge-inline) + clamp(0.56rem, 2.2vw, 0.78rem));
  }

  .panel--identity .identity-portrait {
    min-height: 0;
    height: 100%;
    max-height: min(15.6rem, 34svh);
  }

  .panel--identity .identity-portrait::before {
    inset: clamp(0.7rem, 2.8vw, 1rem);
  }

  .panel--identity .identity-portrait > img {
    bottom: clamp(1.08rem, 3.2vw, 1.42rem);
    width: min(64%, 10.8rem);
    height: min(64%, 10.8rem);
  }

  .panel--identity .passport-stamp {
    right: clamp(0.82rem, 3.3vw, 1.12rem);
    bottom: clamp(-0.72rem, -1.5vw, -0.46rem);
    width: clamp(7.42rem, 25vw, 8.7rem);
  }

  .panel--identity .passport-stamp img {
    width: clamp(3.72rem, 13vw, 4.62rem);
    height: clamp(3.72rem, 13vw, 4.62rem);
  }

  .panel--identity .identity-profile {
    min-height: 0;
    gap: clamp(0.42rem, 1.45vh, 0.62rem);
    overflow: hidden;
  }

  .panel--identity .identity-name-row {
    gap: 0.36rem;
  }

  .panel--identity .identity-name-row h3 {
    max-width: min(100%, 12.2rem);
    font-size: clamp(1.36rem, 5.7vw, 1.74rem);
  }

  .panel--identity .identity-certified-mark {
    font-size: clamp(0.78rem, 2.8vw, 0.9rem);
  }

  .panel--identity .identity-signature p {
    font-size: clamp(0.86rem, 2.9vw, 0.96rem);
    line-height: 1.32;
  }

  .panel--identity .identity-profile ul {
    display: grid;
    gap: 0.24rem;
    padding-top: clamp(0.42rem, 1.3vh, 0.58rem);
  }

  .panel--identity .identity-profile li {
    min-height: 1.62rem;
    padding-block: 0.08rem;
    font-size: clamp(0.82rem, 2.75vw, 0.94rem);
  }
}

/* Landform overview cards: image first, two-character label, small progress. */
.landform-region-strip {
  grid-auto-columns: minmax(4.75rem, 22%);
  gap: clamp(0.44rem, 1.7vw, 0.68rem);
}

.landform-region-chip {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 0.24rem;
  min-height: clamp(5.45rem, 14vw, 6.6rem);
  padding: 0.48rem 0.38rem 0.54rem;
  text-align: center;
}

.landform-region-chip i {
  grid-row: auto;
  width: clamp(2.55rem, 7.4vw, 3.18rem);
  height: clamp(2.55rem, 7.4vw, 3.18rem);
  border: 0;
  border-radius: 0.34rem;
  background: #f6efc5;
}

.landform-region-chip strong {
  font-size: clamp(0.86rem, 2.45vw, 1rem);
  line-height: 1;
}

.landform-region-chip em {
  font-size: clamp(0.68rem, 1.9vw, 0.8rem);
  line-height: 1;
}

.landform-region-chip--jiangnan i {
  background: #d8f0df;
}

.landform-region-chip--jiangnan i::before {
  left: 0.4rem;
  right: 0.4rem;
  bottom: 0.64rem;
  height: 0.24rem;
  background: #63a89f;
  box-shadow: 0 -0.52rem 0 #a7d6d0, 0 -1.04rem 0 #63a89f;
}

.landform-region-chip--jiangnan i::after {
  left: 0.86rem;
  bottom: 0.92rem;
  width: 0.46rem;
  height: 0.46rem;
  background: #8ec56d;
  box-shadow: 0.72rem -0.32rem 0 #8ec56d;
}

.landform-region-chip--mountain i {
  background: #e2f1c1;
}

.landform-region-chip--mountain i::before {
  left: 0.38rem;
  bottom: 0.52rem;
  width: 0.64rem;
  height: 0.64rem;
  background: #6f9466;
  box-shadow:
    0.32rem -0.32rem 0 #6f9466,
    0.64rem -0.64rem 0 #6f9466,
    0.96rem -0.32rem 0 #8fb66d,
    1.28rem 0 0 #6f9466;
}

.landform-region-chip--mountain i::after {
  left: 1.1rem;
  bottom: 1.72rem;
  width: 0.44rem;
  height: 0.3rem;
  background: #fff6d4;
  box-shadow: 0.44rem 0.4rem 0 #a7c879;
}

.landform-region-chip--northwest i {
  background: #fff0bd;
}

.landform-region-chip--northwest i::before {
  left: 0.48rem;
  right: 0.48rem;
  bottom: 0.62rem;
  height: 0.28rem;
  background: #c99a54;
  box-shadow: 0 -0.58rem 0 #e1bf69, 0.32rem -1.16rem 0 #c99a54;
}

.landform-region-chip--northwest i::after {
  right: 0.54rem;
  top: 0.48rem;
  width: 0.52rem;
  height: 0.52rem;
  background: #f2cb7d;
}

.landform-region-chip--coast i {
  background: #dff3ec;
}

.landform-region-chip--coast i::before {
  left: 0.42rem;
  right: 0.42rem;
  bottom: 0.62rem;
  height: 0.22rem;
  background: #66a9c0;
  box-shadow: 0 -0.48rem 0 #9bd2d0, 0 -0.96rem 0 #66a9c0;
}

.landform-region-chip--coast i::after {
  left: 1rem;
  top: 0.5rem;
  width: 0.34rem;
  height: 0.34rem;
  background: #f2cb7d;
  box-shadow:
    0.34rem 0 0 #f2cb7d,
    0.68rem 0 0 #f2cb7d,
    0.34rem 0.34rem 0 #f2cb7d,
    0.34rem 0.68rem 0 #f2cb7d;
}

.landform-region-chip--plateau i {
  background: #efe8ca;
}

.landform-region-chip--plateau i::before {
  left: 0.38rem;
  bottom: 0.54rem;
  width: 0.54rem;
  height: 0.54rem;
  background: #9d8bb1;
  box-shadow:
    0.4rem -0.28rem 0 #b2a3c2,
    0.8rem -0.12rem 0 #9d8bb1,
    1.2rem -0.52rem 0 #b2a3c2,
    1.6rem 0 0 #9d8bb1;
}

.landform-region-chip--plateau i::after {
  left: 0.76rem;
  top: 0.58rem;
  width: 0.38rem;
  height: 0.38rem;
  background: #fff6d4;
  box-shadow: 0.72rem 0.46rem 0 #c2d991;
}

/* Atlas fit guard: one stable rhythm for tabs, achievement, and content cards. */
.panel--atlas,
.panel--identity .identity-atlas-page {
  --atlas-content-inline: clamp(1rem, 4.6vw, 1.62rem);
  --atlas-card-gap: clamp(0.68rem, 2.2vw, 0.96rem);
}

.panel--identity .identity-atlas-page:not(.is-hidden) {
  display: grid;
  height: 100%;
  min-height: 0;
  padding: 0 var(--backpack-page-pad, var(--atlas-content-inline)) clamp(0.86rem, 2.4vw, 1.12rem);
  overflow: hidden;
}

.panel--atlas .atlas-book-layout,
.panel--identity .identity-atlas-page .atlas-book-layout {
  display: grid;
  width: min(100%, var(--backpack-page-width, 44rem));
  max-width: 100%;
  min-height: 0;
  margin-inline: auto;
}

.panel--atlas .atlas-pages,
.panel--identity .identity-atlas-page .atlas-pages {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: var(--atlas-card-gap);
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.panel--identity .identity-atlas-page .atlas-pages {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-bottom: clamp(0.52rem, 1.8vw, 0.82rem);
  scrollbar-width: none;
}

.panel--identity .identity-atlas-page .atlas-pages::-webkit-scrollbar {
  display: none;
}

.panel--atlas .atlas-summary,
.panel--identity .identity-atlas-page .atlas-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(0.46rem, 1.6vw, 0.68rem);
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: clamp(0.72rem, 2.4vw, 0.98rem) var(--atlas-content-inline);
  border-radius: 0.52rem;
}

.panel--atlas .atlas-summary p,
.panel--identity .identity-atlas-page .atlas-summary p {
  min-width: 0;
  margin: 0;
  color: #6a5437;
  font-size: clamp(0.98rem, 3vw, 1.2rem);
  line-height: 1.15;
}

.panel--atlas .atlas-reward-list,
.panel--identity .identity-atlas-page .atlas-reward-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.36rem, 1.2vw, 0.54rem);
  min-width: 0;
}

.panel--atlas .atlas-reward-chip,
.panel--identity .identity-atlas-page .atlas-reward-chip {
  min-width: 0;
  min-height: clamp(2.08rem, 5.5vw, 2.52rem);
  padding: 0.34rem 0.36rem;
  font-size: clamp(0.72rem, 2vw, 0.88rem);
}

.panel--atlas .atlas-bookmarks,
.panel--identity .identity-atlas-page .atlas-bookmarks {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(4.35rem, 18vw, 5.35rem);
  grid-template-columns: none;
  gap: clamp(0.42rem, 1.4vw, 0.62rem);
  width: 100%;
  min-width: 0;
  padding: 0 0 0.08rem;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.panel--atlas .atlas-bookmarks::-webkit-scrollbar,
.panel--identity .identity-atlas-page .atlas-bookmarks::-webkit-scrollbar {
  display: none;
}

.panel--atlas .atlas-bookmarks button,
.panel--identity .identity-atlas-page .atlas-bookmarks button {
  grid-template-rows: clamp(2.1rem, 5.6vw, 2.54rem) auto;
  min-height: clamp(4.02rem, 10vw, 4.7rem);
  padding: 0.38rem 0.24rem;
  scroll-snap-align: start;
}

.panel--atlas .atlas-bookmarks strong,
.panel--identity .identity-atlas-page .atlas-bookmarks strong {
  width: clamp(2.18rem, 6vw, 2.6rem);
  height: clamp(2.18rem, 6vw, 2.6rem);
}

.panel--atlas .atlas-bookmarks i,
.panel--identity .identity-atlas-page .atlas-bookmarks i {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  font-size: clamp(0.68rem, 2vw, 0.82rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel--atlas .atlas-bookmarks span,
.panel--identity .identity-atlas-page .atlas-bookmarks span {
  width: min(14rem, calc(100vw - 3rem));
  min-width: min(10.5rem, calc(100vw - 3rem));
  font-size: clamp(0.82rem, 2.4vw, 0.96rem);
}

.panel--atlas .atlas-card,
.panel--identity .identity-atlas-page .atlas-card {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: clamp(0.82rem, 2.6vw, 1.08rem) var(--atlas-content-inline);
  overflow: hidden;
}

.panel--atlas .atlas-card h2,
.panel--identity .identity-atlas-page .atlas-card h2 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  min-width: 0;
  margin-bottom: clamp(0.58rem, 1.8vw, 0.78rem);
  color: #5f5137;
  font-size: clamp(1.06rem, 3.2vw, 1.34rem);
  line-height: 1.15;
}

.panel--atlas .atlas-list,
.panel--identity .identity-atlas-page .atlas-list {
  min-width: 0;
}

.panel--atlas .atlas-list .atlas-storybook,
.panel--identity .identity-atlas-page .atlas-list .atlas-storybook {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.panel--atlas .locked-grid,
.panel--identity .identity-atlas-page .locked-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.48rem, 1.8vw, 0.72rem);
  min-width: 0;
}

.panel--atlas .locked-grid article,
.panel--identity .identity-atlas-page .locked-grid article {
  min-width: 0;
  padding: clamp(0.38rem, 1.5vw, 0.56rem);
}

.panel--atlas .locked-grid article > b,
.panel--identity .identity-atlas-page .locked-grid article > b {
  width: min(100%, clamp(3.8rem, 16vw, 4.85rem));
}

.panel--atlas .locked-grid img,
.panel--identity .identity-atlas-page .locked-grid img {
  width: 78%;
  height: 78%;
}

.panel--atlas .atlas-page-controls,
.panel--identity .identity-atlas-page .atlas-page-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(0.38rem, 1.4vw, 0.56rem);
  align-items: center;
  min-width: 0;
}

.panel--atlas .atlas-page-controls button,
.panel--identity .identity-atlas-page .atlas-page-controls button {
  min-width: 0;
}

@media (max-width: 720px) {
  .panel--identity .identity-atlas-page:not(.is-hidden) {
    padding-inline: var(--backpack-page-pad, clamp(0.92rem, 4.6vw, 1.22rem));
  }

  .panel--identity .identity-atlas-page .atlas-pages {
    grid-template-rows: auto auto auto minmax(0, auto);
  }

  .panel--identity .identity-atlas-page .atlas-bookmarks {
    grid-auto-columns: clamp(4.3rem, 28vw, 5.2rem);
  }

  .panel--identity .identity-atlas-page .atlas-list .atlas-storybook,
  .panel--atlas .atlas-list .atlas-storybook {
    grid-template-columns: 1fr;
  }

  .panel--identity .identity-atlas-page .atlas-story-page--portrait,
  .panel--atlas .atlas-story-page--portrait {
    border-radius: 0.52rem 0.52rem 0.16rem 0.16rem;
  }

  .panel--identity .identity-atlas-page .atlas-story-page--notes,
  .panel--atlas .atlas-story-page--notes {
    border-left: 0.12rem solid #bda772;
    border-top: 0;
    border-radius: 0.16rem 0.16rem 0.52rem 0.52rem;
  }

  .panel--identity .identity-atlas-page .locked-grid,
  .panel--atlas .locked-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 390px) {
  .panel--identity .identity-atlas-page .locked-grid,
  .panel--atlas .locked-grid {
    gap: 0.42rem;
  }

  .panel--identity .identity-atlas-page .atlas-card,
  .panel--atlas .atlas-card {
    padding-inline: clamp(0.72rem, 3.8vw, 0.92rem);
  }
}

/* UI adaptation micro tune: enlarge map preview and keep passport/atlas responsive. */
.landform-overview {
  gap: clamp(0.7rem, 2vw, 1rem);
  padding: clamp(0.72rem, 2vw, 1rem);
}

.landform-panorama {
  aspect-ratio: 16 / 11;
  min-height: clamp(14rem, 42vw, 23rem);
  background: #edf4c8;
}

.landform-panorama img {
  object-fit: contain;
  background: #edf4c8;
}

@media (max-width: 720px) {
  .landform-panorama {
    min-height: clamp(15rem, 58vw, 20rem);
  }

  .panel--identity .identity-hero.passport-card {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(13.2rem, 0.44fr) minmax(0, 1fr);
    min-height: 0;
  }

  .panel--identity .identity-profile {
    align-content: start;
  }
}

.panel--atlas {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.panel--identity .identity-atlas-page .atlas-book-layout,
.panel--identity .identity-atlas-page .atlas-pages {
  min-height: 0;
}

.panel--identity .identity-atlas-page .atlas-book-layout {
  height: 100%;
}

.panel--identity .identity-atlas-page .atlas-pages {
  max-height: 100%;
}

/* Atlas flow repair: stop compressing atlas sections into one squeezed grid. */
.panel--atlas .atlas-pages,
.panel--identity .identity-atlas-page .atlas-pages {
  display: block;
  grid-template-rows: none;
}

.panel--identity .identity-atlas-page .atlas-book-layout {
  height: 100%;
  overflow: hidden;
}

.panel--identity .identity-atlas-page .atlas-pages {
  height: 100%;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: clamp(1.2rem, 4vw, 1.8rem);
}

.panel--atlas .atlas-summary,
.panel--atlas .atlas-bookmarks,
.panel--atlas .atlas-card,
.panel--identity .identity-atlas-page .atlas-summary,
.panel--identity .identity-atlas-page .atlas-bookmarks,
.panel--identity .identity-atlas-page .atlas-card {
  margin-bottom: clamp(0.74rem, 2.4vw, 1rem);
}

.panel--atlas .atlas-card:last-child,
.panel--identity .identity-atlas-page .atlas-card:last-child {
  margin-bottom: 0;
}

.panel--identity .identity-atlas-page .atlas-summary {
  flex: none;
}

.panel--identity .identity-atlas-page .atlas-bookmarks {
  flex: none;
}

@media (max-width: 720px) {
  .panel--atlas .atlas-pages,
  .panel--identity .identity-atlas-page .atlas-pages {
    display: block;
    grid-template-rows: none;
  }

  .panel--identity .identity-atlas-page .atlas-summary,
  .panel--identity .identity-atlas-page .atlas-card {
    padding-inline: clamp(0.78rem, 4vw, 1rem);
  }

  .panel--identity .identity-atlas-page .atlas-bookmarks {
    grid-auto-columns: clamp(4.65rem, 31vw, 5.45rem);
    margin-bottom: clamp(0.78rem, 2.8vw, 1.05rem);
  }
}

/* Specialty collection tune: expanded regions with non-overlapping item cards. */
.specialty-shelf {
  gap: clamp(0.82rem, 2.5vw, 1.18rem);
}

.specialty-region {
  gap: clamp(0.62rem, 2vw, 0.88rem);
  overflow: visible;
}

.specialty-region-toggle {
  padding: clamp(0.84rem, 2.5vw, 1.12rem);
}

.specialty-region-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(8.4rem, 100%), 1fr));
  gap: clamp(0.62rem, 2vw, 0.9rem);
  padding:
    0 clamp(0.72rem, 2.3vw, 1rem)
    clamp(0.84rem, 2.5vw, 1.12rem);
}

.specialty-card {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: clamp(0.36rem, 1.5vw, 0.58rem);
  min-width: 0;
  min-height: clamp(8.2rem, 22vw, 10.5rem);
  padding: clamp(0.72rem, 2.2vw, 0.98rem);
  text-align: center;
}

.specialty-card > div {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  width: 100%;
  justify-items: center;
}

.specialty-card strong,
.specialty-card span {
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
}

.specialty-card strong {
  font-size: clamp(0.9rem, 2.5vw, 1.04rem);
  line-height: 1.18;
}

.specialty-card span {
  font-size: clamp(0.72rem, 2vw, 0.84rem);
  line-height: 1.25;
}

.specialty-card .specialty-icon {
  width: clamp(3.1rem, 8.5vw, 3.75rem);
}

.specialty-card .rarity-pips {
  justify-content: center;
  min-height: 0.46rem;
}

@media (max-width: 720px) {
  .specialty-region-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .specialty-region-toggle div {
    display: grid;
    gap: 0.18rem;
  }

  .specialty-region-toggle span {
    text-align: left;
  }
}

/* Icon anti-overlap guard: every drawing stays inside its own slot. */
.svg-icon-frame,
.dock-button-icon,
.backpack-tab-icon,
.atlas-tab-icon,
.daily-pixel-icon,
.specialty-icon,
.camera-tool-icon,
.pixel-album-icon,
.nursery-drop-icon {
  flex: 0 0 auto;
  box-sizing: border-box;
  contain: layout paint;
  isolation: isolate;
  overflow: hidden;
}

.svg-icon-frame img,
.dock-button-icon img,
.backpack-tab-icon img,
.camera-tool-icon img,
.nursery-drop-icon img,
.seed-pouch-card img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  image-rendering: pixelated;
}

.dock button,
.panel--identity .identity-tabs button,
.scan-button,
.upload-photo-button,
.quest-card,
.seed-pouch-card {
  min-width: 0;
}

.dock button b,
.panel--identity .identity-tabs button b,
.scan-action-label,
.quest-card strong,
.quest-card small,
.quest-card span,
.seed-pouch-card strong,
.seed-pouch-card p {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.scan-button,
.upload-photo-button {
  justify-items: center;
  align-items: center;
}

.upload-photo-button .pixel-album-icon,
.scan-button::before {
  grid-row: 1;
  align-self: center;
  justify-self: center;
}

.specialty-card .specialty-icon,
.atlas-bookmarks .atlas-tab-icon,
.panel--identity .backpack-tab-icon {
  margin-inline: auto;
}

.quest-card > b {
  display: grid;
  place-items: center;
  min-width: clamp(2.5rem, 7vw, 3rem);
}

/* Backpack right-side icon repair: centered SVGs and a cleaner items mark. */
.panel--identity .identity-tools button {
  overflow: hidden;
}

.panel--identity .identity-top-icon.svg-icon-frame {
  width: clamp(1.86rem, 4.3vw, 2.18rem);
  height: clamp(1.86rem, 4.3vw, 2.18rem);
  contain: layout;
  overflow: visible;
}

.panel--identity .identity-top-icon.svg-icon-frame img {
  width: 84%;
  height: 84%;
  margin: auto;
}

.panel--identity .identity-top-icon--share.svg-icon-frame img {
  width: 88%;
  height: 88%;
  transform: translateX(0.02rem);
}

.panel--identity .backpack-tab-icon--items::before {
  top: 55%;
  width: 1.54rem;
  height: 1.12rem;
  border-radius: 0.12rem;
}

.panel--identity .backpack-tab-icon--items::after {
  top: 33%;
  width: 0.62rem;
  height: 0.38rem;
  border-radius: 0.24rem 0.24rem 0 0;
}

.panel--identity .backpack-tab-icon--items i {
  top: 58%;
  width: 0.48rem;
  height: 0.26rem;
  box-shadow: 0 -0.34rem 0 #f2cb7d;
}

/* Mobile atlas fit: keep the atlas readable on phone screens. */
@media (max-width: 720px) {
  .panel--identity .identity-atlas-page:not(.is-hidden),
  .panel--atlas.is-open {
    --atlas-content-inline: clamp(0.82rem, 4.4vw, 1.12rem);
    --atlas-card-gap: clamp(0.62rem, 2.8vw, 0.86rem);
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
    padding-inline: var(--backpack-page-pad, clamp(0.92rem, 4.8vw, 1.24rem));
  }

  .panel--identity .identity-atlas-page .atlas-book-layout,
  .panel--atlas .atlas-book-layout {
    width: 100%;
    height: 100%;
    min-height: 0;
    margin-top: 0;
  }

  .panel--identity .identity-atlas-page .atlas-pages,
  .panel--atlas .atlas-pages {
    display: grid;
    grid-template-rows: auto auto auto auto;
    gap: var(--atlas-card-gap);
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: clamp(1.1rem, 5vw, 1.6rem);
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .panel--identity .identity-atlas-page .atlas-pages::-webkit-scrollbar,
  .panel--atlas .atlas-pages::-webkit-scrollbar {
    display: none;
  }

  .panel--identity .identity-atlas-page .atlas-summary,
  .panel--atlas .atlas-summary,
  .panel--identity .identity-atlas-page .atlas-card,
  .panel--atlas .atlas-card,
  .panel--identity .identity-atlas-page .atlas-bookmarks,
  .panel--atlas .atlas-bookmarks {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
  }

  .panel--identity .identity-atlas-page .atlas-summary,
  .panel--atlas .atlas-summary {
    gap: clamp(0.48rem, 2vw, 0.66rem);
    padding: clamp(0.72rem, 3.2vw, 0.92rem) var(--atlas-content-inline);
  }

  .panel--identity .identity-atlas-page .atlas-summary p,
  .panel--atlas .atlas-summary p {
    font-size: clamp(0.92rem, 3.7vw, 1.08rem);
    line-height: 1.22;
  }

  .panel--identity .identity-atlas-page .atlas-reward-list,
  .panel--atlas .atlas-reward-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.32rem, 1.8vw, 0.46rem);
  }

  .panel--identity .identity-atlas-page .atlas-reward-chip,
  .panel--atlas .atlas-reward-chip {
    min-height: clamp(2rem, 8vw, 2.36rem);
    padding: 0.3rem 0.24rem;
    font-size: clamp(0.68rem, 2.8vw, 0.8rem);
  }

  .panel--identity .identity-atlas-page .atlas-bookmarks,
  .panel--atlas .atlas-bookmarks {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(4.72rem, 28vw, 5.45rem);
    grid-template-columns: none;
    gap: clamp(0.38rem, 1.8vw, 0.54rem);
    overflow-x: auto;
    overflow-y: visible;
    padding: 0 0 0.12rem;
    scroll-snap-type: x proximity;
  }

  .panel--identity .identity-atlas-page .atlas-bookmarks button,
  .panel--atlas .atlas-bookmarks button {
    grid-template-rows: clamp(2.08rem, 8vw, 2.5rem) auto;
    min-height: clamp(3.82rem, 14vw, 4.42rem);
    padding: 0.34rem 0.22rem;
    scroll-snap-align: start;
  }

  .panel--identity .identity-atlas-page .atlas-bookmarks strong,
  .panel--atlas .atlas-bookmarks strong {
    width: clamp(2.12rem, 8.5vw, 2.58rem);
    height: clamp(2.12rem, 8.5vw, 2.58rem);
  }

  .panel--identity .identity-atlas-page .atlas-bookmarks i,
  .panel--atlas .atlas-bookmarks i {
    width: 100%;
    overflow: hidden;
    font-size: clamp(0.66rem, 2.8vw, 0.78rem);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .panel--identity .identity-atlas-page .atlas-bookmarks span,
  .panel--atlas .atlas-bookmarks span {
    width: min(13rem, calc(100vw - 2rem));
    min-width: min(10rem, calc(100vw - 2rem));
    font-size: clamp(0.78rem, 3vw, 0.9rem);
  }

  .panel--identity .identity-atlas-page .atlas-card,
  .panel--atlas .atlas-card {
    padding: clamp(0.78rem, 3.6vw, 1rem) var(--atlas-content-inline);
    overflow: hidden;
  }

  .panel--identity .identity-atlas-page .atlas-card h2,
  .panel--atlas .atlas-card h2 {
    margin-bottom: clamp(0.52rem, 2.4vw, 0.72rem);
    font-size: clamp(1.08rem, 4.6vw, 1.28rem);
    line-height: 1.12;
  }

  .panel--identity .identity-atlas-page .atlas-list .atlas-storybook,
  .panel--atlas .atlas-list .atlas-storybook {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .panel--identity .identity-atlas-page .atlas-story-page,
  .panel--atlas .atlas-story-page {
    min-width: 0;
    padding: clamp(0.72rem, 3.4vw, 0.96rem);
  }

  .panel--identity .identity-atlas-page .atlas-story-portrait,
  .panel--atlas .atlas-story-portrait {
    min-height: clamp(7.4rem, 33vw, 9.4rem);
  }

  .panel--identity .identity-atlas-page .atlas-story-portrait img,
  .panel--atlas .atlas-story-portrait img {
    width: min(72%, 7.2rem);
    height: min(72%, 7.2rem);
  }

  .panel--identity .identity-atlas-page .locked-grid,
  .panel--atlas .locked-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.48rem, 2.4vw, 0.68rem);
  }

  .panel--identity .identity-atlas-page .locked-grid article,
  .panel--atlas .locked-grid article {
    aspect-ratio: 1;
    padding: clamp(0.42rem, 2.2vw, 0.58rem);
  }

  .panel--identity .identity-atlas-page .locked-grid article > b,
  .panel--atlas .locked-grid article > b {
    width: min(100%, clamp(4.45rem, 28vw, 5.7rem));
  }

  .panel--identity .identity-atlas-page .atlas-page-controls,
  .panel--atlas .atlas-page-controls {
    grid-template-columns: clamp(2.45rem, 11vw, 3rem) minmax(0, 1fr) clamp(2.45rem, 11vw, 3rem);
    gap: clamp(0.36rem, 1.8vw, 0.52rem);
  }

  .panel--identity .identity-atlas-page .atlas-page-controls span,
  .panel--atlas .atlas-page-controls span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 390px) {
  .panel--identity .identity-atlas-page .atlas-bookmarks,
  .panel--atlas .atlas-bookmarks {
    grid-auto-columns: clamp(4.36rem, 30vw, 4.9rem);
  }

  .panel--identity .identity-atlas-page .locked-grid,
  .panel--atlas .locked-grid {
    gap: 0.42rem;
  }

  .panel--identity .identity-atlas-page .atlas-card,
  .panel--atlas .atlas-card {
    padding-inline: clamp(0.68rem, 4vw, 0.86rem);
  }
}

/* Atlas reward bag: keep achievements as a compact tappable reward. */
.atlas-summary {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.atlas-progress-track {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.atlas-progress-track > i {
  position: relative;
  width: 100%;
  height: clamp(1.05rem, 2.3vw, 1.32rem);
  overflow: hidden;
  border: 0.12rem solid rgba(134, 190, 93, 0.82);
  border-radius: 0.42rem;
  background: #fffde8;
}

.atlas-progress-track > i em {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  border-radius: inherit;
  background: #bde878;
}

.atlas-summary > i {
  display: none;
}

.atlas-reward-button {
  position: relative;
  display: grid;
  gap: 0.14rem;
  width: clamp(3.42rem, 9vw, 4.2rem);
  min-width: clamp(3.42rem, 9vw, 4.2rem);
  place-items: center;
  padding: 0.36rem 0.28rem 0.32rem;
  border: 0;
  border-radius: 0.38rem;
  color: #687447;
  background: transparent;
  font-size: clamp(0.68rem, 1.8vw, 0.82rem);
  font-weight: 900;
}

.atlas-reward-button.is-ready {
  color: #4f7b3a;
}

.atlas-reward-button.is-ready::after {
  content: "";
  position: absolute;
  inset: 0.16rem;
  border: 0.12rem solid rgba(168, 207, 134, 0.86);
  border-radius: 0.38rem;
  pointer-events: none;
  animation: atlasRewardReady 1.2s steps(2, end) infinite;
}

.atlas-reward-bag {
  position: relative;
  display: block;
  width: clamp(2.18rem, 6vw, 2.68rem);
  height: clamp(2.18rem, 6vw, 2.68rem);
  image-rendering: pixelated;
}

.atlas-reward-bag::before,
.atlas-reward-bag::after,
.atlas-reward-bag i {
  content: "";
  position: absolute;
  display: block;
  image-rendering: pixelated;
}

.atlas-reward-bag::before {
  left: 50%;
  bottom: 0.22rem;
  width: 1.7rem;
  height: 1.42rem;
  border: 0.12rem solid #789161;
  border-radius: 0.2rem 0.2rem 0.28rem 0.28rem;
  background: #f4d28a;
  transform: translateX(-50%);
}

.atlas-reward-bag::after {
  left: 50%;
  top: 0.28rem;
  width: 1.1rem;
  height: 0.52rem;
  border: 0.12rem solid #789161;
  border-bottom: 0;
  border-radius: 0.36rem 0.36rem 0 0;
  transform: translateX(-50%);
}

.atlas-reward-bag i {
  left: 50%;
  top: 1.22rem;
  width: 0.72rem;
  height: 0.5rem;
  background: #fff1b8;
  box-shadow:
    -0.44rem 0.36rem 0 -0.18rem #8fc66b,
    0.44rem 0.36rem 0 -0.18rem #9fcbd8;
  transform: translateX(-50%);
}

.atlas-reward-popover {
  position: absolute;
  right: clamp(0.74rem, 2.4vw, 1rem);
  top: calc(100% - 0.18rem);
  z-index: 6;
  display: grid;
  gap: 0.42rem;
  width: min(15.5rem, calc(100vw - 3rem));
  padding: 0.68rem;
  border: 0.12rem solid rgba(126, 146, 90, 0.34);
  border-radius: 0.52rem;
  color: #6a5437;
  background: #fff8d8;
}

.atlas-reward-popover.is-hidden {
  display: none;
}

.atlas-reward-popover strong,
.atlas-reward-popover p {
  margin: 0;
}

.atlas-reward-popover strong {
  font-size: 0.95rem;
}

.atlas-reward-popover p {
  color: #756140;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.25;
}

.atlas-reward-popover .atlas-reward-list {
  grid-template-columns: 1fr;
  gap: 0.34rem;
}

@keyframes atlasRewardReady {
  50% {
    border-color: rgba(255, 224, 112, 0.95);
  }
}

@media (max-width: 720px) {
  .panel--identity .identity-atlas-page .atlas-summary,
  .panel--atlas .atlas-summary {
    grid-template-columns: minmax(0, 1fr) clamp(3.2rem, 17vw, 3.72rem);
    gap: clamp(0.52rem, 2.4vw, 0.72rem);
  }

  .panel--identity .identity-atlas-page .atlas-reward-list,
  .panel--atlas .atlas-reward-list {
    grid-template-columns: 1fr;
  }

  .atlas-reward-popover {
    right: 0.6rem;
    width: min(13.2rem, calc(100vw - 2.2rem));
  }
}

/* Backpack items page: windfall collection can scroll, but stays visible. */
.panel--identity[data-active-identity-tab="items"] {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  align-content: start;
  padding-bottom: calc(1.4rem + env(safe-area-inset-bottom));
}

.panel--identity[data-active-identity-tab="items"] .identity-page:not(.is-hidden) {
  max-height: none;
  overflow: visible;
}

.panel--identity[data-active-identity-tab="items"] .specialty-section,
.panel--identity[data-active-identity-tab="items"] .seed-pouch-section {
  display: grid;
  width: var(--backpack-page-width);
  min-height: 0;
  margin-inline: auto;
  box-sizing: border-box;
}

.panel--identity[data-active-identity-tab="items"] .specialty-section {
  order: 1;
  margin-top: clamp(0.72rem, 2.6vw, 1rem);
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-section {
  order: 2;
  margin-top: clamp(1.28rem, 5vw, 1.86rem);
  margin-bottom: clamp(1.2rem, 5vw, 2rem);
}

.panel--identity[data-active-identity-tab="items"] .specialty-shelf,
.panel--identity[data-active-identity-tab="items"] .landform-overview {
  display: grid;
}

@media (max-width: 720px) {
  .panel--identity[data-active-identity-tab="items"] {
    -webkit-overflow-scrolling: touch;
  }
}

/* Backpack spacing unification: passport and items share the same breathing room. */
.panel--identity {
  --backpack-page-pad: clamp(1.28rem, 5vw, 2.05rem);
}

.panel--identity .passport-card {
  --passport-edge-block: clamp(1.52rem, 4vw, 2.42rem);
  --passport-edge-inline: clamp(1.52rem, 4vw, 2.42rem);
  --passport-inner-block: clamp(1.24rem, 3.2vw, 1.9rem);
  --passport-inner-inline: clamp(1.24rem, 3.2vw, 1.9rem);
}

.panel--identity[data-active-identity-tab="items"] .specialty-section,
.panel--identity[data-active-identity-tab="items"] .seed-pouch-section {
  padding-inline: var(--backpack-page-pad);
}

.panel--identity[data-active-identity-tab="items"] .specialty-section {
  padding-top: clamp(0.65rem, 2.5vw, 0.95rem);
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-section {
  padding-top: 0;
}

.panel--identity[data-active-identity-tab="items"] .specialty-section .identity-section-note {
  display: none;
}

.panel--identity[data-active-identity-tab="items"] .landform-overview {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "image"
    "tabs";
  gap: clamp(0.54rem, 2.2vw, 0.78rem);
  padding: clamp(0.68rem, 2.8vw, 0.92rem);
  overflow: hidden;
}

.panel--identity[data-active-identity-tab="items"] .landform-panorama {
  grid-area: image;
  min-height: clamp(8.6rem, 34vw, 13.4rem);
  aspect-ratio: 16 / 9;
}

.panel--identity[data-active-identity-tab="items"] .landform-overview-copy {
  display: none;
}

.panel--identity[data-active-identity-tab="items"] .landform-switcher {
  grid-area: switch;
  position: absolute;
  right: clamp(0.88rem, 3vw, 1.16rem);
  top: clamp(0.88rem, 3vw, 1.16rem);
  z-index: 2;
  grid-template-columns: repeat(2, clamp(1.92rem, 8vw, 2.22rem));
  gap: 0.28rem;
  margin: 0;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-strip {
  grid-area: tabs;
  grid-auto-columns: clamp(4.35rem, 23vw, 5.35rem);
  padding-bottom: 0;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip {
  min-height: clamp(4.8rem, 13vw, 5.8rem);
}

@media (max-width: 720px) {
  .panel--identity {
    --backpack-page-pad: clamp(1.08rem, 6vw, 1.48rem);
  }

  .panel--identity .passport-card {
    --passport-edge-block: clamp(1.12rem, 5.2vw, 1.46rem);
    --passport-edge-inline: clamp(1.12rem, 5.2vw, 1.46rem);
    --passport-inner-block: clamp(0.82rem, 3.8vw, 1.05rem);
    --passport-inner-inline: clamp(0.82rem, 3.8vw, 1.05rem);
  }

  .panel--identity[data-active-identity-tab="items"] .landform-overview {
    grid-template-columns: minmax(0, 1fr);
  }

  .panel--identity[data-active-identity-tab="items"] .landform-panorama {
    min-height: clamp(8.4rem, 40vw, 12rem);
  }

  .panel--identity[data-active-identity-tab="items"] .landform-switcher {
    right: clamp(0.82rem, 4vw, 1rem);
    top: clamp(0.82rem, 4vw, 1rem);
  }
}

/* Mobile atlas clarity: separate tabs from content before polishing decoration. */
@media (max-width: 720px) {
  .panel--identity .identity-atlas-page:not(.is-hidden),
  .panel--atlas.is-open {
    --atlas-side-tabs: clamp(3.72rem, 17vw, 4.48rem);
    --atlas-content-inline: clamp(0.72rem, 3.8vw, 0.94rem);
    padding-inline: var(--backpack-page-pad, clamp(1.08rem, 6vw, 1.48rem));
  }

  .panel--identity .identity-atlas-page .atlas-book-layout,
  .panel--atlas .atlas-book-layout {
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .panel--identity .identity-atlas-page .atlas-pages,
  .panel--atlas .atlas-pages {
    display: grid;
    grid-template-columns: var(--atlas-side-tabs) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, auto) minmax(0, auto);
    grid-template-areas:
      "summary summary"
      "tabs collected"
      "tabs locked";
    gap: clamp(0.62rem, 2.8vw, 0.86rem);
    height: 100%;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: clamp(1.05rem, 5vw, 1.55rem);
  }

  .panel--identity .identity-atlas-page .atlas-summary,
  .panel--atlas .atlas-summary {
    grid-area: summary;
    margin: 0;
  }

  .panel--identity .identity-atlas-page .atlas-bookmarks,
  .panel--atlas .atlas-bookmarks {
    grid-area: tabs;
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: 1fr;
    align-self: start;
    gap: clamp(0.38rem, 1.8vw, 0.52rem);
    width: 100%;
    max-width: var(--atlas-side-tabs);
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .panel--identity .identity-atlas-page .atlas-bookmarks button,
  .panel--atlas .atlas-bookmarks button {
    grid-template-rows: clamp(2rem, 8.5vw, 2.42rem) auto;
    min-height: clamp(3.72rem, 15vw, 4.35rem);
    padding: 0.34rem 0.18rem;
    border-radius: 0.46rem 0 0 0.46rem;
  }

  .panel--identity .identity-atlas-page .atlas-bookmarks strong,
  .panel--atlas .atlas-bookmarks strong {
    width: clamp(2rem, 8.5vw, 2.42rem);
    height: clamp(2rem, 8.5vw, 2.42rem);
  }

  .panel--identity .identity-atlas-page .atlas-bookmarks i,
  .panel--atlas .atlas-bookmarks i {
    max-width: 100%;
    font-size: clamp(0.64rem, 2.9vw, 0.76rem);
    line-height: 1.05;
    white-space: normal;
  }

  .panel--identity .identity-atlas-page .atlas-bookmarks span,
  .panel--atlas .atlas-bookmarks span {
    display: none;
  }

  .panel--identity .identity-atlas-page .atlas-card,
  .panel--atlas .atlas-card {
    min-width: 0;
    margin: 0;
    padding: clamp(0.76rem, 3.5vw, 0.98rem) var(--atlas-content-inline);
  }

  .panel--identity .identity-atlas-page .atlas-card--collected,
  .panel--atlas .atlas-card--collected {
    grid-area: collected;
  }

  .panel--identity .identity-atlas-page .atlas-card--locked,
  .panel--atlas .atlas-card--locked {
    grid-area: locked;
  }

  .panel--identity .identity-atlas-page .atlas-card h2,
  .panel--atlas .atlas-card h2 {
    margin-bottom: clamp(0.5rem, 2vw, 0.68rem);
    font-size: clamp(1rem, 4vw, 1.18rem);
  }

  .panel--identity .identity-atlas-page .locked-grid,
  .panel--atlas .locked-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile layout contract: one structure for every core panel. */
@media (max-width: 720px) {
  :root {
    --mobile-panel-inline: clamp(1.12rem, 6vw, 1.58rem);
    --mobile-panel-gap: clamp(0.72rem, 3vw, 0.98rem);
    --mobile-card-pad: clamp(0.82rem, 3.8vw, 1.08rem);
  }

  .panel,
  .panel--map,
  .panel--discover,
  .panel--expedition,
  .panel--nursery,
  .panel--identity {
    left: var(--mobile-panel-inline);
    right: var(--mobile-panel-inline);
    box-sizing: border-box;
    max-width: none;
    min-width: 0;
  }

  .panel--discover.is-open,
  .panel--expedition.is-open,
  .panel--map.is-open,
  .panel--nursery.is-open {
    display: grid;
    gap: var(--mobile-panel-gap);
    align-content: start;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .panel--identity {
    inset: 0;
    display: none;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: var(--mobile-panel-gap);
    padding:
      clamp(0.86rem, 3.8vw, 1.08rem)
      var(--mobile-panel-inline)
      calc(7.4rem + env(safe-area-inset-bottom));
    overflow: hidden;
  }

  .panel--identity.is-open {
    display: grid;
    align-content: stretch;
  }

  .panel--identity .identity-topbar,
  .panel--identity .identity-tabs,
  .panel--identity .identity-page {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: auto;
    box-sizing: border-box;
  }

  .panel--identity .identity-topbar {
    margin-bottom: 0;
  }

  .panel--identity .identity-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.48rem, 2.4vw, 0.68rem);
    margin: 0;
    padding: 0;
  }

  .panel--identity .identity-tabs button {
    min-width: 0;
    max-width: 100%;
  }

  .panel--identity .identity-page.is-hidden {
    display: none !important;
  }

  .panel--identity .identity-page:not(.is-hidden) {
    min-height: 0;
    max-height: 100%;
    overflow-x: hidden;
  }

  .panel--identity .identity-hero.passport-card {
    height: auto;
    min-height: 0;
    max-height: 100%;
    margin: 0;
    padding:
      calc(var(--passport-edge-block, 1rem) + 0.32rem)
      calc(var(--passport-edge-inline, 1rem) + 0.32rem);
    overflow-y: auto;
  }

  .panel--identity .identity-atlas-page:not(.is-hidden) {
    padding: 0;
    overflow: hidden;
  }

  .panel--identity .identity-atlas-page .atlas-book-layout,
  .panel--identity .identity-atlas-page .atlas-pages {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
  }

  .panel--identity .identity-atlas-page .atlas-pages {
    grid-template-columns: clamp(3.72rem, 17vw, 4.48rem) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, auto) minmax(0, auto);
    grid-template-areas:
      "summary summary"
      "tabs collected"
      "tabs locked";
    gap: var(--mobile-panel-gap);
    overflow-y: auto;
    overflow-x: hidden;
  }

  .panel--identity .identity-atlas-page .atlas-summary {
    grid-area: summary;
  }

  .panel--identity .identity-atlas-page .atlas-bookmarks {
    grid-area: tabs;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-auto-columns: unset;
    align-self: start;
    overflow: visible;
  }

  .panel--identity .identity-atlas-page .atlas-bookmarks span {
    display: none;
  }

  .panel--identity .identity-atlas-page .atlas-card--collected {
    grid-area: collected;
  }

  .panel--identity .identity-atlas-page .atlas-card--locked {
    grid-area: locked;
  }

  .panel--identity .identity-atlas-page .atlas-card,
  .panel--identity .identity-atlas-page .atlas-summary,
  .panel--identity .identity-atlas-page .atlas-bookmarks {
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  .panel--identity[data-active-identity-tab="items"] {
    overflow-y: auto;
  }

  .panel--identity[data-active-identity-tab="items"] .specialty-section,
  .panel--identity[data-active-identity-tab="items"] .seed-pouch-section {
    width: 100%;
    max-width: 100%;
    padding-inline: 0;
  }

  .panel--identity[data-active-identity-tab="items"] .specialty-section {
    order: 1;
  }

  .panel--identity[data-active-identity-tab="items"] .seed-pouch-section {
    order: 2;
    margin-top: clamp(1.15rem, 5vw, 1.65rem);
  }

  .panel--discover .ar-card,
  .panel--discover .scan-actions,
  .panel--discover .scan-records,
  .panel--expedition .adventure-scene,
  .panel--expedition .adventure-content,
  .panel--map .radar,
  .panel--map .map-actions,
  .panel--map .map-results {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: auto;
    box-sizing: border-box;
  }
}

/* Core mobile repair v2: stop legacy page patches from moving the layout. */
@media (max-width: 720px) {
  body {
    overflow-x: hidden;
  }

  .panel--identity,
  .panel--discover,
  .panel--expedition,
  .panel--map,
  .panel--nursery {
    --repair-inline: clamp(1.12rem, 5.8vw, 1.58rem);
    --repair-gap: clamp(0.68rem, 2.8vw, 0.92rem);
    box-sizing: border-box !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .panel--discover,
  .panel--expedition,
  .panel--map,
  .panel--nursery {
    left: var(--repair-inline) !important;
    right: var(--repair-inline) !important;
    width: auto !important;
    max-width: none !important;
  }

  .panel--identity {
    inset: 0 !important;
    width: auto !important;
    height: 100svh !important;
    max-height: 100svh !important;
    padding: 0 var(--repair-inline) calc(7.2rem + env(safe-area-inset-bottom)) !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    gap: var(--repair-gap) !important;
    align-content: stretch !important;
    background: #fbf4df;
  }

  .panel--identity.is-open {
    display: grid !important;
  }

  .panel--identity .identity-topbar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: clamp(0.82rem, 3.6vw, 1.08rem) 0 0 !important;
    gap: clamp(0.54rem, 2.2vw, 0.72rem) !important;
  }

  .panel--identity .identity-topbar h2 {
    min-width: 0;
    overflow: hidden;
    font-size: clamp(1.18rem, 5vw, 1.48rem) !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .panel--identity .identity-back,
  .panel--identity .identity-tools button {
    width: clamp(2.36rem, 10.5vw, 2.78rem) !important;
    min-width: clamp(2.36rem, 10.5vw, 2.78rem) !important;
    height: clamp(2.36rem, 10.5vw, 2.78rem) !important;
  }

  .panel--identity .identity-tabs {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(0.5rem, 2.5vw, 0.68rem) !important;
  }

  .panel--identity .identity-tabs button {
    min-width: 0 !important;
    min-height: clamp(4.25rem, 17vw, 5rem) !important;
    padding: clamp(0.34rem, 1.8vw, 0.46rem) clamp(0.18rem, 1vw, 0.28rem) !important;
    overflow: hidden !important;
  }

  .panel--identity .backpack-tab-icon {
    width: clamp(2.35rem, 10vw, 2.86rem) !important;
    height: clamp(2.35rem, 10vw, 2.86rem) !important;
  }

  .panel--identity .identity-tabs button b {
    max-width: 100%;
    overflow: hidden;
    font-size: clamp(0.76rem, 3vw, 0.88rem) !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .panel--identity .identity-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .panel--identity .identity-page.is-hidden {
    display: none !important;
  }

  .panel--identity .identity-page:not(.is-hidden) {
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .panel--identity .identity-hero.passport-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    gap: clamp(0.72rem, 3vw, 0.95rem) !important;
    height: auto !important;
    min-height: 0 !important;
    padding: clamp(1.08rem, 5vw, 1.38rem) !important;
    border-radius: 0.72rem !important;
  }

  .panel--identity .identity-portrait {
    width: 100% !important;
    min-height: clamp(11.5rem, 44vw, 14.5rem) !important;
    max-height: clamp(13rem, 48vw, 16rem) !important;
  }

  .panel--identity .identity-portrait > img {
    width: min(60%, 9.2rem) !important;
    height: min(60%, 9.2rem) !important;
  }

  .panel--identity .passport-stamp {
    right: clamp(0.58rem, 2.5vw, 0.82rem) !important;
    bottom: clamp(-0.62rem, -1.5vw, -0.42rem) !important;
    width: clamp(6.3rem, 27vw, 7.8rem) !important;
  }

  .panel--identity .identity-profile {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    gap: clamp(0.5rem, 2vw, 0.68rem) !important;
  }

  .panel--identity .identity-name-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.38rem !important;
    align-items: center !important;
  }

  .panel--identity .identity-name-row h3 {
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: clamp(1.3rem, 5.6vw, 1.62rem) !important;
  }

  .panel--identity .identity-signature {
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding: 0.5rem 0 !important;
  }

  .panel--identity .identity-profile ul {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.32rem !important;
    margin-top: 0.48rem !important;
  }

  .panel--identity .identity-profile li {
    grid-template-columns: clamp(2.4rem, 13vw, 3.2rem) minmax(0, 1fr) !important;
    gap: 0.48rem !important;
    min-height: 1.72rem !important;
    font-size: clamp(0.86rem, 3.4vw, 0.98rem) !important;
  }

  .panel--identity .identity-profile li b {
    color: #7a5e35;
  }

  .panel--identity .identity-profile li em {
    color: #5f5137;
    text-align: right;
  }

  .panel--identity .identity-atlas-page:not(.is-hidden) {
    padding: 0 !important;
    overflow: hidden !important;
  }

  .panel--identity .identity-atlas-page .atlas-book-layout,
  .panel--identity .identity-atlas-page .atlas-pages {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  .panel--identity .identity-atlas-page .atlas-pages {
    display: grid !important;
    grid-template-columns: clamp(3.55rem, 16.5vw, 4.15rem) minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, auto) minmax(0, auto) !important;
    grid-template-areas:
      "summary summary"
      "tabs collected"
      "tabs locked" !important;
    gap: clamp(0.58rem, 2.6vw, 0.82rem) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .panel--identity .identity-atlas-page .atlas-summary {
    grid-area: summary !important;
    grid-template-columns: minmax(0, 1fr) clamp(3rem, 13vw, 3.55rem) !important;
    padding: clamp(0.62rem, 2.8vw, 0.82rem) !important;
  }

  .panel--identity .identity-atlas-page .atlas-bookmarks {
    grid-area: tabs !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    grid-auto-columns: unset !important;
    align-self: start !important;
    gap: clamp(0.32rem, 1.6vw, 0.46rem) !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .panel--identity .identity-atlas-page .atlas-bookmarks button {
    min-height: clamp(3.45rem, 14.6vw, 4.05rem) !important;
    padding: 0.28rem 0.12rem !important;
    border-radius: 0.42rem 0 0 0.42rem !important;
  }

  .panel--identity .identity-atlas-page .atlas-bookmarks strong {
    width: clamp(1.95rem, 8vw, 2.32rem) !important;
    height: clamp(1.95rem, 8vw, 2.32rem) !important;
  }

  .panel--identity .identity-atlas-page .atlas-bookmarks i {
    font-size: clamp(0.62rem, 2.8vw, 0.74rem) !important;
    white-space: normal !important;
  }

  .panel--identity .identity-atlas-page .atlas-bookmarks span {
    display: none !important;
  }

  .panel--identity .identity-atlas-page .atlas-card--collected {
    grid-area: collected !important;
  }

  .panel--identity .identity-atlas-page .atlas-card--locked {
    grid-area: locked !important;
  }

  .panel--identity .identity-atlas-page .atlas-card {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: clamp(0.66rem, 3vw, 0.88rem) !important;
    overflow: hidden !important;
  }

  .panel--identity .identity-atlas-page .atlas-card h2 {
    margin-bottom: 0.5rem !important;
    font-size: clamp(0.96rem, 3.8vw, 1.12rem) !important;
  }

  .panel--identity .identity-atlas-page .locked-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(0.42rem, 2vw, 0.58rem) !important;
  }

  .panel--identity[data-active-identity-tab="items"] {
    overflow-y: auto !important;
  }

  .panel--identity[data-active-identity-tab="items"] .specialty-section,
  .panel--identity[data-active-identity-tab="items"] .seed-pouch-section {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
  }

  .panel--identity[data-active-identity-tab="items"] .specialty-section {
    order: 1 !important;
    margin-top: 0 !important;
  }

  .panel--identity[data-active-identity-tab="items"] .seed-pouch-section {
    order: 2 !important;
    margin-top: clamp(1.12rem, 5vw, 1.6rem) !important;
  }

  .panel--identity[data-active-identity-tab="items"] .landform-overview,
  .panel--identity[data-active-identity-tab="items"] .specialty-shelf,
  .panel--identity[data-active-identity-tab="items"] .seed-pouch-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .panel--identity[data-active-identity-tab="items"] .landform-overview {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .seed-pouch-card {
    grid-template-columns: clamp(3rem, 14vw, 3.65rem) minmax(0, 1fr) auto !important;
    gap: clamp(0.54rem, 2.4vw, 0.72rem) !important;
    padding: clamp(0.66rem, 3vw, 0.9rem) !important;
  }

  .seed-pouch-card > span,
  .seed-pouch-card img {
    width: clamp(2.8rem, 12vw, 3.25rem) !important;
    height: clamp(2.8rem, 12vw, 3.25rem) !important;
  }

  .panel--discover .panel-header,
  .panel--map .panel-header,
  .panel--expedition .panel-header {
    padding-inline: var(--repair-gap) !important;
  }

  .panel--discover .ar-card,
  .panel--discover .scan-actions,
  .panel--discover .scan-records,
  .panel--expedition .adventure-scene,
  .panel--expedition .adventure-content,
  .panel--map .radar,
  .panel--map .map-actions,
  .panel--map .map-results,
  .panel--nursery .nursery-drop,
  .panel--nursery .nursery-result {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }

  .panel--expedition .adventure-scene {
    aspect-ratio: 518 / 346 !important;
    max-height: 28svh !important;
  }

  .panel--expedition .adventure-content {
    padding: var(--repair-gap) !important;
  }

  .panel--expedition .quest-list {
    grid-template-columns: 1fr !important;
  }

  .scan-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Scan page hard repair: stable phone layout and icon layer order. */
@media (max-width: 720px) {
  .panel--discover {
    top: clamp(4.2rem, 9vh, 5.8rem) !important;
    bottom: calc(5.9rem + env(safe-area-inset-bottom)) !important;
    padding: clamp(0.88rem, 4vw, 1.12rem) !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
    align-content: start !important;
    background: #f7edc6 !important;
  }

  .panel--discover .close-panel {
    right: clamp(0.56rem, 3vw, 0.76rem) !important;
    top: clamp(0.56rem, 3vw, 0.76rem) !important;
    z-index: 5 !important;
  }

  .panel--discover .panel-header {
    display: grid !important;
    gap: 0.28rem !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 clamp(2.7rem, 12vw, 3.2rem) 0 0 !important;
    text-align: left !important;
  }

  .panel--discover .panel-header h2 {
    margin: 0 !important;
    color: #6a5437 !important;
    font-size: clamp(1.18rem, 5vw, 1.5rem) !important;
    line-height: 1.12 !important;
  }

  .panel--discover .panel-header p {
    margin: 0 !important;
    color: #7c6a48 !important;
    font-size: clamp(0.82rem, 3.3vw, 0.94rem) !important;
    line-height: 1.35 !important;
  }

  .panel--discover .ar-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: clamp(0.54rem, 2.5vw, 0.72rem) !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .panel--discover .ar-view {
    width: 100% !important;
    min-height: clamp(11rem, 38vh, 16rem) !important;
    max-height: 42vh !important;
    border-radius: 0.62rem !important;
    border: 0.12rem solid rgba(115, 91, 55, 0.28) !important;
    background: #bfe49a !important;
  }

  .panel--discover .scan-copy {
    display: grid !important;
    min-height: 1.6rem !important;
    place-items: center !important;
  }

  .panel--discover .scan-copy small {
    width: 100% !important;
    padding: 0 !important;
    color: #756140 !important;
    background: transparent !important;
    font-size: clamp(0.78rem, 3vw, 0.88rem) !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

  .panel--discover .scan-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(0.62rem, 3vw, 0.86rem) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .panel--discover .scan-button,
  .panel--discover .upload-photo-button {
    display: grid !important;
    grid-template-rows: clamp(1.82rem, 8vw, 2.18rem) auto !important;
    gap: 0.24rem !important;
    min-width: 0 !important;
    min-height: clamp(4.4rem, 18vw, 5.2rem) !important;
    padding: clamp(0.48rem, 2.5vw, 0.66rem) 0.34rem !important;
    place-items: center !important;
    border-radius: 0.46rem !important;
    overflow: hidden !important;
    text-align: center !important;
  }

  .panel--discover .scan-button::before {
    position: static !important;
    display: block !important;
    width: clamp(1.66rem, 7vw, 2rem) !important;
    height: clamp(1.36rem, 5.8vw, 1.66rem) !important;
    margin: 0 !important;
    transform: none !important;
  }

  .panel--discover .scan-button::after {
    position: static !important;
    display: block !important;
    max-width: 100% !important;
    color: inherit !important;
    font-size: clamp(0.76rem, 3vw, 0.88rem) !important;
    line-height: 1.1 !important;
    transform: none !important;
  }

  .panel--discover .upload-photo-button .pixel-album-icon {
    position: relative !important;
    display: block !important;
    grid-row: 1 !important;
    width: clamp(1.9rem, 8vw, 2.26rem) !important;
    height: clamp(1.9rem, 8vw, 2.26rem) !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    contain: layout paint !important;
    isolation: isolate !important;
  }

  .panel--discover .upload-photo-button .pixel-album-icon::before,
  .panel--discover .upload-photo-button .pixel-album-icon::after,
  .panel--discover .upload-photo-button .pixel-album-icon i {
    position: absolute !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  .panel--discover .upload-photo-button .scan-action-label {
    grid-row: 2 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    color: #65481e !important;
    font-size: clamp(0.76rem, 3vw, 0.88rem) !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .panel--discover .scan-records {
    display: grid !important;
    gap: clamp(0.45rem, 2vw, 0.62rem) !important;
    min-height: 0 !important;
    padding: clamp(0.66rem, 3vw, 0.86rem) !important;
    overflow: auto !important;
    border-radius: 0.52rem !important;
  }

  .panel--discover .scan-records h3 {
    margin: 0 !important;
    color: #6a5437 !important;
    font-size: clamp(0.96rem, 3.8vw, 1.12rem) !important;
  }
}

/* Restore pass: make backpack pages readable on phones without adding extra visual noise. */
.panel--identity .identity-certified-mark {
  display: none !important;
}

.panel--identity .identity-name-row h3 {
  cursor: text;
}

.panel--identity .identity-inline-input {
  width: min(100%, 14rem);
  min-height: 2.5rem;
  padding: 0.2rem 0;
  border: 0;
  border-bottom: 0.12rem solid rgba(113, 151, 85, 0.6);
  background: transparent;
  color: #4c3a21;
  font: inherit;
  font-size: clamp(1.5rem, 5.1vw, 2rem);
  font-weight: 950;
  outline: none;
}

.panel--identity .identity-inline-input--bio {
  width: 100%;
  min-height: 2rem;
  color: #6a6044;
  font-size: clamp(0.84rem, 3vw, 0.96rem);
  font-weight: 850;
}

.panel--identity .identity-signature p {
  cursor: text;
}

.panel--identity .identity-profile li b,
.panel--identity .identity-profile li em,
.panel--identity .identity-signature p {
  font-size: clamp(0.78rem, 3vw, 0.92rem) !important;
  line-height: 1.35 !important;
}

.panel--identity .identity-profile li b {
  color: #8a744d !important;
}

.panel--identity .identity-profile li em {
  color: #5f5137 !important;
}

.panel--identity .passport-id-strip,
.panel--identity .identity-profile ul {
  font-size: clamp(0.72rem, 2.6vw, 0.84rem);
}

.panel--identity[data-active-identity-tab="items"] .identity-section h3 {
  display: flex;
  gap: 0.54rem;
  align-items: center;
  margin: 0 0 clamp(0.58rem, 2.4vw, 0.78rem);
  color: #5f5137;
  font-size: clamp(1.06rem, 4.2vw, 1.26rem);
  line-height: 1.1;
}

.panel--identity[data-active-identity-tab="items"] .specialty-section,
.panel--identity[data-active-identity-tab="items"] .seed-pouch-section {
  padding-block: clamp(0.72rem, 3vw, 1rem);
  border-top: 0.12rem dashed rgba(181, 158, 104, 0.5);
}

.panel--identity[data-active-identity-tab="items"] .specialty-section {
  border-top: 0;
}

.specialty-card {
  grid-template-columns: clamp(3.4rem, 13vw, 4.1rem) clamp(2.38rem, 9vw, 2.8rem) minmax(0, 1fr) auto;
  gap: clamp(0.42rem, 1.8vw, 0.62rem);
}

.specialty-card > div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.specialty-card small {
  min-width: 0;
  overflow: hidden;
  color: #8a744d;
  font-size: clamp(0.66rem, 2.4vw, 0.76rem);
  font-weight: 850;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.specialty-card .specialty-place {
  color: #5f7f58;
  font-size: clamp(0.72rem, 2.7vw, 0.82rem);
  line-height: 1.18;
}

.specialty-scene {
  position: relative;
  display: block;
  width: clamp(3.4rem, 13vw, 4.1rem);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 0.1rem solid rgba(142, 163, 101, 0.52);
  border-radius: 0.34rem;
  background: #dcedbd;
  image-rendering: pixelated;
}

.specialty-scene::before,
.specialty-scene::after,
.specialty-scene i {
  content: "";
  position: absolute;
  display: block;
}

.specialty-scene::before {
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  background: #9fcd75;
}

.specialty-scene::after {
  left: 12%;
  bottom: 28%;
  width: 22%;
  height: 32%;
  background: #6f9660;
}

.specialty-scene i {
  left: 52%;
  bottom: 26%;
  width: 34%;
  height: 22%;
  background: #fff6d4;
}

.specialty-scene--jiangnan {
  background: #cdece7;
}

.specialty-scene--jiangnan::before {
  background: #8cc3ca;
}

.specialty-scene--mountain {
  background: #dcefc0;
}

.specialty-scene--mountain i {
  width: 40%;
  height: 18%;
  background: #6f9660;
}

.specialty-scene--northwest {
  background: #fff1be;
}

.specialty-scene--northwest::before {
  background: #d6b85a;
}

.specialty-scene--coast {
  background: #d6f4ee;
}

.specialty-scene--coast::before {
  background: #8cc3ca;
}

.specialty-scene--plateau {
  background: #ece4f2;
}

.specialty-scene--plateau::before {
  background: #b9d68b;
}

.specialty-scene.is-locked {
  opacity: 0.58;
}

@media (max-width: 720px) {
  .panel--identity {
    --repair-inline: clamp(1.35rem, 7.2vw, 1.82rem) !important;
  }

  .panel--identity .identity-hero.passport-card {
    gap: clamp(0.9rem, 3.8vw, 1.15rem) !important;
    padding: clamp(1.12rem, 5.2vw, 1.48rem) !important;
  }

  .panel--identity .identity-profile {
    gap: clamp(0.52rem, 2.4vw, 0.72rem) !important;
  }

  .panel--identity .identity-name-row {
    flex-wrap: nowrap !important;
  }

  .panel--identity .identity-name-row h3 {
    max-width: none !important;
    font-size: clamp(1.42rem, 6vw, 1.82rem) !important;
  }

  .panel--identity .identity-name-row #editIdentityName {
    width: clamp(1.82rem, 7.4vw, 2.08rem) !important;
    min-width: clamp(1.82rem, 7.4vw, 2.08rem) !important;
    height: clamp(1.82rem, 7.4vw, 2.08rem) !important;
    min-height: clamp(1.82rem, 7.4vw, 2.08rem) !important;
  }

  .panel--identity .identity-signature {
    padding: 0.28rem 0 !important;
  }

  .panel--identity .identity-profile ul {
    gap: 0.24rem !important;
    margin-top: 0.24rem !important;
  }

  .panel--identity .identity-profile li {
    grid-template-columns: clamp(2.1rem, 11vw, 2.7rem) minmax(0, 1fr) !important;
    min-height: 1.38rem !important;
  }

  .panel--identity .identity-atlas-page .atlas-pages {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
    grid-template-areas:
      "summary"
      "tabs"
      "collected"
      "locked" !important;
    gap: clamp(0.62rem, 3vw, 0.84rem) !important;
    overflow-y: auto !important;
    padding-bottom: clamp(1rem, 5vw, 1.4rem) !important;
  }

  .panel--identity .identity-atlas-page .atlas-bookmarks {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: clamp(4.2rem, 23vw, 5.15rem) !important;
    grid-template-columns: none !important;
    gap: clamp(0.38rem, 2vw, 0.56rem) !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 0.12rem !important;
    scroll-snap-type: x proximity;
  }

  .panel--identity .identity-atlas-page .atlas-bookmarks button {
    min-height: clamp(3.5rem, 15vw, 4.15rem) !important;
    border-radius: 0.46rem !important;
    scroll-snap-align: start;
  }

  .panel--identity .identity-atlas-page .atlas-bookmarks i {
    display: block !important;
    font-size: clamp(0.66rem, 2.9vw, 0.78rem) !important;
  }

  .panel--identity .identity-atlas-page .atlas-summary {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .panel--identity .identity-atlas-page .atlas-list .atlas-storybook {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.42rem !important;
  }

  .panel--identity .identity-atlas-page .atlas-story-page {
    border-radius: 0.5rem !important;
    border: 0.1rem solid #bda772 !important;
    padding: clamp(0.72rem, 3.3vw, 0.92rem) !important;
  }

  .panel--identity .identity-atlas-page .atlas-story-page--notes {
    border-left: 0.1rem solid #bda772 !important;
  }

  .panel--identity .identity-atlas-page .atlas-story-page--notes::before {
    display: none !important;
  }

  .panel--identity .identity-atlas-page .atlas-storybook h3 {
    font-size: clamp(1.02rem, 4.5vw, 1.26rem) !important;
  }

  .panel--identity .identity-atlas-page .atlas-storybook blockquote,
  .panel--identity .identity-atlas-page .atlas-storybook p:not(.atlas-story-kicker),
  .panel--identity .identity-atlas-page .atlas-storybook dd,
  .panel--identity .identity-atlas-page .atlas-storybook dt {
    font-size: clamp(0.72rem, 3vw, 0.86rem) !important;
  }

  .panel--identity .identity-atlas-page .locked-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .panel--identity[data-active-identity-tab="items"] .specialty-section,
  .panel--identity[data-active-identity-tab="items"] .seed-pouch-section {
    padding-inline: 0 !important;
  }

  .specialty-card {
    grid-template-columns: clamp(3.2rem, 15vw, 3.8rem) clamp(2.18rem, 10vw, 2.58rem) minmax(0, 1fr);
  }

  .specialty-card .rarity-pips {
    grid-column: 2 / -1;
    justify-content: start;
  }

  .seed-pouch-card {
    grid-template-columns: clamp(3rem, 14vw, 3.5rem) minmax(0, 1fr) !important;
  }

  .seed-pouch-card button {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
}

/* Map and expedition spacing pass: one content width, one rhythm. */
.panel--map,
.panel--expedition {
  --game-panel-inline: clamp(1.12rem, 5.2vw, 1.72rem);
  --game-panel-block: clamp(0.86rem, 3.6vw, 1.2rem);
}

.panel--map {
  --map-content-width: min(100%, 24rem);
}

.panel--map .panel-header,
.panel--map .radar,
.panel--map .map-actions,
.panel--map .map-results {
  width: var(--map-content-width) !important;
  max-width: var(--map-content-width) !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

.panel--map .panel-header {
  padding-inline: 0 !important;
}

.panel--map .panel-header h2,
.panel--map .map-status {
  max-width: 100%;
}

.panel--map .radar {
  margin-bottom: clamp(0.62rem, 2.6vw, 0.86rem) !important;
}

.panel--map .map-actions {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(0.46rem, 2vw, 0.62rem);
  margin-top: 0;
}

.panel--map .map-actions .primary,
.panel--map .map-actions .secondary {
  width: 100%;
  min-width: 0;
  min-height: clamp(2.72rem, 11vw, 3.12rem);
}

.panel--map .map-actions .secondary {
  background: #fffaf0;
}

.panel--map .map-results {
  min-height: clamp(4.3rem, 18vw, 5.5rem);
  margin-top: clamp(0.62rem, 2.6vw, 0.86rem);
}

.panel--map .map-results p {
  min-height: clamp(4.3rem, 18vw, 5.5rem);
  padding: clamp(0.82rem, 3.5vw, 1.05rem);
  place-items: center;
  text-align: center;
  line-height: 1.45;
}

.panel--expedition .panel-header,
.panel--expedition .adventure-scene,
.panel--expedition .adventure-content {
  width: 100%;
  box-sizing: border-box;
}

.panel--expedition .adventure-content {
  gap: clamp(0.62rem, 2.6vw, 0.86rem);
  padding: var(--game-panel-block) var(--game-panel-inline) calc(var(--game-panel-block) + env(safe-area-inset-bottom));
}

.panel--expedition .adventure-status {
  order: 1;
}

.panel--expedition .adventure-energy {
  order: 2;
}

.panel--expedition .together-card {
  order: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.5rem, 2.2vw, 0.72rem);
  padding: clamp(0.54rem, 2.2vw, 0.72rem) clamp(0.58rem, 2.5vw, 0.78rem);
}

.expedition-planning {
  order: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(0.58rem, 2.4vw, 0.78rem);
  min-width: 0;
  padding: clamp(0.68rem, 2.8vw, 0.9rem);
  border: 0.1rem solid rgba(108, 127, 80, 0.26);
  border-radius: 0.78rem;
  background: rgba(255, 252, 241, 0.72);
}

.panel--expedition .together-card > span {
  display: none;
}

.panel--expedition .together-card b {
  min-width: 0;
  color: #6b7652;
  font-size: clamp(0.78rem, 3vw, 0.94rem);
  line-height: 1.25;
}

.panel--expedition .together-card button {
  justify-self: end;
  min-width: clamp(5.9rem, 25vw, 7.3rem);
}

.expedition-planning .expedition-squad {
  display: grid;
  gap: clamp(0.5rem, 2vw, 0.66rem);
  min-width: 0;
}

.expedition-squad header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 0.7rem;
  min-width: 0;
}

.expedition-squad h3,
.expedition-squad p {
  margin: 0;
}

.expedition-squad h3 {
  color: #5f7455;
  font-size: clamp(1rem, 3.8vw, 1.18rem);
  line-height: 1.05;
}

.expedition-squad p {
  color: #8a775c;
  font-size: clamp(0.7rem, 2.6vw, 0.82rem);
  font-weight: 850;
  line-height: 1.25;
  text-align: right;
}

.squad-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, clamp(4.35rem, 21vw, 5.28rem)));
  justify-content: center;
  gap: clamp(0.56rem, 2.8vw, 0.82rem);
  min-width: 0;
  overflow: visible;
  padding: 0.08rem 0;
}

.squad-slots::-webkit-scrollbar {
  display: none;
}

.squad-slot {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
  width: clamp(4.35rem, 21vw, 5.28rem);
  height: clamp(4.35rem, 21vw, 5.28rem);
  min-height: 0;
  padding: 0.44rem;
  place-items: center;
  border: 0.1rem solid rgba(108, 127, 80, 0.28);
  border-radius: 50%;
  background: #fffaf0;
  color: #5f7455;
  font-weight: 900;
}

.squad-slot img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  image-rendering: pixelated;
}

.squad-slot span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.squad-slot.is-empty {
  color: #9a8c70;
  background: rgba(255, 248, 221, 0.58);
}

.squad-slot.is-empty b {
  font-size: clamp(1.4rem, 6vw, 1.72rem);
  line-height: 1;
}

.squad-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.46rem, 2vw, 0.62rem);
  margin-top: clamp(0.1rem, 1vw, 0.26rem);
  padding: clamp(0.58rem, 2.6vw, 0.76rem);
  border: 0.1rem solid rgba(108, 127, 80, 0.22);
  border-radius: 0.82rem;
  background: #fff9e8;
}

.squad-picker.is-hidden {
  display: none;
}

.squad-picker p {
  grid-column: 1 / -1;
  margin: 0;
  color: #857258;
  font-size: clamp(0.72rem, 2.8vw, 0.84rem);
  font-weight: 850;
  text-align: center;
}

.squad-picker-option {
  display: grid;
  grid-template-columns: clamp(2.1rem, 9vw, 2.7rem) minmax(0, 1fr);
  align-items: center;
  gap: 0.42rem;
  min-width: 0;
  padding: 0.42rem 0.5rem;
  border: 0.1rem solid rgba(108, 127, 80, 0.18);
  border-radius: 0.7rem;
  background: #fffdf4;
  color: #625f48;
  font-weight: 900;
  text-align: left;
}

.squad-picker-option.is-selected {
  border-color: rgba(128, 165, 92, 0.5);
  background: #f1f7d6;
  color: #58704c;
}

.squad-picker-option img {
  width: clamp(2.1rem, 9vw, 2.7rem);
  height: clamp(2.1rem, 9vw, 2.7rem);
  object-fit: contain;
  image-rendering: pixelated;
}

.squad-picker-option span {
  min-width: 0;
  overflow: hidden;
  font-size: clamp(0.7rem, 2.8vw, 0.84rem);
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expedition-planning .duration-picker {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.36rem, 1.6vw, 0.52rem);
}

.expedition-planning .duration-picker button {
  min-height: clamp(2.42rem, 10vw, 2.82rem);
  padding-inline: 0.2rem;
}

.panel--expedition .quest-section {
  order: 99;
  margin-top: clamp(0.3rem, 1.4vw, 0.46rem);
}

.panel--expedition .map-pack-picker {
  order: 3;
}

.panel--expedition .expedition-loot {
  order: 6;
}

.panel--expedition .quest-section {
  padding: clamp(0.74rem, 3vw, 0.96rem);
  border-color: rgba(120, 154, 95, 0.22);
  background: #eef5dc;
}

.panel--expedition .quest-heading {
  align-items: center;
  gap: clamp(0.5rem, 2.2vw, 0.7rem);
}

.panel--expedition .quest-heading .daily-pixel-icon {
  width: clamp(2.18rem, 8.8vw, 2.46rem);
  height: clamp(2.18rem, 8.8vw, 2.46rem);
  flex-basis: clamp(2.18rem, 8.8vw, 2.46rem);
  border-color: rgba(94, 126, 82, 0.32);
  background: #fff7d7;
}

.panel--expedition .quest-list {
  gap: clamp(0.48rem, 2vw, 0.62rem);
}

.panel--expedition .quest-card {
  grid-template-columns: clamp(2.48rem, 10vw, 2.78rem) minmax(0, 1fr) clamp(1.78rem, 7vw, 2rem) clamp(1.62rem, 6.4vw, 1.82rem);
  gap: clamp(0.42rem, 1.8vw, 0.56rem);
  min-height: clamp(3.72rem, 15vw, 4.15rem);
  padding: clamp(0.46rem, 2vw, 0.58rem) clamp(0.5rem, 2.4vw, 0.68rem);
  border: 0.1rem solid rgba(120, 154, 95, 0.14);
  border-radius: 0.66rem;
  background: #fffaf0;
}

.panel--expedition .quest-card > b {
  width: clamp(2.48rem, 10vw, 2.78rem);
  height: clamp(2.48rem, 10vw, 2.78rem);
  min-width: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.panel--expedition .quest-card > b .daily-pixel-icon {
  width: clamp(2.22rem, 8.8vw, 2.48rem);
  height: clamp(2.22rem, 8.8vw, 2.48rem);
  flex-basis: clamp(2.22rem, 8.8vw, 2.48rem);
  margin: 0;
  border-color: rgba(94, 126, 82, 0.26);
  background: #fff6d4;
  transform: none;
}

.panel--expedition .quest-card > b .daily-pixel-icon i {
  left: 50%;
  top: 50%;
}

.panel--expedition .quest-card div {
  gap: 0.16rem;
  min-width: 0;
}

.panel--expedition .quest-card small {
  color: #778460;
  font-size: clamp(0.58rem, 2.35vw, 0.68rem);
  line-height: 1.05;
}

.panel--expedition .quest-card strong {
  color: #5d6046;
  font-size: clamp(0.75rem, 3vw, 0.9rem);
  line-height: 1.18;
}

.panel--expedition .quest-card span {
  color: #8a775c;
  font-size: clamp(0.62rem, 2.45vw, 0.72rem);
  line-height: 1.05;
}

.panel--expedition .quest-card mark {
  width: clamp(1.72rem, 6.8vw, 1.94rem);
  height: clamp(1.72rem, 6.8vw, 1.94rem);
  border-radius: 50%;
  background: #f8edbb;
}

.panel--expedition .quest-card mark img {
  width: 76%;
  height: 76%;
}

.panel--expedition .quest-card button {
  min-width: clamp(1.56rem, 6vw, 1.76rem);
  min-height: clamp(1.56rem, 6vw, 1.76rem);
  padding: 0;
  border-radius: 50%;
  color: #5f7455;
  background: #dceeb3;
  font-size: clamp(0.74rem, 2.9vw, 0.86rem);
}

.panel--expedition .quest-card button.is-ready {
  color: #4f7a47;
  background: #f5e99f;
}

.panel--expedition .quest-card button.is-claimed,
.panel--expedition .quest-card button.is-claimed:disabled {
  color: #fffdf0;
  background: #86b96f;
  opacity: 1;
}

.panel--expedition .map-pack-picker {
  gap: clamp(0.58rem, 2.6vw, 0.78rem);
  margin-block: clamp(0.18rem, 1.2vw, 0.34rem) clamp(0.22rem, 1.6vw, 0.42rem);
}

.panel--expedition .map-pack-picker.is-expanded {
  gap: clamp(0.68rem, 3vw, 0.9rem);
}

.panel--expedition .map-pack-option {
  margin-top: 0.08rem;
}

.panel--expedition .squad-picker {
  margin-block: clamp(0.52rem, 2.5vw, 0.78rem) clamp(0.66rem, 3vw, 0.94rem);
}

.panel--expedition .squad-picker:not(.is-hidden) + .duration-picker {
  margin-top: clamp(0.26rem, 1.5vw, 0.42rem);
}

.panel--expedition .duration-picker {
  margin-top: clamp(0.08rem, 0.9vw, 0.22rem);
}

/* Top HUD icon alignment: photo and guide use the same touch target. */
.photo-tool-button,
.guide-help-button {
  width: clamp(3.1rem, 6.2vw, 4.25rem);
  min-width: clamp(3.1rem, 6.2vw, 4.25rem);
  min-height: clamp(3.1rem, 6.2vw, 4.25rem);
  aspect-ratio: 1;
  padding: 0;
}

.photo-tool-button .camera-tool-icon.svg-icon-frame {
  width: 68%;
  height: 68%;
}

.photo-tool-button .camera-tool-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
}

/* Weather icon redraw: keep every pixel shape centered in one square frame. */
.weather-pill {
  grid-template-columns: auto minmax(0, auto);
}

.weather-icon {
  width: clamp(2.1rem, 5vw, 2.38rem);
  height: clamp(2.1rem, 5vw, 2.38rem);
  min-width: clamp(2.1rem, 5vw, 2.38rem);
  border-color: rgba(111, 148, 102, 0.2);
  border-radius: 0.42rem;
  background: #fff7d8;
}

.weather-icon__sun {
  left: 0.34rem;
  top: 0.34rem;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 0.18rem;
  background: #f4cf66;
  box-shadow:
    0 -0.2rem 0 -0.1rem #f4cf66,
    0.2rem 0 0 -0.1rem #f4cf66,
    0 0.2rem 0 -0.1rem #f4cf66,
    -0.2rem 0 0 -0.1rem #f4cf66;
}

.weather-icon__cloud {
  left: 50%;
  top: 50%;
  width: 1.26rem;
  height: 0.54rem;
  border-radius: 0.18rem;
  background: #dcebb8;
  box-shadow:
    -0.34rem 0.08rem 0 #dcebb8,
    0.02rem -0.28rem 0 0.08rem #dcebb8,
    0.42rem 0.02rem 0 #dcebb8;
  transform: translate(-48%, -15%);
}

.weather-icon__drop {
  left: 50%;
  top: 1.46rem;
  width: 0.18rem;
  height: 0.36rem;
  border-radius: 0 0 0.12rem 0.12rem;
  background: #7fbfd3;
  box-shadow:
    -0.44rem -0.08rem 0 #7fbfd3,
    0.44rem -0.1rem 0 #7fbfd3;
  opacity: 0;
  transform: translateX(-50%);
}

.weather-icon__flake {
  left: 50%;
  top: 1.42rem;
  width: 0.22rem;
  height: 0.22rem;
  background: #f9fcf0;
  box-shadow:
    -0.42rem 0.02rem 0 #f9fcf0,
    0.42rem -0.02rem 0 #f9fcf0,
    0 0.34rem 0 #f9fcf0;
  opacity: 0;
  transform: translateX(-50%);
}

.weather-icon--mist::after {
  left: 50%;
  right: auto;
  bottom: 0.36rem;
  width: 1.26rem;
  height: 0.34rem;
  border-top: 0.12rem solid #c8dcb0;
  border-bottom: 0.12rem solid #c8dcb0;
  transform: translateX(-50%);
}

.weather-icon--storm::after {
  left: 50%;
  top: 1.08rem;
  width: 0.22rem;
  height: 0.72rem;
  background: #f1d36e;
  box-shadow:
    0.16rem 0.12rem 0 #f1d36e,
    -0.08rem 0.34rem 0 #f1d36e,
    -0.22rem 0.52rem 0 #f1d36e;
  transform: translateX(-50%);
}

@media (max-width: 720px) {
  .photo-tool-button,
  .guide-help-button {
    width: 2.48rem;
    min-width: 2.48rem;
    min-height: 2.48rem;
  }

  .photo-tool-button .camera-tool-icon.svg-icon-frame {
    width: 1.68rem;
    height: 1.68rem;
  }

  .weather-icon {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
  }
}

@media (max-width: 720px) {
  .panel--map,
  .panel--expedition {
    --game-panel-inline: clamp(1.18rem, 6.6vw, 1.66rem);
    --game-panel-block: clamp(0.78rem, 3.8vw, 1rem);
  }

  .panel--map {
    --map-content-width: min(100%, calc(100vw - (var(--repair-inline, 1.2rem) * 2) - 0.2rem));
  }

  .panel--map .panel-header,
  .panel--map .radar,
  .panel--map .map-actions,
  .panel--map .map-results {
    width: var(--map-content-width) !important;
    max-width: var(--map-content-width) !important;
  }

  .panel--expedition .adventure-content {
    padding: var(--game-panel-block) var(--game-panel-inline) calc(var(--game-panel-block) + env(safe-area-inset-bottom)) !important;
  }

  .expedition-squad header {
    align-items: start;
  }

  .expedition-squad p {
    max-width: 11rem;
  }

  .expedition-planning .duration-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Map radar vertical fit: keep actions and empty hints away from the center marker. */
.panel--map.is-open {
  grid-template-rows: auto auto auto minmax(0, auto) !important;
  align-content: start !important;
  row-gap: clamp(0.78rem, 3.2vw, 1.12rem) !important;
}

.panel--map.is-open .panel-header {
  margin-bottom: 0 !important;
}

.panel--map.is-open .radar {
  display: block;
  width: min(var(--map-content-width), clamp(16rem, 58vh, 23rem)) !important;
  max-width: var(--map-content-width) !important;
  margin-block: 0 clamp(0.78rem, 3.4vw, 1.18rem) !important;
  justify-self: center;
}

.panel--map.is-open .map-actions {
  position: relative;
  z-index: 2;
  margin-top: 0 !important;
  margin-bottom: clamp(0.82rem, 3.5vw, 1.22rem) !important;
}

.panel--map.is-open .map-results {
  position: relative;
  z-index: 1;
  margin-top: 0 !important;
}

.panel--map.is-open .map-results p {
  display: grid;
  min-height: clamp(4.8rem, 19vw, 6.2rem);
  align-content: center;
}

@media (max-width: 720px) {
  .panel--map.is-open {
    row-gap: clamp(0.86rem, 4vw, 1.18rem) !important;
  }

  .panel--map.is-open .radar {
    width: min(var(--map-content-width), calc(100svh - 27rem), 21rem) !important;
    min-width: min(var(--map-content-width), 15.2rem);
    margin-bottom: clamp(0.92rem, 4.6vw, 1.32rem) !important;
  }

  .panel--map.is-open .map-actions {
    margin-bottom: clamp(0.95rem, 4.8vw, 1.38rem) !important;
  }
}

/* Map radar final layout: keep controls and empty state below the main radar. */
.panel--map.is-open {
  display: grid !important;
  grid-template-rows: auto auto auto auto !important;
  justify-items: center !important;
  align-content: start !important;
  row-gap: 0 !important;
}

.panel--map.is-open .panel-header {
  order: 1;
  margin-bottom: clamp(0.74rem, 3vw, 1rem) !important;
}

.panel--map.is-open .radar {
  order: 2;
  width: min(var(--map-content-width), clamp(16.2rem, 54vh, 22rem)) !important;
  margin: 0 auto clamp(0.88rem, 3.8vw, 1.22rem) !important;
}

.panel--map.is-open .map-actions {
  order: 3;
  width: min(var(--map-content-width), clamp(16.2rem, 54vh, 22rem)) !important;
  margin: 0 auto clamp(0.72rem, 3vw, 1rem) !important;
}

.panel--map.is-open .map-results {
  order: 4;
  width: min(var(--map-content-width), clamp(16.2rem, 54vh, 22rem)) !important;
  margin: 0 auto !important;
}

.panel--map.is-open .map-results p {
  min-height: clamp(3.95rem, 16vw, 5.25rem) !important;
}

@media (max-width: 720px) {
  .panel--map.is-open .radar,
  .panel--map.is-open .map-actions,
  .panel--map.is-open .map-results {
    width: min(var(--map-content-width), calc(100svh - 28rem), 20.4rem) !important;
    min-width: min(var(--map-content-width), 15.2rem) !important;
  }
}

/* Passport text fit guard: all content stays inside the dashed paper edge. */
.panel--identity .identity-hero.passport-card {
  --passport-content-gap: clamp(0.78rem, 2.6vw, 1.12rem);
  grid-template-columns: minmax(11.2rem, 0.88fr) minmax(0, 1.12fr) !important;
  gap: var(--passport-content-gap) !important;
  padding:
    calc(var(--passport-edge-block, 1rem) + var(--passport-content-gap))
    calc(var(--passport-edge-inline, 1rem) + var(--passport-content-gap)) !important;
  overflow: hidden !important;
}

.panel--identity .passport-card::before {
  inset:
    var(--passport-edge-block, 1rem)
    var(--passport-edge-inline, 1rem) !important;
}

.panel--identity .identity-portrait,
.panel--identity .identity-profile {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.panel--identity .identity-portrait {
  margin: 0 !important;
}

.panel--identity .identity-profile {
  align-content: center !important;
  gap: clamp(0.38rem, 1.5vw, 0.58rem) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.panel--identity .passport-id-strip {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: clamp(0.62rem, 1.7vw, 0.76rem) !important;
}

.panel--identity .identity-name-row {
  min-width: 0 !important;
  max-width: 100% !important;
  align-items: center !important;
}

.panel--identity .identity-name-row h3 {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  font-size: clamp(1.18rem, 4.2vw, 1.58rem) !important;
  line-height: 1.12 !important;
}

.panel--identity .identity-signature {
  min-width: 0;
  max-width: 100%;
  margin-top: clamp(0.22rem, 1vw, 0.36rem) !important;
  padding: 0 !important;
  overflow: hidden;
}

.panel--identity .identity-signature p,
.panel--identity .identity-inline-input--bio {
  max-width: 100%;
  overflow-wrap: anywhere !important;
  color: #76654a !important;
  font-size: clamp(0.68rem, 2.35vw, 0.82rem) !important;
  line-height: 1.34 !important;
  text-align: left !important;
}

.panel--identity .identity-profile ul {
  min-width: 0;
  max-width: 100%;
  gap: clamp(0.18rem, 0.9vw, 0.3rem) !important;
  margin-top: clamp(0.38rem, 1.4vw, 0.58rem) !important;
  padding-top: clamp(0.34rem, 1.2vw, 0.52rem) !important;
  overflow: hidden;
}

.panel--identity .identity-profile li {
  grid-template-columns: clamp(2rem, 7vw, 2.52rem) minmax(0, 1fr) !important;
  gap: clamp(0.34rem, 1.4vw, 0.5rem) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 1.28rem !important;
  align-items: start !important;
  overflow: hidden;
}

.panel--identity .identity-profile li b,
.panel--identity .identity-profile li em {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  font-size: clamp(0.66rem, 2.2vw, 0.78rem) !important;
  line-height: 1.22 !important;
}

.panel--identity .identity-profile li b {
  color: #8b7652 !important;
}

.panel--identity .identity-profile li em {
  color: #5f523c !important;
  text-align: left !important;
}

@media (max-width: 720px) {
  .panel--identity .identity-hero.passport-card {
    --passport-content-gap: clamp(0.58rem, 3.3vw, 0.82rem);
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(10.8rem, 0.4fr) minmax(0, 1fr) !important;
  }

  .panel--identity .identity-profile {
    align-content: start !important;
  }

  .panel--identity .identity-name-row {
    display: grid !important;
    grid-template-columns: minmax(0, auto) auto !important;
    justify-content: start !important;
  }

  .panel--identity .identity-name-row #editIdentityName {
    width: 1.55rem !important;
    min-width: 1.55rem !important;
    height: 1.55rem !important;
    min-height: 1.55rem !important;
  }

  .panel--identity .identity-profile li {
    grid-template-columns: clamp(2.1rem, 12vw, 2.56rem) minmax(0, 1fr) !important;
  }
}

/* Backpack tabs and items page: stable switching, map-like visual collection. */
.panel--identity .identity-tabs button {
  min-width: 0 !important;
  overflow: hidden;
}

.panel--identity .identity-tabs button b {
  font-size: clamp(0.9rem, 3.3vw, 1.1rem) !important;
  line-height: 1.08 !important;
}

.panel--identity .identity-page.is-hidden {
  display: none !important;
}

.panel--identity[data-active-identity-tab="items"] {
  --items-page-width: min(100%, 42rem);
}

.panel--identity[data-active-identity-tab="items"] .specialty-section,
.panel--identity[data-active-identity-tab="items"] .seed-pouch-section {
  width: var(--items-page-width) !important;
  max-width: var(--items-page-width) !important;
  padding-inline: clamp(0.82rem, 4vw, 1.28rem) !important;
  border-top: 0 !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-section h3,
.panel--identity[data-active-identity-tab="items"] .seed-pouch-section h3 {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0 0 clamp(0.5rem, 2.2vw, 0.72rem) !important;
  color: #5f6948;
  font-size: clamp(1.08rem, 4vw, 1.32rem);
}

.panel--identity[data-active-identity-tab="items"] .specialty-section h3::before,
.panel--identity[data-active-identity-tab="items"] .specialty-section h3::after,
.panel--identity[data-active-identity-tab="items"] .seed-pouch-section h3::after {
  display: none !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-section h3::before {
  display: block !important;
  width: clamp(2.1rem, 8.4vw, 2.55rem);
  height: clamp(2.1rem, 8.4vw, 2.55rem);
  border: 0;
  border-radius: 0;
  background: url("./assets/ui/icon-seed-pouch.svg") center / contain no-repeat;
}

.panel--identity[data-active-identity-tab="items"] .section-title-icon {
  width: clamp(2.25rem, 9vw, 2.8rem);
  height: clamp(2.25rem, 9vw, 2.8rem);
}

.panel--identity[data-active-identity-tab="items"] .landform-overview {
  padding: clamp(0.58rem, 3vw, 0.88rem) !important;
  border: 0;
  border-radius: 0.78rem;
  background: #f3f6d6;
}

.panel--identity[data-active-identity-tab="items"] .landform-panorama {
  min-height: clamp(7.8rem, 34vw, 11rem);
  border: 0;
  border-radius: 0.66rem;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-strip {
  grid-auto-columns: clamp(4.45rem, 23vw, 5.55rem);
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip {
  min-height: clamp(4.45rem, 18vw, 5.28rem);
  align-content: center;
  border: 0;
  border-radius: 0.64rem;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip em {
  display: none;
}

.panel--identity[data-active-identity-tab="items"] .specialty-shelf {
  gap: clamp(0.5rem, 2.4vw, 0.72rem);
}

.panel--identity[data-active-identity-tab="items"] .specialty-region {
  border: 0;
  border-radius: 0.78rem;
  background: #fff8df;
}

.panel--identity[data-active-identity-tab="items"] .specialty-region-toggle {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.42rem;
  min-height: clamp(2.85rem, 12vw, 3.32rem);
  padding: 0.48rem 0.72rem;
  background: transparent;
}

.panel--identity[data-active-identity-tab="items"] .specialty-region-toggle h4 {
  font-size: clamp(0.86rem, 3.2vw, 1rem);
}

.panel--identity[data-active-identity-tab="items"] .specialty-region-toggle span {
  color: #789264;
  font-size: clamp(0.68rem, 2.45vw, 0.78rem);
}

.panel--identity[data-active-identity-tab="items"] .specialty-region-toggle small {
  display: none;
}

.panel--identity[data-active-identity-tab="items"] .specialty-region-toggle em {
  padding-right: 1rem;
  font-size: clamp(0.66rem, 2.4vw, 0.76rem);
}

.panel--identity[data-active-identity-tab="items"] .specialty-region-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 2.4vw, 0.72rem);
  padding: 0 clamp(0.58rem, 2.8vw, 0.82rem) clamp(0.62rem, 3vw, 0.9rem);
}

.panel--identity[data-active-identity-tab="items"] .specialty-card {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  min-height: clamp(6.9rem, 30vw, 8.4rem);
  align-content: end;
  gap: 0.2rem;
  overflow: hidden;
  padding: 0.56rem;
  border: 0;
  border-radius: 0.78rem;
  background: #edf5cf;
}

.panel--identity[data-active-identity-tab="items"] .specialty-card .specialty-scene {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: inherit;
  opacity: 1;
}

.panel--identity[data-active-identity-tab="items"] .specialty-card .specialty-icon {
  position: absolute;
  right: 0.48rem;
  top: 0.42rem;
  width: clamp(2.25rem, 9vw, 2.85rem);
  height: clamp(2.25rem, 9vw, 2.85rem);
  z-index: 1;
}

.panel--identity[data-active-identity-tab="items"] .specialty-card > div,
.panel--identity[data-active-identity-tab="items"] .specialty-card .rarity-pips {
  position: relative;
  z-index: 1;
}

.panel--identity[data-active-identity-tab="items"] .specialty-card > div {
  display: grid;
  gap: 0.06rem;
  padding: 0.36rem 0.42rem;
  border-radius: 0.52rem;
  background: rgba(255, 248, 223, 0.86);
}

.panel--identity[data-active-identity-tab="items"] .specialty-card strong {
  overflow: hidden;
  color: #5d6046;
  font-size: clamp(0.78rem, 3vw, 0.92rem);
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel--identity[data-active-identity-tab="items"] .specialty-card .specialty-place,
.panel--identity[data-active-identity-tab="items"] .specialty-card span {
  overflow: hidden;
  color: #6f8056;
  font-size: clamp(0.62rem, 2.35vw, 0.72rem);
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel--identity[data-active-identity-tab="items"] .specialty-card small {
  display: none;
}

.panel--identity[data-active-identity-tab="items"] .specialty-card .rarity-pips {
  justify-self: start;
  margin-left: 0.32rem;
}

.panel--identity[data-active-identity-tab="items"] .specialty-empty {
  grid-column: 1 / -1;
  min-height: clamp(5rem, 20vw, 6.4rem);
  place-content: center;
  border: 0;
  border-radius: 0.78rem;
  background: #f7efd0;
  text-align: center;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-section {
  margin-top: clamp(0.9rem, 4vw, 1.3rem) !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card {
  grid-template-columns: clamp(3.6rem, 15vw, 4.5rem) minmax(0, 1fr) auto;
  gap: clamp(0.58rem, 2.8vw, 0.86rem);
  padding: clamp(0.62rem, 3vw, 0.86rem);
  border: 0;
  border-radius: 0.78rem;
  background: #f0f8d8;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card > span {
  width: clamp(3.6rem, 15vw, 4.5rem);
  height: clamp(3.6rem, 15vw, 4.5rem);
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card img {
  width: 100%;
  height: 100%;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card strong {
  color: #5f6948;
  font-size: clamp(0.92rem, 3.4vw, 1.08rem);
  line-height: 1.1;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card p {
  display: none;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card button {
  min-width: clamp(4.2rem, 18vw, 5rem);
  min-height: clamp(2.1rem, 8.5vw, 2.42rem);
  padding-inline: 0.62rem;
  border-radius: 999px;
}

@media (max-width: 420px) {
  .panel--identity[data-active-identity-tab="items"] .specialty-region-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .panel--identity[data-active-identity-tab="items"] .seed-pouch-card {
    grid-template-columns: clamp(3.35rem, 16vw, 4.1rem) minmax(0, 1fr);
  }

  .panel--identity[data-active-identity-tab="items"] .seed-pouch-card button {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
}

/* Mobile passport alignment pass: keep portrait, tabs, and editable text in one phone-first column. */
.panel--identity {
  --identity-mobile-width: min(100%, 29rem);
}

.panel--identity .identity-topbar,
.panel--identity .identity-tabs,
.panel--identity .identity-page {
  width: var(--identity-mobile-width) !important;
  max-width: var(--identity-mobile-width) !important;
  margin-inline: auto !important;
}

.panel--identity .identity-tools {
  justify-content: end !important;
}

.panel--identity .identity-name-quick-edit,
.panel--identity .identity-icon-edit {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0.46rem !important;
  background: #f7eec9 !important;
  color: #68784d !important;
  box-shadow: none !important;
}

.panel--identity .identity-name-quick-edit svg {
  display: none !important;
}

.panel--identity .identity-name-quick-edit::before,
.panel--identity .identity-icon-edit span::before {
  content: "" !important;
  position: absolute !important;
  width: 0.92rem !important;
  height: 0.28rem !important;
  border-radius: 0.08rem !important;
  background: #78885a !important;
  transform: rotate(-36deg) !important;
  transform-origin: center !important;
}

.panel--identity .identity-name-quick-edit::after,
.panel--identity .identity-icon-edit span::after {
  content: "" !important;
  position: absolute !important;
  width: 0.28rem !important;
  height: 0.28rem !important;
  margin-left: 0.62rem !important;
  margin-top: -0.46rem !important;
  border-radius: 0.06rem !important;
  background: #d2a861 !important;
  box-shadow: -0.56rem 0.48rem 0 #a5c978 !important;
  transform: rotate(-36deg) !important;
}

@media (max-width: 720px) {
  .panel--identity {
    --identity-mobile-width: min(100%, calc(100vw - clamp(2rem, 8vw, 3rem))) !important;
  }

  .panel--identity .identity-topbar,
  .panel--identity .identity-tabs,
  .panel--identity .identity-page {
    justify-self: center !important;
  }

  .panel--identity .identity-topbar {
    grid-template-columns: 2.42rem minmax(0, 1fr) 2.42rem !important;
    gap: 0.45rem !important;
    padding-inline: 0 !important;
  }

  .panel--identity .identity-topbar h2 {
    font-size: clamp(1.08rem, 4.2vw, 1.34rem) !important;
    text-align: center !important;
  }

  .panel--identity .identity-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(0.46rem, 2vw, 0.7rem) !important;
    padding-inline: 0 !important;
  }

  .panel--identity .identity-tabs button {
    min-width: 0 !important;
    padding-inline: clamp(0.34rem, 1.8vw, 0.5rem) !important;
  }

  .panel--identity .identity-hero.passport-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-content: start !important;
    gap: clamp(1rem, 4vw, 1.25rem) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100svh - 12rem) !important;
    padding: clamp(1.06rem, 4.8vw, 1.42rem) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .panel--identity .identity-portrait {
    width: 100% !important;
    height: clamp(13.6rem, 45vw, 17.4rem) !important;
    min-height: clamp(13.6rem, 45vw, 17.4rem) !important;
    max-height: none !important;
    justify-self: center !important;
    margin: 0 !important;
  }

  .panel--identity .identity-portrait > img {
    width: min(72%, 12.8rem) !important;
    height: min(72%, 12.8rem) !important;
    object-fit: contain !important;
  }

  .panel--identity .passport-stamp {
    right: clamp(0.8rem, 4vw, 1.18rem) !important;
    bottom: clamp(-0.72rem, -1.8vw, -0.46rem) !important;
  }

  .panel--identity .identity-profile {
    position: relative !important;
    z-index: 3 !important;
    display: grid !important;
    align-content: start !important;
    gap: clamp(0.58rem, 2.5vw, 0.82rem) !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .panel--identity .passport-id-strip {
    order: 4 !important;
    justify-self: start !important;
    max-width: 100% !important;
    font-size: clamp(0.68rem, 2.45vw, 0.8rem) !important;
    opacity: 0.76 !important;
  }

  .panel--identity .identity-name-block {
    width: 100% !important;
    min-width: 0 !important;
  }

  .panel--identity .identity-name-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    justify-content: stretch !important;
    column-gap: clamp(0.42rem, 2vw, 0.58rem) !important;
    row-gap: 0.28rem !important;
    width: 100% !important;
  }

  .panel--identity .identity-name-row h3,
  .panel--identity .identity-name-row input {
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: clamp(1.42rem, 6vw, 1.86rem) !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .panel--identity .identity-certified-mark {
    grid-column: 1 / 2 !important;
    justify-self: start !important;
    margin: -0.14rem 0 0 !important;
    font-size: clamp(0.82rem, 3vw, 0.98rem) !important;
  }

  .panel--identity .identity-name-row #editIdentityName {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 3 !important;
    width: 2rem !important;
    min-width: 2rem !important;
    height: 2rem !important;
    min-height: 2rem !important;
    align-self: center !important;
  }

  .panel--identity .identity-signature {
    width: 100% !important;
    padding: clamp(0.56rem, 2.6vw, 0.78rem) clamp(0.68rem, 3vw, 0.9rem) !important;
  }

  .panel--identity .identity-signature p {
    font-size: clamp(0.82rem, 3.15vw, 0.96rem) !important;
    line-height: 1.42 !important;
  }

  .panel--identity .identity-profile ul {
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .panel--identity .identity-profile li {
    grid-template-columns: clamp(2.45rem, 14vw, 3rem) minmax(0, 1fr) !important;
    gap: clamp(0.46rem, 2.2vw, 0.68rem) !important;
    min-height: auto !important;
    padding: clamp(0.44rem, 2vw, 0.58rem) 0 !important;
  }

  .panel--identity .identity-profile li b {
    font-size: clamp(0.66rem, 2.4vw, 0.76rem) !important;
  }

  .panel--identity .identity-profile li em,
  .panel--identity .passport-id-strip strong {
    font-size: clamp(0.78rem, 2.9vw, 0.9rem) !important;
    line-height: 1.28 !important;
  }
}

/* Stable interaction rules: name owns the edit icon, bio edits by double-click, garden labels keep breathing room. */
.panel--identity .identity-name-quick-edit,
.panel--identity #editIdentityBio {
  display: none !important;
}

/* Final visible item layout lock: seed entry, then terrain; no overlapping chips. */
.panel--identity[data-active-identity-tab="items"] .identity-pages {
  display: grid !important;
  align-content: start !important;
  gap: clamp(0.92rem, 4vw, 1.16rem) !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-section {
  order: 1 !important;
  margin-top: 0 !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-section {
  order: 2 !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-section,
.panel--identity[data-active-identity-tab="items"] .specialty-section {
  width: var(--backpack-content-width) !important;
  max-width: var(--backpack-content-width) !important;
  padding: 0 !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card {
  display: grid !important;
  grid-template-columns: clamp(3.1rem, 13vw, 3.72rem) minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(0.58rem, 3vw, 0.82rem) !important;
  min-height: clamp(4.6rem, 18vw, 5.42rem) !important;
  padding: clamp(0.68rem, 3.4vw, 0.86rem) !important;
  border: 0.12rem solid rgba(139, 164, 108, 0.56) !important;
  border-radius: 0.72rem !important;
  background: #fff7d8 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-overview {
  display: grid !important;
  grid-template-areas: "image" "regions" !important;
  gap: clamp(0.58rem, 2.8vw, 0.78rem) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-panorama {
  grid-area: image !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 0 !important;
  border: 0.12rem solid rgba(139, 164, 108, 0.48) !important;
  border-radius: 0.82rem !important;
  background: #eef7cc !important;
  overflow: hidden !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-panorama img {
  width: 100% !important;
  min-width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-overview-copy,
.panel--identity[data-active-identity-tab="items"] .landform-switcher {
  display: none !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-strip {
  grid-area: regions !important;
  position: static !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-columns: unset !important;
  gap: clamp(0.46rem, 2.4vw, 0.62rem) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip {
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 0.28rem !important;
  min-width: 0 !important;
  min-height: clamp(4.45rem, 18vw, 5.5rem) !important;
  padding: clamp(0.42rem, 2.2vw, 0.56rem) !important;
  border: 0.12rem solid rgba(139, 164, 108, 0.46) !important;
  border-radius: 0.72rem !important;
  background: #f5f8da !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.panel--identity[data-active-identity-tab="items"] .terrain-sprite {
  display: block !important;
  width: clamp(2.9rem, 12.6vw, 3.58rem) !important;
  height: clamp(2rem, 8.8vw, 2.5rem) !important;
  background-image: url("./assets/landforms/terrain-region-sprites.png") !important;
  background-repeat: no-repeat !important;
  background-size: 300% 200% !important;
  image-rendering: pixelated !important;
}

.panel--identity[data-active-identity-tab="items"] .terrain-sprite::before,
.panel--identity[data-active-identity-tab="items"] .terrain-sprite::after,
.panel--identity[data-active-identity-tab="items"] .landform-region-chip i::before,
.panel--identity[data-active-identity-tab="items"] .landform-region-chip i::after {
  content: none !important;
  display: none !important;
}

.panel--identity[data-active-identity-tab="items"] .terrain-sprite--jiangnan {
  background-position: 0 0 !important;
}

.panel--identity[data-active-identity-tab="items"] .terrain-sprite--mountain {
  background-position: 50% 0 !important;
}

.panel--identity[data-active-identity-tab="items"] .terrain-sprite--northwest {
  background-position: 100% 0 !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip em,
.panel--identity[data-active-identity-tab="items"] .specialty-place,
.panel--identity[data-active-identity-tab="items"] .rarity-pips {
  display: none !important;
}

/* Final expedition squad row lock: align title, sprig slots, and duration buttons. */
.panel--expedition.is-open .expedition-planning {
  --expedition-align-edge: clamp(0.88rem, 3.9vw, 1.12rem) !important;
  --expedition-squad-circle: clamp(4.08rem, 16vw, 4.78rem) !important;
}

.panel--expedition.is-open .expedition-squad header,
.panel--expedition.is-open .squad-slots,
.panel--expedition.is-open .squad-picker,
.panel--expedition.is-open .duration-picker {
  padding-left: var(--expedition-align-edge) !important;
  padding-right: var(--expedition-align-edge) !important;
  box-sizing: border-box !important;
}

.panel--expedition.is-open .expedition-squad header {
  display: grid !important;
  justify-items: start !important;
  text-align: left !important;
}

.panel--expedition.is-open .expedition-squad h3,
.panel--expedition.is-open .expedition-squad p {
  margin-left: 0 !important;
  text-align: left !important;
}

.panel--expedition.is-open .squad-slots {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: var(--expedition-squad-circle) !important;
  justify-content: start !important;
  justify-items: start !important;
  align-items: center !important;
  gap: clamp(0.82rem, 4vw, 1.12rem) !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

.panel--expedition.is-open .squad-picker {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: var(--expedition-squad-circle) !important;
  grid-template-columns: none !important;
  justify-content: start !important;
  justify-items: start !important;
  align-items: start !important;
  gap: clamp(0.82rem, 4vw, 1.12rem) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: clamp(0.48rem, 2.4vw, 0.72rem) 0 clamp(0.68rem, 3vw, 0.9rem) !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scroll-snap-type: x proximity !important;
}

.panel--expedition.is-open .squad-picker.is-hidden {
  display: none !important;
}

.panel--expedition.is-open .squad-slot {
  width: var(--expedition-squad-circle) !important;
  min-width: var(--expedition-squad-circle) !important;
  max-width: var(--expedition-squad-circle) !important;
  height: var(--expedition-squad-circle) !important;
  min-height: var(--expedition-squad-circle) !important;
  max-height: var(--expedition-squad-circle) !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  place-items: center !important;
}

.panel--expedition.is-open .squad-slot img {
  width: 76% !important;
  height: 76% !important;
  object-fit: contain !important;
}

.panel--expedition.is-open .squad-picker-option {
  width: var(--expedition-squad-circle) !important;
  min-width: var(--expedition-squad-circle) !important;
  max-width: var(--expedition-squad-circle) !important;
  min-height: clamp(4.86rem, 19vw, 5.42rem) !important;
  padding: clamp(0.28rem, 1.4vw, 0.38rem) clamp(0.2rem, 1vw, 0.28rem) !important;
  border-radius: 0.78rem !important;
  scroll-snap-align: start !important;
}

.panel--expedition.is-open .squad-picker-option img {
  width: 82% !important;
  height: clamp(3.04rem, 12vw, 3.58rem) !important;
}

.panel--expedition.is-open .squad-picker-option span {
  font-size: clamp(0.58rem, 2.35vw, 0.68rem) !important;
}

/* Final expedition squad text/slot alignment: match the duration row left edge. */
.panel--expedition.is-open .expedition-planning {
  --expedition-align-edge: clamp(0.88rem, 3.9vw, 1.12rem) !important;
  --expedition-squad-circle: clamp(4.08rem, 16vw, 4.78rem) !important;
}

.panel--expedition.is-open .expedition-squad header,
.panel--expedition.is-open .squad-slots,
.panel--expedition.is-open .duration-picker {
  padding-left: var(--expedition-align-edge) !important;
  padding-right: var(--expedition-align-edge) !important;
  box-sizing: border-box !important;
}

.panel--expedition.is-open .expedition-squad header {
  display: grid !important;
  justify-items: start !important;
  text-align: left !important;
}

.panel--expedition.is-open .expedition-squad h3,
.panel--expedition.is-open .expedition-squad p {
  margin-left: 0 !important;
  text-align: left !important;
}

.panel--expedition.is-open .squad-slots {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: var(--expedition-squad-circle) !important;
  justify-content: start !important;
  justify-items: start !important;
  align-items: center !important;
  gap: clamp(0.82rem, 4vw, 1.12rem) !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

.panel--expedition.is-open .squad-slot {
  width: var(--expedition-squad-circle) !important;
  min-width: var(--expedition-squad-circle) !important;
  max-width: var(--expedition-squad-circle) !important;
  height: var(--expedition-squad-circle) !important;
  min-height: var(--expedition-squad-circle) !important;
  max-height: var(--expedition-squad-circle) !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  place-items: center !important;
}

.panel--expedition.is-open .squad-slot img {
  width: 76% !important;
  height: 76% !important;
  object-fit: contain !important;
}

/* Final expedition squad alignment: title and circular slots share the same left edge. */
.panel--expedition.is-open .expedition-squad {
  --squad-edge: clamp(0.92rem, 4vw, 1.18rem) !important;
  --squad-circle: clamp(4.08rem, 16vw, 4.78rem) !important;
  box-sizing: border-box !important;
}

.panel--expedition.is-open .expedition-squad header,
.panel--expedition.is-open .squad-slots {
  padding-left: var(--squad-edge) !important;
  padding-right: var(--squad-edge) !important;
  box-sizing: border-box !important;
}

.panel--expedition.is-open .expedition-squad header {
  justify-items: start !important;
  text-align: left !important;
}

.panel--expedition.is-open .expedition-squad h3 {
  margin-left: 0 !important;
  text-align: left !important;
}

.panel--expedition.is-open .squad-slots {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: var(--squad-circle) !important;
  justify-content: start !important;
  justify-items: start !important;
  align-items: center !important;
  gap: clamp(0.86rem, 4.2vw, 1.18rem) !important;
}

.panel--expedition.is-open .squad-slot {
  width: var(--squad-circle) !important;
  min-width: var(--squad-circle) !important;
  max-width: var(--squad-circle) !important;
  height: var(--squad-circle) !important;
  min-height: var(--squad-circle) !important;
  max-height: var(--squad-circle) !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  place-items: center !important;
}

.panel--expedition.is-open .squad-slot img {
  width: 76% !important;
  height: 76% !important;
  object-fit: contain !important;
}

.panel--expedition.is-open .duration-picker {
  padding-left: var(--squad-edge) !important;
  padding-right: var(--squad-edge) !important;
  box-sizing: border-box !important;
}

/* Final mobile atlas direction lock: pages turn left and right, not top to bottom. */
@media (max-width: 720px) {
  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page:not(.is-hidden) {
    overflow: hidden !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-book-layout,
  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-pages {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-pages {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "summary"
      "tabs"
      "collected"
      "locked" !important;
    gap: clamp(0.58rem, 2.8vw, 0.82rem) !important;
    padding-bottom: clamp(0.82rem, 4vw, 1.08rem) !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-bookmarks {
    grid-area: tabs !important;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: clamp(4.4rem, 24vw, 5.4rem) !important;
    grid-template-columns: none !important;
    gap: clamp(0.42rem, 2.2vw, 0.58rem) !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-card--collected,
  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-card--locked {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-list {
    display: flex !important;
    flex-flow: row nowrap !important;
    gap: clamp(0.62rem, 3vw, 0.82rem) !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-list::-webkit-scrollbar,
  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .locked-grid::-webkit-scrollbar {
    display: none !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-list > article {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    scroll-snap-align: center !important;
    box-sizing: border-box !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-list .atlas-storybook {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .locked-grid {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: calc((100% - clamp(0.5rem, 2.5vw, 0.68rem)) / 2) !important;
    grid-template-columns: none !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(0.5rem, 2.5vw, 0.68rem) !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .locked-grid > article {
    width: 100% !important;
    min-width: 0 !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
  }
}

/* Final items page trim: seed and greenhouse first, landforms below without overlap. */
.panel--identity[data-active-identity-tab="items"] .identity-pages {
  display: grid !important;
  align-content: start !important;
  gap: clamp(0.92rem, 4vw, 1.16rem) !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-section {
  order: 1 !important;
  margin-top: 0 !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-section {
  order: 2 !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-section,
.panel--identity[data-active-identity-tab="items"] .specialty-section {
  width: var(--backpack-content-width) !important;
  max-width: var(--backpack-content-width) !important;
  padding: 0 !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-section h3,
.panel--identity[data-active-identity-tab="items"] .specialty-section h3 {
  margin: 0 0 clamp(0.52rem, 2.5vw, 0.68rem) !important;
  padding: 0 !important;
  min-height: 0 !important;
  color: #665941 !important;
  font-size: clamp(0.98rem, 4.2vw, 1.22rem) !important;
  line-height: 1.15 !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card {
  display: grid !important;
  grid-template-columns: clamp(3.1rem, 13vw, 3.72rem) minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(0.58rem, 3vw, 0.82rem) !important;
  width: 100% !important;
  min-height: clamp(4.6rem, 18vw, 5.42rem) !important;
  padding: clamp(0.68rem, 3.4vw, 0.86rem) !important;
  border: 0.12rem solid rgba(139, 164, 108, 0.56) !important;
  border-radius: 0.72rem !important;
  background: #fff7d8 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card > span {
  display: grid !important;
  width: clamp(2.9rem, 12vw, 3.46rem) !important;
  height: clamp(2.9rem, 12vw, 3.46rem) !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0.52rem !important;
  background: #eef7cc !important;
  overflow: hidden !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card > span img {
  width: 78% !important;
  height: 78% !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card strong {
  display: block !important;
  color: #5f714e !important;
  font-size: clamp(1.12rem, 5vw, 1.42rem) !important;
  line-height: 1.05 !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card p {
  margin: 0.18rem 0 0 !important;
  color: #7b865f !important;
  font-size: clamp(0.72rem, 3.1vw, 0.86rem) !important;
  line-height: 1.22 !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card button {
  min-width: clamp(3.1rem, 13vw, 3.86rem) !important;
  min-height: clamp(2.36rem, 9.2vw, 2.76rem) !important;
  padding: 0 0.62rem !important;
  border-radius: 0.56rem !important;
  background: #ddecad !important;
  color: #5f714e !important;
  font-size: clamp(0.78rem, 3.2vw, 0.9rem) !important;
  box-shadow: none !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-overview {
  display: grid !important;
  grid-template-areas:
    "image"
    "regions" !important;
  gap: clamp(0.58rem, 2.8vw, 0.78rem) !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-panorama {
  grid-area: image !important;
  width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  border: 0.12rem solid rgba(139, 164, 108, 0.48) !important;
  border-radius: 0.82rem !important;
  background: #eef7cc !important;
  overflow: hidden !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-panorama img {
  width: 100% !important;
  min-width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-overview-copy,
.panel--identity[data-active-identity-tab="items"] .landform-switcher {
  display: none !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-strip {
  grid-area: regions !important;
  position: static !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-columns: unset !important;
  gap: clamp(0.46rem, 2.4vw, 0.62rem) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip {
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 0.28rem !important;
  min-width: 0 !important;
  min-height: clamp(4.45rem, 18vw, 5.5rem) !important;
  padding: clamp(0.42rem, 2.2vw, 0.56rem) !important;
  border: 0.12rem solid rgba(139, 164, 108, 0.46) !important;
  border-radius: 0.72rem !important;
  background: #f5f8da !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip.is-active {
  background: #fff2bf !important;
  border-color: rgba(139, 164, 108, 0.78) !important;
}

.panel--identity[data-active-identity-tab="items"] .terrain-sprite {
  position: relative !important;
  display: block !important;
  width: clamp(2.9rem, 12.6vw, 3.58rem) !important;
  height: clamp(2rem, 8.8vw, 2.5rem) !important;
  grid-row: auto !important;
  border: 0.08rem solid rgba(139, 164, 108, 0.28) !important;
  border-radius: 0.26rem !important;
  background-image: url("./assets/landforms/terrain-region-sprites.png") !important;
  background-repeat: no-repeat !important;
  background-size: 300% 200% !important;
  image-rendering: pixelated !important;
  overflow: hidden !important;
}

.panel--identity[data-active-identity-tab="items"] .terrain-sprite::before,
.panel--identity[data-active-identity-tab="items"] .terrain-sprite::after,
.panel--identity[data-active-identity-tab="items"] .landform-region-chip i::before,
.panel--identity[data-active-identity-tab="items"] .landform-region-chip i::after {
  content: none !important;
  display: none !important;
}

.panel--identity[data-active-identity-tab="items"] .terrain-sprite--jiangnan {
  background-position: 0 0 !important;
}

.panel--identity[data-active-identity-tab="items"] .terrain-sprite--mountain {
  background-position: 50% 0 !important;
}

.panel--identity[data-active-identity-tab="items"] .terrain-sprite--northwest {
  background-position: 100% 0 !important;
}

.panel--identity[data-active-identity-tab="items"] .terrain-sprite--coast {
  background-position: 0 100% !important;
}

.panel--identity[data-active-identity-tab="items"] .terrain-sprite--plateau {
  background-position: 50% 100% !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip strong {
  display: block !important;
  max-width: 100% !important;
  color: #5f714e !important;
  font-size: clamp(0.68rem, 3vw, 0.82rem) !important;
  line-height: 1.08 !important;
  overflow: hidden !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip em {
  display: none !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-shelf {
  display: grid !important;
  gap: clamp(0.62rem, 3vw, 0.82rem) !important;
  width: 100% !important;
  margin: clamp(0.72rem, 3.2vw, 0.94rem) 0 0 !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-region-toggle {
  min-height: clamp(2.35rem, 9vw, 2.72rem) !important;
  padding: 0 clamp(0.64rem, 3vw, 0.82rem) !important;
  border-radius: 0.62rem !important;
  background: #fff7d8 !important;
  box-shadow: none !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-region-toggle h4,
.panel--identity[data-active-identity-tab="items"] .specialty-region-toggle em {
  color: #5f714e !important;
  font-size: clamp(0.78rem, 3.4vw, 0.94rem) !important;
  line-height: 1.1 !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-region-toggle span,
.panel--identity[data-active-identity-tab="items"] .specialty-place,
.panel--identity[data-active-identity-tab="items"] .rarity-pips {
  display: none !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-region-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(0.5rem, 2.5vw, 0.68rem) !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-card,
.panel--identity[data-active-identity-tab="items"] .specialty-empty {
  min-height: clamp(5.6rem, 22vw, 6.8rem) !important;
  padding: clamp(0.52rem, 2.6vw, 0.7rem) !important;
  border-radius: 0.62rem !important;
  background: #f7f4cf !important;
  box-shadow: none !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-card strong,
.panel--identity[data-active-identity-tab="items"] .specialty-empty {
  color: #6a7255 !important;
  font-size: clamp(0.74rem, 3.1vw, 0.88rem) !important;
  line-height: 1.18 !important;
}

@media (max-width: 420px) {
  .panel--identity[data-active-identity-tab="items"] .landform-region-strip {
    gap: 0.42rem !important;
  }

  .panel--identity[data-active-identity-tab="items"] .seed-pouch-card {
    grid-template-columns: clamp(2.82rem, 12vw, 3.15rem) minmax(0, 1fr) auto !important;
  }
}

/* Passport nickname edit pencil: clear pixel pencil instead of a tiny leaf mark. */
.panel--identity #editIdentityName {
  width: clamp(1.76rem, 6.2vw, 2.08rem) !important;
  min-width: clamp(1.76rem, 6.2vw, 2.08rem) !important;
  height: clamp(1.76rem, 6.2vw, 2.08rem) !important;
  min-height: clamp(1.76rem, 6.2vw, 2.08rem) !important;
}

.panel--identity #editIdentityName span {
  position: relative !important;
  display: block !important;
  width: 1.46rem !important;
  height: 1.46rem !important;
  transform: rotate(-38deg) !important;
  transform-origin: center !important;
}

.panel--identity #editIdentityName span::before,
.panel--identity #editIdentityName span::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  image-rendering: pixelated !important;
}

.panel--identity #editIdentityName span::before {
  left: 0.1rem !important;
  top: 0.58rem !important;
  width: 1.02rem !important;
  height: 0.3rem !important;
  background: #d9ad62 !important;
  box-shadow:
    -0.22rem 0 0 #6f5941,
    1.02rem 0 0 #78975b,
    1.2rem 0 0 #e9d68b !important;
}

.panel--identity #editIdentityName span::after {
  left: 0.18rem !important;
  top: 0.66rem !important;
  width: 0.74rem !important;
  height: 0.08rem !important;
  background: #fff1b8 !important;
  box-shadow: 0.96rem 0 0 #5f7f4f !important;
}

/* Final mobile atlas fit repair: keep the dex readable on phone. */
@media (max-width: 720px) {
  .panel--identity[data-active-identity-tab="atlas"] .identity-pages,
  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page:not(.is-hidden),
  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-book-layout,
  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-pages {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-pages {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
    grid-template-areas:
      "summary"
      "tabs"
      "collected"
      "locked" !important;
    gap: clamp(0.7rem, 3.2vw, 0.92rem) !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-summary,
  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-bookmarks,
  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-summary {
    grid-area: summary !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(3rem, 13vw, 3.5rem) !important;
    gap: clamp(0.54rem, 2.6vw, 0.74rem) !important;
    padding: clamp(0.68rem, 3vw, 0.9rem) !important;
    overflow: visible !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-bookmarks {
    grid-area: tabs !important;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: clamp(4.35rem, 27vw, 5.35rem) !important;
    grid-template-columns: none !important;
    gap: clamp(0.42rem, 2vw, 0.58rem) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0 0.18rem !important;
    scroll-snap-type: x proximity !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-card--collected {
    grid-area: collected !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-card--locked {
    grid-area: locked !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-card {
    display: block !important;
    padding: clamp(0.72rem, 3.4vw, 0.96rem) !important;
    overflow: visible !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-list,
  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .locked-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-list {
    display: block !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-list .atlas-storybook,
  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-storybook {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-story-page--portrait {
    border-right: 0 !important;
    border-bottom: 0.1rem solid rgba(134, 112, 70, 0.18) !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .locked-grid {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-auto-columns: unset !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(0.56rem, 2.8vw, 0.78rem) !important;
    padding-bottom: 0 !important;
  }
}

/* Final expedition picker and squad fit guard */
.panel--expedition.is-open .map-pack-picker > p,
.panel--expedition.is-open .map-pack-option span {
  display: none !important;
}

.panel--expedition.is-open .map-pack-toggle,
.panel--expedition.is-open .map-pack-option {
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-height: clamp(2.72rem, 10.6vw, 3.18rem) !important;
  padding-block: clamp(0.46rem, 2.1vw, 0.62rem) !important;
}

.panel--expedition.is-open .map-pack-toggle,
.panel--expedition.is-open .map-pack-option strong {
  color: #5d714a !important;
  font-size: clamp(0.9rem, 3.4vw, 1.06rem) !important;
  font-weight: 950 !important;
  line-height: 1.12 !important;
}

.panel--expedition.is-open .expedition-squad header h3::after {
  content: none !important;
  display: none !important;
}

.panel--expedition.is-open .squad-slots {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(0, 1fr) !important;
  justify-content: stretch !important;
  justify-items: center !important;
  gap: clamp(0.52rem, 2.4vw, 0.72rem) !important;
  overflow: visible !important;
}

.panel--expedition.is-open .squad-slot {
  justify-self: center !important;
  width: min(100%, var(--squad-slot-size-final)) !important;
  max-width: var(--squad-slot-size-final) !important;
}

/* Passport share visibility repair */
.panel--identity .passport-share-card {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: clamp(5.2rem, 12vh, 7rem) !important;
  z-index: 140 !important;
  display: grid !important;
  width: min(calc(100vw - 2rem), 20rem) !important;
  max-width: min(calc(100vw - 2rem), 20rem) !important;
  box-sizing: border-box !important;
  transform: translateX(-50%) !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: #fff4cf !important;
  box-shadow: none !important;
}

.panel--identity .passport-share-card.is-hidden {
  display: none !important;
}

/* Map radar left rail alignment */
.panel--map.is-open .panel-header {
  justify-items: stretch !important;
}

.panel--map.is-open .panel-header h2,
.panel--map.is-open .panel-header p {
  text-align: left !important;
}

.panel--map.is-open .map-results {
  justify-items: stretch !important;
}

.panel--map.is-open .map-results > p {
  display: grid !important;
  place-items: start !important;
  align-content: center !important;
  text-align: left !important;
}

/* Expedition status, garden selector and squad spacing lock */
.panel--expedition.is-open .adventure-content {
  --expedition-flow-gap: clamp(0.72rem, 3.2vw, 0.92rem);
  --expedition-squad-inset: clamp(0.72rem, 3.4vw, 1rem);
  gap: var(--expedition-flow-gap) !important;
}

.panel--expedition.is-open .adventure-status {
  order: 1 !important;
  margin-bottom: 0 !important;
}

.panel--expedition.is-open .map-pack-picker {
  order: 2 !important;
  align-self: stretch !important;
  margin-block: 0 !important;
}

.panel--expedition.is-open .together-card {
  order: 3 !important;
}

.panel--expedition.is-open .expedition-planning {
  order: 4 !important;
}

.panel--expedition.is-open .map-pack-toggle,
.panel--expedition.is-open .map-pack-option {
  min-width: 0 !important;
  padding-inline: var(--expedition-squad-inset) clamp(2.2rem, 8vw, 2.7rem) !important;
  box-sizing: border-box !important;
}

.panel--expedition.is-open .expedition-squad {
  --squad-slot-size-final: clamp(3rem, 13.2vw, 3.45rem);
  display: grid !important;
  gap: clamp(0.58rem, 2.8vw, 0.78rem) !important;
  padding: clamp(0.62rem, 2.8vw, 0.82rem) 0 clamp(0.82rem, 3.4vw, 1.08rem) !important;
  overflow: visible !important;
}

.panel--expedition.is-open .expedition-squad header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(0.42rem, 2vw, 0.58rem) !important;
  padding-inline: var(--expedition-squad-inset) !important;
  box-sizing: border-box !important;
}

.panel--expedition.is-open .expedition-squad h3,
.panel--expedition.is-open .expedition-squad p {
  min-width: 0 !important;
  margin: 0 !important;
  line-height: 1.18 !important;
}

.panel--expedition.is-open .expedition-squad h3 {
  overflow: hidden !important;
  color: #5f6f4d !important;
  font-size: clamp(0.98rem, 3.8vw, 1.12rem) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.panel--expedition.is-open .expedition-squad p {
  color: #7c8760 !important;
  font-size: clamp(0.7rem, 2.6vw, 0.8rem) !important;
  text-align: right !important;
}

.panel--expedition.is-open .squad-slots,
.panel--expedition.is-open .squad-picker {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding-inline: var(--expedition-squad-inset) !important;
  box-sizing: border-box !important;
  scroll-padding-inline: var(--expedition-squad-inset) !important;
}

.panel--expedition.is-open .squad-slots {
  grid-auto-columns: var(--squad-slot-size-final) !important;
  gap: clamp(0.72rem, 3vw, 0.96rem) !important;
  padding-top: 0.08rem !important;
  padding-bottom: clamp(1.26rem, 5.4vw, 1.62rem) !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

.panel--expedition.is-open .squad-slot {
  width: var(--squad-slot-size-final) !important;
  height: var(--squad-slot-size-final) !important;
  min-width: var(--squad-slot-size-final) !important;
  overflow: visible !important;
}

.panel--expedition.is-open .squad-slot img {
  width: 82% !important;
  height: 82% !important;
  object-fit: contain !important;
}

.panel--expedition.is-open .squad-slot span {
  top: calc(100% + 0.24rem) !important;
  left: 50% !important;
  width: max-content !important;
  max-width: calc(var(--squad-slot-size-final) + 0.5rem) !important;
  transform: translateX(-50%) !important;
  color: #6b7954 !important;
  font-size: clamp(0.6rem, 2.35vw, 0.7rem) !important;
}

.panel--expedition.is-open .squad-picker {
  gap: clamp(0.46rem, 2vw, 0.62rem) !important;
  padding-bottom: clamp(0.18rem, 1.2vw, 0.28rem) !important;
}

.panel--expedition.is-open .squad-picker-option {
  min-width: 0 !important;
  padding: clamp(0.38rem, 1.8vw, 0.52rem) clamp(0.28rem, 1.4vw, 0.42rem) !important;
  overflow: hidden !important;
}

.panel--expedition.is-open .squad-picker-option img {
  width: clamp(2.1rem, 8.4vw, 2.5rem) !important;
  height: clamp(2.1rem, 8.4vw, 2.5rem) !important;
  object-fit: contain !important;
}

.panel--expedition.is-open .squad-picker-option span {
  max-width: 100% !important;
  overflow: hidden !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Expedition expanded garden list collision fix */
.panel--expedition.is-open .adventure-status {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(0.58rem, 2.6vw, 0.78rem) !important;
  min-height: clamp(2.28rem, 8.8vw, 2.72rem) !important;
  padding: clamp(0.42rem, 1.9vw, 0.56rem) var(--expedition-squad-inset) !important;
  overflow: hidden !important;
}

.panel--expedition.is-open .adventure-status span,
.panel--expedition.is-open .adventure-status strong {
  min-width: 0 !important;
  margin: 0 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

.panel--expedition.is-open .adventure-status span {
  justify-self: start !important;
}

.panel--expedition.is-open .adventure-status strong {
  justify-self: end !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-align: right !important;
  text-overflow: ellipsis !important;
}

.panel--expedition.is-open .map-pack-picker {
  display: grid !important;
  gap: clamp(0.64rem, 2.9vw, 0.86rem) !important;
  overflow: visible !important;
}

.panel--expedition.is-open .map-pack-picker.is-expanded {
  margin-bottom: clamp(0.72rem, 3.2vw, 0.96rem) !important;
}

.panel--expedition.is-open .map-pack-toggle,
.panel--expedition.is-open .map-pack-option {
  display: grid !important;
  align-content: center !important;
  min-height: clamp(3.24rem, 12.2vw, 3.82rem) !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.panel--expedition.is-open .map-pack-option strong,
.panel--expedition.is-open .map-pack-option span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.panel--expedition.is-open .map-pack-option span {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  white-space: normal !important;
}

.panel--expedition.is-open .expedition-planning {
  margin-top: 0 !important;
}

/* Expedition picker region-only mode and squad alignment repair */
.panel--expedition.is-open .map-pack-picker > p,
.panel--expedition.is-open .map-pack-option span {
  display: none !important;
}

.panel--expedition.is-open .map-pack-toggle,
.panel--expedition.is-open .map-pack-option {
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-height: clamp(2.72rem, 10.6vw, 3.18rem) !important;
  padding-block: clamp(0.46rem, 2.1vw, 0.62rem) !important;
}

.panel--expedition.is-open .map-pack-toggle,
.panel--expedition.is-open .map-pack-option strong {
  color: #5d714a !important;
  font-size: clamp(0.9rem, 3.4vw, 1.06rem) !important;
  font-weight: 950 !important;
  line-height: 1.12 !important;
}

.panel--expedition.is-open .expedition-squad header h3::after {
  content: none !important;
  display: none !important;
}

.panel--expedition.is-open .expedition-squad {
  overflow: hidden !important;
}

.panel--expedition.is-open .squad-slots {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(0, 1fr) !important;
  justify-content: stretch !important;
  justify-items: center !important;
  gap: clamp(0.52rem, 2.4vw, 0.72rem) !important;
  overflow: visible !important;
}

.panel--expedition.is-open .squad-slot {
  justify-self: center !important;
  width: min(100%, var(--squad-slot-size-final)) !important;
  max-width: var(--squad-slot-size-final) !important;
}

.panel--expedition.is-open .squad-slot img {
  transform: none !important;
}

/* Passport signature inline edit: double-click edits in place, without adding a second line. */
.panel--identity .identity-signature {
  position: relative !important;
  display: block !important;
  min-height: clamp(1.68rem, 6vw, 2.15rem) !important;
  overflow: hidden !important;
}

.panel--identity .identity-signature p {
  display: block !important;
  width: 100% !important;
  min-height: clamp(1.68rem, 6vw, 2.15rem) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.panel--identity .identity-signature .identity-inline-input--bio {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: clamp(1.68rem, 6vw, 2.15rem) !important;
  margin: 0 !important;
  padding: 0 0 0.16rem !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

.panel--identity .identity-signature .identity-inline-input--bio.is-hidden {
  display: none !important;
}

.panel--identity .identity-signature.is-editing p {
  visibility: hidden !important;
}

.panel--identity .identity-signature.is-editing .identity-inline-input--bio {
  display: block !important;
}

/* Expedition selector and squad fit: garden choice sits between status and squad. */
.panel--expedition.is-open .adventure-content {
  --expedition-inner-gap: clamp(0.58rem, 2.8vw, 0.82rem);
}

.panel--expedition.is-open .adventure-status {
  order: 1 !important;
}

.panel--expedition.is-open .map-pack-picker {
  order: 2 !important;
  margin-block: 0 !important;
}

.panel--expedition.is-open .together-card {
  order: 3 !important;
}

.panel--expedition.is-open .expedition-planning {
  order: 4 !important;
}

.panel--expedition.is-open .quest-section {
  order: 5 !important;
}

.panel--expedition.is-open .expedition-loot {
  order: 6 !important;
}

.panel--expedition.is-open .map-pack-toggle {
  justify-items: start !important;
  padding-inline: var(--expedition-inner-gap) clamp(2.2rem, 8vw, 2.64rem) !important;
  text-align: left !important;
}

.panel--expedition.is-open .expedition-squad {
  gap: clamp(0.62rem, 2.8vw, 0.82rem) !important;
  padding-bottom: clamp(0.5rem, 2.5vw, 0.72rem) !important;
}

.panel--expedition.is-open .expedition-squad header,
.panel--expedition.is-open .squad-slots,
.panel--expedition.is-open .squad-picker,
.panel--expedition.is-open .duration-picker {
  padding-inline: var(--expedition-inner-gap) !important;
  box-sizing: border-box !important;
}

.panel--expedition.is-open .expedition-squad header {
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) !important;
  column-gap: clamp(0.48rem, 2.2vw, 0.66rem) !important;
}

.panel--expedition.is-open .squad-slots {
  padding-bottom: clamp(0.28rem, 1.5vw, 0.42rem) !important;
}

.panel--expedition.is-open .duration-picker {
  margin-top: clamp(0.1rem, 0.8vw, 0.18rem) !important;
}

/* Passport name edit marker: simple leaf tag, clear tap target, inline rename. */
.panel--identity .identity-name-row {
  align-items: center !important;
}

.panel--identity .identity-name-row h3,
.panel--identity .identity-name-row input {
  align-self: center !important;
  color: #5f543f !important;
}

.panel--identity .identity-name-row input,
.panel--identity #identityNameInput {
  min-height: clamp(1.9rem, 7vw, 2.28rem) !important;
  padding: 0 0 0.12rem !important;
  border: 0 !important;
  border-bottom: 0.12rem solid rgba(116, 150, 86, 0.56) !important;
  background: transparent !important;
  outline: none !important;
  font: inherit !important;
  font-size: clamp(1.42rem, 5.3vw, 1.72rem) !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
}

.panel--identity #editIdentityName {
  flex: 0 0 clamp(1.62rem, 6vw, 1.9rem) !important;
  width: clamp(1.62rem, 6vw, 1.9rem) !important;
  min-width: clamp(1.62rem, 6vw, 1.9rem) !important;
  height: clamp(1.62rem, 6vw, 1.9rem) !important;
  min-height: clamp(1.62rem, 6vw, 1.9rem) !important;
  margin-left: clamp(0.18rem, 0.9vw, 0.28rem) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

.panel--identity #editIdentityName span {
  position: relative !important;
  width: 1.36rem !important;
  height: 1.36rem !important;
  transform: none !important;
}

.panel--identity #editIdentityName span::before,
.panel--identity #editIdentityName span::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  image-rendering: pixelated !important;
}

.panel--identity #editIdentityName span::before {
  left: 0.2rem !important;
  top: 0.2rem !important;
  width: 0.82rem !important;
  height: 0.82rem !important;
  background: #9fcd75 !important;
  border-radius: 65% 35% 65% 35% !important;
}

.panel--identity #editIdentityName span::after {
  left: 0.62rem !important;
  top: 0.82rem !important;
  width: 0.46rem !important;
  height: 0.12rem !important;
  background: #6f8f5b !important;
  box-shadow:
    0 0.26rem 0 #6f8f5b,
    -0.34rem -0.3rem 0 #fff2b6 !important;
}

.panel--identity .identity-name-row.is-editing #editIdentityName {
  display: none !important;
}

/* Backpack tabs without selection boxes: keep only icon and label states. */
.panel--identity .identity-tabs button,
.panel--identity .identity-tabs button.is-active {
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.panel--identity .identity-tabs button::before,
.panel--identity .identity-tabs button::after,
.panel--identity .identity-tabs button.is-active::before,
.panel--identity .identity-tabs button.is-active::after {
  content: none !important;
  display: none !important;
}

.panel--identity .identity-tabs button b {
  color: #7a835e !important;
}

.panel--identity .identity-tabs button.is-active b {
  color: #4f7a47 !important;
}

/* Expedition squad mobile fit: keep team copy and choices away from card edges. */
@media (max-width: 720px) {
  .panel--expedition.is-open .expedition-squad {
    --squad-safe-inline: clamp(0.58rem, 3vw, 0.86rem);
    gap: clamp(0.42rem, 2vw, 0.58rem) !important;
    overflow: hidden !important;
  }

  .panel--expedition.is-open .expedition-squad header {
    display: grid !important;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) !important;
    align-items: baseline !important;
    column-gap: clamp(0.42rem, 2vw, 0.6rem) !important;
    padding-inline: var(--squad-safe-inline) !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  .panel--expedition.is-open .expedition-squad h3,
  .panel--expedition.is-open .expedition-squad p {
    min-width: 0 !important;
    margin: 0 !important;
    line-height: 1.1 !important;
  }

  .panel--expedition.is-open .expedition-squad h3 {
    font-size: clamp(0.92rem, 3.7vw, 1.08rem) !important;
    white-space: nowrap !important;
  }

  .panel--expedition.is-open .expedition-squad p {
    overflow: hidden !important;
    color: #74845d !important;
    font-size: clamp(0.68rem, 2.65vw, 0.78rem) !important;
    text-align: right !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .panel--expedition.is-open .squad-slots,
  .panel--expedition.is-open .squad-picker {
    padding-inline: var(--squad-safe-inline) !important;
    scroll-padding-inline: var(--squad-safe-inline) !important;
    box-sizing: border-box !important;
  }

  .panel--expedition.is-open .squad-slot span,
  .panel--expedition.is-open .squad-picker-option span {
    max-width: calc(100% - 0.24rem) !important;
    padding-inline: 0.08rem !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: clamp(0.58rem, 2.4vw, 0.68rem) !important;
    line-height: 1.05 !important;
  }

  .panel--expedition.is-open .squad-picker-option {
    padding-inline: 0.2rem !important;
  }
}

/* Expedition garden selector: the garden tabs belong inside adventure planning. */
.panel--expedition .map-pack-picker {
  display: grid !important;
  width: 100% !important;
  gap: clamp(0.42rem, 2vw, 0.58rem) !important;
  margin-block: clamp(0.2rem, 1.4vw, 0.36rem) clamp(0.46rem, 2vw, 0.66rem) !important;
}

.panel--expedition .map-pack-picker > p {
  margin: 0 !important;
  color: #7d875f !important;
  font-size: clamp(0.7rem, 2.7vw, 0.82rem) !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
}

.panel--expedition .map-pack-toggle {
  display: grid !important;
  width: 100% !important;
  min-height: clamp(2.3rem, 9.5vw, 2.85rem) !important;
  padding: 0.48rem clamp(2rem, 7vw, 2.4rem) 0.48rem 0.72rem !important;
  border: 0.12rem solid rgba(112, 145, 88, 0.72) !important;
  border-radius: 0.62rem !important;
  background: #fff7d8 !important;
  color: #5a6f45 !important;
  font-size: clamp(0.76rem, 3vw, 0.92rem) !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  overflow: hidden !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.panel--expedition .map-pack-toggle::after {
  right: 0.78rem !important;
  color: #78975b !important;
}

.panel--expedition .map-pack-option {
  width: 100% !important;
  min-height: clamp(3.6rem, 14vw, 4.4rem) !important;
  padding: 0.62rem 0.72rem !important;
  border-radius: 0.62rem !important;
  background: #fffbee !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.panel--expedition .map-pack-option strong,
.panel--expedition .map-pack-option span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.panel--expedition .map-pack-option strong {
  color: #526a40 !important;
  font-size: clamp(0.78rem, 3vw, 0.92rem) !important;
  line-height: 1.12 !important;
  white-space: nowrap !important;
}

.panel--expedition .map-pack-option span {
  color: #7b8461 !important;
  font-size: clamp(0.66rem, 2.55vw, 0.78rem) !important;
  line-height: 1.22 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

/* Items page seed fit: seed pouch stands alone, no atlas copy underneath it. */
.panel--identity[data-active-identity-tab="items"] .seed-pouch-section {
  margin-top: clamp(1.05rem, 4.8vw, 1.48rem) !important;
  padding-bottom: clamp(0.72rem, 3.8vw, 1rem) !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card {
  grid-template-columns: clamp(3rem, 12.4vw, 3.46rem) minmax(0, 1fr) clamp(2.36rem, 9.6vw, 2.78rem) !important;
  align-items: center !important;
  min-height: clamp(4.25rem, 17.4vw, 5rem) !important;
  padding: clamp(0.62rem, 2.9vw, 0.82rem) clamp(0.68rem, 3.2vw, 0.9rem) !important;
  column-gap: clamp(0.54rem, 2.6vw, 0.72rem) !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card > span {
  width: clamp(2.78rem, 11.6vw, 3.24rem) !important;
  height: clamp(2.78rem, 11.6vw, 3.24rem) !important;
  justify-self: center !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card strong {
  color: #5d6f48 !important;
  font-size: clamp(0.92rem, 3.5vw, 1.08rem) !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card p {
  color: #7b8762 !important;
  font-size: clamp(0.62rem, 2.42vw, 0.72rem) !important;
  line-height: 1.18 !important;
  white-space: normal !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card button {
  width: clamp(2.18rem, 8.8vw, 2.5rem) !important;
  min-width: clamp(2.18rem, 8.8vw, 2.5rem) !important;
  height: clamp(2.18rem, 8.8vw, 2.5rem) !important;
  justify-self: end !important;
}

/* Current pass: atlas stays book-like, landform arrows live on the panorama edges. */
.panel--identity[data-active-identity-tab="items"] .landform-overview {
  --landform-stage-pad: clamp(0.68rem, 3.2vw, 0.92rem);
  --landform-stage-height: clamp(9.8rem, 43vw, 13.35rem);
  --landform-arrow-top: clamp(5.58rem, 24.6vw, 7.58rem);
  position: relative !important;
  display: grid !important;
  gap: clamp(0.78rem, 3.4vw, 1.02rem) !important;
  padding: var(--landform-stage-pad) !important;
  overflow: hidden !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-panorama {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: var(--landform-stage-height) !important;
  min-height: var(--landform-stage-height) !important;
  aspect-ratio: auto !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain !important;
  scroll-behavior: smooth !important;
  scroll-snap-type: x proximity !important;
  scrollbar-width: none !important;
  border-radius: 0.86rem !important;
  background: #e7f1cb !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-panorama img {
  display: block !important;
  width: max(46rem, 230%) !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: left center !important;
  image-rendering: pixelated !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-switcher {
  position: absolute !important;
  z-index: 5 !important;
  left: calc(var(--landform-stage-pad) + 0.28rem) !important;
  right: calc(var(--landform-stage-pad) + 0.28rem) !important;
  top: var(--landform-arrow-top) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  transform: translateY(-50%) !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-switcher button {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: clamp(2.26rem, 9.5vw, 2.74rem) !important;
  min-width: clamp(2.26rem, 9.5vw, 2.74rem) !important;
  height: clamp(2.26rem, 9.5vw, 2.74rem) !important;
  min-height: clamp(2.26rem, 9.5vw, 2.74rem) !important;
  padding: 0 !important;
  border: 0.13rem solid rgba(114, 144, 88, 0.58) !important;
  border-radius: 0.66rem !important;
  background: rgba(249, 243, 202, 0.92) !important;
  color: transparent !important;
  font-size: 0 !important;
  pointer-events: auto !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-switcher button::before {
  content: "" !important;
  display: block !important;
  width: 0.62rem !important;
  height: 0.62rem !important;
  border-left: 0.18rem solid #66824f !important;
  border-bottom: 0.18rem solid #66824f !important;
}

.panel--identity[data-active-identity-tab="items"] #landformPrev::before {
  transform: rotate(45deg) translate(0.06rem, -0.04rem) !important;
}

.panel--identity[data-active-identity-tab="items"] #landformNext::before {
  transform: rotate(-135deg) translate(0.06rem, -0.04rem) !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-strip {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: clamp(5.35rem, 26vw, 6.45rem) !important;
  gap: clamp(0.5rem, 2.4vw, 0.66rem) !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0.06rem 0 0.1rem !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-strip::-webkit-scrollbar {
  display: none !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip {
  min-width: 0 !important;
  min-height: clamp(4.5rem, 18vw, 5.15rem) !important;
  padding: clamp(0.42rem, 1.9vw, 0.54rem) !important;
  border: 0 !important;
  border-radius: 0.84rem !important;
  background: #eef6d7 !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip.is-active {
  background: #fff0b8 !important;
  outline: 0.12rem solid rgba(222, 176, 65, 0.46) !important;
}

.panel--identity .identity-atlas-page .atlas-pages,
.panel--atlas .atlas-pages {
  gap: clamp(0.74rem, 3.2vw, 1rem) !important;
}

.panel--identity .identity-atlas-page .atlas-card,
.panel--atlas .atlas-card {
  padding: clamp(0.72rem, 3vw, 0.95rem) !important;
}

.panel--identity .identity-atlas-page .atlas-card--locked,
.panel--atlas .atlas-card--locked {
  position: relative !important;
  overflow: hidden !important;
}

.panel--identity .identity-atlas-page .atlas-page-controls,
.panel--atlas .atlas-page-controls {
  position: absolute !important;
  z-index: 4 !important;
  left: clamp(0.5rem, 2.3vw, 0.68rem) !important;
  right: clamp(0.5rem, 2.3vw, 0.68rem) !important;
  top: 50% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
  transform: translateY(-50%) !important;
}

.panel--identity .identity-atlas-page .atlas-page-controls button,
.panel--atlas .atlas-page-controls button {
  pointer-events: auto !important;
  width: clamp(2rem, 8.4vw, 2.36rem) !important;
  min-width: clamp(2rem, 8.4vw, 2.36rem) !important;
  height: clamp(2rem, 8.4vw, 2.36rem) !important;
  min-height: clamp(2rem, 8.4vw, 2.36rem) !important;
  background: rgba(247, 241, 203, 0.92) !important;
  outline: 0.1rem solid rgba(115, 143, 90, 0.36) !important;
}

.panel--identity .identity-atlas-page .atlas-page-controls span,
.panel--atlas .atlas-page-controls span {
  display: none !important;
}

.panel--identity .identity-atlas-page .locked-grid,
.panel--atlas .locked-grid {
  padding-inline: clamp(2.3rem, 9.8vw, 2.82rem) !important;
}

.panel--identity .identity-atlas-page .atlas-story-page,
.panel--atlas .atlas-story-page {
  min-height: clamp(12rem, 50vw, 15rem) !important;
}

@media (max-width: 420px) {
  .panel--identity[data-active-identity-tab="items"] .landform-panorama img {
    width: max(40rem, 250%) !important;
  }

  .panel--identity .identity-atlas-page .atlas-storybook h3,
  .panel--atlas .atlas-storybook h3 {
    font-size: clamp(0.86rem, 3.55vw, 1rem) !important;
  }
}

/* Final items/atlas reduction: full pictures first, fewer labels, calmer spacing. */
.panel--identity[data-active-identity-tab="items"] .seed-pouch-section {
  margin-top: clamp(2.4rem, 11vw, 3.4rem) !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-overview-copy,
.panel--identity[data-active-identity-tab="items"] .specialty-region-toggle span,
.panel--identity[data-active-identity-tab="items"] .specialty-region-toggle em,
.panel--identity[data-active-identity-tab="items"] .specialty-card .specialty-icon,
.panel--identity[data-active-identity-tab="items"] .specialty-card .rarity-pips,
.panel--identity[data-active-identity-tab="items"] .specialty-card .specialty-place,
.panel--identity[data-active-identity-tab="items"] .seed-pouch-card p,
.panel--identity[data-active-identity-tab="items"] .seed-pouch-card button {
  display: none !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-region-toggle {
  min-height: 0 !important;
  padding: 0.42rem 0.1rem 0.28rem !important;
  border: 0 !important;
  background: transparent !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-region-toggle::after {
  right: 0.1rem !important;
  width: 0.72rem !important;
  height: 0.72rem !important;
  opacity: 0.56 !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-region-toggle h4 {
  color: #637451 !important;
  font-size: clamp(1rem, 3.9vw, 1.2rem) !important;
  line-height: 1.08 !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-region-grid {
  gap: clamp(0.76rem, 3.4vw, 1rem) !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-card {
  grid-template-columns: clamp(6.2rem, 29vw, 7.7rem) minmax(0, 1fr) !important;
  gap: clamp(0.72rem, 3.2vw, 0.94rem) !important;
  min-height: 0 !important;
  padding: clamp(0.66rem, 3vw, 0.88rem) !important;
  border: 0 !important;
  border-radius: 0.88rem !important;
  background: #f2f7dd !important;
  box-shadow: none !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-card .specialty-scene {
  width: clamp(6.2rem, 29vw, 7.7rem) !important;
  height: clamp(5.72rem, 26.5vw, 7.02rem) !important;
  border-radius: 0.82rem !important;
  background-image: url("./assets/landforms/terrain-region-sprites.png") !important;
  background-repeat: no-repeat !important;
  background-size: 300% 200% !important;
  background-position: 0 0 !important;
  filter: brightness(1.12) saturate(0.92) contrast(0.96) !important;
  image-rendering: pixelated !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-card > div {
  display: grid !important;
  min-width: 0 !important;
  align-content: center !important;
  gap: 0.1rem !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-card strong {
  max-width: 100% !important;
  overflow: hidden !important;
  color: #617252 !important;
  font-size: clamp(0.9rem, 3.5vw, 1.08rem) !important;
  line-height: 1.12 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-card--locked strong {
  color: rgba(97, 114, 82, 0.72) !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-scene--mountain {
  background-position: 50% 0 !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-scene--northwest {
  background-position: 100% 0 !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-scene--coast {
  background-position: 0 100% !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-scene--plateau {
  background-position: 50% 100% !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip i,
.panel--identity[data-active-identity-tab="items"] .seed-pouch-card > span {
  background-image: url("./assets/landforms/terrain-region-sprites.png") !important;
  background-repeat: no-repeat !important;
  background-size: 300% 200% !important;
  filter: brightness(1.12) saturate(0.92) contrast(0.96) !important;
  image-rendering: pixelated !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip i {
  width: clamp(4.5rem, 19vw, 5.25rem) !important;
  height: clamp(4.12rem, 17.2vw, 4.82rem) !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip {
  grid-template-rows: clamp(4.18rem, 17.5vw, 4.92rem) auto !important;
  min-width: clamp(5.85rem, 25vw, 6.8rem) !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip em {
  display: none !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip--mountain i {
  background-position: 50% 0 !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip--northwest i {
  background-position: 100% 0 !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip--coast i {
  background-position: 0 100% !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip--plateau i {
  background-position: 50% 100% !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card {
  grid-template-columns: clamp(6.2rem, 29vw, 7.7rem) minmax(0, 1fr) !important;
  padding: clamp(0.66rem, 3vw, 0.88rem) !important;
  border: 0 !important;
  border-radius: 0.88rem !important;
  background: #f2f7dd !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card > span {
  width: clamp(6.2rem, 29vw, 7.7rem) !important;
  height: clamp(5.72rem, 26.5vw, 7.02rem) !important;
  border-radius: 0.82rem !important;
  background-position: 100% 100% !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card strong {
  color: #617252 !important;
  font-size: clamp(1rem, 3.9vw, 1.18rem) !important;
}

.panel--identity .identity-atlas-page .atlas-summary,
.panel--identity .identity-atlas-page .atlas-region-copy span,
.panel--identity .identity-atlas-page .atlas-region-copy i,
.panel--identity .identity-atlas-page .atlas-region-preview,
.panel--identity .identity-atlas-page .atlas-region-lock,
.panel--atlas .atlas-summary,
.panel--atlas .atlas-region-copy span,
.panel--atlas .atlas-region-copy i,
.panel--atlas .atlas-region-preview,
.panel--atlas .atlas-region-lock {
  display: none !important;
}

.panel--identity .identity-atlas-page .atlas-bookmarks,
.panel--atlas .atlas-bookmarks {
  gap: clamp(0.52rem, 2.5vw, 0.72rem) !important;
  padding: 0.16rem 0.04rem 0.3rem !important;
}

.panel--identity .identity-atlas-page .atlas-region-card,
.panel--atlas .atlas-region-card {
  min-height: clamp(2.72rem, 11vw, 3.3rem) !important;
  padding: clamp(0.52rem, 2.3vw, 0.7rem) !important;
  border: 0 !important;
  border-radius: 0.78rem !important;
  background: #f2f7dd !important;
}

.panel--identity .identity-atlas-page .atlas-region-card.is-active,
.panel--atlas .atlas-region-card.is-active {
  background: #e4f0c6 !important;
}

.panel--identity .identity-atlas-page .atlas-region-copy,
.panel--atlas .atlas-region-copy {
  display: grid !important;
  place-items: center !important;
}

/* Final pixel-sprite visibility pass: larger, brighter backpack and terrain art. */
.panel--identity .backpack-tab-icon {
  width: clamp(3.05rem, 13.2vw, 3.72rem) !important;
  height: clamp(2.74rem, 11.8vw, 3.28rem) !important;
  min-width: clamp(3.05rem, 13.2vw, 3.72rem) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

.panel--identity .backpack-tab-icon::before {
  content: "" !important;
  display: block !important;
  width: 112% !important;
  height: 112% !important;
  background-image: url("./assets/ui/backpack-tab-sprites.png") !important;
  background-repeat: no-repeat !important;
  background-size: 360% 120% !important;
  background-position: 0 50% !important;
  filter: brightness(1.12) saturate(0.94) contrast(0.96) !important;
  image-rendering: pixelated !important;
}

.panel--identity .backpack-tab-icon img,
.panel--identity .backpack-tab-icon i,
.panel--identity .backpack-tab-icon::after {
  display: none !important;
}

.panel--identity .backpack-tab-icon--atlas::before {
  background-position: 50% 50% !important;
}

.panel--identity .backpack-tab-icon--items::before {
  background-position: 100% 50% !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip i,
.panel--identity[data-active-identity-tab="items"] .specialty-scene,
.panel--identity[data-active-identity-tab="items"] .seed-pouch-card > span {
  background-image: url("./assets/landforms/terrain-region-sprites.png") !important;
  background-repeat: no-repeat !important;
  background-size: 345% 230% !important;
  background-position: 0 0 !important;
  filter: brightness(1.1) saturate(0.92) contrast(0.96) !important;
  image-rendering: pixelated !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip i {
  width: clamp(4.08rem, 17.6vw, 4.82rem) !important;
  height: clamp(3.7rem, 15.8vw, 4.32rem) !important;
  border-radius: 0.68rem !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip {
  grid-template-rows: clamp(3.86rem, 16.4vw, 4.52rem) auto auto !important;
  min-width: clamp(5.58rem, 24vw, 6.45rem) !important;
  padding: clamp(0.42rem, 1.9vw, 0.56rem) !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-card .specialty-scene,
.panel--identity[data-active-identity-tab="items"] .seed-pouch-card > span {
  width: clamp(4.86rem, 20.5vw, 5.72rem) !important;
  height: clamp(3.82rem, 16.2vw, 4.52rem) !important;
  border-radius: 0.7rem !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-card,
.panel--identity[data-active-identity-tab="items"] .seed-pouch-card {
  grid-template-columns: clamp(4.86rem, 20.5vw, 5.72rem) minmax(0, 1fr) auto !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip--mountain i,
.panel--identity[data-active-identity-tab="items"] .specialty-scene--mountain {
  background-position: 50% 0 !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip--northwest i,
.panel--identity[data-active-identity-tab="items"] .specialty-scene--northwest {
  background-position: 100% 0 !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip--coast i,
.panel--identity[data-active-identity-tab="items"] .specialty-scene--coast {
  background-position: 0 100% !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip--plateau i,
.panel--identity[data-active-identity-tab="items"] .specialty-scene--plateau {
  background-position: 50% 100% !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card > span {
  background-position: 100% 100% !important;
}

/* Regional atlas mode: simple Pokédex-like area cards instead of dense habitat tabs. */
.panel--identity .identity-atlas-page .atlas-bookmarks,
.panel--atlas .atlas-bookmarks {
  display: grid !important;
  grid-auto-flow: row !important;
  grid-auto-columns: unset !important;
  grid-template-columns: 1fr !important;
  gap: clamp(0.62rem, 2.6vw, 0.84rem) !important;
  padding: 0 !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
}

.panel--identity .identity-atlas-page .atlas-region-card,
.panel--atlas .atlas-region-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(5.4rem, 0.72fr) minmax(0, 1fr) !important;
  min-height: clamp(5.6rem, 23vw, 7rem) !important;
  padding: clamp(0.68rem, 3vw, 0.9rem) !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0.92rem !important;
  background: #d9f1df !important;
  color: #34706a !important;
  box-shadow: none !important;
}

.panel--identity .identity-atlas-page .atlas-region-card::before,
.panel--atlas .atlas-region-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 -8% 0 45% !important;
  background: rgba(93, 187, 196, 0.18) !important;
  opacity: 0.78 !important;
  pointer-events: none !important;
  transform: skewX(-18deg) !important;
  transform-origin: left center !important;
}

.panel--identity .identity-atlas-page .atlas-region-card.is-active,
.panel--atlas .atlas-region-card.is-active {
  background: #c8eddb !important;
  color: #236c6f !important;
}

.panel--identity .identity-atlas-page .atlas-region-card.is-locked,
.panel--atlas .atlas-region-card.is-locked {
  background: #ccecf0 !important;
  color: #2b7d8e !important;
}

.panel--identity .identity-atlas-page .atlas-region-copy,
.panel--atlas .atlas-region-copy {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  align-content: center !important;
  gap: 0.34rem !important;
  min-width: 0 !important;
  text-align: left !important;
}

.panel--identity .identity-atlas-page .atlas-region-copy b,
.panel--atlas .atlas-region-copy b {
  font-size: clamp(1.18rem, 5.4vw, 1.58rem) !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

.panel--identity .identity-atlas-page .atlas-region-copy i,
.panel--atlas .atlas-region-copy i {
  display: block !important;
  width: min(4.8rem, 68%) !important;
  height: 0.32rem !important;
  overflow: hidden !important;
  border-radius: 0.2rem !important;
  background: rgba(255, 255, 255, 0.9) !important;
}

.panel--identity .identity-atlas-page .atlas-region-copy i em,
.panel--atlas .atlas-region-copy i em {
  display: block !important;
  height: 100% !important;
  background: #58bfa3 !important;
}

.panel--identity .identity-atlas-page .atlas-region-copy span,
.panel--atlas .atlas-region-copy span {
  font-size: clamp(0.88rem, 3.8vw, 1.1rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.panel--identity .identity-atlas-page .atlas-region-preview,
.panel--atlas .atlas-region-preview {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: end !important;
  justify-content: flex-end !important;
  gap: clamp(0.12rem, 1vw, 0.22rem) !important;
  min-width: 0 !important;
}

.panel--identity .identity-atlas-page .atlas-region-preview img,
.panel--atlas .atlas-region-preview img {
  width: clamp(3.2rem, 16vw, 4.65rem) !important;
  height: clamp(3.2rem, 16vw, 4.65rem) !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
}

.panel--identity .identity-atlas-page .atlas-region-card.is-locked .atlas-region-preview img,
.panel--atlas .atlas-region-card.is-locked .atlas-region-preview img {
  filter: brightness(0) saturate(0) opacity(0.28) !important;
}

.panel--identity .identity-atlas-page .atlas-region-lock,
.panel--atlas .atlas-region-lock {
  position: absolute !important;
  left: clamp(0.68rem, 3vw, 0.9rem) !important;
  bottom: clamp(0.58rem, 2.5vw, 0.76rem) !important;
  z-index: 3 !important;
  display: grid !important;
  place-items: center !important;
  width: clamp(1.58rem, 6.8vw, 1.96rem) !important;
  height: clamp(1.58rem, 6.8vw, 1.96rem) !important;
  border-radius: 50% !important;
  border: 0.12rem solid rgba(43, 125, 142, 0.42) !important;
  color: #2b7d8e !important;
  font-size: 0.74rem !important;
  font-weight: 950 !important;
  background: rgba(232, 251, 248, 0.62) !important;
}

.panel--identity .identity-atlas-page .atlas-summary p,
.panel--atlas .atlas-summary p {
  color: #2f7a76 !important;
}

/* Atlas and expedition squad breathing room: final narrow override for mobile fit. */
.panel--identity .identity-atlas-page .atlas-book-layout,
.panel--atlas .atlas-book-layout {
  --atlas-breathing-pad: clamp(0.76rem, 3.5vw, 1.02rem);
}

.panel--identity .identity-atlas-page .atlas-pages,
.panel--atlas .atlas-pages {
  gap: clamp(0.74rem, 3.2vw, 0.98rem) !important;
  padding-inline: clamp(0.04rem, 0.8vw, 0.16rem) !important;
  overflow: visible !important;
}

.panel--identity .identity-atlas-page .atlas-card,
.panel--atlas .atlas-card,
.panel--identity .identity-atlas-page .atlas-story-page,
.panel--atlas .atlas-story-page {
  padding: var(--atlas-breathing-pad) !important;
  box-sizing: border-box !important;
}

.panel--identity .identity-atlas-page .atlas-bookmarks,
.panel--atlas .atlas-bookmarks,
.panel--identity .identity-atlas-page .atlas-list,
.panel--atlas .atlas-list,
.panel--identity .identity-atlas-page .locked-grid,
.panel--atlas .locked-grid {
  padding-inline: clamp(0.08rem, 1vw, 0.18rem) !important;
}

.panel--expedition.is-open .expedition-planning {
  --squad-slot-size-final: clamp(3.08rem, 14.4vw, 3.58rem);
  --squad-row-inset-final: clamp(0.42rem, 2.1vw, 0.58rem);
  --squad-label-space-final: clamp(1.18rem, 5vw, 1.46rem);
  padding: clamp(0.86rem, 3.8vw, 1.08rem) !important;
  gap: clamp(0.72rem, 3.1vw, 0.92rem) !important;
}

.panel--expedition.is-open .expedition-squad {
  gap: clamp(0.56rem, 2.6vw, 0.72rem) !important;
}

.panel--expedition.is-open .expedition-squad header {
  padding-inline: var(--squad-row-inset-final) !important;
}

.panel--expedition.is-open .squad-slots {
  grid-auto-columns: var(--squad-slot-size-final) !important;
  gap: clamp(0.72rem, 3.1vw, 0.98rem) !important;
  padding: 0.2rem var(--squad-row-inset-final) var(--squad-label-space-final) !important;
  box-sizing: border-box !important;
}

.panel--expedition.is-open .squad-slot {
  width: var(--squad-slot-size-final) !important;
  height: var(--squad-slot-size-final) !important;
}

.panel--expedition.is-open .squad-slot span {
  top: calc(100% + 0.24rem) !important;
  max-width: calc(var(--squad-slot-size-final) + 0.5rem) !important;
  color: #687a53 !important;
  font-size: clamp(0.58rem, 2.2vw, 0.68rem) !important;
  line-height: 1.12 !important;
  opacity: 1 !important;
}

.panel--expedition.is-open .squad-slot.is-empty span {
  color: rgba(104, 122, 83, 0.72) !important;
}

.panel--expedition.is-open .duration-picker {
  padding-inline: var(--squad-row-inset-final) !important;
  box-sizing: border-box !important;
}

/* Generated daily quest sprite icons: replace CSS-built symbols with one aligned pixel-art sheet. */
.daily-pixel-icon,
.panel--expedition.is-open .daily-pixel-icon {
  position: relative !important;
  display: grid !important;
  width: clamp(2.42rem, 9.8vw, 2.82rem) !important;
  height: clamp(2.42rem, 9.8vw, 2.82rem) !important;
  min-width: clamp(2.42rem, 9.8vw, 2.82rem) !important;
  padding: 0.12rem !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0.42rem !important;
  background: #f5efc8 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.daily-pixel-icon i,
.daily-pixel-icon i::before,
.daily-pixel-icon i::after,
.panel--expedition.is-open .daily-pixel-icon i,
.panel--expedition.is-open .daily-pixel-icon i::before,
.panel--expedition.is-open .daily-pixel-icon i::after {
  content: "" !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
  filter: none !important;
  opacity: 1 !important;
}

.daily-pixel-icon i,
.panel--expedition.is-open .daily-pixel-icon i {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  height: 100% !important;
  background-color: transparent !important;
  background-image: url("assets/ui/daily-task-sprites.png") !important;
  background-repeat: no-repeat !important;
  background-size: 400% 200% !important;
  image-rendering: pixelated !important;
  transform: none !important;
}

.daily-pixel-icon i::before,
.daily-pixel-icon i::after,
.panel--expedition.is-open .daily-pixel-icon i::before,
.panel--expedition.is-open .daily-pixel-icon i::after {
  display: none !important;
}

.daily-pixel-icon--scan i,
.panel--expedition.is-open .daily-pixel-icon--scan i {
  background-position: 33.333% 0 !important;
}

.daily-pixel-icon--atlas i,
.panel--expedition.is-open .daily-pixel-icon--atlas i {
  background-position: 66.667% 0 !important;
}

.daily-pixel-icon--expedition i,
.daily-pixel-icon--walk i,
.panel--expedition.is-open .daily-pixel-icon--expedition i,
.panel--expedition.is-open .daily-pixel-icon--walk i {
  background-position: 100% 0 !important;
}

.daily-pixel-icon--plant i,
.daily-pixel-icon--water i,
.panel--expedition.is-open .daily-pixel-icon--plant i,
.panel--expedition.is-open .daily-pixel-icon--water i {
  background-position: 33.333% 100% !important;
}

.daily-pixel-icon--task i,
.daily-pixel-icon--friend i,
.panel--expedition.is-open .daily-pixel-icon--task i,
.panel--expedition.is-open .daily-pixel-icon--friend i {
  background-position: 0 100% !important;
}

.daily-pixel-icon--energy i,
.panel--expedition.is-open .daily-pixel-icon--energy i {
  background-position: 66.667% 100% !important;
}

.daily-pixel-icon--seed i,
.panel--expedition.is-open .daily-pixel-icon--seed i {
  background-position: 100% 100% !important;
}

.quest-card > b .daily-pixel-icon,
.panel--expedition.is-open .quest-card > b .daily-pixel-icon,
.panel--expedition.is-open .quest-heading .daily-pixel-icon {
  width: clamp(2.36rem, 9.4vw, 2.72rem) !important;
  height: clamp(2.36rem, 9.4vw, 2.72rem) !important;
  min-width: clamp(2.36rem, 9.4vw, 2.72rem) !important;
}

/* Passport rename pencil: keep it beside the name and draw it on a fixed pixel grid. */
.panel--identity .identity-name-row {
  align-items: center !important;
  gap: clamp(0.22rem, 1vw, 0.34rem) !important;
}

.panel--identity .identity-name-row #editIdentityName {
  position: relative !important;
  display: grid !important;
  flex: 0 0 clamp(1.36rem, 5.2vw, 1.62rem) !important;
  width: clamp(1.36rem, 5.2vw, 1.62rem) !important;
  min-width: clamp(1.36rem, 5.2vw, 1.62rem) !important;
  height: clamp(1.36rem, 5.2vw, 1.62rem) !important;
  min-height: clamp(1.36rem, 5.2vw, 1.62rem) !important;
  margin: 0 !important;
  padding: 0 !important;
  place-items: center !important;
  border: 0 !important;
  background: transparent !important;
  opacity: 1 !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

.panel--identity .identity-name-row #editIdentityName span {
  position: relative !important;
  display: block !important;
  width: 1.06rem !important;
  height: 1.06rem !important;
  transform: none !important;
}

.panel--identity .identity-name-row #editIdentityName span::before,
.panel--identity .identity-name-row #editIdentityName span::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  width: 0.14rem !important;
  height: 0.14rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  image-rendering: pixelated !important;
}

.panel--identity .identity-name-row #editIdentityName span::before {
  left: 0.18rem !important;
  top: 0.72rem !important;
  background: #6f8f5b !important;
  box-shadow:
    0.14rem -0.14rem 0 #6f8f5b,
    0.28rem -0.28rem 0 #6f8f5b,
    0.42rem -0.42rem 0 #d7bb72,
    0.56rem -0.56rem 0 #d7bb72,
    0.7rem -0.7rem 0 #7a6040 !important;
}

.panel--identity .identity-name-row #editIdentityName span::after {
  left: 0.08rem !important;
  top: 0.86rem !important;
  background: #9fcd75 !important;
  box-shadow:
    0.14rem 0 0 #9fcd75,
    0.28rem -0.14rem 0 #5f704d !important;
}

.panel--identity .identity-name-row.is-editing #editIdentityName {
  display: none !important;
}

/* Backpack visual system: generated pixel sprites replace offset CSS drawings. */
.panel--identity .backpack-tab-icon {
  position: relative !important;
  display: grid !important;
  width: clamp(2.56rem, 10.8vw, 3.08rem) !important;
  height: clamp(2.24rem, 9.2vw, 2.72rem) !important;
  min-width: clamp(2.56rem, 10.8vw, 3.08rem) !important;
  padding: 0 !important;
  place-items: center !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

.panel--identity .backpack-tab-icon::before {
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background-image: url("./assets/ui/backpack-tab-sprites.png") !important;
  background-repeat: no-repeat !important;
  background-size: 300% 100% !important;
  background-position: 0 50% !important;
  image-rendering: pixelated !important;
}

.panel--identity .backpack-tab-icon img,
.panel--identity .backpack-tab-icon i,
.panel--identity .backpack-tab-icon::after {
  display: none !important;
}

.panel--identity .backpack-tab-icon--atlas::before {
  background-position: 50% 50% !important;
}

.panel--identity .backpack-tab-icon--items::before {
  background-position: 100% 50% !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-section,
.panel--identity[data-active-identity-tab="items"] .seed-pouch-section {
  width: var(--backpack-content-width) !important;
  max-width: var(--backpack-content-width) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  box-sizing: border-box !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-section {
  display: grid !important;
  gap: clamp(0.72rem, 3.2vw, 0.98rem) !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-section {
  display: grid !important;
  gap: clamp(0.64rem, 2.8vw, 0.86rem) !important;
  margin-top: clamp(1rem, 4.8vw, 1.42rem) !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-section::before,
.panel--identity[data-active-identity-tab="items"] .seed-pouch-card::after {
  content: none !important;
  display: none !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-section h3,
.panel--identity[data-active-identity-tab="items"] .seed-pouch-section h3 {
  display: flex !important;
  align-items: center !important;
  gap: clamp(0.5rem, 2.2vw, 0.68rem) !important;
  margin: 0 !important;
  min-height: clamp(2rem, 8vw, 2.42rem) !important;
  color: #617252 !important;
  font-size: clamp(1.15rem, 4.6vw, 1.38rem) !important;
  line-height: 1.1 !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-overview,
.panel--identity[data-active-identity-tab="items"] .seed-pouch-card {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 0.86rem !important;
  background: #eef6d9 !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-overview {
  padding: clamp(0.72rem, 3.2vw, 0.96rem) !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-strip {
  gap: clamp(0.52rem, 2.6vw, 0.76rem) !important;
  padding: 0.12rem 0.04rem 0.2rem !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip {
  display: grid !important;
  grid-template-rows: clamp(3.2rem, 14vw, 3.88rem) auto auto !important;
  min-width: clamp(4.78rem, 21vw, 5.64rem) !important;
  padding: clamp(0.42rem, 2vw, 0.58rem) !important;
  gap: 0.18rem !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0.74rem !important;
  background: #f8f1cc !important;
  box-shadow: none !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip.is-active {
  background: #e6f3c7 !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip i,
.panel--identity[data-active-identity-tab="items"] .specialty-scene,
.panel--identity[data-active-identity-tab="items"] .seed-pouch-card > span {
  position: relative !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0.56rem !important;
  background-color: transparent !important;
  background-image: url("./assets/landforms/terrain-region-sprites.png") !important;
  background-repeat: no-repeat !important;
  background-size: 300% 200% !important;
  background-position: 0 0 !important;
  box-shadow: none !important;
  image-rendering: pixelated !important;
  overflow: hidden !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip i {
  width: clamp(3.3rem, 14vw, 3.88rem) !important;
  height: clamp(3rem, 12.8vw, 3.52rem) !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip i::before,
.panel--identity[data-active-identity-tab="items"] .landform-region-chip i::after,
.panel--identity[data-active-identity-tab="items"] .specialty-scene::before,
.panel--identity[data-active-identity-tab="items"] .specialty-scene::after,
.panel--identity[data-active-identity-tab="items"] .specialty-scene i {
  content: none !important;
  display: none !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip--mountain i,
.panel--identity[data-active-identity-tab="items"] .specialty-scene--mountain {
  background-position: 50% 0 !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip--northwest i,
.panel--identity[data-active-identity-tab="items"] .specialty-scene--northwest {
  background-position: 100% 0 !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip--coast i,
.panel--identity[data-active-identity-tab="items"] .specialty-scene--coast {
  background-position: 0 100% !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip--plateau i,
.panel--identity[data-active-identity-tab="items"] .specialty-scene--plateau {
  background-position: 50% 100% !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip strong {
  color: #617252 !important;
  font-size: clamp(0.86rem, 3.4vw, 1rem) !important;
  line-height: 1.08 !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip em {
  max-width: 100% !important;
  color: #82906b !important;
  font-size: clamp(0.58rem, 2.3vw, 0.68rem) !important;
  line-height: 1 !important;
  text-align: center !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-card {
  grid-template-columns: clamp(4.05rem, 17vw, 4.85rem) minmax(0, 1fr) auto !important;
  gap: clamp(0.56rem, 2.6vw, 0.78rem) !important;
  padding: clamp(0.62rem, 2.8vw, 0.84rem) !important;
  align-items: center !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-card .specialty-scene {
  width: clamp(4.05rem, 17vw, 4.85rem) !important;
  height: clamp(3.28rem, 14vw, 3.88rem) !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-card .specialty-icon {
  display: none !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card {
  display: grid !important;
  grid-template-columns: clamp(4.05rem, 17vw, 4.85rem) minmax(0, 1fr) auto !important;
  min-height: 0 !important;
  padding: clamp(0.62rem, 2.8vw, 0.84rem) !important;
  column-gap: clamp(0.56rem, 2.6vw, 0.78rem) !important;
  align-items: center !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card > span {
  width: clamp(4.05rem, 17vw, 4.85rem) !important;
  height: clamp(3.28rem, 14vw, 3.88rem) !important;
  background-position: 100% 100% !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card > span img {
  display: none !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card > div {
  display: grid !important;
  gap: 0.16rem !important;
  min-width: 0 !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card strong {
  color: #617252 !important;
  font-size: clamp(0.98rem, 3.8vw, 1.14rem) !important;
  line-height: 1.12 !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card p {
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #7d8869 !important;
  font-size: clamp(0.62rem, 2.35vw, 0.72rem) !important;
  line-height: 1.18 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card button {
  position: relative !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: end !important;
  width: clamp(2.12rem, 8.6vw, 2.5rem) !important;
  min-width: clamp(2.12rem, 8.6vw, 2.5rem) !important;
  height: clamp(2.12rem, 8.6vw, 2.5rem) !important;
  min-height: clamp(2.12rem, 8.6vw, 2.5rem) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0.58rem !important;
  background: #f8f1cc !important;
  color: transparent !important;
  font-size: 0 !important;
  overflow: hidden !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card button::before,
.panel--identity[data-active-identity-tab="items"] .seed-pouch-card button::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  width: 0.18rem !important;
  height: 0.18rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #7c9d5d !important;
  transform: none !important;
  image-rendering: pixelated !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card button::before {
  left: 0.76rem !important;
  top: 0.68rem !important;
  box-shadow:
    0.18rem 0 0 #7c9d5d,
    0.36rem 0 0 #7c9d5d,
    0.54rem 0 0 #7c9d5d,
    0.54rem 0.18rem 0 #7c9d5d,
    0.54rem 0.36rem 0 #7c9d5d,
    0.54rem 0.54rem 0 #7c9d5d,
    0.36rem 0.54rem 0 #7c9d5d,
    0.18rem 0.54rem 0 #7c9d5d,
    0 0.54rem 0 #7c9d5d !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card button::after {
  left: 0.94rem !important;
  top: 1.04rem !important;
  background: #f0d071 !important;
  box-shadow:
    0.18rem 0 0 #f0d071,
    0 -0.18rem 0 #9fcd75,
    0.18rem -0.18rem 0 #9fcd75 !important;
}

.panel--identity .identity-name-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: clamp(0.32rem, 1.5vw, 0.48rem) !important;
  width: 100% !important;
  min-width: 0 !important;
}

.panel--identity .identity-name-row h3,
.panel--identity .identity-name-row input {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 4.8rem) !important;
}

.panel--identity .identity-certified-mark {
  flex: 0 0 auto !important;
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #6aa45f !important;
  box-shadow: none !important;
  font-size: clamp(0.88rem, 2.7vw, 1rem) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.panel--identity .identity-certified-mark::before,
.panel--identity .identity-certified-mark::after {
  content: none !important;
}

.panel--identity .identity-name-row #editIdentityName {
  flex: 0 0 auto !important;
  width: clamp(1.78rem, 5vw, 2.05rem) !important;
  min-width: clamp(1.78rem, 5vw, 2.05rem) !important;
  height: clamp(1.78rem, 5vw, 2.05rem) !important;
  min-height: clamp(1.78rem, 5vw, 2.05rem) !important;
  margin-left: auto !important;
}

.panel--identity .identity-name-row.is-editing .identity-certified-mark,
.panel--identity .identity-name-row.is-editing #editIdentityName {
  display: none !important;
}

.panel--identity .identity-signature {
  cursor: text !important;
}

.panel--identity .identity-signature p {
  padding-inline: clamp(0.1rem, 1vw, 0.22rem) !important;
}

.eight-bit-ui .dock button b,
.eight-bit-ui .garden-action-button b {
  max-width: calc(100% - 0.52rem) !important;
  padding-inline: 0.26rem !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 720px) {
  .panel--identity .identity-name-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: clamp(0.3rem, 1.8vw, 0.46rem) !important;
  }

  .panel--identity .identity-name-row h3,
  .panel--identity .identity-name-row input {
    flex: 0 1 auto !important;
    max-width: calc(100% - 4.65rem) !important;
    font-size: clamp(1.46rem, 6.2vw, 1.92rem) !important;
  }

  .panel--identity .identity-certified-mark {
    font-size: clamp(0.88rem, 3.2vw, 1.02rem) !important;
  }

  .panel--identity .identity-name-row #editIdentityName {
    width: 1.92rem !important;
    min-width: 1.92rem !important;
    height: 1.92rem !important;
    min-height: 1.92rem !important;
  }

  .eight-bit-ui .dock button b {
    max-width: calc(100% - 0.72rem) !important;
    padding-inline: 0.36rem !important;
  }

  .eight-bit-ui .garden-action-button {
    padding-inline: 0.58rem !important;
  }
}

/* Backpack pagination contract: exactly one top-level page group is visible. */
.panel--identity .identity-pages {
  display: block !important;
  width: var(--identity-mobile-width, min(100%, 29rem)) !important;
  max-width: var(--identity-mobile-width, min(100%, 29rem)) !important;
  margin-inline: auto !important;
  min-width: 0 !important;
}

.panel--identity .identity-pages > .identity-page {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-inline: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.panel--identity .identity-pages > .identity-page.is-hidden,
.panel--identity[data-active-identity-tab="card"] .identity-pages > .identity-page:not([data-identity-page="card"]),
.panel--identity[data-active-identity-tab="atlas"] .identity-pages > .identity-page:not([data-identity-page="atlas"]),
.panel--identity[data-active-identity-tab="items"] .identity-pages > .identity-page:not([data-identity-page="items"]) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.panel--identity[data-active-identity-tab="card"] .identity-pages > [data-identity-page="card"]:not(.is-hidden) {
  display: grid !important;
  visibility: visible !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-pages > [data-identity-page="atlas"]:not(.is-hidden) {
  display: grid !important;
  visibility: visible !important;
}

.panel--identity[data-active-identity-tab="items"] .identity-pages > [data-identity-page="items"]:not(.is-hidden) {
  display: grid !important;
  visibility: visible !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

.panel--identity[data-active-identity-tab="items"] .identity-pages {
  display: grid !important;
  gap: clamp(1rem, 4vw, 1.38rem) !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-section,
.panel--identity[data-active-identity-tab="items"] .seed-pouch-section {
  margin: 0 !important;
  align-self: start !important;
}

@media (max-width: 720px) {
  .panel--identity .identity-pages {
    width: var(--identity-mobile-width, min(100%, calc(100vw - clamp(2rem, 8vw, 3rem)))) !important;
    max-width: var(--identity-mobile-width, min(100%, calc(100vw - clamp(2rem, 8vw, 3rem)))) !important;
  }

  .panel--identity[data-active-identity-tab="items"] .identity-pages {
    gap: clamp(0.92rem, 4.5vw, 1.24rem) !important;
  }
}

/* Items page simplification: one landform record, then one seed card. */
.panel--identity[data-active-identity-tab="items"] .identity-pages {
  align-content: start !important;
  gap: clamp(1.28rem, 5.4vw, 1.72rem) !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-section,
.panel--identity[data-active-identity-tab="items"] .seed-pouch-section {
  display: grid !important;
  gap: clamp(0.72rem, 3vw, 0.98rem) !important;
  padding-inline: 0 !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-section h3,
.panel--identity[data-active-identity-tab="items"] .seed-pouch-section h3 {
  display: grid !important;
  grid-template-columns: clamp(2.2rem, 9vw, 2.72rem) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(0.52rem, 2.4vw, 0.72rem) !important;
  min-height: clamp(2.42rem, 10vw, 3rem) !important;
  margin: 0 !important;
  padding: 0 clamp(0.36rem, 2vw, 0.58rem) !important;
  color: #5f6948 !important;
  font-size: clamp(1.18rem, 4.9vw, 1.48rem) !important;
  line-height: 1.08 !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-section h3 b,
.panel--identity[data-active-identity-tab="items"] .seed-pouch-section h3 {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-overview {
  display: grid !important;
  gap: clamp(0.72rem, 3.2vw, 0.96rem) !important;
  padding: clamp(0.72rem, 3.6vw, 1rem) !important;
  overflow: hidden !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-panorama {
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 16 / 8.25 !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-strip {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(5rem, 1fr) !important;
  gap: clamp(0.54rem, 2.5vw, 0.76rem) !important;
  overflow-x: auto !important;
  padding: 0 0 0.12rem !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip {
  min-height: clamp(4.35rem, 18vw, 5.15rem) !important;
  padding: clamp(0.5rem, 2.4vw, 0.66rem) !important;
  border-radius: 0.86rem !important;
  background: #eff8d5 !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip.is-active {
  background: #fff1bf !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-shelf {
  position: static !important;
  display: grid !important;
  gap: clamp(0.62rem, 2.8vw, 0.86rem) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-region.is-collapsed {
  display: none !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-region {
  position: static !important;
  display: grid !important;
  gap: clamp(0.5rem, 2.4vw, 0.72rem) !important;
  margin: 0 !important;
  padding: clamp(0.56rem, 2.8vw, 0.82rem) !important;
  border-radius: 0.88rem !important;
  background: #fff8df !important;
  overflow: hidden !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-region-toggle {
  position: static !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.5rem !important;
  min-height: 0 !important;
  padding: 0.14rem 0.12rem 0.34rem !important;
  background: transparent !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-region-toggle div,
.panel--identity[data-active-identity-tab="items"] .specialty-region-toggle h4 {
  min-width: 0 !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-region-toggle h4 {
  overflow: hidden !important;
  color: #66583f !important;
  font-size: clamp(0.98rem, 3.8vw, 1.16rem) !important;
  line-height: 1.08 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-region-toggle span {
  display: none !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-region-toggle em {
  padding: 0 !important;
  color: #769265 !important;
  font-size: clamp(0.72rem, 2.8vw, 0.84rem) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-region-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(0.54rem, 2.6vw, 0.72rem) !important;
  padding: 0 !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-empty {
  min-height: clamp(4.2rem, 18vw, 5.3rem) !important;
  padding: 0.72rem !important;
  color: #786d51 !important;
  font-size: clamp(0.84rem, 3.3vw, 0.98rem) !important;
  line-height: 1.28 !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-section {
  padding-top: clamp(0.12rem, 1vw, 0.24rem) !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card {
  display: grid !important;
  grid-template-columns: clamp(3.4rem, 15vw, 4.2rem) minmax(0, 1fr) !important;
  gap: clamp(0.64rem, 3vw, 0.88rem) !important;
  align-items: center !important;
  padding: clamp(0.82rem, 4vw, 1.08rem) !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card button {
  grid-column: 1 / -1 !important;
  justify-self: stretch !important;
  min-width: 0 !important;
}

/* Items polish pass: give windfall and seeds separate rooms, and make region icons readable. */
.panel--identity[data-active-identity-tab="items"] .identity-pages {
  gap: clamp(1.8rem, 7.5vw, 2.45rem) !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-section {
  padding-bottom: clamp(0.58rem, 3vw, 0.92rem) !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-section {
  position: relative !important;
  margin-top: clamp(0.85rem, 5vw, 1.35rem) !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-section::before {
  content: "" !important;
  position: absolute !important;
  left: clamp(0.62rem, 3vw, 0.92rem) !important;
  right: clamp(0.62rem, 3vw, 0.92rem) !important;
  top: calc(clamp(0.85rem, 5vw, 1.35rem) * -0.68) !important;
  height: 0.12rem !important;
  border-radius: 999px !important;
  background: #d8e9bd !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-overview {
  background: #f4f9dc !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-panorama {
  border: 0 !important;
  border-radius: 0.88rem !important;
  background: #d8efc8 !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-panorama img {
  object-fit: cover !important;
  object-position: center !important;
  image-rendering: pixelated !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip {
  grid-template-rows: clamp(2.65rem, 10vw, 3.18rem) auto !important;
  justify-items: center !important;
  gap: 0.22rem !important;
  color: #687a54 !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip i {
  position: relative !important;
  display: block !important;
  width: clamp(2.55rem, 10vw, 3.08rem) !important;
  height: clamp(2.55rem, 10vw, 3.08rem) !important;
  border-radius: 0.54rem !important;
  background: #d9edc1 !important;
  overflow: hidden !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip i::before,
.panel--identity[data-active-identity-tab="items"] .landform-region-chip i::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip--jiangnan i {
  background: #cfeee0 !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip--jiangnan i::before {
  left: 0.42rem !important;
  right: 0.42rem !important;
  top: 0.72rem !important;
  height: 0.24rem !important;
  background: #7db7ad !important;
  box-shadow: 0 0.58rem 0 #7db7ad, 0 1.16rem 0 #7db7ad !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip--jiangnan i::after {
  left: 1.38rem !important;
  top: 0.82rem !important;
  width: 0.5rem !important;
  height: 1.12rem !important;
  background: #94c66d !important;
  box-shadow: -0.46rem 0.36rem 0 #b8d97d !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip--mountain i {
  background: #dff0c9 !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip--mountain i::before {
  left: 0.45rem !important;
  bottom: 0.58rem !important;
  width: 0.58rem !important;
  height: 0.58rem !important;
  background: #80a76b !important;
  box-shadow: 0.34rem -0.34rem 0 #80a76b, 0.68rem 0 0 #80a76b !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip--mountain i::after {
  right: 0.5rem !important;
  bottom: 0.58rem !important;
  width: 0.62rem !important;
  height: 0.62rem !important;
  background: #9fca76 !important;
  box-shadow: -0.36rem -0.42rem 0 #9fca76, -0.72rem 0 0 #9fca76 !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip--northwest i {
  background: #f4e7b7 !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip--northwest i::before {
  left: 0.62rem !important;
  bottom: 0.58rem !important;
  width: 1.62rem !important;
  height: 0.42rem !important;
  background: #caa35d !important;
  box-shadow: 0.42rem -0.72rem 0 #e0bf72, 0.88rem -0.28rem 0 #e8cc84 !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip--northwest i::after {
  left: 0.72rem !important;
  top: 0.68rem !important;
  width: 0.38rem !important;
  height: 1.08rem !important;
  background: #8fbf66 !important;
  box-shadow: 0.32rem 0.18rem 0 #b1d579 !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip--coast i {
  background: #cfeef2 !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip--coast i::before {
  left: 0.44rem !important;
  right: 0.44rem !important;
  bottom: 0.72rem !important;
  height: 0.24rem !important;
  background: #68aeb8 !important;
  box-shadow: 0 -0.46rem 0 #8fd0ce !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip--coast i::after {
  right: 0.62rem !important;
  bottom: 0.76rem !important;
  width: 0.42rem !important;
  height: 0.42rem !important;
  background: #f4d47a !important;
  box-shadow: -0.24rem -0.22rem 0 #f4d47a, 0.24rem 0.22rem 0 #f4d47a !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip--plateau i {
  background: #e7e7c5 !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip--plateau i::before {
  left: 0.42rem !important;
  right: 0.42rem !important;
  bottom: 0.62rem !important;
  height: 0.42rem !important;
  background: #9aa96d !important;
  box-shadow: 0 -0.52rem 0 #c9ca84 !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip--plateau i::after {
  right: 0.62rem !important;
  top: 0.58rem !important;
  width: 0.62rem !important;
  height: 0.62rem !important;
  background: #fff2a7 !important;
}

/* Final HUD weather + map controls contract. */
.weather-pill {
  grid-template-columns: clamp(2.18rem, 5.2vw, 2.42rem) minmax(0, auto) !important;
  gap: 0.42rem !important;
  align-items: center !important;
  padding-inline: clamp(0.52rem, 1.5vw, 0.78rem) !important;
}

.weather-icon {
  position: relative !important;
  display: block !important;
  width: clamp(2.16rem, 5.2vw, 2.42rem) !important;
  height: clamp(2.16rem, 5.2vw, 2.42rem) !important;
  min-width: clamp(2.16rem, 5.2vw, 2.42rem) !important;
  border: 0 !important;
  border-radius: 0.5rem !important;
  background: #f3f7d6 !important;
  overflow: hidden !important;
  image-rendering: pixelated !important;
}

.weather-icon::before,
.weather-icon::after,
.weather-icon i {
  position: absolute !important;
  display: block !important;
  content: "" !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  filter: none !important;
}

.weather-icon__sun,
.weather-icon__cloud,
.weather-icon__drop,
.weather-icon__flake,
.weather-icon::after {
  opacity: 0 !important;
}

.weather-icon__sun {
  left: 0.34rem !important;
  top: 0.34rem !important;
  width: 0.66rem !important;
  height: 0.66rem !important;
  background: #f2cf63 !important;
  box-shadow:
    0.78rem 0.16rem 0 -0.18rem #f2cf63,
    0.2rem 0.78rem 0 -0.18rem #f2cf63 !important;
}

.weather-icon__cloud {
  left: 0.62rem !important;
  top: 1rem !important;
  width: 1.16rem !important;
  height: 0.44rem !important;
  background: #d5e9bd !important;
  box-shadow:
    -0.28rem 0.16rem 0 #d5e9bd,
    0.24rem -0.28rem 0 0.1rem #d5e9bd,
    0.58rem 0.06rem 0 #d5e9bd !important;
  transform: none !important;
}

.weather-icon__drop {
  left: 0.68rem !important;
  top: 1.54rem !important;
  width: 0.2rem !important;
  height: 0.34rem !important;
  background: #78bcd0 !important;
  box-shadow:
    0.44rem -0.08rem 0 #78bcd0,
    0.88rem -0.02rem 0 #78bcd0 !important;
  transform: none !important;
}

.weather-icon__flake {
  left: 0.64rem !important;
  top: 1.48rem !important;
  width: 0.24rem !important;
  height: 0.24rem !important;
  background: #fbfff0 !important;
  box-shadow:
    0.46rem 0.04rem 0 #fbfff0,
    0.9rem -0.02rem 0 #fbfff0,
    0.46rem 0.38rem 0 #fbfff0 !important;
  transform: none !important;
}

.weather-icon--calm .weather-icon__sun,
.weather-icon--sunny .weather-icon__sun,
.weather-icon--rainbow .weather-icon__sun {
  opacity: 1 !important;
}

.weather-icon--calm .weather-icon__cloud,
.weather-icon--cloud .weather-icon__cloud,
.weather-icon--mist .weather-icon__cloud,
.weather-icon--rain .weather-icon__cloud,
.weather-icon--storm .weather-icon__cloud,
.weather-icon--snow .weather-icon__cloud,
.weather-icon--rainbow .weather-icon__cloud {
  opacity: 1 !important;
}

.weather-icon--cloud .weather-icon__sun,
.weather-icon--mist .weather-icon__sun {
  opacity: 0.38 !important;
}

.weather-icon--rain .weather-icon__drop,
.weather-icon--storm .weather-icon__drop {
  opacity: 1 !important;
}

.weather-icon--snow .weather-icon__flake {
  opacity: 1 !important;
}

.weather-icon--mist::after {
  left: 0.5rem !important;
  right: auto !important;
  bottom: 0.4rem !important;
  width: 1.32rem !important;
  height: 0.12rem !important;
  border-top: 0.12rem solid #b8d2ad !important;
  border-bottom: 0.12rem solid #b8d2ad !important;
  background: transparent !important;
  opacity: 1 !important;
  transform: none !important;
}

.weather-icon--storm::after {
  left: 1.24rem !important;
  top: 1.44rem !important;
  width: 0.18rem !important;
  height: 0.18rem !important;
  background: #f1cf62 !important;
  box-shadow:
    0.18rem 0.18rem 0 #f1cf62,
    -0.1rem 0.36rem 0 #f1cf62 !important;
  opacity: 1 !important;
  transform: none !important;
}

.panel--map.is-open {
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding-bottom: calc(clamp(1.1rem, 5vw, 1.6rem) + env(safe-area-inset-bottom)) !important;
}

.panel--map.is-open .radar {
  position: relative !important;
  z-index: 1 !important;
  width: min(var(--map-content-width), clamp(16.8rem, 55vh, 22rem)) !important;
  margin-bottom: clamp(1.35rem, 6vw, 1.85rem) !important;
}

.panel--map.is-open .map-actions {
  position: relative !important;
  z-index: 2 !important;
  transform: none !important;
  margin-top: 0 !important;
  margin-bottom: clamp(0.95rem, 4.2vw, 1.28rem) !important;
}

.panel--map.is-open .map-results {
  position: relative !important;
  z-index: 1 !important;
  transform: none !important;
}

@media (max-width: 720px) {
  .weather-icon {
    width: 2.12rem !important;
    height: 2.12rem !important;
    min-width: 2.12rem !important;
  }

  .panel--map.is-open {
    row-gap: 0 !important;
  }

  .panel--map.is-open .radar {
    width: min(var(--map-content-width), calc(100svh - 30.5rem), 20.4rem) !important;
    min-width: min(var(--map-content-width), 15.2rem) !important;
    margin-bottom: clamp(1.35rem, 6.8vw, 1.75rem) !important;
  }

  .panel--map.is-open .map-actions {
    width: min(var(--map-content-width), 20.4rem) !important;
  }
}

/* Final passport/items containment: keep phone layout readable and stop stacked UI drift. */
.panel--identity .identity-hero.passport-card {
  align-items: start !important;
  gap: clamp(0.78rem, 3.4vw, 1.08rem) !important;
  min-height: auto !important;
  overflow: visible !important;
}

.panel--identity .identity-profile {
  display: grid !important;
  gap: clamp(0.56rem, 2.4vw, 0.78rem) !important;
  width: 100% !important;
  min-width: 0 !important;
  padding-inline: clamp(0.1rem, 1vw, 0.2rem) !important;
  overflow: hidden !important;
}

.panel--identity .identity-name-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  column-gap: clamp(0.28rem, 1.4vw, 0.42rem) !important;
  width: 100% !important;
  min-width: 0 !important;
}

.panel--identity .identity-name-row h3,
.panel--identity .identity-name-row input {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: #684f2f !important;
  font-size: clamp(1.52rem, 5.3vw, 2.02rem) !important;
  line-height: 1.05 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.panel--identity .identity-certified-mark {
  display: inline-block !important;
  color: #6aa45f !important;
  font-size: clamp(0.9rem, 3vw, 1.08rem) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.panel--identity .identity-name-row #editIdentityName {
  width: clamp(1.58rem, 5.4vw, 1.9rem) !important;
  min-width: clamp(1.58rem, 5.4vw, 1.9rem) !important;
  height: clamp(1.58rem, 5.4vw, 1.9rem) !important;
  min-height: clamp(1.58rem, 5.4vw, 1.9rem) !important;
  margin-left: 0 !important;
  place-self: center !important;
}

.panel--identity .identity-signature {
  width: 100% !important;
  min-width: 0 !important;
  padding: clamp(0.48rem, 2.2vw, 0.66rem) clamp(0.56rem, 2.6vw, 0.78rem) !important;
  overflow: hidden !important;
}

.panel--identity .identity-signature p {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  color: #65724f !important;
  font-size: clamp(0.76rem, 2.82vw, 0.88rem) !important;
  line-height: 1.34 !important;
}

.panel--identity .identity-profile ul {
  display: grid !important;
  gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: clamp(0.36rem, 1.8vw, 0.52rem) 0 !important;
  overflow: hidden !important;
}

.panel--identity .identity-profile li {
  display: grid !important;
  grid-template-columns: clamp(2.35rem, 10vw, 2.92rem) minmax(0, 1fr) !important;
  align-items: baseline !important;
  gap: clamp(0.46rem, 2vw, 0.62rem) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: clamp(0.36rem, 1.65vw, 0.48rem) clamp(0.16rem, 1vw, 0.28rem) !important;
}

.panel--identity .identity-profile li b,
.panel--identity .identity-profile li em {
  min-width: 0 !important;
  max-width: 100% !important;
  line-height: 1.22 !important;
}

.panel--identity .identity-profile li b {
  color: #806b45 !important;
  font-size: clamp(0.66rem, 2.35vw, 0.76rem) !important;
}

.panel--identity .identity-profile li em {
  overflow-wrap: anywhere !important;
  color: #5f674a !important;
  font-size: clamp(0.76rem, 2.72vw, 0.88rem) !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-section::before {
  content: none !important;
  display: none !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-section {
  margin-top: clamp(1.15rem, 5.6vw, 1.62rem) !important;
  padding-top: 0 !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-section h3 {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: clamp(3.25rem, 13.5vw, 3.85rem) minmax(0, 1fr) clamp(3.05rem, 12vw, 3.55rem) !important;
  align-items: center !important;
  gap: clamp(0.62rem, 2.8vw, 0.88rem) !important;
  min-height: clamp(6.15rem, 24vw, 7.1rem) !important;
  padding: clamp(0.76rem, 3.5vw, 1rem) !important;
  border: 0 !important;
  border-radius: 0.96rem !important;
  background: #f1f8dc !important;
  overflow: hidden !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card::after {
  content: "" !important;
  display: block !important;
  justify-self: end !important;
  width: clamp(2.85rem, 11.5vw, 3.35rem) !important;
  height: clamp(2.85rem, 11.5vw, 3.35rem) !important;
  border-radius: 0.44rem !important;
  background:
    linear-gradient(#95bd74 0 0) 0.54rem 0.56rem / 1.64rem 0.22rem no-repeat,
    linear-gradient(#c2d98f 0 0) 0.54rem 1.06rem / 0.94rem 0.36rem no-repeat,
    linear-gradient(#7eaa78 0 0) 1.72rem 1.12rem / 0.56rem 0.56rem no-repeat,
    linear-gradient(#dceab1 0 0) center / 2.24rem 2.18rem no-repeat,
    #fff7d8 !important;
  box-shadow:
    inset 0 0 0 0.16rem #b9cf8b,
    inset 0 -0.34rem 0 #e3dcab !important;
  image-rendering: pixelated !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card > span {
  display: grid !important;
  place-items: center !important;
  width: clamp(3.25rem, 13.5vw, 3.85rem) !important;
  height: clamp(3.25rem, 13.5vw, 3.85rem) !important;
  border-radius: 0.58rem !important;
  background: #fff7d6 !important;
  overflow: hidden !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card img {
  width: 84% !important;
  height: 84% !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card strong {
  display: block !important;
  color: #5d6a46 !important;
  font-size: clamp(1.04rem, 4vw, 1.26rem) !important;
  line-height: 1.08 !important;
  white-space: nowrap !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card p {
  display: none !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card button {
  grid-column: 1 / -1 !important;
  justify-self: stretch !important;
  min-height: clamp(2.46rem, 10vw, 2.9rem) !important;
  margin-top: clamp(0.16rem, 1vw, 0.28rem) !important;
  border-radius: 999px !important;
}

@media (max-width: 720px) {
  .panel--identity .identity-hero.passport-card {
    grid-template-columns: 1fr !important;
    padding: clamp(0.82rem, 4vw, 1.12rem) !important;
  }

  .panel--identity .identity-portrait {
    max-height: clamp(11.2rem, 36svw, 13.8rem) !important;
  }

  .panel--identity .identity-profile {
    gap: clamp(0.48rem, 2.4vw, 0.68rem) !important;
  }

  .panel--identity .identity-name-row h3,
  .panel--identity .identity-name-row input {
    font-size: clamp(1.44rem, 6vw, 1.82rem) !important;
  }

  .panel--identity[data-active-identity-tab="items"] .seed-pouch-card {
    grid-template-columns: clamp(3.05rem, 14.5vw, 3.55rem) minmax(0, 1fr) clamp(2.82rem, 13.5vw, 3.25rem) !important;
  }
}

/* Map radar alignment contract: radar, scan buttons, and empty clues share one width and rhythm. */
.panel--map.is-open {
  --map-radar-width: min(100%, 22rem);
  --map-radar-gap: clamp(0.82rem, 3.6vw, 1.08rem);
  --map-radar-inner-pad: clamp(0.78rem, 3.4vw, 1rem);
  display: grid !important;
  grid-template-rows: auto auto auto auto !important;
  justify-items: center !important;
  align-content: start !important;
  row-gap: 0 !important;
  padding-inline: clamp(1.08rem, 5.4vw, 1.62rem) !important;
}

.panel--map.is-open .panel-header,
.panel--map.is-open .radar,
.panel--map.is-open .map-actions,
.panel--map.is-open .map-results {
  width: var(--map-radar-width) !important;
  max-width: var(--map-radar-width) !important;
  min-width: 0 !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

.panel--map.is-open .panel-header {
  margin: 0 auto var(--map-radar-gap) !important;
  padding-inline: 0 !important;
}

.panel--map.is-open .radar {
  margin: 0 auto var(--map-radar-gap) !important;
}

.panel--map.is-open .map-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: var(--map-radar-gap) !important;
  margin: 0 auto var(--map-radar-gap) !important;
  padding: 0 !important;
}

.panel--map.is-open .map-actions .primary,
.panel--map.is-open .map-actions .secondary {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding-inline: var(--map-radar-inner-pad) !important;
  box-sizing: border-box !important;
}

.panel--map.is-open .map-results {
  display: grid !important;
  min-height: clamp(4.45rem, 18vw, 5.6rem) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.panel--map.is-open .map-results > p,
.panel--map.is-open .map-results > article,
.panel--map.is-open .map-results > button {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.panel--map.is-open .map-results > p {
  display: grid !important;
  min-height: clamp(4.45rem, 18vw, 5.6rem) !important;
  padding: var(--map-radar-inner-pad) !important;
  place-items: center !important;
  text-align: center !important;
}

@media (max-width: 720px) {
  .panel--map.is-open {
    --map-radar-width: min(100%, 20.4rem);
    --map-radar-gap: clamp(0.76rem, 3.9vw, 1rem);
    padding-inline: clamp(1rem, 5.6vw, 1.36rem) !important;
  }

  .panel--map.is-open .radar,
  .panel--map.is-open .map-actions,
  .panel--map.is-open .map-results {
    width: var(--map-radar-width) !important;
    min-width: 0 !important;
  }
}

/* Expedition quiet layout: make the mountain scene lead, then one clear planning flow. */
.panel--expedition.is-open {
  --expedition-width: min(100%, 24rem);
  --expedition-gap: clamp(0.68rem, 3vw, 0.92rem);
  left: clamp(0.88rem, 4.6vw, 1.32rem) !important;
  right: clamp(0.88rem, 4.6vw, 1.32rem) !important;
  top: clamp(1.05rem, 4.2vh, 2.1rem) !important;
  bottom: calc(5.2rem + env(safe-area-inset-bottom)) !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  align-content: start !important;
  gap: var(--expedition-gap) !important;
  padding: clamp(0.72rem, 3vw, 0.96rem) 0 calc(0.88rem + env(safe-area-inset-bottom)) !important;
  border-radius: 1rem !important;
  background: #f3e8bd !important;
  overflow-y: auto !important;
}

.panel--expedition.is-open .adventure-header,
.panel--expedition.is-open .adventure-scene,
.panel--expedition.is-open .adventure-content {
  width: var(--expedition-width) !important;
  max-width: var(--expedition-width) !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

.panel--expedition.is-open .adventure-header {
  display: grid !important;
  gap: 0.24rem !important;
  margin: 0 auto !important;
  padding: 0 clamp(0.18rem, 1vw, 0.28rem) !important;
  background: transparent !important;
}

.panel--expedition.is-open .adventure-header h2 {
  margin: 0 !important;
  color: #5c5539 !important;
  font-size: clamp(1.22rem, 4.8vw, 1.58rem) !important;
  line-height: 1.08 !important;
}

.panel--expedition.is-open .adventure-header p {
  margin: 0 !important;
  color: #7c7250 !important;
  font-size: clamp(0.76rem, 2.85vw, 0.88rem) !important;
  line-height: 1.34 !important;
}

.panel--expedition.is-open .adventure-scene {
  aspect-ratio: 518 / 346 !important;
  max-height: clamp(10.6rem, 30svh, 15.6rem) !important;
  min-height: clamp(9.4rem, 25svh, 12.2rem) !important;
  overflow: hidden !important;
  border-radius: 0.86rem !important;
  background: #dfeec4 !important;
}

.panel--expedition.is-open .adventure-scene > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  image-rendering: pixelated !important;
}

.panel--expedition.is-open .adventure-content {
  display: grid !important;
  gap: var(--expedition-gap) !important;
  padding: 0 clamp(0.18rem, 1vw, 0.28rem) !important;
  background: transparent !important;
}

.panel--expedition.is-open .adventure-energy {
  display: none !important;
}

.panel--expedition.is-open .adventure-status,
.panel--expedition.is-open .together-card,
.panel--expedition.is-open .expedition-planning {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.panel--expedition.is-open .adventure-status {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: baseline !important;
  gap: 0.5rem !important;
  min-height: 0 !important;
  padding: 0 !important;
}

.panel--expedition.is-open .adventure-status span {
  color: #889266 !important;
  font-size: clamp(0.66rem, 2.5vw, 0.76rem) !important;
}

.panel--expedition.is-open .adventure-status strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #5e6848 !important;
  font-size: clamp(0.86rem, 3.3vw, 1rem) !important;
  text-align: right !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.panel--expedition.is-open .map-pack-picker {
  order: 2 !important;
  display: grid !important;
  gap: clamp(0.48rem, 2.1vw, 0.66rem) !important;
  margin: 0 !important;
}

.panel--expedition.is-open .expedition-planning {
  order: 3 !important;
  display: grid !important;
  gap: var(--expedition-gap) !important;
  padding: 0 !important;
}

.panel--expedition.is-open .expedition-squad {
  gap: clamp(0.46rem, 2vw, 0.62rem) !important;
}

.panel--expedition.is-open .expedition-squad header {
  align-items: baseline !important;
}

.panel--expedition.is-open .expedition-squad h3 {
  color: #5e704f !important;
  font-size: clamp(0.96rem, 3.7vw, 1.12rem) !important;
}

.panel--expedition.is-open .expedition-squad p {
  display: none !important;
}

.panel--expedition.is-open .squad-slots {
  grid-template-columns: repeat(3, minmax(0, clamp(3.55rem, 17vw, 4.25rem))) !important;
  justify-content: start !important;
  gap: clamp(0.52rem, 2.4vw, 0.72rem) !important;
  padding: 0 !important;
}

.panel--expedition.is-open .squad-slot {
  width: clamp(3.55rem, 17vw, 4.25rem) !important;
  height: clamp(3.55rem, 17vw, 4.25rem) !important;
  padding: 0.34rem !important;
  border-color: rgba(108, 127, 80, 0.22) !important;
  background: rgba(255, 250, 230, 0.72) !important;
}

.panel--expedition.is-open .duration-picker {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(0.36rem, 1.7vw, 0.5rem) !important;
  margin: 0 !important;
}

.panel--expedition.is-open .duration-picker button {
  min-height: clamp(2.16rem, 8.8vw, 2.56rem) !important;
  padding-inline: 0.12rem !important;
  border: 0 !important;
  border-radius: 0.58rem !important;
  background: rgba(255, 250, 230, 0.82) !important;
  color: #6a6043 !important;
  font-size: clamp(0.68rem, 2.7vw, 0.82rem) !important;
}

.panel--expedition.is-open .duration-picker button.is-selected {
  background: #dcebb8 !important;
  color: #4e6a45 !important;
}

.panel--expedition.is-open .together-card {
  order: 4 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(7rem, auto) !important;
  gap: clamp(0.5rem, 2.2vw, 0.72rem) !important;
  align-items: center !important;
  padding: 0 !important;
}

.panel--expedition.is-open .together-card b {
  color: #6c7654 !important;
  font-size: clamp(0.76rem, 2.9vw, 0.9rem) !important;
  line-height: 1.26 !important;
}

.panel--expedition.is-open .together-card button {
  justify-self: stretch !important;
  min-width: 0 !important;
  min-height: clamp(2.52rem, 10vw, 2.92rem) !important;
  border-radius: 999px !important;
}

.panel--expedition.is-open .expedition-loot {
  order: 5 !important;
  margin: 0 !important;
}

.panel--expedition.is-open .quest-section {
  order: 99 !important;
  margin-top: clamp(0.35rem, 2vw, 0.58rem) !important;
  padding: clamp(0.7rem, 3vw, 0.9rem) !important;
  border: 0 !important;
  border-radius: 0.82rem !important;
  background: #eef4d8 !important;
}

@media (max-width: 720px) {
  .panel--expedition.is-open {
    --expedition-width: min(100%, 21.2rem);
    --expedition-gap: clamp(0.62rem, 3.2vw, 0.86rem);
    top: clamp(0.8rem, 3svh, 1.35rem) !important;
  }

  .panel--expedition.is-open .adventure-scene {
    max-height: clamp(10.2rem, 28svh, 13.6rem) !important;
  }

  .panel--expedition.is-open .duration-picker {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .panel--expedition.is-open .together-card {
    grid-template-columns: minmax(0, 1fr) minmax(6.5rem, 38%) !important;
  }
}

/* Daily quest icon cleanup: separate reward energy and claim action so cards stop feeling cramped. */
.panel--expedition.is-open .quest-list {
  display: grid !important;
  gap: clamp(0.48rem, 2.2vw, 0.66rem) !important;
}

.panel--expedition.is-open .quest-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: clamp(2.58rem, 10.5vw, 2.96rem) minmax(0, 1fr) clamp(2.08rem, 8vw, 2.38rem) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: clamp(0.54rem, 2.4vw, 0.72rem) !important;
  row-gap: 0.22rem !important;
  min-height: clamp(4.15rem, 16vw, 4.72rem) !important;
  padding: clamp(0.52rem, 2.4vw, 0.68rem) clamp(0.56rem, 2.6vw, 0.76rem) !important;
  border: 0 !important;
  border-radius: 0.72rem !important;
  background: #fff9e9 !important;
}

.panel--expedition.is-open .quest-card > b {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  display: grid !important;
  place-items: center !important;
  width: clamp(2.58rem, 10.5vw, 2.96rem) !important;
  height: clamp(2.58rem, 10.5vw, 2.96rem) !important;
}

.panel--expedition.is-open .quest-card > b .daily-pixel-icon,
.panel--expedition.is-open .quest-heading .daily-pixel-icon {
  display: grid !important;
  place-items: center !important;
  width: clamp(2.36rem, 9.2vw, 2.72rem) !important;
  height: clamp(2.36rem, 9.2vw, 2.72rem) !important;
  flex-basis: clamp(2.36rem, 9.2vw, 2.72rem) !important;
  border: 0 !important;
  border-radius: 0.46rem !important;
  background: #f6f0c7 !important;
  overflow: hidden !important;
}

.panel--expedition.is-open .quest-card > b .daily-pixel-icon i,
.panel--expedition.is-open .quest-heading .daily-pixel-icon i {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.panel--expedition.is-open .quest-card > div {
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
  display: grid !important;
  gap: 0.12rem !important;
  min-width: 0 !important;
  padding-right: 0 !important;
}

.panel--expedition.is-open .quest-card small {
  color: #7f8c65 !important;
  font-size: clamp(0.58rem, 2.25vw, 0.68rem) !important;
}

.panel--expedition.is-open .quest-card strong {
  overflow: hidden !important;
  color: #5c5f45 !important;
  font-size: clamp(0.76rem, 3vw, 0.9rem) !important;
  line-height: 1.16 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.panel--expedition.is-open .quest-card div > span {
  color: #8f8060 !important;
  font-size: clamp(0.62rem, 2.4vw, 0.72rem) !important;
}

.panel--expedition.is-open .quest-card mark {
  grid-column: 3 !important;
  grid-row: 1 !important;
  position: relative !important;
  display: grid !important;
  justify-self: center !important;
  align-self: end !important;
  width: clamp(1.64rem, 6.6vw, 1.88rem) !important;
  height: clamp(1.64rem, 6.6vw, 1.88rem) !important;
  margin: 0 !important;
  padding: 0 !important;
  place-items: center !important;
  border-radius: 0.38rem !important;
  background: #f8e9a7 !important;
  overflow: hidden !important;
}

.panel--expedition.is-open .quest-card mark img {
  display: none !important;
}

.panel--expedition.is-open .quest-card mark::before,
.panel--expedition.is-open .quest-card mark::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  image-rendering: pixelated !important;
}

.panel--expedition.is-open .quest-card mark::before {
  left: 0.72rem !important;
  top: 0.28rem !important;
  width: 0.26rem !important;
  height: 0.44rem !important;
  background: #d6a94e !important;
  box-shadow:
    -0.18rem 0.34rem 0 #d6a94e,
    0.12rem 0.62rem 0 #d6a94e,
    -0.08rem 0.9rem 0 #d6a94e !important;
}

.panel--expedition.is-open .quest-card mark::after {
  left: 0.34rem !important;
  top: 0.34rem !important;
  width: 0.18rem !important;
  height: 0.18rem !important;
  background: #fff7cf !important;
  box-shadow:
    0.82rem 0.12rem 0 #fff7cf,
    0.28rem 0.9rem 0 #fff7cf !important;
}

.panel--expedition.is-open .quest-card button {
  grid-column: 3 !important;
  grid-row: 2 !important;
  display: grid !important;
  justify-self: center !important;
  align-self: start !important;
  width: clamp(1.62rem, 6.4vw, 1.82rem) !important;
  min-width: clamp(1.62rem, 6.4vw, 1.82rem) !important;
  height: clamp(1.62rem, 6.4vw, 1.82rem) !important;
  min-height: clamp(1.62rem, 6.4vw, 1.82rem) !important;
  padding: 0 !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0.42rem !important;
  background: #dcebb8 !important;
  color: #5e7549 !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.panel--expedition.is-open .quest-card button::before,
.panel--expedition.is-open .quest-card button::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  left: 50% !important;
  top: 50% !important;
  background: #5e7549 !important;
  transform: translate(-50%, -50%) !important;
}

.panel--expedition.is-open .quest-card button::before {
  width: 0.74rem !important;
  height: 0.16rem !important;
}

.panel--expedition.is-open .quest-card button::after {
  width: 0.16rem !important;
  height: 0.74rem !important;
}

.panel--expedition.is-open .quest-card button.is-ready {
  background: #f5e29a !important;
}

.panel--expedition.is-open .quest-card button.is-claimed,
.panel--expedition.is-open .quest-card button.is-claimed:disabled {
  background: #8fbd72 !important;
}

.panel--expedition.is-open .quest-card button.is-claimed::before {
  width: 0.72rem !important;
  height: 0.16rem !important;
  background: #fff8dc !important;
  transform: translate(-48%, -35%) rotate(-42deg) !important;
}

.panel--expedition.is-open .quest-card button.is-claimed::after {
  width: 0.36rem !important;
  height: 0.16rem !important;
  background: #fff8dc !important;
  transform: translate(-88%, 20%) rotate(42deg) !important;
}

@media (max-width: 420px) {
  .panel--expedition.is-open .quest-card {
    grid-template-columns: 2.42rem minmax(0, 1fr) 1.9rem !important;
    column-gap: 0.48rem !important;
  }
}

/* Atlas book mode: category buttons stay light, the atlas itself keeps a left/right page rhythm. */
.panel--identity .identity-atlas-page:not(.is-hidden),
.panel--atlas.is-open {
  --atlas-book-width: min(100%, 31rem);
  --atlas-book-gap: clamp(0.62rem, 2.8vw, 0.86rem);
}

.panel--identity .identity-atlas-page .atlas-book-layout,
.panel--atlas .atlas-book-layout {
  width: var(--atlas-book-width) !important;
  max-width: var(--atlas-book-width) !important;
  margin-inline: auto !important;
}

.panel--identity .identity-atlas-page .atlas-pages,
.panel--atlas .atlas-pages {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto auto !important;
  grid-template-areas:
    "summary"
    "tabs"
    "collected"
    "locked" !important;
  gap: var(--atlas-book-gap) !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

.panel--identity .identity-atlas-page .atlas-bookmarks,
.panel--atlas .atlas-bookmarks {
  grid-area: tabs !important;
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(clamp(4.2rem, 18vw, 5.6rem), 1fr) !important;
  grid-template-columns: none !important;
  gap: clamp(0.38rem, 1.8vw, 0.56rem) !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 0 0.12rem !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity !important;
}

.panel--identity .identity-atlas-page .atlas-bookmarks::-webkit-scrollbar,
.panel--atlas .atlas-bookmarks::-webkit-scrollbar {
  display: none !important;
}

.panel--identity .identity-atlas-page .atlas-bookmarks button,
.panel--atlas .atlas-bookmarks button {
  display: grid !important;
  grid-template-rows: clamp(1.72rem, 6.8vw, 2.12rem) auto !important;
  place-items: center !important;
  min-height: clamp(3.2rem, 13vw, 3.85rem) !important;
  min-width: 0 !important;
  padding: clamp(0.34rem, 1.8vw, 0.48rem) 0.32rem !important;
  border: 0 !important;
  border-radius: 0.7rem !important;
  background: #f7f1cf !important;
  color: #687452 !important;
  scroll-snap-align: start !important;
}

.panel--identity .identity-atlas-page .atlas-bookmarks button.is-active,
.panel--atlas .atlas-bookmarks button.is-active {
  background: #e4f2bf !important;
  color: #4f6d45 !important;
  outline: 0 !important;
}

.panel--identity .identity-atlas-page .atlas-bookmarks button.is-active::after,
.panel--atlas .atlas-bookmarks button.is-active::after {
  content: "" !important;
  right: 0.38rem !important;
  top: 0.38rem !important;
  width: 0.28rem !important;
  height: 0.28rem !important;
  border-radius: 0 !important;
  background: #fff4a8 !important;
  box-shadow: -0.28rem 0.36rem 0 #c8e99d !important;
}

.panel--identity .identity-atlas-page .atlas-bookmarks strong,
.panel--atlas .atlas-bookmarks strong {
  width: clamp(1.78rem, 7vw, 2.18rem) !important;
  height: clamp(1.78rem, 7vw, 2.18rem) !important;
}

.panel--identity .identity-atlas-page .atlas-bookmarks i,
.panel--atlas .atlas-bookmarks i {
  max-width: 100% !important;
  overflow: hidden !important;
  font-size: clamp(0.68rem, 2.8vw, 0.82rem) !important;
  line-height: 1.05 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.panel--identity .identity-atlas-page .atlas-card,
.panel--atlas .atlas-card {
  border: 0 !important;
  border-radius: 0.92rem !important;
  background: #f8edc9 !important;
  box-shadow: none !important;
}

.panel--identity .identity-atlas-page .atlas-card--collected,
.panel--atlas .atlas-card--collected {
  grid-area: collected !important;
  padding: clamp(0.66rem, 2.8vw, 0.86rem) !important;
}

.panel--identity .identity-atlas-page .atlas-card--locked,
.panel--atlas .atlas-card--locked {
  grid-area: locked !important;
  padding: clamp(0.62rem, 2.6vw, 0.82rem) !important;
  background: #f6f0d2 !important;
}

.panel--identity .identity-atlas-page .atlas-card h2,
.panel--atlas .atlas-card h2 {
  margin: 0 0 clamp(0.46rem, 2vw, 0.62rem) !important;
  color: #66583b !important;
  font-size: clamp(0.96rem, 3.8vw, 1.14rem) !important;
  line-height: 1.1 !important;
}

.panel--identity .identity-atlas-page .atlas-list .atlas-storybook,
.panel--atlas .atlas-list .atlas-storybook,
.panel--identity .identity-atlas-page .atlas-storybook,
.panel--atlas .atlas-storybook {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 0 !important;
  overflow: hidden !important;
  border-radius: 0.76rem !important;
  background: #fff5cf !important;
  transform-origin: center !important;
}

.panel--identity .identity-atlas-page .atlas-story-page,
.panel--atlas .atlas-story-page {
  min-width: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff5cf !important;
  padding: clamp(0.72rem, 3.3vw, 0.95rem) !important;
}

.panel--identity .identity-atlas-page .atlas-story-page--portrait,
.panel--atlas .atlas-story-page--portrait {
  border-right: 0.1rem solid rgba(134, 112, 70, 0.18) !important;
}

.panel--identity .identity-atlas-page .atlas-story-page--notes::before,
.panel--atlas .atlas-story-page--notes::before {
  content: "" !important;
  position: absolute !important;
  left: -0.08rem !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 0.16rem !important;
  background: #d4b678 !important;
}

.panel--identity .identity-atlas-page .atlas-story-portrait,
.panel--atlas .atlas-story-portrait {
  min-height: clamp(7rem, 29vw, 9.5rem) !important;
}

.panel--identity .identity-atlas-page .atlas-story-portrait img,
.panel--atlas .atlas-story-portrait img {
  width: 82% !important;
  height: 82% !important;
  object-fit: contain !important;
}

.panel--identity .identity-atlas-page .atlas-page-corner,
.panel--atlas .atlas-page-corner {
  right: 0.56rem !important;
  bottom: 0.56rem !important;
  width: clamp(2rem, 8vw, 2.38rem) !important;
  height: clamp(2rem, 8vw, 2.38rem) !important;
  border: 0 !important;
  border-radius: 0 0 0.52rem 0 !important;
  background: #e7d297 !important;
  color: #66583b !important;
  font-size: 0 !important;
}

.panel--identity .identity-atlas-page .atlas-page-corner::before,
.panel--atlas .atlas-page-corner::before {
  content: "" !important;
  position: absolute !important;
  right: 0.38rem !important;
  bottom: 0.38rem !important;
  width: 0.62rem !important;
  height: 0.62rem !important;
  border-right: 0.18rem solid #66583b !important;
  border-bottom: 0.18rem solid #66583b !important;
  transform: rotate(-45deg) !important;
}

.panel--identity .identity-atlas-page .atlas-page-controls,
.panel--atlas .atlas-page-controls {
  display: grid !important;
  grid-template-columns: clamp(2.2rem, 9vw, 2.6rem) minmax(0, 1fr) clamp(2.2rem, 9vw, 2.6rem) !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin: 0 0 clamp(0.5rem, 2.2vw, 0.68rem) !important;
}

.panel--identity .identity-atlas-page .atlas-page-controls button,
.panel--atlas .atlas-page-controls button {
  min-width: 0 !important;
  min-height: clamp(2.16rem, 8.6vw, 2.48rem) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0.58rem !important;
  background: #e4f2bf !important;
  color: #5a704b !important;
  font-size: 0 !important;
}

.panel--identity .identity-atlas-page .atlas-page-controls button::before,
.panel--atlas .atlas-page-controls button::before {
  content: "" !important;
  display: block !important;
  width: 0.58rem !important;
  height: 0.58rem !important;
  margin: auto !important;
  border-left: 0.16rem solid #5a704b !important;
  border-bottom: 0.16rem solid #5a704b !important;
}

.panel--identity .identity-atlas-page #atlasPrevPage::before,
.panel--atlas #atlasPrevPage::before {
  transform: rotate(45deg) !important;
}

.panel--identity .identity-atlas-page #atlasNextPage::before,
.panel--atlas #atlasNextPage::before {
  transform: rotate(-135deg) !important;
}

.panel--identity .identity-atlas-page .atlas-page-controls span,
.panel--atlas .atlas-page-controls span {
  justify-self: center !important;
  color: #7c7355 !important;
  font-size: clamp(0.74rem, 2.8vw, 0.86rem) !important;
  font-weight: 900 !important;
}

.panel--identity .identity-atlas-page .locked-grid,
.panel--atlas .locked-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(0.52rem, 2.4vw, 0.72rem) !important;
}

.panel--identity .identity-atlas-page .locked-grid article,
.panel--atlas .locked-grid article {
  min-height: clamp(5.8rem, 23vw, 7.2rem) !important;
  border: 0 !important;
  border-radius: 0.72rem !important;
  background: #fff7d8 !important;
}

.atlas-list.is-page-turning,
.locked-grid.is-page-turning {
  animation: atlasPageTurn 0.32s steps(4, end);
}

@keyframes atlasPageTurn {
  0% {
    opacity: 0.62;
    transform: translateX(0.22rem) scaleX(0.985);
  }

  100% {
    opacity: 1;
    transform: translateX(0) scaleX(1);
  }
}

@media (max-width: 720px) {
  .panel--identity .identity-atlas-page:not(.is-hidden),
  .panel--atlas.is-open {
    --atlas-book-width: min(100%, 22rem);
  }

  .panel--identity .identity-atlas-page .atlas-pages,
  .panel--atlas .atlas-pages {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "summary"
      "tabs"
      "collected"
      "locked" !important;
    gap: clamp(0.58rem, 2.8vw, 0.78rem) !important;
  }

  .panel--identity .identity-atlas-page .atlas-bookmarks,
  .panel--atlas .atlas-bookmarks {
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(4.3rem, 1fr) !important;
    grid-template-columns: none !important;
  }

  .panel--identity .identity-atlas-page .atlas-list .atlas-storybook,
  .panel--atlas .atlas-list .atlas-storybook,
  .panel--identity .identity-atlas-page .atlas-storybook,
  .panel--atlas .atlas-storybook {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  .panel--identity .identity-atlas-page .atlas-story-page,
  .panel--atlas .atlas-story-page {
    padding: clamp(0.58rem, 2.8vw, 0.78rem) !important;
  }

  .panel--identity .identity-atlas-page .atlas-storybook h3,
  .panel--atlas .atlas-storybook h3 {
    font-size: clamp(0.92rem, 3.6vw, 1.08rem) !important;
  }

  .panel--identity .identity-atlas-page .atlas-storybook blockquote,
  .panel--identity .identity-atlas-page .atlas-storybook p:not(.atlas-story-kicker),
  .panel--identity .identity-atlas-page .atlas-storybook dd,
  .panel--identity .identity-atlas-page .atlas-storybook dt,
  .panel--atlas .atlas-storybook blockquote,
  .panel--atlas .atlas-storybook p:not(.atlas-story-kicker),
  .panel--atlas .atlas-storybook dd,
  .panel--atlas .atlas-storybook dt {
    font-size: clamp(0.66rem, 2.65vw, 0.78rem) !important;
    line-height: 1.25 !important;
  }
}

/* Expedition squad carousel: choosing sprigs uses a left/right strip instead of a stacked picker. */
.panel--expedition.is-open .expedition-squad {
  --squad-thumb-size: clamp(3.45rem, 15.8vw, 4.1rem);
}

.panel--expedition.is-open .expedition-squad header h3 {
  color: #5f704d !important;
}

.panel--expedition.is-open .expedition-squad header h3::after {
  content: "" !important;
  display: inline-block !important;
  width: 0.42rem !important;
  height: 0.42rem !important;
  margin-left: 0.36rem !important;
  background: #b8db82 !important;
  box-shadow: 0.36rem 0.18rem 0 #f1d87c !important;
  vertical-align: 0.08rem !important;
}

.panel--expedition.is-open .squad-slots {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: var(--squad-thumb-size) !important;
  grid-template-columns: none !important;
  justify-content: start !important;
  gap: clamp(0.5rem, 2.3vw, 0.72rem) !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0.06rem 0 0.16rem !important;
  scroll-snap-type: x proximity !important;
}

.panel--expedition.is-open .squad-slots::-webkit-scrollbar,
.panel--expedition.is-open .squad-picker::-webkit-scrollbar {
  display: none !important;
}

.panel--expedition.is-open .squad-slot {
  width: var(--squad-thumb-size) !important;
  height: var(--squad-thumb-size) !important;
  scroll-snap-align: start !important;
}

.panel--expedition.is-open .squad-picker {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: clamp(3.6rem, 16vw, 4.3rem) !important;
  grid-template-columns: none !important;
  gap: clamp(0.48rem, 2.2vw, 0.68rem) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: clamp(0.34rem, 1.8vw, 0.5rem) 0 clamp(0.5rem, 2.2vw, 0.68rem) !important;
  padding: 0.1rem 0 0.22rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity !important;
}

.panel--expedition.is-open .squad-picker.is-hidden {
  display: none !important;
}

.panel--expedition.is-open .squad-picker p {
  grid-column: auto !important;
  min-width: min(100%, 12rem) !important;
  margin: 0 !important;
  padding: 0.68rem 0.82rem !important;
  border-radius: 0.72rem !important;
  background: rgba(255, 249, 232, 0.72) !important;
}

.panel--expedition.is-open .squad-picker-option {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 0.16rem !important;
  width: clamp(3.6rem, 16vw, 4.3rem) !important;
  min-width: 0 !important;
  min-height: clamp(4.65rem, 20vw, 5.45rem) !important;
  padding: 0.34rem 0.26rem !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0.76rem !important;
  background: rgba(255, 249, 232, 0.72) !important;
  scroll-snap-align: start !important;
}

.panel--expedition.is-open .squad-picker-option.is-selected {
  background: #e5f2bf !important;
  box-shadow: inset 0 0 0 0.12rem rgba(112, 148, 92, 0.32) !important;
}

.panel--expedition.is-open .squad-picker-option img {
  width: clamp(2.64rem, 11vw, 3.28rem) !important;
  height: clamp(2.64rem, 11vw, 3.28rem) !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
}

.panel--expedition.is-open .squad-picker-option span {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: #61714f !important;
  font-size: clamp(0.6rem, 2.45vw, 0.72rem) !important;
  line-height: 1.05 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 420px) {
  .panel--expedition.is-open .expedition-squad {
    --squad-thumb-size: clamp(3.1rem, 15.5vw, 3.62rem);
  }

  .panel--expedition.is-open .squad-picker {
    grid-auto-columns: 3.36rem !important;
  }

  .panel--expedition.is-open .squad-picker-option {
    width: 3.36rem !important;
    min-height: 4.78rem !important;
  }
}

/* Expedition and radar share the same phone-side margins. */
.panel--expedition.is-open {
  --expedition-width: min(100%, 22rem) !important;
  left: clamp(1rem, 5.6vw, 1.36rem) !important;
  right: clamp(1rem, 5.6vw, 1.36rem) !important;
}

@media (max-width: 720px) {
  .panel--expedition.is-open {
    --expedition-width: min(100%, 20.4rem) !important;
    left: clamp(1rem, 5.6vw, 1.36rem) !important;
    right: clamp(1rem, 5.6vw, 1.36rem) !important;
  }

  .panel--expedition.is-open .adventure-header,
  .panel--expedition.is-open .adventure-scene,
  .panel--expedition.is-open .adventure-content {
    width: var(--expedition-width) !important;
    max-width: var(--expedition-width) !important;
  }
}

/* Passport name row: keep the green "种种" directly after the player name. */
.panel--identity .identity-name-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: clamp(0.24rem, 1.2vw, 0.36rem) !important;
  width: 100% !important;
  min-width: 0 !important;
}

.panel--identity .identity-name-row h3,
.panel--identity .identity-name-row input {
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: calc(100% - clamp(4.3rem, 16vw, 5.2rem)) !important;
  min-width: 0 !important;
}

.panel--identity .identity-certified-mark {
  flex: 0 0 auto !important;
  margin-left: 0 !important;
  white-space: nowrap !important;
}

.panel--identity .identity-name-row #editIdentityName {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

@media (max-width: 720px) {
  .panel--identity .identity-name-row h3,
  .panel--identity .identity-name-row input {
    max-width: calc(100% - 4.85rem) !important;
  }
}

/* Passport text alignment: edit on text, equal insets, no ID overflow. */
.panel--identity .identity-profile {
  --passport-text-inset: clamp(0.58rem, 2.8vw, 0.84rem);
  align-content: start !important;
  gap: clamp(0.48rem, 2.2vw, 0.66rem) !important;
  padding-inline: 0 !important;
  overflow: hidden !important;
}

.panel--identity .passport-id-strip,
.panel--identity .identity-name-block,
.panel--identity .identity-signature,
.panel--identity .identity-profile ul {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.panel--identity .passport-id-strip {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(0.42rem, 2vw, 0.6rem) !important;
  padding: clamp(0.38rem, 1.8vw, 0.5rem) var(--passport-text-inset) !important;
  overflow: hidden !important;
}

.panel--identity .passport-id-strip span {
  min-width: 0 !important;
  color: #8a744d !important;
  font-size: clamp(0.62rem, 2.3vw, 0.72rem) !important;
  white-space: nowrap !important;
}

.panel--identity .passport-id-strip b,
.panel--identity .passport-id-strip strong,
.panel--identity #identityPassportId {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: #6b7654 !important;
  font-size: clamp(0.68rem, 2.55vw, 0.8rem) !important;
  line-height: 1.1 !important;
  text-align: right !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.panel--identity .identity-name-block {
  padding-inline: var(--passport-text-inset) !important;
}

.panel--identity .identity-name-row {
  min-width: 0 !important;
}

.panel--identity .identity-name-row h3,
.panel--identity .identity-name-row input,
.panel--identity .identity-signature p,
.panel--identity .identity-inline-input--bio {
  cursor: text !important;
}

.panel--identity .identity-name-row h3:hover,
.panel--identity .identity-signature p:hover {
  color: #5f704d !important;
}

.panel--identity .identity-inline-input {
  box-sizing: border-box !important;
  min-width: 0 !important;
  border: 0 !important;
  border-bottom: 0.12rem solid rgba(111, 148, 102, 0.42) !important;
  background: transparent !important;
}

.panel--identity .identity-signature {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  padding: clamp(0.48rem, 2.2vw, 0.66rem) var(--passport-text-inset) !important;
  border-radius: 0.66rem !important;
}

.panel--identity .identity-signature p,
.panel--identity .identity-inline-input--bio {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-wrap: anywhere !important;
  text-align: left !important;
}

.panel--identity #editIdentityName,
.panel--identity #editIdentityBio {
  opacity: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.panel--identity .identity-profile ul {
  padding: clamp(0.32rem, 1.6vw, 0.46rem) var(--passport-text-inset) !important;
}

.panel--identity .identity-profile li {
  grid-template-columns: clamp(2.28rem, 9.8vw, 2.78rem) minmax(0, 1fr) !important;
  padding-inline: 0 !important;
}

.panel--identity .identity-profile li b,
.panel--identity .identity-profile li em {
  min-width: 0 !important;
  max-width: 100% !important;
}

.panel--identity .identity-profile li em {
  overflow: hidden !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 720px) {
  .panel--identity .identity-profile {
    --passport-text-inset: clamp(0.66rem, 3.8vw, 0.92rem);
  }

  .panel--identity .passport-id-strip {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }
}

/* Items page final pass: show the full landform, separate seeds, and quiet the greenhouse action. */
.panel--identity[data-active-identity-tab="items"] .landform-overview {
  gap: clamp(0.7rem, 3vw, 0.95rem) !important;
  padding: clamp(0.72rem, 3.4vw, 0.96rem) !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-panorama {
  display: grid !important;
  place-items: center !important;
  aspect-ratio: 16 / 9 !important;
  min-height: clamp(8.8rem, 38vw, 12.2rem) !important;
  max-height: none !important;
  overflow: hidden !important;
  border-radius: 0.82rem !important;
  background: #e7f2d2 !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-panorama img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  image-rendering: pixelated !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-section {
  margin-top: clamp(2.2rem, 10vw, 3.15rem) !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card {
  grid-template-columns: clamp(3.05rem, 13vw, 3.62rem) minmax(0, 1fr) auto !important;
  min-height: clamp(4.75rem, 19vw, 5.5rem) !important;
  padding: clamp(0.7rem, 3.2vw, 0.92rem) !important;
  column-gap: clamp(0.58rem, 2.8vw, 0.78rem) !important;
  row-gap: 0 !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card::after {
  content: none !important;
  display: none !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card > span {
  width: clamp(3.05rem, 13vw, 3.62rem) !important;
  height: clamp(3.05rem, 13vw, 3.62rem) !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card > div {
  display: grid !important;
  gap: 0.14rem !important;
  min-width: 0 !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card strong {
  font-size: clamp(1rem, 3.8vw, 1.16rem) !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card p {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: #7a835e !important;
  font-size: clamp(0.64rem, 2.45vw, 0.74rem) !important;
  line-height: 1.12 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card button {
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: end !important;
  width: clamp(2.2rem, 9vw, 2.62rem) !important;
  min-width: clamp(2.2rem, 9vw, 2.62rem) !important;
  height: clamp(2.2rem, 9vw, 2.62rem) !important;
  min-height: clamp(2.2rem, 9vw, 2.62rem) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0.62rem !important;
  background: #e4f1be !important;
  color: transparent !important;
  font-size: 0 !important;
  overflow: hidden !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card button::before,
.panel--identity[data-active-identity-tab="items"] .seed-pouch-card button::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  image-rendering: pixelated !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card button::before {
  left: 50% !important;
  top: 50% !important;
  width: 1.18rem !important;
  height: 0.82rem !important;
  border: 0.12rem solid #6f8f58 !important;
  border-radius: 0.12rem 0.12rem 0.24rem 0.24rem !important;
  background: #fff3bd !important;
  transform: translate(-50%, -34%) !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card button::after {
  left: 50% !important;
  top: 38% !important;
  width: 0.18rem !important;
  height: 0.72rem !important;
  background: #6f8f58 !important;
  box-shadow:
    -0.34rem -0.02rem 0 0.12rem #9fcd75,
    0.34rem 0.08rem 0 0.12rem #b9dc82 !important;
  transform: translate(-50%, -50%) !important;
}

@media (max-width: 420px) {
  .panel--identity[data-active-identity-tab="items"] .seed-pouch-card {
    grid-template-columns: 3rem minmax(0, 1fr) 2.25rem !important;
  }
}

/* Debug pass: one alignment contract for expedition, atlas, and backpack icons. */
.panel--expedition.is-open {
  --expedition-width: min(100%, 21.8rem) !important;
  --expedition-pad: clamp(0.34rem, 1.6vw, 0.48rem);
}

.panel--expedition.is-open .adventure-header,
.panel--expedition.is-open .adventure-scene,
.panel--expedition.is-open .adventure-content {
  width: var(--expedition-width) !important;
  max-width: var(--expedition-width) !important;
}

.panel--expedition.is-open .adventure-content {
  padding-inline: var(--expedition-pad) !important;
}

.panel--expedition.is-open .adventure-status,
.panel--expedition.is-open .map-pack-picker,
.panel--expedition.is-open .expedition-planning,
.panel--expedition.is-open .together-card,
.panel--expedition.is-open .expedition-loot,
.panel--expedition.is-open .quest-section {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-inline: 0 !important;
  box-sizing: border-box !important;
}

.panel--expedition.is-open .adventure-status,
.panel--expedition.is-open .expedition-squad,
.panel--expedition.is-open .duration-picker,
.panel--expedition.is-open .together-card {
  padding-inline: 0 !important;
}

.panel--expedition.is-open .expedition-squad header,
.panel--expedition.is-open .squad-slots,
.panel--expedition.is-open .squad-picker,
.panel--expedition.is-open .duration-picker {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.panel--expedition.is-open .together-card {
  grid-template-columns: clamp(2.42rem, 10.2vw, 2.8rem) minmax(0, 1fr) minmax(6.5rem, 34%) !important;
  padding: clamp(0.48rem, 2.1vw, 0.62rem) !important;
  border-radius: 0.78rem !important;
  background: rgba(255, 249, 225, 0.74) !important;
}

.panel--expedition.is-open .together-card > span {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: clamp(2.42rem, 10.2vw, 2.8rem) !important;
  height: clamp(2.42rem, 10.2vw, 2.8rem) !important;
  margin: 0 !important;
  border-radius: 0.56rem !important;
  background: #e4efbf !important;
  overflow: hidden !important;
}

.panel--expedition.is-open .together-card > span img {
  display: none !important;
}

.panel--expedition.is-open .together-card > span::before,
.panel--expedition.is-open .together-card > span::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  image-rendering: pixelated !important;
}

.panel--expedition.is-open .together-card > span::before {
  left: 0.54rem !important;
  top: 0.62rem !important;
  width: 1.18rem !important;
  height: 0.78rem !important;
  border-left: 0.18rem solid #6f8d57 !important;
  border-bottom: 0.18rem solid #6f8d57 !important;
  background: #9fd47a !important;
  box-shadow:
    0.3rem 0.28rem 0 #d7c66e,
    0.68rem 0.28rem 0 #d7c66e,
    0.18rem 0.52rem 0 #f1e1a0 !important;
}

.panel--expedition.is-open .together-card > span::after {
  right: 0.46rem !important;
  top: 0.42rem !important;
  width: 0.42rem !important;
  height: 0.42rem !important;
  background: #f2d877 !important;
  box-shadow:
    -0.22rem 0.5rem 0 #92c874,
    -0.52rem 0.82rem 0 #6f8d57 !important;
}

.panel--expedition.is-open .together-card b {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.panel--expedition.is-open .squad-slot,
.panel--expedition.is-open .squad-picker-option,
.panel--expedition.is-open .quest-card > b,
.panel--expedition.is-open .quest-card mark,
.panel--expedition.is-open .quest-card button,
.panel--expedition.is-open .daily-pixel-icon {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

.panel--expedition.is-open .squad-slot img,
.panel--expedition.is-open .squad-picker-option img {
  display: block !important;
  margin: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}

.panel--expedition.is-open .squad-slot span {
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.panel--identity .backpack-tab-icon,
.panel--identity .section-title-icon,
.panel--atlas .atlas-tab-icon,
.panel--identity .identity-atlas-page .atlas-tab-icon,
.panel--identity[data-active-identity-tab="items"] .landform-region-chip i,
.panel--identity[data-active-identity-tab="items"] .seed-pouch-card > span {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.panel--identity .backpack-tab-icon img,
.panel--identity .section-title-icon img,
.panel--identity[data-active-identity-tab="items"] .seed-pouch-card > span img {
  display: block !important;
  width: 78% !important;
  height: 78% !important;
  margin: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Atlas and landform maps are now real left/right swipe surfaces. */
.panel--identity .identity-atlas-page .atlas-list,
.panel--atlas .atlas-list {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 100% !important;
  grid-template-columns: none !important;
  gap: clamp(0.58rem, 2.6vw, 0.76rem) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important;
}

.panel--identity .identity-atlas-page .atlas-list::-webkit-scrollbar,
.panel--atlas .atlas-list::-webkit-scrollbar,
.panel--identity .identity-atlas-page .locked-grid::-webkit-scrollbar,
.panel--atlas .locked-grid::-webkit-scrollbar,
.panel--identity[data-active-identity-tab="items"] .landform-panorama::-webkit-scrollbar {
  display: none !important;
}

.panel--identity .identity-atlas-page .atlas-list .atlas-storybook,
.panel--atlas .atlas-list .atlas-storybook {
  width: 100% !important;
  min-width: 100% !important;
  scroll-snap-align: center !important;
}

.panel--identity .identity-atlas-page .locked-grid,
.panel--atlas .locked-grid {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(clamp(7.1rem, 42vw, 8.4rem), 1fr) !important;
  grid-template-columns: none !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity !important;
  padding-bottom: 0.12rem !important;
}

.panel--identity .identity-atlas-page .locked-grid article,
.panel--atlas .locked-grid article {
  scroll-snap-align: start !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-panorama {
  display: block !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity !important;
  scrollbar-width: none !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-panorama img {
  display: block !important;
  width: max(100%, 35rem) !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  scroll-snap-align: center !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-section,
.panel--identity[data-active-identity-tab="items"] .seed-pouch-section {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-section h3,
.panel--identity[data-active-identity-tab="items"] .seed-pouch-section h3 {
  align-items: center !important;
  gap: clamp(0.5rem, 2.4vw, 0.68rem) !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-shelf {
  display: grid !important;
  gap: clamp(0.82rem, 3.8vw, 1.08rem) !important;
}

/* Backpack fit pass: one content rail, passport number anchored to the card. */
.panel--identity {
  --backpack-content-width: min(100%, 23rem);
  --backpack-card-pad: clamp(0.92rem, 4.2vw, 1.28rem);
  --backpack-text-inset: clamp(0.72rem, 3.6vw, 1rem);
}

.panel--identity .identity-topbar,
.panel--identity .identity-tabs,
.panel--identity .identity-pages,
.panel--identity .identity-hero.passport-card,
.panel--identity .identity-section,
.panel--identity .identity-atlas-page .atlas-book-layout {
  width: var(--backpack-content-width) !important;
  max-width: var(--backpack-content-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.panel--identity .identity-pages {
  display: block !important;
  min-width: 0 !important;
}

.panel--identity .identity-tabs {
  padding-inline: 0 !important;
}

.panel--identity .identity-tabs button {
  min-width: 0 !important;
}

.panel--identity .identity-hero.passport-card {
  position: relative !important;
  grid-template-columns: 1fr !important;
  gap: clamp(0.68rem, 3.2vw, 0.94rem) !important;
  padding: var(--backpack-card-pad) var(--backpack-card-pad) clamp(1.82rem, 7vw, 2.35rem) !important;
  overflow: hidden !important;
}

.panel--identity .passport-card::before {
  inset: var(--backpack-card-pad) !important;
}

.panel--identity .identity-portrait {
  width: 100% !important;
  min-height: clamp(9.7rem, 34vw, 12.7rem) !important;
  max-height: clamp(10.8rem, 38vw, 13.6rem) !important;
  box-sizing: border-box !important;
}

.panel--identity .identity-profile {
  position: static !important;
  display: grid !important;
  gap: clamp(0.5rem, 2.4vw, 0.68rem) !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 var(--backpack-text-inset) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.panel--identity .passport-id-strip {
  position: absolute !important;
  left: auto !important;
  right: calc(var(--backpack-card-pad) + 0.18rem) !important;
  top: auto !important;
  bottom: calc(var(--backpack-card-pad) * 0.56) !important;
  z-index: 5 !important;
  display: block !important;
  max-width: calc(100% - (var(--backpack-card-pad) * 2)) !important;
  padding: 0 !important;
  color: rgba(93, 113, 77, 0.52) !important;
  background: transparent !important;
  text-align: right !important;
  pointer-events: none !important;
}

.panel--identity .passport-id-strip span {
  display: none !important;
}

.panel--identity .passport-id-strip b,
.panel--identity #identityPassportId {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: rgba(93, 113, 77, 0.52) !important;
  font-size: clamp(0.56rem, 2.25vw, 0.68rem) !important;
  line-height: 1 !important;
  text-align: right !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.panel--identity .identity-name-block,
.panel--identity .identity-signature,
.panel--identity .identity-profile ul {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

.panel--identity .identity-name-row {
  grid-template-columns: minmax(0, auto) auto !important;
  justify-content: start !important;
  column-gap: clamp(0.28rem, 1.4vw, 0.4rem) !important;
}

.panel--identity .identity-name-row h3,
.panel--identity .identity-name-row input {
  width: auto !important;
  max-width: calc(100% - 3.4rem) !important;
}

.panel--identity .identity-certified-mark {
  margin-left: 0 !important;
}

.panel--identity .identity-signature {
  margin-top: 0 !important;
  justify-items: start !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.panel--identity .identity-signature p,
.panel--identity .identity-inline-input--bio {
  text-align: left !important;
}

.panel--identity .identity-profile ul {
  margin-top: clamp(0.18rem, 1.2vw, 0.32rem) !important;
  padding-top: clamp(0.5rem, 2.2vw, 0.66rem) !important;
}

.panel--identity .identity-profile li {
  grid-template-columns: clamp(2.28rem, 9.5vw, 2.78rem) minmax(0, 1fr) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-section,
.panel--identity[data-active-identity-tab="items"] .seed-pouch-section,
.panel--identity .identity-atlas-page {
  width: var(--backpack-content-width) !important;
  max-width: var(--backpack-content-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-overview,
.panel--identity[data-active-identity-tab="items"] .seed-pouch-card,
.panel--identity .identity-atlas-page .atlas-pages {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

@media (min-width: 721px) {
  .panel--identity {
    --backpack-content-width: min(100%, 34rem);
  }

  .panel--identity .identity-hero.passport-card {
    grid-template-columns: minmax(10rem, 0.82fr) minmax(0, 1.18fr) !important;
    align-items: stretch !important;
  }
}

@media (max-width: 420px) {
  .panel--identity {
    --backpack-content-width: min(100%, 21rem);
    --backpack-card-pad: clamp(0.82rem, 4.1vw, 1rem);
    --backpack-text-inset: clamp(0.56rem, 3.2vw, 0.78rem);
  }
}

/* Final layout audit: map radar, expedition, weather and task icons share one mobile rhythm. */
.panel--map.is-open,
.panel--expedition.is-open {
  --shared-panel-width: min(100%, 20.6rem);
  --shared-panel-gap: clamp(0.78rem, 3.8vw, 0.98rem);
  --shared-card-inset: clamp(0.66rem, 3vw, 0.84rem);
}

.panel--map.is-open {
  --map-radar-width: var(--shared-panel-width) !important;
  --map-radar-gap: var(--shared-panel-gap) !important;
  padding-inline: clamp(1rem, 5.4vw, 1.42rem) !important;
  row-gap: 0 !important;
}

.panel--map.is-open .panel-header,
.panel--map.is-open .radar,
.panel--map.is-open .map-actions,
.panel--map.is-open .map-results {
  width: var(--shared-panel-width) !important;
  max-width: var(--shared-panel-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.panel--map.is-open .panel-header {
  display: grid !important;
  gap: clamp(0.22rem, 1.1vw, 0.32rem) !important;
  margin-bottom: var(--shared-panel-gap) !important;
}

.panel--map.is-open .panel-header h2,
.panel--map.is-open .panel-header p {
  margin: 0 !important;
  text-align: center !important;
}

.panel--map.is-open .panel-header h2 {
  line-height: 1.12 !important;
}

.panel--map.is-open .panel-header p {
  line-height: 1.28 !important;
}

.panel--map.is-open .radar {
  margin-bottom: var(--shared-panel-gap) !important;
}

.panel--map.is-open .map-actions {
  gap: var(--shared-panel-gap) !important;
  margin-bottom: var(--shared-panel-gap) !important;
}

.panel--map.is-open .map-results {
  min-height: clamp(4.2rem, 17vw, 5rem) !important;
}

.panel--map.is-open .map-results > p {
  min-height: clamp(4.2rem, 17vw, 5rem) !important;
  padding: var(--shared-card-inset) !important;
  line-height: 1.35 !important;
}

.panel--expedition.is-open {
  --expedition-width: var(--shared-panel-width) !important;
  --expedition-gap: var(--shared-panel-gap) !important;
  left: clamp(1rem, 5.4vw, 1.42rem) !important;
  right: clamp(1rem, 5.4vw, 1.42rem) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.panel--expedition.is-open .adventure-header,
.panel--expedition.is-open .adventure-scene,
.panel--expedition.is-open .adventure-content {
  width: var(--shared-panel-width) !important;
  max-width: var(--shared-panel-width) !important;
}

.panel--expedition.is-open .adventure-content {
  padding-inline: 0 !important;
  gap: var(--shared-panel-gap) !important;
}

.panel--expedition.is-open .adventure-status,
.panel--expedition.is-open .expedition-planning,
.panel--expedition.is-open .together-card,
.panel--expedition.is-open .quest-section,
.panel--expedition.is-open .map-pack-picker,
.panel--expedition.is-open .expedition-loot {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

.panel--expedition.is-open .expedition-planning,
.panel--expedition.is-open .quest-section {
  padding: var(--shared-card-inset) !important;
  border: 0 !important;
  border-radius: 0.82rem !important;
  background: #eef4d8 !important;
}

.panel--expedition.is-open .expedition-squad,
.panel--expedition.is-open .duration-picker,
.panel--expedition.is-open .quest-list {
  width: 100% !important;
  max-width: 100% !important;
}

.panel--expedition.is-open .expedition-squad {
  gap: clamp(0.54rem, 2.5vw, 0.72rem) !important;
}

.panel--expedition.is-open .expedition-squad header {
  padding-inline: 0 !important;
}

.panel--expedition.is-open .squad-slots,
.panel--expedition.is-open .squad-picker,
.panel--expedition.is-open .duration-picker {
  padding-inline: 0 !important;
}

.panel--expedition.is-open .duration-picker {
  gap: clamp(0.42rem, 2vw, 0.56rem) !important;
}

.panel--expedition.is-open .quest-card {
  padding: var(--shared-card-inset) !important;
}

/* Weather icon redraw: every weather layer is centered inside the pixel tile. */
.weather-icon {
  position: relative !important;
  display: block !important;
  width: clamp(2.06rem, 5.2vw, 2.34rem) !important;
  height: clamp(2.06rem, 5.2vw, 2.34rem) !important;
  min-width: clamp(2.06rem, 5.2vw, 2.34rem) !important;
  border-radius: 0.42rem !important;
  background: #edf5cf !important;
  overflow: hidden !important;
}

.weather-icon::before,
.weather-icon::after,
.weather-icon i {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 0 !important;
  image-rendering: pixelated !important;
}

.weather-icon__sun {
  z-index: 1 !important;
  left: 0.36rem !important;
  top: 0.34rem !important;
  width: 0.58rem !important;
  height: 0.58rem !important;
  background: #f2ce67 !important;
  box-shadow:
    0.7rem 0.1rem 0 -0.18rem #f2ce67,
    0.18rem 0.66rem 0 -0.18rem #f2ce67 !important;
}

.weather-icon__cloud {
  z-index: 2 !important;
  left: 0.48rem !important;
  top: 0.92rem !important;
  width: 1.16rem !important;
  height: 0.42rem !important;
  background: #d8eabe !important;
  box-shadow:
    -0.2rem 0.16rem 0 #d8eabe,
    0.28rem -0.24rem 0 0.08rem #d8eabe,
    0.62rem 0.08rem 0 #c6ddb0 !important;
}

.weather-icon__drop {
  z-index: 3 !important;
  left: 0.6rem !important;
  top: 1.5rem !important;
  width: 0.18rem !important;
  height: 0.34rem !important;
  background: #7ebbd0 !important;
  box-shadow:
    0.44rem -0.06rem 0 #7ebbd0,
    0.86rem 0 0 #7ebbd0 !important;
}

.weather-icon__flake {
  z-index: 3 !important;
  left: 0.56rem !important;
  top: 1.44rem !important;
  width: 0.22rem !important;
  height: 0.22rem !important;
  background: #ffffff !important;
  box-shadow:
    0.44rem 0.04rem 0 #ffffff,
    0.86rem -0.02rem 0 #ffffff,
    0.42rem 0.36rem 0 #ffffff !important;
}

.weather-icon--calm .weather-icon__sun,
.weather-icon--sunny .weather-icon__sun,
.weather-icon--rainbow .weather-icon__sun {
  opacity: 1 !important;
}

.weather-icon--calm .weather-icon__cloud,
.weather-icon--cloud .weather-icon__cloud,
.weather-icon--mist .weather-icon__cloud,
.weather-icon--rain .weather-icon__cloud,
.weather-icon--storm .weather-icon__cloud,
.weather-icon--snow .weather-icon__cloud,
.weather-icon--rainbow .weather-icon__cloud {
  opacity: 1 !important;
}

.weather-icon--cloud .weather-icon__sun,
.weather-icon--mist .weather-icon__sun {
  opacity: 0.42 !important;
}

.weather-icon--rain .weather-icon__drop,
.weather-icon--storm .weather-icon__drop,
.weather-icon--snow .weather-icon__flake {
  opacity: 1 !important;
}

.weather-icon--mist::after {
  z-index: 4 !important;
  left: 0.48rem !important;
  top: 1.64rem !important;
  width: 1.24rem !important;
  height: 0.12rem !important;
  background: #aac9a7 !important;
  box-shadow: 0 0.28rem 0 #c1d8b8 !important;
  opacity: 1 !important;
}

.weather-icon--storm::after {
  z-index: 4 !important;
  left: 1.18rem !important;
  top: 1.36rem !important;
  width: 0.18rem !important;
  height: 0.18rem !important;
  background: #f2ce67 !important;
  box-shadow:
    0.18rem 0.18rem 0 #f2ce67,
    -0.1rem 0.36rem 0 #f2ce67 !important;
  opacity: 1 !important;
}

/* Daily task icons redraw: simple readable pixel pictures inside one fixed icon box. */
.panel--expedition.is-open .daily-pixel-icon {
  position: relative !important;
  width: clamp(2.28rem, 9.4vw, 2.62rem) !important;
  height: clamp(2.28rem, 9.4vw, 2.62rem) !important;
  min-width: clamp(2.28rem, 9.4vw, 2.62rem) !important;
  border: 0 !important;
  border-radius: 0.44rem !important;
  background: #f5efc8 !important;
  overflow: hidden !important;
}

.panel--expedition.is-open .daily-pixel-icon i,
.panel--expedition.is-open .daily-pixel-icon i::before,
.panel--expedition.is-open .daily-pixel-icon i::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  transform: none !important;
  image-rendering: pixelated !important;
}

.panel--expedition.is-open .daily-pixel-icon i {
  left: 50% !important;
  top: 50% !important;
  width: 1.28rem !important;
  height: 1.28rem !important;
  background: #9fcd75 !important;
  transform: translate(-50%, -50%) !important;
}

.panel--expedition.is-open .daily-pixel-icon--task i {
  width: 1.08rem !important;
  height: 1.24rem !important;
  border: 0.12rem solid #6c8058 !important;
  background: #fff3bd !important;
  box-shadow: inset 0 -0.28rem 0 #dce9aa !important;
}

.panel--expedition.is-open .daily-pixel-icon--task i::before {
  left: 0.2rem !important;
  top: 0.28rem !important;
  width: 0.52rem !important;
  height: 0.1rem !important;
  background: #7fa46c !important;
  box-shadow: 0 0.3rem 0 #7fa46c !important;
}

.panel--expedition.is-open .daily-pixel-icon--task i::after {
  left: 0.24rem !important;
  top: -0.24rem !important;
  width: 0.52rem !important;
  height: 0.22rem !important;
  background: #9fcd75 !important;
}

.panel--expedition.is-open .daily-pixel-icon--energy i,
.panel--expedition.is-open .quest-card mark::before {
  width: 0.28rem !important;
  height: 1.34rem !important;
  background: #e5b84e !important;
  box-shadow:
    0.24rem 0.22rem 0 #e5b84e,
    -0.18rem 0.68rem 0 #e5b84e,
    0.08rem 1rem 0 #e5b84e !important;
}

.panel--expedition.is-open .daily-pixel-icon--scan i {
  width: 1.32rem !important;
  height: 0.9rem !important;
  border: 0.12rem solid #6c8058 !important;
  background: #fff3bd !important;
}

.panel--expedition.is-open .daily-pixel-icon--scan i::before {
  left: 0.42rem !important;
  top: 0.24rem !important;
  width: 0.46rem !important;
  height: 0.46rem !important;
  border: 0.1rem solid #6c8058 !important;
  border-radius: 50% !important;
  background: #c8eee7 !important;
}

.panel--expedition.is-open .daily-pixel-icon--scan i::after {
  left: 0.2rem !important;
  top: -0.22rem !important;
  width: 0.42rem !important;
  height: 0.2rem !important;
  background: #9fcd75 !important;
}

.panel--expedition.is-open .daily-pixel-icon--expedition i {
  width: 1.24rem !important;
  height: 1.24rem !important;
  border: 0.12rem solid #6c8058 !important;
  border-radius: 50% !important;
  background: #fff3bd !important;
}

.panel--expedition.is-open .daily-pixel-icon--expedition i::before {
  left: 0.52rem !important;
  top: 0.16rem !important;
  width: 0.18rem !important;
  height: 0.9rem !important;
  background: #7fa46c !important;
}

.panel--expedition.is-open .daily-pixel-icon--expedition i::after {
  left: 0.18rem !important;
  top: 0.52rem !important;
  width: 0.9rem !important;
  height: 0.18rem !important;
  background: #7fa46c !important;
}

.panel--expedition.is-open .daily-pixel-icon--plant i {
  width: 0.2rem !important;
  height: 1.08rem !important;
  background: #6f9466 !important;
}

.panel--expedition.is-open .daily-pixel-icon--plant i::before {
  left: -0.5rem !important;
  top: 0.22rem !important;
  width: 0.62rem !important;
  height: 0.42rem !important;
  border-radius: 70% 20% 70% 20% !important;
  background: #9fcd75 !important;
  box-shadow: 0.58rem 0.24rem 0 #bfe58b !important;
}

.panel--expedition.is-open .daily-pixel-icon--plant i::after {
  left: -0.28rem !important;
  top: -0.22rem !important;
  width: 0.76rem !important;
  height: 0.46rem !important;
  background: #f2d56f !important;
  box-shadow:
    -0.18rem 0.18rem 0 #fff3bd,
    0.18rem 0.18rem 0 #fff3bd !important;
}

.panel--expedition.is-open .daily-pixel-icon--atlas i {
  width: 1.36rem !important;
  height: 1rem !important;
  border: 0.12rem solid #6c8058 !important;
  background: #fff3bd !important;
}

.panel--expedition.is-open .daily-pixel-icon--atlas i::before {
  left: 0.58rem !important;
  top: 0 !important;
  width: 0.12rem !important;
  height: 1rem !important;
  background: #6c8058 !important;
}

.panel--expedition.is-open .daily-pixel-icon--atlas i::after {
  left: 0.2rem !important;
  top: 0.28rem !important;
  width: 0.26rem !important;
  height: 0.12rem !important;
  background: #8ab46e !important;
  box-shadow:
    0 0.28rem 0 #8ab46e,
    0.72rem 0.04rem 0 #d5b668,
    0.72rem 0.34rem 0 #d5b668 !important;
}

.panel--expedition.is-open .daily-pixel-icon--walk i {
  width: 0.44rem !important;
  height: 0.76rem !important;
  border: 0.12rem solid #6c8058 !important;
  border-radius: 0.28rem 0.28rem 0.14rem 0.14rem !important;
  background: #d8e9a8 !important;
  transform: translate(-76%, -44%) rotate(-8deg) !important;
}

.panel--expedition.is-open .daily-pixel-icon--walk i::before {
  left: 0.58rem !important;
  top: 0.38rem !important;
  width: 0.44rem !important;
  height: 0.76rem !important;
  border: 0.12rem solid #6c8058 !important;
  border-radius: 0.28rem 0.28rem 0.14rem 0.14rem !important;
  background: #bfe58b !important;
  transform: rotate(16deg) !important;
}

.panel--expedition.is-open .daily-pixel-icon--walk i::after {
  display: none !important;
}

.panel--expedition.is-open .daily-pixel-icon--water i {
  width: 0.82rem !important;
  height: 1.08rem !important;
  border: 0.12rem solid #6c8058 !important;
  border-radius: 50% 50% 58% 58% !important;
  background: #9fcbd8 !important;
}

.panel--expedition.is-open .daily-pixel-icon--water i::before {
  left: 0.16rem !important;
  top: 0.2rem !important;
  width: 0.2rem !important;
  height: 0.2rem !important;
  border-radius: 50% !important;
  background: #e9fbff !important;
}

.panel--expedition.is-open .daily-pixel-icon--water i::after {
  display: none !important;
}

.panel--expedition.is-open .daily-pixel-icon--friend i {
  width: 0.54rem !important;
  height: 0.54rem !important;
  border: 0.12rem solid #6c8058 !important;
  border-radius: 50% !important;
  background: #d8e9a8 !important;
  box-shadow: 0.58rem 0.02rem 0 -0.02rem #c8eee7, 0.58rem 0.02rem 0 0.1rem #6c8058 !important;
  transform: translate(-78%, -58%) !important;
}

.panel--expedition.is-open .daily-pixel-icon--friend i::before {
  left: -0.08rem !important;
  top: 0.58rem !important;
  width: 0.86rem !important;
  height: 0.46rem !important;
  border: 0.12rem solid #6c8058 !important;
  border-radius: 0.36rem 0.36rem 0.16rem 0.16rem !important;
  background: #bfe58b !important;
  box-shadow: 0.58rem 0.02rem 0 -0.02rem #c8eee7, 0.58rem 0.02rem 0 0.1rem #6c8058 !important;
}

.panel--expedition.is-open .daily-pixel-icon--friend i::after {
  display: none !important;
}

/* Passport micro fixes: ID inside dashed frame, inline signature edit, visible name edit hint. */
.panel--identity .passport-id-strip {
  right: calc(var(--backpack-card-pad) + 0.56rem) !important;
  bottom: calc(var(--backpack-card-pad) + 0.38rem) !important;
  max-width: calc(100% - (var(--backpack-card-pad) * 2) - 1.12rem) !important;
  opacity: 0.78 !important;
}

.panel--identity .passport-id-strip b,
.panel--identity #identityPassportId {
  color: rgba(91, 111, 77, 0.58) !important;
  font-size: clamp(0.54rem, 2.15vw, 0.66rem) !important;
  letter-spacing: 0.01em !important;
}

.panel--identity .identity-name-row {
  grid-template-columns: minmax(0, auto) auto auto !important;
}

.panel--identity #editIdentityName {
  position: relative !important;
  display: grid !important;
  width: clamp(1.42rem, 5vw, 1.72rem) !important;
  min-width: clamp(1.42rem, 5vw, 1.72rem) !important;
  height: clamp(1.42rem, 5vw, 1.72rem) !important;
  min-height: clamp(1.42rem, 5vw, 1.72rem) !important;
  margin: 0 !important;
  padding: 0 !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0.32rem !important;
  background: transparent !important;
  color: #7a9b5c !important;
  opacity: 1 !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

.panel--identity #editIdentityName span {
  position: relative !important;
  display: block !important;
  width: 1rem !important;
  height: 1rem !important;
}

.panel--identity #editIdentityName span::before,
.panel--identity #editIdentityName span::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  image-rendering: pixelated !important;
}

.panel--identity #editIdentityName span::before {
  left: 0.12rem !important;
  top: 0.5rem !important;
  width: 0.76rem !important;
  height: 0.18rem !important;
  border-radius: 0 !important;
  background: #78975b !important;
  box-shadow: 0.54rem -0.36rem 0 #d6b66a !important;
  transform: rotate(-38deg) !important;
}

.panel--identity #editIdentityName span::after {
  left: 0.02rem !important;
  top: 0.72rem !important;
  width: 0.28rem !important;
  height: 0.16rem !important;
  background: #9fcd75 !important;
  box-shadow: 0.18rem -0.18rem 0 #9fcd75 !important;
  transform: rotate(-38deg) !important;
}

.panel--identity .identity-name-row.is-editing #editIdentityName {
  display: none !important;
}

.panel--identity .identity-signature {
  position: relative !important;
  display: block !important;
  padding: 0 !important;
  min-height: clamp(1.68rem, 6vw, 2.15rem) !important;
}

.panel--identity .identity-signature p,
.panel--identity .identity-inline-input--bio {
  display: block !important;
  width: 100% !important;
  min-height: clamp(1.68rem, 6vw, 2.15rem) !important;
  box-sizing: border-box !important;
  color: #65724f !important;
  font-size: clamp(0.76rem, 2.82vw, 0.88rem) !important;
  font-weight: 850 !important;
  line-height: 1.34 !important;
}

.panel--identity .identity-inline-input--bio {
  padding: 0 0 0.16rem !important;
  border: 0 !important;
  border-bottom: 0.12rem solid rgba(111, 148, 102, 0.42) !important;
  background: transparent !important;
  outline: none !important;
}

.panel--identity .identity-signature.is-editing p {
  display: none !important;
}

.panel--identity .identity-signature.is-editing .identity-inline-input--bio {
  display: block !important;
}

.panel--identity #editIdentityBio {
  display: none !important;
}

/* Final visible item layout lock: seed entry, then terrain; no overlapping chips. */
.panel--identity[data-active-identity-tab="items"] .identity-pages {
  display: grid !important;
  align-content: start !important;
  gap: clamp(0.92rem, 4vw, 1.16rem) !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-section {
  order: 1 !important;
  margin-top: 0 !important;
}

.panel--identity[data-active-identity-tab="items"] .specialty-section {
  order: 2 !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-section,
.panel--identity[data-active-identity-tab="items"] .specialty-section {
  width: var(--backpack-content-width) !important;
  max-width: var(--backpack-content-width) !important;
  padding: 0 !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

.panel--identity[data-active-identity-tab="items"] .seed-pouch-card {
  display: grid !important;
  grid-template-columns: clamp(3.1rem, 13vw, 3.72rem) minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(0.58rem, 3vw, 0.82rem) !important;
  min-height: clamp(4.6rem, 18vw, 5.42rem) !important;
  padding: clamp(0.68rem, 3.4vw, 0.86rem) !important;
  border: 0.12rem solid rgba(139, 164, 108, 0.56) !important;
  border-radius: 0.72rem !important;
  background: #fff7d8 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-overview {
  display: grid !important;
  grid-template-areas: "image" "regions" !important;
  gap: clamp(0.58rem, 2.8vw, 0.78rem) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-panorama {
  grid-area: image !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 0 !important;
  border: 0.12rem solid rgba(139, 164, 108, 0.48) !important;
  border-radius: 0.82rem !important;
  background: #eef7cc !important;
  overflow: hidden !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-panorama img {
  width: 100% !important;
  min-width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-overview-copy,
.panel--identity[data-active-identity-tab="items"] .landform-switcher {
  display: none !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-strip {
  grid-area: regions !important;
  position: static !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-columns: unset !important;
  gap: clamp(0.46rem, 2.4vw, 0.62rem) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip {
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 0.28rem !important;
  min-width: 0 !important;
  min-height: clamp(4.45rem, 18vw, 5.5rem) !important;
  padding: clamp(0.42rem, 2.2vw, 0.56rem) !important;
  border: 0.12rem solid rgba(139, 164, 108, 0.46) !important;
  border-radius: 0.72rem !important;
  background: #f5f8da !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.panel--identity[data-active-identity-tab="items"] .terrain-sprite {
  display: block !important;
  width: clamp(2.9rem, 12.6vw, 3.58rem) !important;
  height: clamp(2rem, 8.8vw, 2.5rem) !important;
  background-image: url("./assets/landforms/terrain-region-sprites.png") !important;
  background-repeat: no-repeat !important;
  background-size: 300% 200% !important;
  image-rendering: pixelated !important;
}

.panel--identity[data-active-identity-tab="items"] .terrain-sprite::before,
.panel--identity[data-active-identity-tab="items"] .terrain-sprite::after,
.panel--identity[data-active-identity-tab="items"] .landform-region-chip i::before,
.panel--identity[data-active-identity-tab="items"] .landform-region-chip i::after {
  content: none !important;
  display: none !important;
}

.panel--identity[data-active-identity-tab="items"] .terrain-sprite--jiangnan {
  background-position: 0 0 !important;
}

.panel--identity[data-active-identity-tab="items"] .terrain-sprite--mountain {
  background-position: 50% 0 !important;
}

.panel--identity[data-active-identity-tab="items"] .terrain-sprite--northwest {
  background-position: 100% 0 !important;
}

.panel--identity[data-active-identity-tab="items"] .landform-region-chip em,
.panel--identity[data-active-identity-tab="items"] .specialty-place,
.panel--identity[data-active-identity-tab="items"] .rarity-pips {
  display: none !important;
}

/* EOF expedition squad alignment lock: title, circles and duration buttons share one left edge. */
.panel--expedition.is-open .expedition-planning {
  --expedition-align-edge: clamp(0.88rem, 3.9vw, 1.12rem) !important;
  --expedition-squad-circle: clamp(4.08rem, 16vw, 4.78rem) !important;
}

.panel--expedition.is-open .expedition-squad header,
.panel--expedition.is-open .squad-slots,
.panel--expedition.is-open .duration-picker {
  padding-left: var(--expedition-align-edge) !important;
  padding-right: var(--expedition-align-edge) !important;
  box-sizing: border-box !important;
}

.panel--expedition.is-open .expedition-squad header {
  display: grid !important;
  justify-items: start !important;
  text-align: left !important;
}

.panel--expedition.is-open .expedition-squad h3,
.panel--expedition.is-open .expedition-squad p {
  margin-left: 0 !important;
  text-align: left !important;
}

.panel--expedition.is-open .squad-slots {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: var(--expedition-squad-circle) !important;
  justify-content: start !important;
  justify-items: start !important;
  align-items: center !important;
  gap: clamp(0.82rem, 4vw, 1.12rem) !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

.panel--expedition.is-open .squad-slot {
  width: var(--expedition-squad-circle) !important;
  min-width: var(--expedition-squad-circle) !important;
  max-width: var(--expedition-squad-circle) !important;
  height: var(--expedition-squad-circle) !important;
  min-height: var(--expedition-squad-circle) !important;
  max-height: var(--expedition-squad-circle) !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  place-items: center !important;
}

.panel--expedition.is-open .squad-slot img {
  width: 76% !important;
  height: 76% !important;
  object-fit: contain !important;
}

/* EOF expedition garden picker lock: locate on open, icon and text align left. */
.panel--expedition.is-open .map-pack-toggle,
.panel--expedition.is-open .map-pack-option {
  display: grid !important;
  grid-template-columns: clamp(1.38rem, 5.4vw, 1.72rem) minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: start !important;
  justify-items: start !important;
  gap: clamp(0.42rem, 2vw, 0.58rem) !important;
  text-align: left !important;
}

.panel--expedition.is-open .map-pack-toggle {
  padding-left: clamp(0.72rem, 3.2vw, 0.92rem) !important;
  padding-right: clamp(2.12rem, 8vw, 2.56rem) !important;
}

.panel--expedition.is-open .map-pack-toggle i,
.panel--expedition.is-open .map-pack-option::before {
  display: block !important;
  width: clamp(1.18rem, 4.8vw, 1.42rem) !important;
  height: clamp(1.18rem, 4.8vw, 1.42rem) !important;
  border: 0.12rem solid #78975b !important;
  border-radius: 50% !important;
  background: #e6f2bb !important;
  box-sizing: border-box !important;
  content: "" !important;
}

.panel--expedition.is-open .map-pack-picker.is-locating .map-pack-toggle i {
  background:
    radial-gradient(circle at center, #78975b 0 18%, transparent 20%),
    #e6f2bb !important;
}

.panel--expedition.is-open .map-pack-toggle span,
.panel--expedition.is-open .map-pack-option strong {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.panel--expedition.is-open .map-pack-option--known::before {
  background:
    linear-gradient(#78975b 0 0) center / 55% 0.12rem no-repeat,
    linear-gradient(#78975b 0 0) center / 0.12rem 55% no-repeat,
    #e6f2bb !important;
}

/* EOF expedition garden picker helper: name what the location list means. */
.panel--expedition.is-open .map-pack-picker > .map-pack-helper {
  display: block !important;
  margin: clamp(0.28rem, 1.2vw, 0.38rem) 0 clamp(0.12rem, 0.8vw, 0.2rem) !important;
  padding-left: clamp(0.72rem, 3.2vw, 0.92rem) !important;
  color: #78975b !important;
  font-size: clamp(0.82rem, 3.2vw, 0.96rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

/* EOF expedition departure focus: hide results until return, guide the start button. */
.panel--expedition.is-open .expedition-loot[hidden],
.panel--expedition.is-open .expedition-loot.is-empty {
  display: none !important;
}

.panel--expedition.is-open .together-card button.is-ready {
  border-color: #8fae63 !important;
  background: #f0ffc2 !important;
  color: #4f6d3f !important;
  box-shadow: 0 0 0 0.16rem rgba(178, 214, 106, 0.36) !important;
  animation: expeditionStartGlow 1.8s ease-in-out infinite !important;
}

@keyframes expeditionStartGlow {
  0%,
  100% {
    box-shadow: 0 0 0 0.12rem rgba(178, 214, 106, 0.24);
  }
  50% {
    box-shadow: 0 0 0 0.22rem rgba(178, 214, 106, 0.48);
  }
}

/* EOF mobile atlas containment: keep top controls visible and fit the dex below them. */
@media (max-width: 720px) {
  .panel--identity[data-active-identity-tab="atlas"] {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-topbar,
  .panel--identity[data-active-identity-tab="atlas"] .identity-tabs {
    position: relative !important;
    z-index: 40 !important;
    flex: none !important;
    transform: none !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-pages {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page:not(.is-hidden) {
    display: grid !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-book-layout,
  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-pages {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-pages {
    grid-template-rows: auto auto minmax(0, 1.08fr) minmax(0, 0.92fr) !important;
    gap: clamp(0.42rem, 2vw, 0.58rem) !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-bookmarks {
    min-height: clamp(3.24rem, 13vw, 3.82rem) !important;
    flex-shrink: 0 !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-card {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-list,
  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .locked-grid {
    min-height: 0 !important;
    max-height: 100% !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-storybook {
    min-height: 0 !important;
    max-height: 100% !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-story-page {
    display: grid !important;
    align-content: start !important;
    gap: clamp(0.26rem, 1.4vw, 0.38rem) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-story-portrait {
    min-height: clamp(5.6rem, 24vw, 7.1rem) !important;
    max-height: clamp(6.4rem, 27vw, 7.8rem) !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-storybook h3 {
    margin: 0 !important;
    font-size: clamp(0.9rem, 3.55vw, 1.04rem) !important;
    line-height: 1.08 !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-story-kicker {
    margin: 0 !important;
    font-size: clamp(0.58rem, 2.35vw, 0.7rem) !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-brief-notes {
    display: grid !important;
    gap: clamp(0.26rem, 1.25vw, 0.36rem) !important;
    margin: 0 !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-brief-notes div {
    display: grid !important;
    grid-template-columns: clamp(2rem, 8vw, 2.35rem) minmax(0, 1fr) !important;
    gap: 0.34rem !important;
    align-items: start !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-brief-notes dt,
  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-brief-notes dd {
    margin: 0 !important;
    font-size: clamp(0.62rem, 2.52vw, 0.74rem) !important;
    line-height: 1.2 !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-brief-notes dd {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }
}

/* EOF daily quest reward/action repair: reward is energy, button visibly keeps +. */
.panel--expedition.is-open .quest-card {
  grid-template-columns: clamp(2.58rem, 10.5vw, 2.96rem) minmax(0, 1fr) clamp(2.34rem, 9vw, 2.64rem) !important;
  column-gap: clamp(0.58rem, 2.5vw, 0.74rem) !important;
}

.panel--expedition.is-open .quest-card mark {
  grid-column: 3 !important;
  grid-row: 1 !important;
  position: relative !important;
  display: grid !important;
  grid-template-columns: 0.74rem auto !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: center !important;
  align-self: end !important;
  gap: 0.08rem !important;
  width: clamp(2.08rem, 8vw, 2.38rem) !important;
  height: clamp(1.5rem, 5.9vw, 1.72rem) !important;
  min-width: clamp(2.08rem, 8vw, 2.38rem) !important;
  min-height: clamp(1.5rem, 5.9vw, 1.72rem) !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0.42rem !important;
  background: #f8e6a1 !important;
  color: #8d6e2f !important;
  font-size: clamp(0.52rem, 2.05vw, 0.62rem) !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  overflow: hidden !important;
}

.panel--expedition.is-open .quest-card mark img {
  display: none !important;
}

.panel--expedition.is-open .quest-card mark::before {
  content: "" !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  display: block !important;
  width: 0.42rem !important;
  height: 1rem !important;
  background: #d8aa4c !important;
  box-shadow:
    0.22rem 0.18rem 0 #d8aa4c,
    -0.12rem 0.5rem 0 #d8aa4c,
    0.08rem 0.76rem 0 #d8aa4c !important;
  transform: none !important;
}

.panel--expedition.is-open .quest-card mark::after {
  content: "5" !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #8d6e2f !important;
  transform: none !important;
}

.panel--expedition.is-open .quest-card button.quest-claim {
  grid-column: 3 !important;
  grid-row: 2 !important;
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  justify-self: center !important;
  align-self: start !important;
  width: clamp(2.08rem, 8vw, 2.38rem) !important;
  min-width: clamp(2.08rem, 8vw, 2.38rem) !important;
  height: clamp(1.5rem, 5.9vw, 1.72rem) !important;
  min-height: clamp(1.5rem, 5.9vw, 1.72rem) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0.42rem !important;
  background: #e3efbd !important;
  color: #637d4d !important;
  font-size: clamp(1.16rem, 4.4vw, 1.34rem) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  opacity: 1 !important;
}

.panel--expedition.is-open .quest-card button.quest-claim::before,
.panel--expedition.is-open .quest-card button.quest-claim::after {
  content: none !important;
  display: none !important;
}

.panel--expedition.is-open .quest-card button.quest-claim:disabled {
  background: #e5eecb !important;
  color: rgba(99, 125, 77, 0.55) !important;
}

.panel--expedition.is-open .quest-card button.quest-claim.is-ready {
  background: #ffe28f !important;
  color: #6f612f !important;
}

.panel--expedition.is-open .quest-card button.quest-claim.is-claimed,
.panel--expedition.is-open .quest-card button.quest-claim.is-claimed:disabled {
  background: #9fc878 !important;
  color: #fff9de !important;
  font-size: clamp(0.9rem, 3.4vw, 1.06rem) !important;
}

/* EOF stamina reward icon repair: use the real energy sprite, not a skewed pseudo shape. */
.panel--expedition.is-open .quest-card mark {
  display: grid !important;
  grid-template-columns: clamp(0.76rem, 3.1vw, 0.92rem) auto !important;
  place-items: center !important;
  align-content: center !important;
  justify-content: center !important;
  gap: 0.06rem !important;
  width: clamp(2.06rem, 8vw, 2.36rem) !important;
  height: clamp(1.5rem, 5.9vw, 1.72rem) !important;
  min-width: clamp(2.06rem, 8vw, 2.36rem) !important;
  min-height: clamp(1.5rem, 5.9vw, 1.72rem) !important;
  padding: 0 !important;
  border-radius: 0.42rem !important;
  background: #f8e9a7 !important;
  color: #846833 !important;
  overflow: hidden !important;
}

.panel--expedition.is-open .quest-card mark img {
  display: block !important;
  width: clamp(0.72rem, 3vw, 0.88rem) !important;
  height: clamp(0.98rem, 4vw, 1.18rem) !important;
  object-fit: contain !important;
  object-position: center !important;
  image-rendering: pixelated !important;
}

.panel--expedition.is-open .quest-card mark::before {
  content: none !important;
  display: none !important;
}

.panel--expedition.is-open .quest-card mark::after {
  content: "+5" !important;
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #846833 !important;
  font-size: clamp(0.56rem, 2.2vw, 0.66rem) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  transform: none !important;
}

/* EOF daily quest icon redraw: use one sprite sheet, one centered layer, no drifting parts. */
.panel--expedition.is-open .quest-card > b .daily-pixel-icon,
.panel--expedition.is-open .quest-heading .daily-pixel-icon {
  position: relative !important;
  display: grid !important;
  width: clamp(2.48rem, 10vw, 2.86rem) !important;
  height: clamp(2.48rem, 10vw, 2.86rem) !important;
  min-width: clamp(2.48rem, 10vw, 2.86rem) !important;
  min-height: clamp(2.48rem, 10vw, 2.86rem) !important;
  padding: clamp(0.28rem, 1.2vw, 0.36rem) !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0.56rem !important;
  background: #f5efc8 !important;
  contain: layout paint !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.panel--expedition.is-open .quest-card > b .daily-pixel-icon i,
.panel--expedition.is-open .quest-heading .daily-pixel-icon i {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url("./assets/ui/daily-task-sprites.png") !important;
  background-repeat: no-repeat !important;
  background-size: 400% 200% !important;
  box-shadow: none !important;
  filter: none !important;
  image-rendering: pixelated !important;
  opacity: 1 !important;
  transform: none !important;
}

.panel--expedition.is-open .quest-card > b .daily-pixel-icon i::before,
.panel--expedition.is-open .quest-card > b .daily-pixel-icon i::after,
.panel--expedition.is-open .quest-heading .daily-pixel-icon i::before,
.panel--expedition.is-open .quest-heading .daily-pixel-icon i::after {
  content: none !important;
  display: none !important;
}

.panel--expedition.is-open .daily-pixel-icon--scan i {
  background-position: 0 0 !important;
}

.panel--expedition.is-open .daily-pixel-icon--expedition i {
  background-position: 33.333% 0 !important;
}

.panel--expedition.is-open .daily-pixel-icon--plant i,
.panel--expedition.is-open .daily-pixel-icon--atlas i {
  background-position: 66.667% 0 !important;
}

.panel--expedition.is-open .daily-pixel-icon--walk i {
  background-position: 100% 0 !important;
}

.panel--expedition.is-open .daily-pixel-icon--water i {
  background-position: 33.333% 100% !important;
}

.panel--expedition.is-open .daily-pixel-icon--friend i {
  background-position: 100% 100% !important;
}

.panel--expedition.is-open .daily-pixel-icon--task i,
.panel--expedition.is-open .daily-pixel-icon--energy i {
  background-position: 0 100% !important;
}

/* EOF daily quest icon crop lock: one cropped image per icon, centered in one layer. */
.panel--expedition.is-open .quest-card > b .daily-pixel-icon i,
.panel--expedition.is-open .quest-heading .daily-pixel-icon i {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  box-shadow: none !important;
  filter: none !important;
  image-rendering: pixelated !important;
  transform: none !important;
}

.panel--expedition.is-open .quest-card > b .daily-pixel-icon i::before,
.panel--expedition.is-open .quest-card > b .daily-pixel-icon i::after,
.panel--expedition.is-open .quest-heading .daily-pixel-icon i::before,
.panel--expedition.is-open .quest-heading .daily-pixel-icon i::after {
  content: none !important;
  display: none !important;
}

.panel--expedition.is-open .daily-pixel-icon--task i,
.panel--expedition.is-open .daily-pixel-icon--energy i {
  background-image: url("./assets/ui/daily-icons/task.png") !important;
}

.panel--expedition.is-open .daily-pixel-icon--scan i {
  background-image: url("./assets/ui/daily-icons/scan.png") !important;
}

.panel--expedition.is-open .daily-pixel-icon--expedition i {
  background-image: url("./assets/ui/daily-icons/expedition.png") !important;
}

.panel--expedition.is-open .daily-pixel-icon--plant i {
  background-image: url("./assets/ui/daily-icons/plant.png") !important;
}

.panel--expedition.is-open .daily-pixel-icon--atlas i {
  background-image: url("./assets/ui/daily-icons/atlas.png") !important;
}

.panel--expedition.is-open .daily-pixel-icon--walk i {
  background-image: url("./assets/ui/daily-icons/walk.png") !important;
}

.panel--expedition.is-open .daily-pixel-icon--water i {
  background-image: url("./assets/ui/daily-icons/water.png") !important;
}

.panel--expedition.is-open .daily-pixel-icon--friend i {
  background-image: url("./assets/ui/daily-icons/friend.png") !important;
}

/* EOF daily quest icon mobile scale: enlarge proportionally inside the tile. */
.panel--expedition.is-open .quest-card > b .daily-pixel-icon,
.panel--expedition.is-open .quest-heading .daily-pixel-icon {
  padding: clamp(0.14rem, 0.7vw, 0.2rem) !important;
}

.panel--expedition.is-open .quest-card > b .daily-pixel-icon i,
.panel--expedition.is-open .quest-heading .daily-pixel-icon i {
  width: 142% !important;
  height: 142% !important;
  background-size: contain !important;
  background-position: center !important;
  transform: none !important;
}

.panel--expedition.is-open .daily-pixel-icon--plant i,
.panel--expedition.is-open .daily-pixel-icon--walk i,
.panel--expedition.is-open .daily-pixel-icon--water i {
  width: 152% !important;
  height: 152% !important;
}

.panel--expedition.is-open .daily-pixel-icon--scan i,
.panel--expedition.is-open .daily-pixel-icon--friend i {
  width: 136% !important;
  height: 136% !important;
}

/* EOF atlas mobile fit: keep the dex cards full-width instead of clipping half a page. */
@media (max-width: 720px) {
  .panel--identity[data-active-identity-tab="atlas"] {
    --atlas-book-width: var(--backpack-content-width, min(100%, 23rem));
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-pages {
    display: grid !important;
    justify-items: center !important;
    width: 100% !important;
    padding-inline: 0 !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page:not(.is-hidden) {
    width: var(--atlas-book-width) !important;
    max-width: var(--atlas-book-width) !important;
    margin-inline: auto !important;
    overflow: visible !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-book-layout,
  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-pages {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-pages {
    grid-template-rows: auto auto minmax(12.4rem, auto) minmax(11.5rem, auto) !important;
    gap: clamp(0.62rem, 3vw, 0.82rem) !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-card {
    width: 100% !important;
    min-width: 0 !important;
    padding: clamp(0.82rem, 3.8vw, 1rem) !important;
    overflow: hidden !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-list {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 100% !important;
    gap: 0 !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-list::-webkit-scrollbar {
    display: none !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-list .atlas-storybook,
  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-storybook {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    min-height: clamp(11rem, 47vw, 13rem) !important;
    scroll-snap-align: center !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-story-page {
    min-width: 0 !important;
    overflow: hidden !important;
    padding: clamp(0.7rem, 3.2vw, 0.9rem) !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-story-portrait {
    min-height: clamp(6.8rem, 30vw, 8.2rem) !important;
    max-height: none !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-story-portrait img {
    width: 92% !important;
    height: 92% !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .locked-grid {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(0.68rem, 3vw, 0.86rem) !important;
    overflow: visible !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .locked-grid article {
    min-height: clamp(7rem, 30vw, 8.4rem) !important;
  }
}

/* EOF atlas mobile composition: keep collected and locked records complete on phone. */
@media (max-width: 720px) {
  .panel--identity[data-active-identity-tab="atlas"] {
    grid-template-rows: auto auto minmax(0, 1fr) !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-pages {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page:not(.is-hidden) {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: clamp(1.2rem, 6vw, 1.8rem) !important;
    overflow: visible !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-pages {
    display: grid !important;
    grid-template-rows: auto auto auto auto !important;
    gap: clamp(0.68rem, 3vw, 0.88rem) !important;
    overflow: visible !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-card--collected,
  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-card--locked {
    width: 100% !important;
    min-height: 0 !important;
    padding: clamp(0.88rem, 4vw, 1.08rem) !important;
    overflow: hidden !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-card--collected {
    display: grid !important;
    gap: clamp(0.52rem, 2.5vw, 0.72rem) !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-card--locked {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title controls"
      "grid grid" !important;
    align-items: center !important;
    gap: clamp(0.54rem, 2.6vw, 0.74rem) !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-card--locked h2 {
    grid-area: title !important;
    margin: 0 !important;
    align-self: center !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-page-controls {
    grid-area: controls !important;
    position: static !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, clamp(2.2rem, 9.5vw, 2.6rem)) !important;
    width: auto !important;
    gap: clamp(0.3rem, 1.5vw, 0.42rem) !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-page-controls button {
    width: clamp(2.2rem, 9.5vw, 2.6rem) !important;
    min-width: clamp(2.2rem, 9.5vw, 2.6rem) !important;
    height: clamp(2.2rem, 9.5vw, 2.6rem) !important;
    min-height: clamp(2.2rem, 9.5vw, 2.6rem) !important;
    border-radius: 0.56rem !important;
    background: #e8f2c4 !important;
    outline: 0.1rem solid rgba(139, 166, 95, 0.48) !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-page-controls span {
    display: none !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-list {
    min-height: clamp(10.8rem, 46vw, 12.6rem) !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-list .atlas-storybook,
  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-storybook {
    min-height: clamp(10.8rem, 46vw, 12.6rem) !important;
    max-height: none !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .locked-grid {
    grid-area: grid !important;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: calc((100% - clamp(0.72rem, 3.2vw, 0.92rem)) / 2) !important;
    grid-template-columns: none !important;
    gap: clamp(0.72rem, 3.2vw, 0.92rem) !important;
    width: 100% !important;
    min-height: clamp(9.2rem, 39vw, 10.8rem) !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .locked-grid article {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: clamp(9.2rem, 39vw, 10.8rem) !important;
    aspect-ratio: 1 / 1 !important;
    padding: clamp(0.58rem, 2.8vw, 0.78rem) !important;
    overflow: hidden !important;
    scroll-snap-align: start !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .locked-grid article > b {
    width: 86% !important;
    height: 86% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .locked-grid article img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }
}

/* ===== elorze fix: backpack single scroll surface (all viewports) ===== */
.pill--seed.is-nursery-dragging {
  opacity: 0.78;
  transform: scale(1.06);
  z-index: 80;
}

.panel--identity.is-open {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  height: 100svh !important;
  max-height: 100svh !important;
  overflow: hidden !important;
}

.panel--identity .identity-pages,
.panel--identity[data-active-identity-tab="card"] .identity-pages,
.panel--identity[data-active-identity-tab="items"] .identity-pages,
.panel--identity[data-active-identity-tab="atlas"] .identity-pages {
  min-height: 0 !important;
  height: auto !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(126, 155, 94, 0.42) transparent !important;
}

.panel--identity .identity-pages::-webkit-scrollbar {
  width: 0.42rem !important;
}

.panel--identity .identity-pages::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: rgba(126, 155, 94, 0.42) !important;
}

.panel--identity .identity-pages::-webkit-scrollbar-track {
  background: transparent !important;
}

.panel--identity .identity-page:not(.is-hidden) {
  max-height: none !important;
  overflow: visible !important;
}

.panel--identity[data-active-identity-tab="atlas"] {
  overflow: hidden !important;
}

/* EOF generated asset lock: real pixel maps/items stay proportional on mobile. */
.panel--identity[data-active-identity-tab="items"] .landform-region-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.panel--identity[data-active-identity-tab="items"] .terrain-sprite {
  display: grid !important;
  width: clamp(3.28rem, 14vw, 4.02rem) !important;
  height: clamp(2.46rem, 10.4vw, 3.02rem) !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  overflow: hidden !important;
  place-items: center !important;
}

.panel--identity[data-active-identity-tab="items"] .terrain-sprite img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  image-rendering: pixelated !important;
}

.specialty-icon img,
.loot-chip .specialty-icon img,
.specialty-reward-card .specialty-icon img,
.panel--identity[data-active-identity-tab="items"] .specialty-card .specialty-icon img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
}

.specialty-icon:has(img) i,
.specialty-icon:has(img)::before,
.specialty-icon:has(img)::after {
  content: none !important;
  display: none !important;
}

/* EOF squad picker left inset: chosen sprig cards align with the team title and circles. */
.panel--expedition.is-open .expedition-planning {
  --expedition-align-edge: clamp(1.12rem, 5.2vw, 1.46rem) !important;
}

.panel--expedition.is-open .expedition-squad header,
.panel--expedition.is-open .squad-slots,
.panel--expedition.is-open .squad-picker,
.panel--expedition.is-open .duration-picker {
  padding-left: var(--expedition-align-edge) !important;
  padding-right: var(--expedition-align-edge) !important;
  box-sizing: border-box !important;
}

.panel--expedition.is-open .squad-picker {
  justify-content: start !important;
  scroll-padding-left: var(--expedition-align-edge) !important;
  scroll-padding-right: var(--expedition-align-edge) !important;
}

.panel--expedition.is-open .squad-picker-option {
  margin-left: 0 !important;
}

/* EOF daily quest single-icon lock: each task gets one standalone picture, never the whole sheet. */
.quest-card > b .daily-pixel-icon,
.quest-heading .daily-pixel-icon,
.panel--expedition .quest-card > b .daily-pixel-icon,
.panel--expedition .quest-heading .daily-pixel-icon,
.panel--expedition.is-open .quest-card > b .daily-pixel-icon,
.panel--expedition.is-open .quest-heading .daily-pixel-icon {
  display: grid !important;
  width: clamp(2.65rem, 10.8vw, 3.05rem) !important;
  height: clamp(2.65rem, 10.8vw, 3.05rem) !important;
  min-width: clamp(2.65rem, 10.8vw, 3.05rem) !important;
  min-height: clamp(2.65rem, 10.8vw, 3.05rem) !important;
  padding: clamp(0.22rem, 0.9vw, 0.3rem) !important;
  place-items: center !important;
  background: #f5efc8 !important;
  border: 0 !important;
  border-radius: 0.56rem !important;
  overflow: hidden !important;
  contain: layout paint !important;
}

.quest-card > b .daily-pixel-icon i,
.quest-heading .daily-pixel-icon i,
.panel--expedition .quest-card > b .daily-pixel-icon i,
.panel--expedition .quest-heading .daily-pixel-icon i,
.panel--expedition.is-open .quest-card > b .daily-pixel-icon i,
.panel--expedition.is-open .quest-heading .daily-pixel-icon i {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  image-rendering: pixelated !important;
  transform: none !important;
}

.quest-card > b .daily-pixel-icon i::before,
.quest-card > b .daily-pixel-icon i::after,
.quest-heading .daily-pixel-icon i::before,
.quest-heading .daily-pixel-icon i::after,
.panel--expedition .daily-pixel-icon i::before,
.panel--expedition .daily-pixel-icon i::after,
.panel--expedition.is-open .daily-pixel-icon i::before,
.panel--expedition.is-open .daily-pixel-icon i::after {
  content: none !important;
  display: none !important;
}

.daily-pixel-icon--task i,
.daily-pixel-icon--energy i {
  background-image: url("./assets/ui/daily-icons/task.png") !important;
}

.daily-pixel-icon--scan i {
  background-image: url("./assets/ui/daily-icons/scan.png") !important;
}

.daily-pixel-icon--expedition i {
  background-image: url("./assets/ui/daily-icons/expedition.png") !important;
}

.daily-pixel-icon--plant i {
  background-image: url("./assets/ui/daily-icons/plant.png") !important;
}

.daily-pixel-icon--atlas i {
  background-image: url("./assets/ui/daily-icons/atlas.png") !important;
}

.daily-pixel-icon--walk i {
  background-image: url("./assets/ui/daily-icons/walk.png") !important;
}

.daily-pixel-icon--water i {
  background-image: url("./assets/ui/daily-icons/water.png") !important;
}

.daily-pixel-icon--friend i {
  background-image: url("./assets/ui/daily-icons/friend.png") !important;
}

/* EOF daily quest real image lock: use one img per task, no vector/cropped sprite fallback. */
.daily-pixel-icon > img,
.quest-card > b .daily-pixel-icon > img,
.quest-heading .daily-pixel-icon > img,
.daily-task-card .daily-pixel-icon > img,
.daily-reward-card .daily-pixel-icon > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  image-rendering: pixelated !important;
}

.daily-pixel-icon:has(> img) i,
.daily-pixel-icon:has(> img) i::before,
.daily-pixel-icon:has(> img) i::after {
  content: none !important;
  display: none !important;
  background-image: none !important;
}

/* EOF expedition garden locate action: show how the current garden is read. */
.panel--expedition.is-open .map-pack-locate {
  display: grid !important;
  grid-template-columns: clamp(1.38rem, 5.4vw, 1.72rem) minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(0.42rem, 2vw, 0.58rem) !important;
  min-height: clamp(2.72rem, 10.6vw, 3.18rem) !important;
  width: 100% !important;
  padding: clamp(0.56rem, 2.5vw, 0.7rem) clamp(0.72rem, 3.2vw, 0.92rem) !important;
  border: 0.12rem solid #9ac782 !important;
  border-radius: 0.72rem !important;
  background: #fffaf0 !important;
  color: #58704c !important;
  text-align: left !important;
  box-shadow: none !important;
}

.panel--expedition.is-open .map-pack-locate::before {
  content: "" !important;
  display: block !important;
  width: clamp(1.18rem, 4.8vw, 1.42rem) !important;
  height: clamp(1.18rem, 4.8vw, 1.42rem) !important;
  border: 0.12rem solid #78975b !important;
  border-radius: 50% !important;
  background:
    linear-gradient(#78975b 0 0) center / 55% 0.12rem no-repeat,
    linear-gradient(#78975b 0 0) center / 0.12rem 55% no-repeat,
    #e6f2bb !important;
  box-sizing: border-box !important;
}

.panel--expedition.is-open .map-pack-locate strong,
.panel--expedition.is-open .map-pack-locate span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.panel--expedition.is-open .map-pack-locate strong {
  font-size: clamp(0.9rem, 3.55vw, 1.05rem) !important;
  font-weight: 850 !important;
}

.panel--expedition.is-open .map-pack-locate span {
  justify-self: end !important;
  color: #78975b !important;
  font-size: clamp(0.72rem, 2.8vw, 0.84rem) !important;
  font-weight: 750 !important;
}

.panel--expedition.is-open .map-pack-locate:disabled {
  opacity: 0.72 !important;
}

/* EOF atlas mobile unlock repair: release hard height locks and make the reward a big gift. */
.panel--identity[data-active-identity-tab="atlas"] .identity-pages,
.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page:not(.is-hidden),
.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-book-layout,
.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-pages {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-list,
.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .locked-grid,
.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-bookmarks {
  touch-action: pan-x pan-y !important;
}

.panel--identity[data-active-identity-tab="items"] {
  overflow: hidden !important;
}

@media (max-width: 720px) {
  .panel--identity .identity-pages,
  .panel--identity[data-active-identity-tab="card"] .identity-pages,
  .panel--identity[data-active-identity-tab="items"] .identity-pages,
  .panel--identity[data-active-identity-tab="atlas"] .identity-pages {
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }
}

/* ===== elorze fix: atlas region cards as compact readable dex entries ===== */
.panel--identity .identity-atlas-page:not(.is-hidden),
.panel--atlas.is-open {
  --atlas-book-width: min(100%, 26.5rem) !important;
}

.panel--identity .identity-atlas-page .atlas-bookmarks,
.panel--atlas .atlas-bookmarks {
  display: grid !important;
  grid-auto-flow: row !important;
  grid-auto-columns: unset !important;
  grid-template-columns: 1fr !important;
  gap: clamp(0.58rem, 2.2vw, 0.78rem) !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
}

.panel--identity .identity-atlas-page .atlas-bookmarks button,
.panel--atlas .atlas-bookmarks button,
.panel--identity .identity-atlas-page .atlas-region-card,
.panel--atlas .atlas-region-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: clamp(5.8rem, 28%, 7.4rem) minmax(0, 1fr) !important;
  grid-template-rows: none !important;
  grid-template-areas: "preview copy" !important;
  place-items: stretch !important;
  justify-items: stretch !important;
  align-items: stretch !important;
  min-width: 0 !important;
  min-height: clamp(6.4rem, 28vw, 7.8rem) !important;
  height: auto !important;
  max-width: 100% !important;
  padding: clamp(0.62rem, 2.4vw, 0.82rem) !important;
  overflow: hidden !important;
  border: 0.12rem solid rgba(84, 138, 122, 0.22) !important;
  border-radius: 0.92rem !important;
  background: #d9f1df !important;
  color: #245f58 !important;
  scroll-snap-align: unset !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.panel--identity .identity-atlas-page .atlas-region-card::before,
.panel--atlas .atlas-region-card::before {
  inset: 0 0 0 42% !important;
  opacity: 0.35 !important;
}

.panel--identity .identity-atlas-page .atlas-region-card.is-active,
.panel--atlas .atlas-region-card.is-active {
  background: #c5ead6 !important;
  color: #1f5f5c !important;
  border-color: rgba(46, 130, 118, 0.42) !important;
}

.panel--identity .identity-atlas-page .atlas-region-card.is-locked,
.panel--atlas .atlas-region-card.is-locked {
  background: #d5eef2 !important;
  color: #2b7d8e !important;
}

.panel--identity .identity-atlas-page .atlas-bookmarks button.is-active::after,
.panel--atlas .atlas-bookmarks button.is-active::after {
  display: none !important;
}

.panel--identity .identity-atlas-page .atlas-region-preview,
.panel--atlas .atlas-region-preview {
  grid-area: preview !important;
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.12rem !important;
  min-width: 0 !important;
  min-height: 100% !important;
  border-radius: 0.72rem !important;
  background: rgba(255, 248, 220, 0.55) !important;
}

.panel--identity .identity-atlas-page .atlas-region-preview img,
.panel--atlas .atlas-region-preview img {
  width: clamp(3.6rem, 16vw, 5rem) !important;
  height: clamp(3.6rem, 16vw, 5rem) !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
  opacity: 1 !important;
}

.panel--identity .identity-atlas-page .atlas-region-card.is-locked .atlas-region-preview img,
.panel--atlas .atlas-region-card.is-locked .atlas-region-preview img {
  filter: brightness(0) saturate(0) opacity(0.28) !important;
}

.panel--identity .identity-atlas-page .atlas-region-copy,
.panel--atlas .atlas-region-copy {
  grid-area: copy !important;
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  align-content: center !important;
  justify-items: start !important;
  gap: 0.34rem !important;
  min-width: 0 !important;
  padding-left: clamp(0.42rem, 1.8vw, 0.62rem) !important;
  text-align: left !important;
}

.panel--identity .identity-atlas-page .atlas-region-copy b,
.panel--atlas .atlas-region-copy b {
  display: block !important;
  color: inherit !important;
  font-size: clamp(1.28rem, 5.2vw, 1.62rem) !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

.panel--identity .identity-atlas-page .atlas-region-copy i,
.panel--atlas .atlas-region-copy i {
  display: block !important;
  width: min(5.2rem, 72%) !important;
  height: 0.34rem !important;
  overflow: hidden !important;
  border-radius: 0.2rem !important;
  background: rgba(255, 255, 255, 0.92) !important;
  font-size: 0 !important;
}

.panel--identity .identity-atlas-page .atlas-region-copy span,
.panel--atlas .atlas-region-copy span {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: inherit !important;
  font-size: clamp(0.82rem, 3.2vw, 0.98rem) !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  opacity: 0.86 !important;
}

.panel--identity .identity-atlas-page .atlas-region-lock,
.panel--atlas .atlas-region-lock {
  position: absolute !important;
  left: clamp(0.72rem, 2.4vw, 0.96rem) !important;
  bottom: clamp(0.62rem, 2vw, 0.82rem) !important;
  z-index: 3 !important;
  display: grid !important;
  place-items: center !important;
  width: clamp(1.58rem, 6.2vw, 1.9rem) !important;
  height: clamp(1.58rem, 6.2vw, 1.9rem) !important;
  border-radius: 50% !important;
  border: 0.12rem solid rgba(43, 125, 142, 0.42) !important;
  color: #2b7d8e !important;
  font-size: 0.74rem !important;
  font-weight: 950 !important;
  background: rgba(232, 251, 248, 0.86) !important;
}

.panel--identity .identity-atlas-page .atlas-page-controls,
.panel--atlas .atlas-page-controls {
  position: static !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 0.55rem !important;
  width: 100% !important;
  margin: 0 0 0.72rem !important;
  padding: 0 !important;
  pointer-events: auto !important;
  transform: none !important;
}

.panel--identity .identity-atlas-page .atlas-page-controls button,
.panel--atlas .atlas-page-controls button {
  width: auto !important;
  min-width: 4.2rem !important;
  height: auto !important;
  min-height: 2.45rem !important;
  padding: 0 0.72rem !important;
  pointer-events: auto !important;
}

.panel--identity .identity-atlas-page .atlas-page-controls span,
.panel--atlas .atlas-page-controls span {
  display: block !important;
  text-align: center !important;
}

.panel--identity .identity-atlas-page .locked-grid,
.panel--atlas .locked-grid {
  padding-inline: 0 !important;
}

@media (min-width: 721px) {
  .panel--identity .identity-atlas-page:not(.is-hidden),
  .panel--atlas.is-open {
    --atlas-book-width: min(100%, 34rem) !important;
  }

  .panel--identity .identity-atlas-page .atlas-bookmarks,
  .panel--atlas .atlas-bookmarks {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.72rem !important;
  }

  .panel--identity .identity-atlas-page .atlas-region-card,
  .panel--atlas .atlas-region-card {
    min-height: 8.2rem !important;
  }

  .panel--identity .identity-atlas-page .atlas-region-copy b,
  .panel--atlas .atlas-region-copy b {
    font-size: 1.42rem !important;
  }

  .panel--identity .identity-atlas-page .atlas-region-preview img,
  .panel--atlas .atlas-region-preview img {
    width: 4.6rem !important;
    height: 4.6rem !important;
  }
}

/* elorze: beat atlas tab-specific mobile direction lock + keep region copy visible */
#panel-identity[data-active-identity-tab="atlas"] #atlasBookmarks {
  display: grid !important;
  grid-auto-flow: row !important;
  grid-auto-columns: unset !important;
  grid-template-columns: 1fr !important;
  gap: clamp(0.58rem, 2.2vw, 0.78rem) !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  scroll-snap-type: none !important;
  min-height: 0 !important;
  flex-shrink: initial !important;
}

#panel-identity[data-active-identity-tab="atlas"] #atlasBookmarks .atlas-region-copy,
#panel-identity[data-active-identity-tab="atlas"] #atlasBookmarks .atlas-region-preview {
  display: grid !important;
}

#panel-identity[data-active-identity-tab="atlas"] #atlasBookmarks .atlas-region-preview {
  display: flex !important;
}

#panel-identity[data-active-identity-tab="atlas"] #atlasBookmarks .atlas-region-copy b,
#panel-identity[data-active-identity-tab="atlas"] #atlasBookmarks .atlas-region-copy span,
#panel-identity[data-active-identity-tab="atlas"] #atlasBookmarks .atlas-region-copy i {
  display: block !important;
}

@media (min-width: 721px) {
  #panel-identity[data-active-identity-tab="atlas"] #atlasBookmarks {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.72rem !important;
  }
}

/* ===== elorze: atlas 3×3 dex grid + same-page detail ===== */
.panel--identity .identity-atlas-page .atlas-pages--dex,
.panel--atlas .atlas-pages--dex {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  grid-template-areas:
    "summary"
    "dex" !important;
  gap: clamp(0.72rem, 2.4vw, 1rem) !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.panel--identity .identity-atlas-page .atlas-dex,
.panel--atlas .atlas-dex {
  grid-area: dex !important;
  display: grid !important;
  gap: clamp(0.62rem, 2vw, 0.82rem) !important;
  width: 100% !important;
  min-width: 0 !important;
}

.panel--identity .identity-atlas-page .atlas-dex-header,
.panel--atlas .atlas-dex-header {
  display: grid !important;
  gap: 0.52rem !important;
}

.panel--identity .identity-atlas-page .atlas-dex-header #atlasDexCount,
.panel--atlas .atlas-dex-header #atlasDexCount {
  margin: 0 !important;
  color: #3f6d52 !important;
  font-size: clamp(0.98rem, 3.4vw, 1.18rem) !important;
  font-weight: 950 !important;
}

.panel--identity .identity-atlas-page .atlas-dex-header .atlas-page-controls,
.panel--atlas .atlas-dex-header .atlas-page-controls {
  position: static !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.55rem !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto !important;
  transform: none !important;
}

.panel--identity .identity-atlas-page .atlas-dex-grid,
.panel--atlas .atlas-dex-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(0.48rem, 2vw, 0.72rem) !important;
  width: 100% !important;
  padding: 0.12rem 0 0.4rem !important;
}

.panel--identity .identity-atlas-page .atlas-dex-cell,
.panel--atlas .atlas-dex-cell {
  position: relative !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  place-items: center !important;
  gap: 0.28rem !important;
  min-height: clamp(5.6rem, 24vw, 7.2rem) !important;
  aspect-ratio: 1 / 1.05 !important;
  padding: clamp(0.42rem, 1.8vw, 0.58rem) !important;
  border: 0.12rem solid rgba(84, 138, 122, 0.28) !important;
  border-radius: 0.88rem !important;
  background: #e7f6df !important;
  color: #245f58 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.panel--identity .identity-atlas-page .atlas-dex-cell.is-active,
.panel--atlas .atlas-dex-cell.is-active {
  border-color: rgba(46, 130, 118, 0.62) !important;
  background: #d4efd4 !important;
}

.panel--identity .identity-atlas-page .atlas-dex-cell.is-locked,
.panel--atlas .atlas-dex-cell.is-locked {
  background: #e3eef0 !important;
  color: #6a7f86 !important;
}

.panel--identity .identity-atlas-page .atlas-dex-cell img,
.panel--atlas .atlas-dex-cell img {
  width: min(72%, 4.4rem) !important;
  height: min(72%, 4.4rem) !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
}

.panel--identity .identity-atlas-page .atlas-dex-cell.is-locked img,
.panel--atlas .atlas-dex-cell.is-locked img {
  filter: brightness(0) saturate(0) opacity(0.34) !important;
}

.panel--identity .identity-atlas-page .atlas-dex-cell b,
.panel--atlas .atlas-dex-cell b {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  font-size: clamp(0.68rem, 2.8vw, 0.84rem) !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.panel--identity .identity-atlas-page .atlas-dex-detail,
.panel--atlas .atlas-dex-detail {
  position: absolute !important;
  inset: 0 !important;
  z-index: 24 !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(0.8rem, 3vw, 1.2rem) !important;
}

.panel--identity .identity-atlas-page .atlas-dex-detail.is-hidden,
.panel--atlas .atlas-dex-detail.is-hidden {
  display: none !important;
}

.panel--identity .identity-atlas-page .atlas-dex-detail-backdrop,
.panel--atlas .atlas-dex-detail-backdrop {
  position: absolute !important;
  inset: 0 !important;
  border: 0 !important;
  background: rgba(42, 58, 40, 0.42) !important;
  cursor: pointer !important;
}

.panel--identity .identity-atlas-page .atlas-dex-detail-card,
.panel--atlas .atlas-dex-detail-card {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  gap: clamp(0.42rem, 1.8vw, 0.62rem) !important;
  width: min(100%, 22rem) !important;
  max-height: min(78svh, 34rem) !important;
  overflow: auto !important;
  padding: clamp(1rem, 3.6vw, 1.35rem) !important;
  border: 0.14rem solid rgba(84, 138, 122, 0.34) !important;
  border-radius: 1rem !important;
  background: #fff8df !important;
  color: #355543 !important;
  box-shadow: none !important;
}

.panel--identity .identity-atlas-page .atlas-dex-detail-close,
.panel--atlas .atlas-dex-detail-close {
  position: absolute !important;
  top: 0.55rem !important;
  right: 0.55rem !important;
  width: 2.2rem !important;
  height: 2.2rem !important;
  border: 0.1rem solid rgba(84, 138, 122, 0.28) !important;
  border-radius: 0.55rem !important;
  background: #f3efd0 !important;
  color: #355543 !important;
  font-size: 1.2rem !important;
  font-weight: 900 !important;
}

.panel--identity .identity-atlas-page .atlas-dex-detail-portrait,
.panel--atlas .atlas-dex-detail-portrait {
  display: grid !important;
  place-items: center !important;
  min-height: 8.2rem !important;
  margin: 0 !important;
  border-radius: 0.78rem !important;
  background: #fbffd8 !important;
}

.panel--identity .identity-atlas-page .atlas-dex-detail-portrait img,
.panel--atlas .atlas-dex-detail-portrait img {
  width: min(72%, 7.2rem) !important;
  height: min(72%, 7.2rem) !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
}

.panel--identity .identity-atlas-page .atlas-dex-detail-portrait img.is-silhouette,
.panel--atlas .atlas-dex-detail-portrait img.is-silhouette {
  filter: brightness(0) saturate(0) opacity(0.36) !important;
}

.panel--identity .identity-atlas-page .atlas-dex-detail-kicker,
.panel--atlas .atlas-dex-detail-kicker {
  margin: 0 !important;
  color: #7d6a48 !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
}

.panel--identity .identity-atlas-page .atlas-dex-detail-card h3,
.panel--atlas .atlas-dex-detail-card h3 {
  margin: 0 !important;
  color: #2f6a48 !important;
  font-size: clamp(1.35rem, 5vw, 1.7rem) !important;
  line-height: 1.05 !important;
}

.panel--identity .identity-atlas-page .atlas-dex-detail-meta,
.panel--atlas .atlas-dex-detail-meta {
  display: grid !important;
  gap: 0.34rem !important;
  margin: 0 !important;
}

.panel--identity .identity-atlas-page .atlas-dex-detail-meta div,
.panel--atlas .atlas-dex-detail-meta div {
  display: grid !important;
  grid-template-columns: 4.4rem minmax(0, 1fr) !important;
  gap: 0.4rem !important;
}

.panel--identity .identity-atlas-page .atlas-dex-detail-meta dt,
.panel--atlas .atlas-dex-detail-meta dt {
  color: #8f7650 !important;
  font-size: 0.74rem !important;
  font-weight: 900 !important;
}

.panel--identity .identity-atlas-page .atlas-dex-detail-meta dd,
.panel--atlas .atlas-dex-detail-meta dd {
  margin: 0 !important;
  color: #4d5a44 !important;
  font-size: 0.86rem !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
}

.panel--identity .identity-atlas-page .atlas-dex-detail-blurb,
.panel--atlas .atlas-dex-detail-blurb {
  margin: 0 !important;
  color: #55624c !important;
  font-size: 0.92rem !important;
  font-weight: 850 !important;
  line-height: 1.45 !important;
}

.panel--identity .identity-atlas-page .atlas-dex-detail-actions,
.panel--atlas .atlas-dex-detail-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 0.55rem !important;
  margin-top: 0.28rem !important;
}

.panel--identity .identity-atlas-page .atlas-dex-detail-actions .is-hidden,
.panel--atlas .atlas-dex-detail-actions .is-hidden {
  display: none !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page:not(.is-hidden),
.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-book-layout--dex,
.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-pages--dex {
  position: relative !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-pages {
  overflow-y: auto !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-pages {
  display: grid !important;
  grid-template-rows: auto auto auto auto !important;
  gap: clamp(0.76rem, 3.4vw, 1rem) !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-summary {
  grid-template-columns: minmax(0, 1fr) clamp(4.8rem, 20vw, 5.6rem) !important;
  align-items: center !important;
  gap: clamp(0.72rem, 3vw, 0.95rem) !important;
  padding: clamp(0.82rem, 3.5vw, 1rem) clamp(0.92rem, 4vw, 1.16rem) !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-reward-button {
  width: clamp(4.55rem, 19vw, 5.45rem) !important;
  min-width: clamp(4.55rem, 19vw, 5.45rem) !important;
  min-height: clamp(4.25rem, 18vw, 5rem) !important;
  padding: clamp(0.34rem, 1.5vw, 0.48rem) !important;
  border: 0.12rem solid rgba(142, 174, 103, 0.74) !important;
  border-radius: 0.62rem !important;
  background: #fff4bd !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-reward-bag {
  width: clamp(3.05rem, 13vw, 3.72rem) !important;
  height: clamp(2.9rem, 12.2vw, 3.48rem) !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-reward-bag::before {
  width: 2.45rem !important;
  height: 1.82rem !important;
  bottom: 0.18rem !important;
  border-radius: 0.2rem 0.2rem 0.34rem 0.34rem !important;
  background: #f0c977 !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-reward-bag::after {
  width: 1.46rem !important;
  height: 0.72rem !important;
  top: 0.18rem !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-reward-bag i {
  top: 1.4rem !important;
  width: 0.92rem !important;
  height: 0.64rem !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-reward-button b {
  color: #6d5b34 !important;
  font-size: clamp(0.76rem, 3.1vw, 0.92rem) !important;
  line-height: 1 !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-card {
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-list {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: stretch !important;
  gap: clamp(0.7rem, 3vw, 0.9rem) !important;
  width: 100% !important;
  min-height: clamp(14.8rem, 64vw, 19rem) !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-list .atlas-storybook,
.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-storybook {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  min-height: clamp(14.8rem, 64vw, 19rem) !important;
  max-height: none !important;
  overflow: hidden !important;
  scroll-snap-align: start !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-story-page {
  min-height: clamp(13.2rem, 57vw, 17rem) !important;
  max-height: none !important;
  overflow: hidden !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-story-portrait {
  min-height: clamp(8.4rem, 36vw, 11rem) !important;
  max-height: none !important;
  overflow: visible !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-story-portrait img {
  width: min(94%, 10.5rem) !important;
  height: min(94%, 10.5rem) !important;
  object-fit: contain !important;
  object-position: center !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .locked-grid {
  min-height: clamp(10.8rem, 44vw, 13rem) !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

/* EOF expedition squad composition repair: title, slots and picker are separate rows. */
.panel--expedition.is-open .expedition-squad {
  --squad-card-pad: clamp(1rem, 4.6vw, 1.32rem) !important;
  --squad-slot-size: clamp(4.08rem, 17vw, 4.82rem) !important;
  --squad-picker-size: clamp(3.52rem, 15vw, 4.18rem) !important;
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  align-items: start !important;
  gap: clamp(0.68rem, 3vw, 0.92rem) !important;
  min-height: 0 !important;
  padding: clamp(0.82rem, 3.8vw, 1.08rem) 0 clamp(0.92rem, 4vw, 1.16rem) !important;
  overflow: visible !important;
}

.panel--expedition.is-open .expedition-squad header {
  position: static !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 0.12rem !important;
  width: 100% !important;
  padding: 0 var(--squad-card-pad) !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.panel--expedition.is-open .expedition-squad h3,
.panel--expedition.is-open .expedition-squad p {
  position: static !important;
  margin: 0 !important;
  max-width: 100% !important;
  color: #5b7048 !important;
  text-align: left !important;
  transform: none !important;
  opacity: 1 !important;
  white-space: normal !important;
}

.panel--expedition.is-open .expedition-squad h3 {
  font-size: clamp(1.02rem, 4.5vw, 1.22rem) !important;
  line-height: 1.1 !important;
}

.panel--expedition.is-open .expedition-squad p {
  display: block !important;
  font-size: clamp(0.66rem, 2.8vw, 0.78rem) !important;
  line-height: 1.15 !important;
}

.panel--expedition.is-open .squad-slots {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: var(--squad-slot-size) !important;
  justify-content: start !important;
  align-items: start !important;
  gap: clamp(1.02rem, 5.2vw, 1.42rem) !important;
  width: 100% !important;
  min-height: calc(var(--squad-slot-size) + 1.22rem) !important;
  padding: 0 var(--squad-card-pad) !important;
  margin: 0 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scroll-padding-inline: var(--squad-card-pad) !important;
  scrollbar-width: none !important;
}

.panel--expedition.is-open .squad-slots::-webkit-scrollbar,
.panel--expedition.is-open .squad-picker::-webkit-scrollbar {
  display: none !important;
}

.panel--expedition.is-open .squad-slot {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: var(--squad-slot-size) !important;
  min-width: var(--squad-slot-size) !important;
  max-width: var(--squad-slot-size) !important;
  height: var(--squad-slot-size) !important;
  min-height: var(--squad-slot-size) !important;
  max-height: var(--squad-slot-size) !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  overflow: visible !important;
}

.panel--expedition.is-open .squad-slot img {
  width: 78% !important;
  height: 78% !important;
  object-fit: contain !important;
}

.panel--expedition.is-open .squad-slot span {
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + 0.18rem) !important;
  width: max-content !important;
  max-width: calc(var(--squad-slot-size) + 0.9rem) !important;
  overflow: hidden !important;
  color: #65734f !important;
  font-size: clamp(0.56rem, 2.45vw, 0.68rem) !important;
  line-height: 1 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  transform: translateX(-50%) !important;
}

.panel--expedition.is-open .squad-picker {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: var(--squad-picker-size) !important;
  justify-content: start !important;
  align-items: start !important;
  gap: clamp(0.7rem, 3.6vw, 0.98rem) !important;
  width: 100% !important;
  min-height: calc(var(--squad-picker-size) + 1.35rem) !important;
  padding: 0 var(--squad-card-pad) !important;
  margin: 0 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scroll-padding-inline: var(--squad-card-pad) !important;
  scrollbar-width: none !important;
}

.panel--expedition.is-open .squad-picker.is-hidden {
  display: none !important;
}

.panel--expedition.is-open .squad-picker-option {
  display: grid !important;
  grid-template-rows: var(--squad-picker-size) auto !important;
  justify-items: center !important;
  align-items: start !important;
  gap: clamp(0.18rem, 1vw, 0.28rem) !important;
  width: var(--squad-picker-size) !important;
  min-width: var(--squad-picker-size) !important;
  max-width: var(--squad-picker-size) !important;
  min-height: calc(var(--squad-picker-size) + 1.18rem) !important;
  padding: 0 !important;
  border-radius: 0.68rem !important;
  overflow: visible !important;
}

.panel--expedition.is-open .squad-picker-option img {
  width: var(--squad-picker-size) !important;
  height: var(--squad-picker-size) !important;
  object-fit: contain !important;
  object-position: center !important;
}

.panel--expedition.is-open .squad-picker-option span {
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: #65734f !important;
  font-size: clamp(0.58rem, 2.5vw, 0.7rem) !important;
  line-height: 1.05 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  transform: none !important;
}

.panel--expedition.is-open .duration-picker {
  padding-inline: var(--squad-card-pad) !important;
  margin-top: clamp(0.2rem, 1vw, 0.34rem) !important;
}

/* EOF atlas storybook repair: sprig profile reads like a living regional field book. */
.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page {
  --atlas-page-ink: #695a3f;
  --atlas-page-green: #357a45;
  --atlas-page-line: rgba(181, 151, 89, 0.46);
  --atlas-page-paper: #fff5c9;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-pages {
  align-items: stretch !important;
  justify-items: stretch !important;
  width: 100% !important;
  gap: clamp(0.72rem, 3.2vw, 0.96rem) !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-card--collected,
.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-card--locked {
  width: 100% !important;
  border-radius: clamp(1rem, 4vw, 1.28rem) !important;
  background: #fbf1c4 !important;
  color: var(--atlas-page-ink) !important;
  overflow: hidden !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-card h2 {
  margin: 0 0 clamp(0.58rem, 2.6vw, 0.78rem) !important;
  color: var(--atlas-page-ink) !important;
  font-size: clamp(1rem, 4.4vw, 1.24rem) !important;
  line-height: 1.1 !important;
  text-align: left !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-list {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  min-height: clamp(20.6rem, 86vw, 29rem) !important;
  gap: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-list::-webkit-scrollbar {
  display: none !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-storybook {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.48fr) minmax(0, 0.52fr) !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  min-height: clamp(20.6rem, 86vw, 29rem) !important;
  border-radius: clamp(0.82rem, 3.5vw, 1rem) !important;
  background: var(--atlas-page-paper) !important;
  color: var(--atlas-page-ink) !important;
  overflow: hidden !important;
  scroll-snap-align: start !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-story-page {
  display: grid !important;
  min-width: 0 !important;
  min-height: 100% !important;
  max-height: none !important;
  padding: clamp(0.76rem, 3.6vw, 1.08rem) !important;
  overflow: hidden !important;
  background: transparent !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-story-page--portrait {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  align-items: end !important;
  border-right: 0.08rem solid var(--atlas-page-line) !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-story-page--notes {
  position: relative !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
  align-content: start !important;
  gap: clamp(0.34rem, 1.6vw, 0.48rem) !important;
  padding-bottom: clamp(3rem, 12vw, 3.9rem) !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-story-kicker {
  margin: 0 !important;
  color: #8d7651 !important;
  font-size: clamp(0.66rem, 2.8vw, 0.82rem) !important;
  font-weight: 850 !important;
  line-height: 1.1 !important;
  text-align: left !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-story-portrait {
  align-self: end !important;
  justify-self: stretch !important;
  display: grid !important;
  place-items: end center !important;
  width: 100% !important;
  min-height: clamp(12.4rem, 52vw, 18rem) !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-story-portrait img {
  width: min(132%, 14.5rem) !important;
  height: min(132%, 14.5rem) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  image-rendering: pixelated !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-story-portrait--locked img {
  filter: brightness(0) saturate(0) opacity(0.35) !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-storybook h3 {
  margin: 0 !important;
  color: var(--atlas-page-green) !important;
  font-size: clamp(1.12rem, 5vw, 1.55rem) !important;
  line-height: 1.08 !important;
  text-align: left !important;
  word-break: keep-all !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-story-page--portrait h3 {
  color: var(--atlas-page-green) !important;
  font-size: clamp(1.28rem, 5.8vw, 1.86rem) !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-affinity {
  margin: 0 !important;
  color: #d79d47 !important;
  font-size: clamp(0.82rem, 3.5vw, 1rem) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-brief-notes {
  display: grid !important;
  gap: clamp(0.3rem, 1.55vw, 0.44rem) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-brief-notes div {
  display: grid !important;
  grid-template-columns: clamp(2.15rem, 9vw, 2.7rem) minmax(0, 1fr) !important;
  gap: clamp(0.28rem, 1.4vw, 0.42rem) !important;
  align-items: start !important;
  min-width: 0 !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-brief-notes dt,
.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-brief-notes dd {
  margin: 0 !important;
  color: var(--atlas-page-ink) !important;
  font-size: clamp(0.68rem, 2.95vw, 0.84rem) !important;
  line-height: 1.22 !important;
  text-align: left !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-brief-notes dt {
  color: #8a7658 !important;
  font-weight: 900 !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-brief-notes dd {
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  font-weight: 850 !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-brief-notes .is-unknown dd {
  color: rgba(105, 90, 63, 0.42) !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-unlock-hint {
  margin: 0 !important;
  color: rgba(105, 90, 63, 0.68) !important;
  font-size: clamp(0.58rem, 2.45vw, 0.7rem) !important;
  line-height: 1.22 !important;
  text-align: left !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-page-corner {
  position: absolute !important;
  right: clamp(0.58rem, 2.6vw, 0.8rem) !important;
  bottom: clamp(0.58rem, 2.6vw, 0.8rem) !important;
  display: grid !important;
  place-items: center !important;
  width: clamp(2.38rem, 10vw, 2.86rem) !important;
  height: clamp(2.38rem, 10vw, 2.86rem) !important;
  border: 0 !important;
  border-radius: 0.46rem 0.46rem 0.94rem 0.46rem !important;
  background: #ecd995 !important;
  color: #806b46 !important;
  overflow: hidden !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-page-corner span {
  display: none !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-page-corner::before {
  content: "" !important;
  width: 44% !important;
  height: 44% !important;
  border-right: 0.22rem solid currentColor !important;
  border-bottom: 0.22rem solid currentColor !important;
  transform: rotate(-45deg) translate(-0.08rem, -0.08rem) !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .locked-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  gap: clamp(0.54rem, 2.6vw, 0.76rem) !important;
  width: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .locked-grid article {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  padding: clamp(0.38rem, 1.8vw, 0.56rem) !important;
  border-radius: clamp(0.72rem, 3vw, 0.92rem) !important;
  overflow: hidden !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .locked-grid article > b {
  width: 92% !important;
  height: 92% !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .locked-grid article img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}

@media (max-width: 430px) {
  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-storybook {
    grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr) !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-story-page {
    padding: clamp(0.62rem, 3.2vw, 0.82rem) !important;
  }

  .panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-story-portrait img {
    width: min(142%, 12.8rem) !important;
    height: min(142%, 12.8rem) !important;
  }
}

/* EOF dock shape guard: bottom buttons stay clean rectangles, no clipped corners. */
.eight-bit-ui .dock button {
  clip-path: none !important;
}

/* Name screen garden gate and vines. */
.name-screen {
  --name-card-width: min(86vw, 34.8rem);
  --name-card-pad-x: clamp(1.55rem, 5.4vw, 3rem);
  --name-card-pad-y: clamp(1.45rem, 4.6vw, 2.55rem);
  --name-row-gap: clamp(1.18rem, 3.4vw, 1.78rem);
  --name-field-radius: clamp(0.78rem, 2.9vw, 1.22rem);
  overflow: hidden !important;
  isolation: isolate;
  place-items: center !important;
  padding: clamp(1rem, 4vw, 2rem) !important;
  background:
    linear-gradient(180deg, rgba(216, 241, 255, 0.1), rgba(255, 250, 219, 0.18) 44%, rgba(198, 226, 156, 0.1)),
    url("./assets/garden-panorama-cottage.png") center top / cover no-repeat !important;
  backdrop-filter: none !important;
}

.name-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 246, 0.08), rgba(249, 246, 216, 0.5) 58%, rgba(255, 251, 229, 0.12)),
    radial-gradient(ellipse at 50% 72%, rgba(255, 250, 216, 0.24), transparent 48%);
  pointer-events: none;
}

.garden-gate-arch,
.garden-gate-rail,
.garden-vine {
  position: absolute;
  display: block;
  pointer-events: none;
}

.garden-gate-arch {
  left: 50%;
  top: clamp(3.8rem, 8vh, 5.2rem);
  z-index: 1;
  width: min(52vw, 18.2rem);
  height: clamp(4.4rem, 12.5vh, 6.6rem);
  border: 0.16rem solid rgba(231, 211, 161, 0.92);
  border-bottom-width: 0.28rem;
  background:
    linear-gradient(90deg, rgba(248, 237, 193, 0.76) 0 0.45rem, transparent 0.45rem calc(100% - 0.45rem), rgba(248, 237, 193, 0.76) calc(100% - 0.45rem)),
    linear-gradient(135deg, rgba(229, 244, 198, 0.68), rgba(177, 214, 152, 0.72));
  box-shadow:
    0 0.18rem 0 rgba(255, 250, 222, 0.9) inset,
    0 0.7rem 1.1rem rgba(111, 135, 83, 0.18);
  border-radius: 38% 38% 0 0 / 48% 48% 0 0;
  opacity: 0.76;
  transform: translateX(-50%);
}

.garden-gate-arch::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.18rem;
  width: 27%;
  height: 47%;
  border: 0.14rem solid rgba(125, 154, 96, 0.84);
  border-bottom: 0;
  border-radius: 0.62rem 0.62rem 0 0;
  background:
    linear-gradient(90deg, transparent 47%, rgba(125, 154, 96, 0.5) 47% 53%, transparent 53%),
    rgba(191, 225, 174, 0.72);
  transform: translateX(-50%);
}

.garden-gate-arch::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 20%;
  width: 13%;
  height: 72%;
  border-inline: 0.16rem solid rgba(244, 230, 185, 0.78);
  background: rgba(221, 239, 190, 0.36);
  transform: translateX(-50%);
}

.garden-gate-rail {
  top: clamp(7rem, 15vh, 9.8rem);
  z-index: 0;
  width: min(20vw, 9.4rem);
  height: clamp(3.6rem, 9vh, 5.1rem);
  border-bottom: 0.16rem solid rgba(199, 214, 159, 0.72);
  background:
    linear-gradient(90deg, transparent 0 0.34rem, rgba(255, 255, 242, 0.88) 0.34rem 1.02rem, transparent 1.02rem 1.5rem) left bottom / 1.5rem 88% repeat-x,
    linear-gradient(180deg, transparent 0 48%, rgba(255, 253, 228, 0.78) 48% 62%, transparent 62%);
  opacity: 0.68;
}

.garden-gate-rail--left {
  right: calc(50% + min(13vw, 7.4rem));
}

.garden-gate-rail--right {
  left: calc(50% + min(13vw, 7.4rem));
}

.garden-vine {
  top: clamp(13rem, 27vh, 18rem);
  z-index: 5;
  width: clamp(4.6rem, 15vw, 7.4rem);
  height: clamp(10rem, 28vh, 15rem);
  opacity: 0.86;
}

.garden-vine::before {
  content: "";
  position: absolute;
  inset: 0.4rem 1.55rem 0.4rem 1.55rem;
  border-left: 0.18rem solid rgba(105, 153, 78, 0.72);
  border-top: 0.14rem solid rgba(105, 153, 78, 0.58);
  border-radius: 55% 0 0 45%;
}

.garden-vine::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 32% 10%, #7fba57 0 0.36rem, transparent 0.38rem),
    radial-gradient(ellipse at 66% 18%, #a9d778 0 0.34rem, transparent 0.36rem),
    radial-gradient(ellipse at 28% 32%, #8fca63 0 0.4rem, transparent 0.42rem),
    radial-gradient(ellipse at 70% 45%, #6fa64e 0 0.36rem, transparent 0.38rem),
    radial-gradient(ellipse at 36% 60%, #b5dd78 0 0.38rem, transparent 0.4rem),
    radial-gradient(ellipse at 64% 75%, #82b95c 0 0.34rem, transparent 0.36rem),
    radial-gradient(circle at 40% 86%, #fff2a7 0 0.16rem, transparent 0.18rem),
    radial-gradient(circle at 58% 90%, #fff2a7 0 0.14rem, transparent 0.16rem);
}

.garden-vine--left {
  left: max(0.4rem, calc(50% - 22.5rem));
  transform: rotate(-4deg);
}

.garden-vine--right {
  right: max(0.4rem, calc(50% - 22.5rem));
  transform: scaleX(-1) rotate(-4deg);
}

.name-screen .name-card,
.eight-bit-ui .name-screen .name-card {
  position: relative;
  z-index: 4;
  width: var(--name-card-width) !important;
  padding: var(--name-card-pad-y) var(--name-card-pad-x) !important;
  border: 0.16rem solid rgba(167, 210, 134, 0.95) !important;
  border-radius: clamp(0.76rem, 2.4vw, 1.04rem) !important;
  color: #4f684a !important;
  background:
    linear-gradient(90deg, rgba(149, 195, 111, 0.14) 0 0.34rem, transparent 0.34rem calc(100% - 0.34rem), rgba(149, 195, 111, 0.14) calc(100% - 0.34rem)),
    linear-gradient(180deg, rgba(255, 252, 235, 0.98), rgba(255, 245, 207, 0.97)) !important;
  box-shadow:
    0 0 0 0.3rem rgba(255, 251, 221, 0.68) inset,
    0 0 0 0.58rem rgba(113, 154, 80, 0.08) inset,
    0 1rem 0 rgba(117, 154, 78, 0.12) !important;
}

.name-screen .name-card::before,
.name-screen .name-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.name-screen .name-card::before {
  inset: clamp(0.54rem, 1.8vw, 0.82rem);
  z-index: -1;
  border: 0.1rem solid rgba(188, 224, 148, 0.72);
  border-radius: clamp(0.58rem, 1.9vw, 0.82rem);
  background:
    radial-gradient(circle at 1.2rem 1.2rem, #8fbd61 0 0.24rem, transparent 0.26rem),
    radial-gradient(circle at calc(100% - 1.2rem) 1.2rem, #8fbd61 0 0.24rem, transparent 0.26rem),
    radial-gradient(circle at 1.2rem calc(100% - 1.2rem), #eac66c 0 0.2rem, transparent 0.22rem),
    radial-gradient(circle at calc(100% - 1.2rem) calc(100% - 1.2rem), #eac66c 0 0.2rem, transparent 0.22rem);
}

.name-screen .name-card::after {
  left: calc(var(--name-card-pad-x) * 0.55);
  right: calc(var(--name-card-pad-x) * 0.55);
  top: clamp(0.68rem, 2vw, 1rem);
  z-index: -1;
  height: clamp(3.1rem, 9vw, 4.65rem);
  border: 0.1rem solid rgba(190, 148, 78, 0.2);
  border-radius: 0.4rem;
  background:
    linear-gradient(90deg, rgba(151, 107, 52, 0.08) 0 0.18rem, transparent 0.18rem calc(100% - 0.18rem), rgba(151, 107, 52, 0.08) calc(100% - 0.18rem)),
    linear-gradient(180deg, rgba(255, 229, 155, 0.46), rgba(255, 241, 189, 0.16));
}

.name-screen .setup-step {
  min-height: clamp(18.2rem, 42vh, 22.5rem);
}

.name-screen .setup-step.is-active {
  display: grid;
  align-content: start;
  gap: 0;
}

.name-screen .setup-step h1,
.eight-bit-ui .name-screen .setup-step h1 {
  position: relative;
  width: 100%;
  margin: 0 0 var(--name-row-gap) !important;
  padding: clamp(0.34rem, 1.4vw, 0.48rem) 0 clamp(0.26rem, 1vw, 0.38rem);
  color: #4d6847 !important;
  font-size: clamp(2.05rem, 7.2vw, 3.32rem) !important;
  line-height: 1.05;
  letter-spacing: 0;
  text-shadow: 0 0.08rem 0 rgba(255, 247, 204, 0.9);
}

.name-screen .setup-step h1::before,
.name-screen .setup-step h1::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(0.72rem, 2.8vw, 1rem);
  height: clamp(2.4rem, 7.2vw, 3.4rem);
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 48% 24%, rgba(255, 244, 162, 0.75) 0 0.15rem, transparent 0.17rem),
    linear-gradient(180deg, #94c66b, #6ca34f);
  box-shadow: 0 0 0 0.08rem rgba(94, 132, 67, 0.18);
  transform: translateY(-50%);
}

.name-screen .setup-step h1::before {
  left: calc(var(--name-card-pad-x) * -0.72);
}

.name-screen .setup-step h1::after {
  right: calc(var(--name-card-pad-x) * -0.72);
}

.name-screen .setup-step > p {
  margin: calc(var(--name-row-gap) * -0.34) 0 var(--name-row-gap);
  color: #6e8965;
  font-size: clamp(0.95rem, 3.2vw, 1.18rem);
  font-weight: 900;
  line-height: 1.45;
}

.name-screen [data-setup-step="1"] > p,
.name-screen [data-setup-step="2"] > p {
  position: relative;
  padding: clamp(0.56rem, 1.8vw, 0.72rem) clamp(0.72rem, 2.4vw, 0.95rem);
  border: 0.1rem solid rgba(191, 224, 155, 0.72);
  border-radius: 0.42rem;
  background:
    linear-gradient(90deg, rgba(189, 220, 120, 0.18) 0 0.34rem, transparent 0.34rem),
    rgba(255, 250, 222, 0.44);
}

.name-screen [data-setup-step="1"] > p::before,
.name-screen [data-setup-step="2"] > p::before {
  content: "";
  position: absolute;
  left: clamp(0.46rem, 1.6vw, 0.62rem);
  top: 50%;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 0.1rem;
  background: #8fbd61;
  transform: translateY(-50%) rotate(45deg);
}

.name-screen .name-card label {
  gap: clamp(0.46rem, 1.45vw, 0.64rem);
  margin: 0 0 var(--name-row-gap);
  color: #6f9164;
  font-size: clamp(0.98rem, 3.35vw, 1.28rem);
}

.name-screen .name-card label > span {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
}

.name-screen .name-card label > span::before {
  content: "";
  display: inline-block;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 0.12rem;
  background: #b9dc76;
  box-shadow:
    0.22rem -0.14rem 0 -0.08rem #80b85b,
    0.36rem 0.16rem 0 -0.08rem #f1d982;
  transform: rotate(45deg);
}

.name-screen .location-arrow-button {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(0.52rem, 1.8vw, 0.72rem);
  align-items: center;
  justify-self: start;
  width: min(100%, clamp(13.2rem, 48vw, 18rem));
  min-height: clamp(3.15rem, 8vw, 3.86rem);
  margin: 0 0 clamp(0.62rem, 1.9vw, 0.82rem);
  padding: 0 clamp(0.86rem, 2.8vw, 1.18rem);
  border: 0.14rem solid #78a65a;
  border-radius: var(--name-field-radius);
  color: #fffbe7;
  background:
    linear-gradient(180deg, #9fc177, #82a95f);
  box-shadow:
    0 0.14rem 0 rgba(255, 255, 226, 0.5) inset,
    0 0.26rem 0 rgba(91, 128, 66, 0.28) !important;
  font-weight: 950;
  text-align: left;
}

.name-screen .location-arrow-button span {
  display: grid;
  width: clamp(1.64rem, 5vw, 2.08rem);
  height: clamp(1.64rem, 5vw, 2.08rem);
  place-items: center;
  border-radius: 0.32rem;
  background: rgba(255, 248, 216, 0.22);
  box-shadow: 0 0 0 0.08rem rgba(255, 255, 235, 0.2) inset;
}

.name-screen .location-arrow-button svg {
  width: 82%;
  height: 82%;
  transform: rotate(32deg);
}

.name-screen .location-status {
  min-height: 0;
  margin: 0 0 var(--name-row-gap);
  padding: clamp(0.62rem, 2vw, 0.8rem) clamp(0.72rem, 2.4vw, 0.95rem);
  border: 0.1rem dashed rgba(131, 171, 103, 0.46);
  border-radius: 0.42rem;
  color: #718762;
  background: rgba(255, 252, 232, 0.58);
  font-size: clamp(0.82rem, 2.75vw, 0.98rem);
  font-weight: 850;
  line-height: 1.38;
}

.name-screen .setup-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.78rem, 2.4vw, 1rem);
  margin: 0;
}

.name-screen .setup-grid label,
.name-screen .setup-grid label:last-child {
  grid-column: 1;
  margin: 0;
}

.name-screen .name-card input,
.name-screen .name-card select,
.eight-bit-ui .name-screen .name-card input,
.eight-bit-ui .name-screen .name-card select {
  width: 100%;
  min-height: clamp(3.45rem, 9.2vw, 4.45rem);
  padding-inline: clamp(1.05rem, 4vw, 1.7rem);
  border: 0.14rem solid rgba(196, 225, 167, 0.98) !important;
  border-radius: var(--name-field-radius) !important;
  color: #526b4a !important;
  background-color: rgba(255, 255, 250, 0.94) !important;
  font-size: clamp(1rem, 3.8vw, 1.42rem);
  box-shadow:
    0 0.12rem 0 rgba(255, 255, 255, 0.76) inset,
    0 0 0 0.18rem rgba(226, 241, 207, 0.58) !important;
}

.name-screen .name-card select {
  padding-right: clamp(2.4rem, 8vw, 3.4rem);
  background:
    linear-gradient(45deg, transparent 50%, #5f744e 50%) calc(100% - clamp(1.45rem, 4.8vw, 2.1rem)) 50% / 0.42rem 0.42rem no-repeat,
    rgba(255, 255, 253, 0.9) !important;
}

.name-screen .birthday-picker {
  margin: 0 0 var(--name-row-gap);
  padding: clamp(0.72rem, 2.2vw, 0.95rem);
  border: 0.12rem solid rgba(196, 225, 167, 0.92);
  border-radius: var(--name-field-radius);
  background:
    linear-gradient(90deg, rgba(149, 195, 111, 0.12), transparent 24% 76%, rgba(149, 195, 111, 0.12)),
    rgba(255, 255, 250, 0.84);
  box-shadow:
    0 0.12rem 0 rgba(255, 255, 255, 0.76) inset,
    0 0 0 0.18rem rgba(226, 241, 207, 0.58);
}

.name-screen .birthday-wheel {
  gap: clamp(0.22rem, 1vw, 0.36rem);
  padding: 0;
  border-radius: calc(var(--name-field-radius) * 0.68);
  background:
    linear-gradient(180deg, rgba(255, 240, 188, 0.58), transparent 34% 66%, rgba(255, 240, 188, 0.58));
  overflow: hidden;
}

.name-screen .birthday-wheel::before,
.name-screen .birthday-wheel::after {
  left: 0.2rem;
  right: 0.2rem;
  background: rgba(143, 189, 97, 0.72);
}

.name-screen .birthday-column {
  --birthday-row-height: clamp(3.1rem, 8vw, 3.85rem);
}

.name-screen .birthday-column button {
  font-size: clamp(1rem, 3.5vw, 1.35rem);
}

.name-screen .setup-actions {
  grid-template-columns: 1fr !important;
  gap: clamp(0.64rem, 2.2vw, 0.86rem);
  margin-top: clamp(0.36rem, 1.4vw, 0.7rem);
}

.name-screen .setup-actions .primary,
.name-screen .setup-actions .secondary,
.name-screen .setup-actions #setupSubmit {
  grid-column: 1 !important;
  width: 100%;
  min-height: clamp(3.28rem, 8.4vw, 4.15rem);
  border-radius: var(--name-field-radius) !important;
  font-size: clamp(1rem, 3.8vw, 1.34rem);
  box-shadow:
    0 0.12rem 0 rgba(255, 255, 255, 0.62) inset,
    0 0.24rem 0 rgba(151, 107, 52, 0.14) !important;
}

.name-screen .setup-actions .primary {
  border-color: #d89f2b !important;
  background:
    linear-gradient(180deg, #ffe17a, #ffd05a) !important;
}

.name-screen .setup-actions .secondary:disabled {
  color: #7c9a69;
  background: rgba(255, 240, 185, 0.58);
  border-color: rgba(188, 226, 148, 0.82);
}

@media (min-width: 721px) {
  .name-screen .setup-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.72rem, 1.8vw, 0.95rem);
  }

  .name-screen .setup-grid label,
  .name-screen .setup-grid label:last-child {
    grid-column: auto;
  }
}

@media (min-width: 721px) and (max-height: 820px) {
  .name-screen {
    --name-card-pad-y: clamp(1rem, 3.2vh, 1.55rem);
    --name-row-gap: clamp(0.72rem, 2vh, 1.02rem);
  }

  .name-screen .setup-step h1,
  .eight-bit-ui .name-screen .setup-step h1 {
    font-size: clamp(2.18rem, 6vw, 2.85rem) !important;
  }

  .name-screen .setup-step > p {
    line-height: 1.32;
  }

  .name-screen .location-arrow-button {
    min-height: clamp(3rem, 7vh, 3.42rem);
  }

  .name-screen .name-card input,
  .name-screen .name-card select,
  .eight-bit-ui .name-screen .name-card input,
  .eight-bit-ui .name-screen .name-card select {
    min-height: clamp(3.08rem, 7.2vh, 3.72rem);
  }

  .name-screen .setup-actions .primary,
  .name-screen .setup-actions .secondary,
  .name-screen .setup-actions #setupSubmit {
    min-height: clamp(3rem, 7vh, 3.55rem);
  }
}

@media (max-width: 720px) {
  .name-screen {
    place-items: start center !important;
    --name-card-pad-x: clamp(1.55rem, 6vw, 2.38rem);
    --name-card-pad-y: clamp(1.34rem, 4.8vw, 2rem);
    padding-top: clamp(10.7rem, 23.5vh, 13.1rem) !important;
    background-position: center top !important;
  }

  .garden-gate-arch {
    top: clamp(5.1rem, 9.6vh, 6rem);
    width: min(56vw, 16.4rem);
    height: clamp(4.4rem, 12vh, 5.8rem);
  }

  .garden-gate-rail {
    top: clamp(7rem, 13vh, 8.7rem);
    width: min(19vw, 5.6rem);
    height: clamp(3.2rem, 8vh, 4.2rem);
  }

  .garden-vine {
    top: clamp(14rem, 30vh, 17.2rem);
    width: clamp(3.7rem, 15vw, 5.3rem);
    height: clamp(8.2rem, 24vh, 11.4rem);
  }

  .garden-vine--left {
    left: 0.1rem;
  }

  .garden-vine--right {
    right: 0.1rem;
  }

  .name-screen .name-card,
  .eight-bit-ui .name-screen .name-card {
    width: min(86vw, 32rem) !important;
  }

  .name-screen .setup-step h1,
  .eight-bit-ui .name-screen .setup-step h1 {
    font-size: clamp(2rem, 9vw, 3.05rem) !important;
  }

  .name-screen [data-setup-step="1"] > p,
  .name-screen [data-setup-step="2"] > p,
  .name-screen .location-status {
    font-size: clamp(0.78rem, 3.25vw, 0.92rem);
  }

  .name-screen .location-arrow-button {
    width: 100%;
  }
}

/* Garden radar: real-world view, nearby gardens and exchange states. */
.panel--map.is-open {
  --map-real-width: min(100%, 21rem) !important;
  --map-radar-size: min(var(--map-real-width), clamp(13rem, 32vh, 16.3rem)) !important;
  --map-radar-gap: clamp(0.62rem, 2.8vw, 0.82rem) !important;
  grid-template-rows: auto auto auto auto auto !important;
  justify-items: start !important;
  align-content: start !important;
}

.panel--map.is-open .panel-header,
.panel--map.is-open .real-world-garden,
.panel--map.is-open .map-actions,
.panel--map.is-open .map-results {
  width: var(--map-real-width) !important;
  max-width: var(--map-real-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.panel--map.is-open .panel-header {
  margin-bottom: var(--map-radar-gap) !important;
}

.panel--map.is-open .panel-header h2,
.panel--map.is-open .panel-header p {
  text-align: left !important;
}

.panel--map.is-open .panel-header h2 {
  font-size: clamp(1.72rem, 7.2vw, 2.38rem) !important;
}

.real-world-garden {
  position: relative;
  min-height: clamp(4.4rem, 13vh, 5.8rem);
  margin-bottom: var(--map-radar-gap);
  overflow: hidden;
  border: 0.14rem solid rgba(151, 202, 117, 0.48);
  border-radius: 0.92rem;
  background:
    linear-gradient(180deg, rgba(157, 212, 235, 0.86) 0 42%, rgba(202, 231, 164, 0.9) 42% 100%);
  box-shadow:
    0 0.22rem 0 rgba(114, 150, 83, 0.16),
    0 0 1.4rem rgba(255, 246, 168, 0.26) inset;
}

.real-world-garden::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px);
  background-size: 1.45rem 1.45rem;
  opacity: 0.46;
  pointer-events: none;
}

.real-world-garden > span {
  position: absolute;
  pointer-events: none;
}

.real-world-sky {
  left: 5%;
  top: 12%;
  width: 3.4rem;
  height: 1.05rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow:
    1.4rem 0.22rem 0 -0.18rem rgba(255, 255, 255, 0.68),
    8.8rem -0.2rem 0 -0.28rem rgba(255, 255, 255, 0.56);
}

.real-world-buildings {
  left: 8%;
  right: 9%;
  bottom: 39%;
  height: 1.34rem;
  background:
    linear-gradient(90deg, #e8dfbc 0 12%, transparent 12% 16%, #f5ecce 16% 29%, transparent 29% 35%, #d7e5bd 35% 48%, transparent 48% 54%, #f3d8b4 54% 67%, transparent 67% 72%, #e8dfbc 72% 84%, transparent 84%);
  opacity: 0.9;
}

.real-world-trees {
  left: 5%;
  right: 4%;
  bottom: 24%;
  height: 1.28rem;
  background:
    radial-gradient(circle at 8% 58%, #79ad60 0 0.78rem, transparent 0.82rem),
    radial-gradient(circle at 18% 38%, #a7ca73 0 0.7rem, transparent 0.74rem),
    radial-gradient(circle at 78% 48%, #7fb764 0 0.78rem, transparent 0.82rem),
    radial-gradient(circle at 90% 40%, #c8d878 0 0.7rem, transparent 0.74rem);
}

.real-world-water {
  left: -3%;
  bottom: 0;
  width: 33%;
  height: 28%;
  border-radius: 0 999px 0 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.38) 0 0.08rem, transparent 0.08rem 0.34rem),
    #8fd0d4;
}

.real-world-path {
  right: 16%;
  bottom: -16%;
  width: 34%;
  height: 62%;
  border-radius: 55% 55% 0 0;
  background: rgba(238, 217, 151, 0.82);
  transform: rotate(-12deg);
}

.real-world-marker {
  left: 53%;
  bottom: 31%;
  width: 1.16rem;
  aspect-ratio: 1;
  border: 0.16rem solid rgba(255, 244, 149, 0.9);
  border-radius: 50%;
  background: rgba(255, 207, 74, 0.76);
  box-shadow:
    0 0 0 0.32rem rgba(255, 248, 180, 0.28),
    0 0 1.1rem rgba(255, 218, 86, 0.62);
  animation: gardenCenterGleam 3.2s ease-in-out infinite;
}

.real-world-garden > div {
  position: absolute;
  left: clamp(0.72rem, 3vw, 0.95rem);
  right: clamp(0.72rem, 3vw, 0.95rem);
  bottom: clamp(0.54rem, 2vw, 0.72rem);
  z-index: 2;
  display: grid;
  gap: 0.08rem;
  color: #486344;
  text-align: left;
}

.real-world-garden strong {
  font-size: clamp(0.96rem, 3.8vw, 1.18rem);
  font-weight: 950;
  line-height: 1.12;
}

.real-world-garden small {
  overflow: hidden;
  color: rgba(72, 99, 68, 0.82);
  font-size: clamp(0.68rem, 2.7vw, 0.78rem);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.real-world-garden[data-weather="rain"] {
  background:
    linear-gradient(180deg, rgba(142, 176, 188, 0.9) 0 42%, rgba(176, 202, 151, 0.92) 42% 100%);
}

.real-world-garden[data-weather="cloud"],
.real-world-garden[data-weather="mist"] {
  background:
    linear-gradient(180deg, rgba(181, 206, 203, 0.92) 0 42%, rgba(192, 219, 158, 0.92) 42% 100%);
}

.panel--map.is-open .radar {
  width: var(--map-radar-size) !important;
  max-width: var(--map-radar-size) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: var(--map-radar-gap) !important;
}

.panel--map.is-open .map-actions {
  gap: clamp(0.5rem, 2.4vw, 0.68rem) !important;
  margin-bottom: var(--map-radar-gap) !important;
}

.panel--map.is-open .map-actions .primary,
.panel--map.is-open .map-actions .secondary {
  min-height: clamp(2.78rem, 10.5vw, 3.08rem) !important;
}

.panel--map.is-open .map-results {
  display: grid !important;
  gap: clamp(0.45rem, 2.2vw, 0.62rem) !important;
  min-height: clamp(4.35rem, 14vh, 5.8rem) !important;
  max-height: clamp(6.3rem, 20vh, 9rem) !important;
  margin-top: 0 !important;
  padding-right: 0.04rem !important;
}

.panel--map.is-open .map-results > p {
  min-height: clamp(4.35rem, 14vh, 5.8rem) !important;
  place-items: start !important;
  align-content: center !important;
  text-align: left !important;
}

.map-result--garden {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem 0.58rem;
  align-items: center;
  padding: clamp(0.58rem, 2.8vw, 0.76rem);
  border-color: rgba(151, 202, 117, 0.42);
  background:
    radial-gradient(ellipse at 0 0, rgba(255, 255, 255, 0.75), transparent 50%),
    rgba(255, 252, 241, 0.86);
}

.map-result--garden.is-exchanged {
  border-color: rgba(94, 171, 151, 0.54);
  background:
    radial-gradient(ellipse at 8% 0, rgba(213, 250, 232, 0.86), transparent 54%),
    rgba(249, 255, 238, 0.92);
}

.map-result-scan {
  display: grid;
  min-width: 0;
  gap: 0.12rem;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}

.map-result-scan strong,
.map-result-scan span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-result-scan strong {
  color: #496542;
  font-size: clamp(0.9rem, 3.4vw, 1rem);
  font-weight: 950;
}

.map-result-scan span {
  color: #778665;
  font-size: clamp(0.68rem, 2.6vw, 0.78rem);
  font-weight: 850;
}

.garden-relation-badge {
  justify-self: end;
  padding: 0.18rem 0.42rem;
  border: 0.1rem solid rgba(126, 170, 88, 0.3);
  border-radius: 999px;
  color: #6d8950;
  background: rgba(230, 249, 182, 0.76);
  font-size: clamp(0.62rem, 2.4vw, 0.72rem);
  font-style: normal;
  font-weight: 950;
  line-height: 1.1;
  white-space: nowrap;
}

.garden-exchange-button {
  grid-column: 2;
  justify-self: end;
  min-height: 1.86rem;
  padding: 0 0.54rem;
  border: 0.1rem solid rgba(196, 154, 0, 0.45);
  border-radius: 0.58rem;
  color: #6d5420;
  background: #ffd763;
  box-shadow: 0 0.16rem 0 rgba(142, 100, 18, 0.18);
  font-size: clamp(0.64rem, 2.5vw, 0.76rem);
  font-weight: 950;
  white-space: nowrap;
}

.garden-exchange-button:disabled {
  border-color: rgba(94, 171, 151, 0.38);
  color: #5f826f;
  background: #dff5df;
  box-shadow: none;
}

.map-dot--garden {
  border-color: rgba(255, 215, 99, 0.8);
  background: #fff1a0;
}

.map-dot--exchanged {
  border-color: rgba(94, 171, 151, 0.74);
  background: #dff5df;
}

@media (max-width: 430px) {
  .panel--map.is-open {
    --map-real-width: min(100%, 20.4rem) !important;
    --map-radar-size: min(var(--map-real-width), 14.9rem) !important;
  }

  .garden-exchange-button {
    max-width: 6.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Final mobile atlas pass: one clean grid, one clean detail sheet. */
.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page,
.panel--atlas.is-open {
  --atlas-page-inset: clamp(1.2rem, 5.4vw, 1.65rem);
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-book-layout--dex,
.panel--atlas.is-open .atlas-book-layout--dex {
  width: 100% !important;
  padding-left: var(--atlas-page-inset) !important;
  padding-right: var(--atlas-page-inset) !important;
  overflow: visible !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-pages--dex,
.panel--atlas.is-open .atlas-pages--dex {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(0.82rem, 3.8vw, 1.08rem) !important;
  width: 100% !important;
  max-width: 25.5rem !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-summary,
.panel--atlas.is-open .atlas-summary {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-dex,
.panel--atlas.is-open .atlas-dex {
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-dex-header,
.panel--atlas.is-open .atlas-dex-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.72rem !important;
  width: 100% !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-dex-grid,
.panel--atlas.is-open .atlas-dex-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(0.58rem, 3vw, 0.78rem) !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-dex-cell,
.panel--atlas.is-open .atlas-dex-cell {
  width: 100% !important;
  min-width: 0 !important;
  min-height: auto !important;
  aspect-ratio: 1 / 1 !important;
  padding: clamp(0.36rem, 2vw, 0.52rem) !important;
  border-radius: 0.82rem !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-dex-cell img,
.panel--atlas.is-open .atlas-dex-cell img {
  width: 78% !important;
  height: 78% !important;
  max-width: 5.6rem !important;
  max-height: 5.6rem !important;
  object-fit: contain !important;
}

.panel--identity[data-active-identity-tab="atlas"] .identity-atlas-page .atlas-dex-cell b,
.panel--atlas.is-open .atlas-dex-cell b {
  width: 100% !important;
  font-size: clamp(0.66rem, 2.8vw, 0.8rem) !important;
}

.panel--identity .identity-atlas-page .atlas-dex-detail,
.panel--atlas .atlas-dex-detail {
  position: fixed !important;
  inset: 0 !important;
  z-index: 260 !important;
  align-items: center !important;
  justify-items: center !important;
  padding: clamp(4.2rem, 12svh, 5.6rem) var(--atlas-page-inset, 1.35rem) clamp(5.2rem, 14svh, 6.8rem) !important;
  overflow: hidden !important;
}

.panel--identity .identity-atlas-page .atlas-dex-detail-backdrop,
.panel--atlas .atlas-dex-detail-backdrop {
  background: rgba(76, 87, 56, 0.28) !important;
}

.panel--identity .identity-atlas-page .atlas-dex-detail-card,
.panel--atlas .atlas-dex-detail-card {
  display: grid !important;
  grid-template-columns: minmax(8.4rem, 43%) minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
  grid-template-areas:
    "art kicker"
    "art name"
    "art meta"
    "art words"
    "art actions" !important;
  column-gap: clamp(0.78rem, 3.5vw, 1.05rem) !important;
  row-gap: clamp(0.34rem, 1.8vw, 0.5rem) !important;
  width: min(100%, 24rem) !important;
  max-height: min(72svh, 31rem) !important;
  margin: 0 !important;
  padding: clamp(1rem, 4.4vw, 1.25rem) !important;
  border: 0.12rem solid rgba(136, 162, 95, 0.62) !important;
  border-radius: 1.05rem !important;
  background: #fff2c8 !important;
  color: #5f4d35 !important;
  overflow: hidden !important;
}

.panel--identity .identity-atlas-page .atlas-dex-detail-portrait,
.panel--atlas .atlas-dex-detail-portrait {
  grid-area: art !important;
  align-self: end !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  min-height: clamp(12.8rem, 48svh, 19rem) !important;
  padding: clamp(0.52rem, 2vw, 0.72rem) !important;
  border: 0.12rem dashed rgba(156, 190, 111, 0.78) !important;
  border-radius: 0.86rem !important;
  background: #f5ffd4 !important;
}

.panel--identity .identity-atlas-page .atlas-dex-detail-portrait img,
.panel--atlas .atlas-dex-detail-portrait img {
  width: min(118%, 12rem) !important;
  height: min(118%, 12rem) !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}

.panel--identity .identity-atlas-page .atlas-dex-detail-kicker,
.panel--atlas .atlas-dex-detail-kicker {
  grid-area: kicker !important;
  padding-right: 2.4rem !important;
  color: #8a7147 !important;
  font-size: clamp(0.68rem, 2.7vw, 0.78rem) !important;
}

.panel--identity .identity-atlas-page .atlas-dex-detail-card h3,
.panel--atlas .atlas-dex-detail-card h3 {
  grid-area: name !important;
  color: #2f744d !important;
  font-size: clamp(1.45rem, 7vw, 2.05rem) !important;
}

.panel--identity .identity-atlas-page .atlas-dex-detail-meta,
.panel--atlas .atlas-dex-detail-meta {
  grid-area: meta !important;
  gap: clamp(0.28rem, 1.6vw, 0.38rem) !important;
}

.panel--identity .identity-atlas-page .atlas-dex-detail-meta div,
.panel--atlas .atlas-dex-detail-meta div {
  grid-template-columns: clamp(2.35rem, 10vw, 2.8rem) minmax(0, 1fr) !important;
  gap: 0.36rem !important;
}

.panel--identity .identity-atlas-page .atlas-dex-detail-meta dt,
.panel--atlas .atlas-dex-detail-meta dt {
  color: #947849 !important;
  font-size: clamp(0.68rem, 2.6vw, 0.78rem) !important;
}

.panel--identity .identity-atlas-page .atlas-dex-detail-meta dd,
.panel--atlas .atlas-dex-detail-meta dd {
  color: #5d6245 !important;
  font-size: clamp(0.76rem, 3vw, 0.88rem) !important;
  line-height: 1.32 !important;
}

.panel--identity .identity-atlas-page .atlas-dex-detail-blurb,
.panel--atlas .atlas-dex-detail-blurb {
  grid-area: words !important;
  max-height: 5.2rem !important;
  overflow: hidden !important;
  color: #5f6549 !important;
  font-size: clamp(0.82rem, 3.25vw, 0.94rem) !important;
  line-height: 1.46 !important;
}

.panel--identity .identity-atlas-page .atlas-dex-detail-actions,
.panel--atlas .atlas-dex-detail-actions {
  grid-area: actions !important;
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.5rem !important;
  width: 100% !important;
}

.panel--identity .identity-atlas-page .atlas-dex-detail-actions button,
.panel--atlas .atlas-dex-detail-actions button {
  min-height: 2.42rem !important;
  border-radius: 0.68rem !important;
  font-size: clamp(0.78rem, 3vw, 0.9rem) !important;
}

.panel--identity .identity-atlas-page .atlas-dex-detail-actions button:not(.primary),
.panel--atlas .atlas-dex-detail-actions button:not(.primary) {
  width: 2.62rem !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: transparent !important;
}

.panel--identity .identity-atlas-page .atlas-dex-detail-actions button:not(.primary)::before,
.panel--atlas .atlas-dex-detail-actions button:not(.primary)::before {
  content: "›";
  color: #7d6848;
  font-size: 1.78rem;
  line-height: 1;
}

@media (max-width: 430px) {
  .panel--identity .identity-atlas-page .atlas-dex-detail-card,
  .panel--atlas .atlas-dex-detail-card {
    grid-template-columns: minmax(7.3rem, 42%) minmax(0, 1fr) !important;
    width: 100% !important;
  }

  .panel--identity .identity-atlas-page .atlas-dex-detail-portrait,
  .panel--atlas .atlas-dex-detail-portrait {
    min-height: clamp(12rem, 42svh, 16.2rem) !important;
  }
}

/* Guide target calm: remove the watering-can cursor and stop sprig-step self-bounce. */
.guide-cursor {
  width: 2.2rem !important;
  height: 2.2rem !important;
  filter: drop-shadow(0 0.16rem 0 rgba(80, 111, 54, 0.16)) !important;
  transform: translate(-50%, -2.3rem) rotate(0deg) !important;
  animation: guideLeafCursor 1.55s ease-in-out infinite !important;
}

.guide-cursor::before {
  left: 50% !important;
  top: 50% !important;
  width: 1.08rem !important;
  height: 1.34rem !important;
  border: 0 !important;
  border-radius: 72% 28% 72% 28% !important;
  background:
    radial-gradient(circle at 36% 30%, #f5ffbe 0 0.16rem, transparent 0.18rem),
    linear-gradient(135deg, #bfe88a 0 46%, #6f9c56 47% 100%) !important;
  box-shadow: inset -0.14rem -0.08rem 0 rgba(80, 126, 62, 0.28) !important;
  transform: translate(-50%, -50%) rotate(36deg) !important;
}

.guide-cursor::after {
  left: 50% !important;
  top: 50% !important;
  width: 0.36rem !important;
  height: 0.36rem !important;
  border-radius: 50% !important;
  background: #ffe36b !important;
  box-shadow:
    -0.92rem 0.12rem 0 -0.08rem #fff7a8,
    0.74rem -0.5rem 0 -0.09rem #d8f39f,
    0.58rem 0.62rem 0 -0.08rem #fff3a2 !important;
  transform: translate(0.42rem, -0.62rem) !important;
}

.guide-cursor.is-shaking {
  animation: guideLeafCursorShake 0.32s ease-in-out !important;
}

.guide-layer[data-guide-kind="sprig"] .guide-cursor {
  display: none !important;
}

.guide-layer[data-guide-kind="sprig"] .guide-highlight {
  border-color: rgba(168, 214, 111, 0.9) !important;
  box-shadow:
    0 0 0 999rem rgba(25, 38, 20, 0.1),
    0 0 0 0.12rem rgba(255, 246, 180, 0.6) !important;
}

.guide-layer[data-guide-kind="sprig"] .guide-highlight.is-stepping,
.guide-layer[data-guide-kind="sprig"].is-awaiting-target .guide-highlight {
  animation: guideSprigFocus 1.1s ease-out 2 !important;
}

.sprig.guide-sprig-ready img,
.sprig.guide-sprig-woken img {
  animation: guideSprigWake 0.68s ease-out 1 !important;
}

@keyframes guideLeafCursor {
  0%,
  100% {
    opacity: 0.88;
    transform: translate(-50%, -2.3rem) rotate(0deg) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -2.48rem) rotate(5deg) scale(1.04);
  }
}

@keyframes guideLeafCursorShake {
  0%,
  100% {
    transform: translate(-50%, -2.3rem) rotate(0deg);
  }
  35% {
    transform: translate(calc(-50% - 0.2rem), -2.3rem) rotate(-12deg);
  }
  70% {
    transform: translate(calc(-50% + 0.2rem), -2.3rem) rotate(12deg);
  }
}

@keyframes guideSprigFocus {
  0%,
  100% {
    outline: 0 solid rgba(255, 237, 118, 0);
    transform: translateZ(0);
  }
  45% {
    outline: 0.18rem solid rgba(255, 237, 118, 0.44);
    transform: translateZ(0);
  }
}

@keyframes guideSprigWake {
  0%,
  100% {
    transform: translateY(0) scale(var(--sprig-scale));
  }
  42% {
    transform: translateY(-3%) scale(calc(var(--sprig-scale) * 1.03));
  }
}

/* Passport registration polish: instant controls, right seal, unlock fields. */
.panel--identity .identity-tabs button,
.panel--identity .identity-tools button,
.panel--identity .identity-back,
.panel--identity .identity-icon-edit,
.guide-actions button {
  touch-action: manipulation;
  transition-duration: 0.08s !important;
}

.panel--identity .identity-tabs button:active,
.panel--identity .identity-tools button:active,
.panel--identity .identity-back:active,
.panel--identity .identity-icon-edit:active,
.guide-actions button:active {
  transform: translateY(0.08rem) scale(0.98);
}

.guide-card.is-stepping,
.guide-card.is-leaving {
  animation-duration: 0.18s !important;
}

.panel--identity .identity-page:not(.is-hidden) {
  animation-duration: 0.16s !important;
}

.panel--identity .identity-profile {
  align-content: start !important;
  gap: clamp(0.42rem, 1.2vw, 0.64rem) !important;
  padding-block: clamp(0.18rem, 0.8vw, 0.38rem) !important;
}

.panel--identity .identity-profile ul {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.28rem, 1vw, 0.42rem) clamp(0.42rem, 1.5vw, 0.64rem) !important;
  margin-top: clamp(0.38rem, 1.3vw, 0.58rem) !important;
  padding-top: clamp(0.5rem, 1.6vw, 0.72rem) !important;
  border-top: 0.1rem solid rgba(138, 115, 80, 0.2);
}

.panel--identity .identity-profile li {
  position: relative;
  grid-template-columns: max-content minmax(0, 1fr) !important;
  gap: 0.34rem !important;
  min-height: clamp(1.62rem, 3.2vw, 1.92rem) !important;
  padding: 0.18rem 0.32rem !important;
  border: 0.08rem solid rgba(149, 181, 108, 0.22);
  border-radius: 0.46rem;
  background:
    linear-gradient(135deg, rgba(255, 250, 229, 0.82), rgba(232, 243, 201, 0.46));
  overflow: visible !important;
}

.panel--identity .identity-profile li b {
  color: #7e744f !important;
  font-size: clamp(0.68rem, 1.65vw, 0.8rem) !important;
  line-height: 1.12;
  white-space: nowrap;
}

.panel--identity .identity-profile li em {
  color: #556842 !important;
  font-size: clamp(0.72rem, 1.75vw, 0.86rem) !important;
  line-height: 1.18;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

.panel--identity .identity-profile li.is-locked em {
  color: rgba(112, 120, 88, 0.58) !important;
}

.panel--identity .identity-profile li.is-unlocked {
  border-color: rgba(116, 159, 86, 0.46);
  background:
    radial-gradient(circle at 92% 18%, rgba(255, 214, 89, 0.48) 0 0.2rem, transparent 0.24rem),
    linear-gradient(135deg, rgba(244, 255, 208, 0.88), rgba(255, 246, 199, 0.7));
}

.panel--identity .identity-profile li.is-unlocked::after {
  content: "";
  position: absolute;
  right: 0.34rem;
  top: 0.28rem;
  width: 0.36rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffd75a;
  box-shadow: 0 0 0 0.13rem rgba(126, 161, 86, 0.2);
}

.panel--identity .passport-stamp {
  right: calc((100% + clamp(4.8rem, 12vw, 7.4rem)) * -1) !important;
  bottom: clamp(0.45rem, 2.2vw, 1.18rem) !important;
  width: clamp(17.2rem, 38vw, 21.6rem) !important;
  height: clamp(10.8rem, 23vw, 13.6rem) !important;
  max-width: none !important;
  opacity: 0.86 !important;
  transform: rotate(-8deg) !important;
  filter: drop-shadow(0 0.28rem 0.18rem rgba(98, 118, 70, 0.12));
}

.panel--identity .passport-stamp img {
  right: clamp(2.12rem, 5vw, 3.24rem) !important;
  width: clamp(7.42rem, 17vw, 9.76rem) !important;
  height: clamp(7.42rem, 17vw, 9.76rem) !important;
  opacity: 0.42 !important;
}

.panel--identity .passport-stamp::before {
  right: clamp(1rem, 3.1vw, 1.88rem) !important;
  width: clamp(11.2rem, 27vw, 14.6rem) !important;
  background: rgba(244, 237, 196, 0.54) !important;
}

.panel--identity .passport-stamp::after {
  content: "" !important;
  position: absolute;
  right: clamp(2rem, 5.2vw, 3.15rem) !important;
  top: 50% !important;
  width: clamp(8.8rem, 21vw, 11.4rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 15%, rgba(114, 153, 92, 0.5) 0 0.24rem, transparent 0.28rem),
    radial-gradient(circle at 70% 28%, rgba(114, 153, 92, 0.42) 0 0.2rem, transparent 0.24rem),
    radial-gradient(circle at 82% 50%, rgba(114, 153, 92, 0.46) 0 0.22rem, transparent 0.26rem),
    radial-gradient(circle at 70% 72%, rgba(114, 153, 92, 0.42) 0 0.2rem, transparent 0.24rem),
    radial-gradient(circle at 50% 85%, rgba(114, 153, 92, 0.5) 0 0.24rem, transparent 0.28rem),
    conic-gradient(from 0deg, rgba(114, 153, 92, 0.32) 0 12deg, transparent 12deg 32deg);
  opacity: 0.72;
  transform: translateY(-50%);
  mix-blend-mode: multiply;
  animation: passportSealRotate 18s linear infinite;
}

.panel--identity .passport-stamp i {
  top: clamp(3.18rem, 7vw, 4.2rem) !important;
  width: clamp(10.6rem, 23vw, 13.2rem) !important;
  height: clamp(5.4rem, 11vw, 6.8rem) !important;
  opacity: 0.82 !important;
  animation: passportPostmarkFloat 5.4s ease-in-out infinite;
}

@keyframes passportSealRotate {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

@keyframes passportPostmarkFloat {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(0.26rem);
  }
}

@media (max-width: 720px) {
  .panel--identity .identity-profile ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.22rem 0.32rem !important;
  }

  .panel--identity .identity-profile li {
    min-height: 1.48rem !important;
    padding: 0.14rem 0.26rem !important;
  }

  .panel--identity .passport-stamp {
    right: clamp(0.5rem, 3vw, 0.9rem) !important;
    bottom: clamp(-0.34rem, -0.8vw, -0.12rem) !important;
    width: clamp(12.4rem, 50vw, 15rem) !important;
    height: clamp(7.8rem, 31vw, 9.5rem) !important;
  }

  .panel--identity .passport-stamp img {
    right: clamp(1.42rem, 5vw, 2rem) !important;
    width: clamp(5.2rem, 21vw, 6.6rem) !important;
    height: clamp(5.2rem, 21vw, 6.6rem) !important;
  }
}

@media (max-width: 430px) {
  .panel--identity .identity-profile ul {
    grid-template-columns: 1fr;
  }
}

/* Backpack contents: avatar, wardrobe, tools, records and footprints. */
.panel--identity[data-active-identity-tab="items"] .backpack-overview-section {
  order: 0 !important;
  display: grid !important;
  gap: clamp(0.72rem, 3vw, 0.96rem) !important;
  width: var(--backpack-content-width, min(100%, 34rem)) !important;
  max-width: var(--backpack-content-width, min(100%, 34rem)) !important;
  margin: 0 auto clamp(0.9rem, 3vw, 1.18rem) !important;
  padding: 0 !important;
}

/* Passport mobile containment: keep the card, stamp and rows inside one clean rail. */
@media (max-width: 760px) {
  .panel--identity {
    --passport-rail: min(100%, calc(100vw - 2.75rem));
    --passport-safe-pad: clamp(1rem, 4.4vw, 1.28rem);
  }

  .panel--identity .identity-topbar,
  .panel--identity .identity-tabs,
  .panel--identity .identity-pages,
  .panel--identity .identity-hero.passport-card {
    width: var(--passport-rail) !important;
    max-width: var(--passport-rail) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  .panel--identity .identity-pages {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
  }

  .panel--identity .identity-hero.passport-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(0.58rem, 2.7vw, 0.78rem) !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: var(--passport-safe-pad) var(--passport-safe-pad) clamp(2.65rem, 10vw, 3.15rem) !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
  }

  .panel--identity .identity-hero.passport-card::before {
    inset: var(--passport-safe-pad) !important;
    border-radius: 0.78rem !important;
  }

  .panel--identity .identity-portrait {
    width: 100% !important;
    min-height: clamp(8.1rem, 30vw, 9.6rem) !important;
    max-height: clamp(8.8rem, 32vw, 10.4rem) !important;
    margin: 0 !important;
  }

  .panel--identity .identity-portrait > img {
    max-width: min(58%, 7.8rem) !important;
    max-height: min(88%, 7.8rem) !important;
    object-fit: contain !important;
  }

  .panel--identity .passport-stamp {
    right: clamp(0.7rem, 3.6vw, 1rem) !important;
    bottom: clamp(0.18rem, 1.2vw, 0.42rem) !important;
    width: clamp(9.2rem, 39vw, 11.8rem) !important;
    height: clamp(5.7rem, 24vw, 7.1rem) !important;
    opacity: 0.78 !important;
    transform: rotate(-7deg) !important;
    filter: none !important;
  }

  .panel--identity .passport-stamp img {
    right: clamp(1.08rem, 4vw, 1.58rem) !important;
    width: clamp(3.9rem, 16vw, 5rem) !important;
    height: clamp(3.9rem, 16vw, 5rem) !important;
  }

  .panel--identity .passport-stamp::before {
    right: clamp(0.8rem, 3vw, 1.18rem) !important;
    width: clamp(7.1rem, 29vw, 9.2rem) !important;
  }

  .panel--identity .passport-stamp::after {
    right: clamp(1.04rem, 4vw, 1.55rem) !important;
    width: clamp(5.7rem, 23vw, 7.2rem) !important;
  }

  .panel--identity .passport-stamp i {
    top: clamp(2.25rem, 8.2vw, 2.82rem) !important;
    width: clamp(6.8rem, 27vw, 8.6rem) !important;
    height: clamp(3.2rem, 13vw, 4.1rem) !important;
  }

  .panel--identity .identity-profile {
    display: grid !important;
    gap: clamp(0.46rem, 2vw, 0.62rem) !important;
    width: 100% !important;
    padding: 0 clamp(0.4rem, 2.2vw, 0.62rem) !important;
    color: #5d4b34 !important;
    box-sizing: border-box !important;
  }

  .panel--identity .identity-name-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.38rem !important;
    min-width: 0 !important;
  }

  .panel--identity .identity-name-row h3 {
    min-width: 0 !important;
    max-width: calc(100% - 4.2rem) !important;
    color: #5b452e !important;
    font-size: clamp(1.72rem, 7.1vw, 2.1rem) !important;
    line-height: 1.05 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .panel--identity .identity-certified-mark {
    color: #3f9a58 !important;
    font-size: clamp(0.86rem, 3.4vw, 1rem) !important;
    white-space: nowrap !important;
  }

  .panel--identity .identity-signature {
    min-height: 1.65rem !important;
    align-items: center !important;
    padding: 0 !important;
  }

  .panel--identity .identity-signature p {
    color: #65704e !important;
    font-size: clamp(0.86rem, 3.4vw, 1rem) !important;
    line-height: 1.32 !important;
  }

  .panel--identity .identity-profile ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(0.4rem, 1.9vw, 0.54rem) clamp(0.58rem, 2.6vw, 0.76rem) !important;
    width: 100% !important;
    margin: clamp(0.34rem, 1.8vw, 0.48rem) 0 0 !important;
    padding: clamp(0.72rem, 3vw, 0.88rem) 0 0 !important;
    border-top: 0.08rem solid rgba(130, 111, 76, 0.24) !important;
  }

  .panel--identity .identity-profile li {
    display: grid !important;
    grid-template-columns: clamp(2.25rem, 9vw, 2.65rem) minmax(0, 1fr) !important;
    gap: 0.34rem !important;
    min-height: 1.8rem !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
  }

  .panel--identity .identity-profile li b {
    color: #786848 !important;
    font-size: clamp(0.78rem, 3.1vw, 0.9rem) !important;
    line-height: 1.2 !important;
  }

  .panel--identity .identity-profile li em {
    color: #5d4b34 !important;
    font-size: clamp(0.88rem, 3.6vw, 1rem) !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .panel--identity .passport-id-strip {
    right: calc(var(--passport-safe-pad) + 0.36rem) !important;
    bottom: clamp(0.7rem, 3vw, 0.92rem) !important;
  }

  .panel--identity .passport-share-card:not(.is-hidden) {
    position: fixed !important;
    left: 50% !important;
    top: max(5.4rem, calc(env(safe-area-inset-top) + 4.4rem)) !important;
    z-index: 520 !important;
    width: min(calc(100vw - 3rem), 21.5rem) !important;
    max-width: min(calc(100vw - 3rem), 21.5rem) !important;
    margin: 0 !important;
    padding: clamp(1.1rem, 4.8vw, 1.38rem) clamp(1.2rem, 5vw, 1.48rem) !important;
    border-radius: 0.88rem !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
  }

  .panel--identity .passport-share-card h3 {
    font-size: clamp(1.6rem, 7vw, 2.1rem) !important;
    line-height: 1.08 !important;
  }
}

.panel--identity[data-active-identity-tab="items"] .backpack-overview-section h3 {
  display: flex !important;
  align-items: center !important;
  gap: 0.52rem !important;
  margin: 0 !important;
  color: #5d7145 !important;
  font-size: clamp(1.02rem, 2.8vw, 1.28rem) !important;
  line-height: 1.15 !important;
}

.backpack-pocket-icon {
  display: grid !important;
  width: clamp(2.08rem, 7vw, 2.54rem) !important;
  height: clamp(2.08rem, 7vw, 2.54rem) !important;
  place-items: center !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.backpack-pocket-icon i,
.backpack-pocket-icon::before,
.backpack-pocket-icon::after {
  content: "";
  display: block;
  image-rendering: pixelated;
}

.backpack-pocket-icon i {
  width: 1.48rem;
  height: 1.18rem;
  border: 0.16rem solid #78965f;
  border-top-width: 0.26rem;
  border-radius: 0.16rem 0.16rem 0.28rem 0.28rem;
  background:
    linear-gradient(#f5dc8b 0 0.32rem, transparent 0),
    #fff0b9;
  box-shadow: 0 -0.52rem 0 -0.18rem #78965f;
}

.backpack-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.52rem, 2.2vw, 0.7rem);
}

.backpack-player-card,
.backpack-pocket-card {
  position: relative;
  min-width: 0;
  border: 0.1rem solid rgba(154, 190, 113, 0.5);
  border-radius: 0.62rem;
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 220, 101, 0.34) 0 0.22rem, transparent 0.26rem),
    linear-gradient(135deg, rgba(255, 248, 219, 0.96), rgba(232, 245, 198, 0.84));
  box-shadow: inset 0 0 0 0.08rem rgba(255, 255, 234, 0.74);
}

.backpack-player-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: clamp(3.35rem, 12vw, 4.2rem) minmax(0, 1fr);
  gap: clamp(0.62rem, 2.4vw, 0.82rem);
  align-items: center;
  padding: clamp(0.68rem, 2.6vw, 0.88rem);
}

.backpack-avatar {
  display: grid;
  width: clamp(3.35rem, 12vw, 4.2rem);
  aspect-ratio: 1;
  place-items: center;
  border: 0.14rem solid #7fa067;
  border-radius: 0.68rem;
  color: #536e41;
  background:
    radial-gradient(circle at 50% 23%, #fff8b8 0 0.42rem, transparent 0.46rem),
    linear-gradient(180deg, #dff5ac, #fff1bc);
  font-size: clamp(1.45rem, 5vw, 1.86rem);
  font-weight: 950;
}

.backpack-player-card strong,
.backpack-player-card span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.backpack-player-card strong {
  color: #5d4b2f;
  font-size: clamp(1.05rem, 3.4vw, 1.28rem);
  line-height: 1.1;
}

.backpack-player-card span {
  margin-top: 0.18rem;
  color: #74815d;
  font-size: clamp(0.76rem, 2.4vw, 0.88rem);
  line-height: 1.22;
}

.backpack-pocket-card {
  display: grid;
  gap: 0.42rem;
  align-content: start;
  min-height: clamp(6.4rem, 17vw, 7.8rem);
  padding: clamp(0.58rem, 2.4vw, 0.76rem);
}

.backpack-pocket-card h4 {
  margin: 0;
  color: #67794f;
  font-size: clamp(0.8rem, 2.4vw, 0.94rem);
  line-height: 1.1;
}

.backpack-chip-list {
  display: grid;
  gap: 0.32rem;
}

.backpack-chip-list span,
.backpack-stat-line {
  min-width: 0;
  border-radius: 0.42rem;
  color: #5a6f43;
  background: rgba(255, 252, 227, 0.78);
  font-size: clamp(0.72rem, 2.35vw, 0.84rem);
  font-weight: 850;
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.backpack-chip-list span {
  display: flex;
  justify-content: space-between;
  gap: 0.36rem;
  padding: 0.28rem 0.36rem;
}

.backpack-chip-list b,
.backpack-chip-list em {
  min-width: 0;
  font: inherit;
}

.backpack-chip-list em {
  color: #87926d;
  font-size: 0.88em;
  white-space: nowrap;
}

.backpack-chip-list .is-equipped {
  background: #fff2b9;
}

.backpack-chip-list .is-unlocked {
  color: #537b40;
  background: #effbc8;
}

.backpack-chip-list .is-locked {
  color: rgba(103, 116, 82, 0.62);
}

.backpack-stat-line {
  display: grid;
  min-height: 3.2rem;
  align-items: center;
  padding: 0.42rem 0.48rem;
}

@media (max-width: 430px) {
  .backpack-overview-grid {
    grid-template-columns: 1fr;
  }
}