:root {
  --gp-bg: #0a0d16;
  --gp-card: #10172a;
  --gp-card-soft: #131d34;
  --gp-border: #2a3f66;
  --gp-neon: #57d2ff;
  --gp-pink: #ff7adf;
  --gp-green: #8cff99;
  --gp-gold: #ffd86f;
}

.gp-shell {
  width: min(1240px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

.gp-hero,
.gp-banner {
  border-radius: 20px;
  border: 1px solid var(--gp-border);
  background:
    radial-gradient(circle at 15% 20%, rgba(87, 210, 255, 0.28), transparent 42%),
    radial-gradient(circle at 80% 0%, rgba(255, 122, 223, 0.18), transparent 46%),
    linear-gradient(180deg, #121f39 0%, #0d1428 100%);
  padding: 22px;
  display: grid;
  gap: 14px;
}

.gp-hero {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.9fr);
  align-items: start;
}

.gp-kicker {
  margin: 0;
  color: var(--gp-green);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  font-weight: 800;
}

.gp-hero h1,
.gp-banner h1,
.gp-banner p {
  margin: 0;
}

.gp-hero-copy,
.gp-banner p {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.64;
}

.gp-actions,
.gp-grid,
.gp-stats-grid,
.gp-row,
.gp-control-grid {
  display: grid;
  gap: 12px;
}

.gp-actions {
  display: flex;
  flex-wrap: wrap;
}

.gp-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.gp-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.gp-stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.gp-control-grid {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  align-items: start;
}

.gp-card {
  border: 1px solid var(--gp-border);
  background: linear-gradient(180deg, rgba(19, 29, 52, 0.95), rgba(11, 17, 31, 0.95));
  border-radius: 16px;
  padding: 15px;
  display: grid;
  gap: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 24px rgba(0, 0, 0, 0.22);
}

.gp-card h2,
.gp-card h3,
.gp-card p {
  margin: 0;
}

.gp-card p {
  color: var(--muted);
}

.gp-feature-card:hover,
.gp-zone-preview:hover,
.gp-type-card:hover,
.gp-starter-card:hover {
  transform: translateY(-2px);
  transition: transform 140ms ease;
}

.gp-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.82rem;
  font-weight: 700;
}

.gp-pill.rarity-common { color: #9cd5ff; }
.gp-pill.rarity-uncommon { color: #9fffc6; }
.gp-pill.rarity-rare { color: #deb0ff; }
.gp-pill.rarity-epic { color: #ffb7e6; }
.gp-pill.rarity-mythic { color: #ffe28a; border-color: rgba(255, 212, 105, 0.6); box-shadow: 0 0 14px rgba(255, 212, 105, 0.4); }

.gp-type-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 10px;
  margin-right: 6px;
  background: color-mix(in srgb, var(--type) 24%, transparent);
  border: 1px solid color-mix(in srgb, var(--type) 70%, #ffffff);
  color: #f3f8ff;
  font-size: 0.75rem;
  font-weight: 700;
}

.gp-pet-canvas {
  width: 100%;
  height: 170px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(8, 14, 26, 0.8), rgba(11, 19, 35, 0.95));
}

.gp-overworld-card {
  padding: 14px;
  gap: 12px;
}

.gp-overworld-sidebar {
  max-height: 620px;
}

.gp-control-grid--overworld {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
}

.gp-status-stack {
  display: grid;
  gap: 8px;
}

.gp-status-pill {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  border: 1px solid rgba(139, 222, 255, 0.45);
  background: rgba(46, 103, 160, 0.28);
  color: #ecf8ff;
  font-weight: 700;
  padding: 4px 10px;
}

.gp-overworld {
  position: relative;
  border: 1px solid rgba(176, 229, 255, 0.35);
  border-radius: 16px;
  background: #111f2d;
  width: 100%;
  max-width: 920px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 18px 28px rgba(0, 0, 0, 0.32);
}

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

.gp-map-base {
  background:
    radial-gradient(circle at 16% 76%, rgba(153, 236, 168, 0.24), transparent 25%),
    radial-gradient(circle at 62% 14%, rgba(253, 233, 160, 0.16), transparent 22%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0 5px, transparent 5px 10px),
    linear-gradient(180deg, #2e6849 0%, #397250 42%, #214636 100%);
}

.gp-map-paths {
  background:
    radial-gradient(ellipse at 27% 27%, rgba(212, 170, 117, 0.95) 0 14%, transparent 17%),
    linear-gradient(92deg, transparent 0 18%, rgba(188, 146, 94, 0.9) 18% 21%, rgba(201, 161, 112, 0.92) 21% 28%, transparent 28% 100%),
    linear-gradient(180deg, transparent 0 32%, rgba(183, 140, 93, 0.9) 32% 35%, rgba(204, 163, 111, 0.95) 35% 43%, transparent 43% 100%),
    linear-gradient(95deg, transparent 0 59%, rgba(191, 145, 98, 0.88) 59% 62%, rgba(208, 171, 122, 0.95) 62% 71%, transparent 71%);
  opacity: 0.95;
}

.gp-map-water {
  background:
    radial-gradient(circle at 64% 80%, rgba(76, 170, 255, 0.92) 0 7%, rgba(46, 122, 217, 0.85) 9% 12%, transparent 14%),
    radial-gradient(circle at 66% 81%, rgba(255, 255, 255, 0.32) 0 4%, transparent 6%),
    linear-gradient(130deg, transparent 0 56%, rgba(80, 165, 255, 0.18) 56% 70%, transparent 70%);
  animation: gp-water-shimmer 4s linear infinite;
}

.gp-map-flora {
  background:
    radial-gradient(circle at 16% 87%, rgba(125, 199, 87, 0.5) 0 5%, transparent 6%),
    radial-gradient(circle at 40% 85%, rgba(155, 225, 88, 0.44) 0 4%, transparent 6%),
    radial-gradient(circle at 82% 67%, rgba(130, 206, 102, 0.42) 0 4%, transparent 6%),
    radial-gradient(circle at 90% 70%, rgba(221, 80, 211, 0.28) 0 2%, transparent 4%),
    radial-gradient(circle at 88% 74%, rgba(136, 255, 183, 0.24) 0 2%, transparent 4%);
}

.gp-zone {
  position: absolute;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.gp-zone span {
  position: absolute;
  left: 8px;
  top: 8px;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(6, 14, 24, 0.64);
  border-radius: 999px;
  padding: 2px 7px;
  color: rgba(233, 246, 255, 0.9);
}

.zone-town_hub { left: 6%; top: 12%; width: 42%; height: 32%; background: rgba(111, 188, 255, 0.09); }
.zone-stable_square { left: 50%; top: 8%; width: 20%; height: 26%; background: rgba(124, 255, 190, 0.09); }
.zone-event_gate { left: 73%; top: 8%; width: 22%; height: 26%; background: rgba(255, 151, 224, 0.1); }
.zone-wild_scrapyard { left: 6%; top: 48%; width: 43%; height: 42%; background: rgba(120, 212, 92, 0.16); border-style: dashed; }
.zone-wild_neon_abyss { left: 53%; top: 41%; width: 20%; height: 48%; background: rgba(116, 89, 255, 0.16); border-style: dashed; }
.zone-wild_mushroom_ruins { left: 75%; top: 38%; width: 20%; height: 52%; background: rgba(145, 242, 172, 0.13); border-style: dashed; }

.gp-overworld.is-danger {
  border-color: rgba(245, 129, 187, 0.55);
}

.gp-scenery {
  position: absolute;
  pointer-events: none;
}

.tree-cluster {
  background:
    radial-gradient(circle at 20% 60%, #3a8e5d 0 18%, transparent 22%),
    radial-gradient(circle at 44% 38%, #46a267 0 16%, transparent 20%),
    radial-gradient(circle at 70% 58%, #2f7d52 0 18%, transparent 22%),
    radial-gradient(circle at 36% 80%, #305d39 0 8%, transparent 12%);
}

.cluster-nw { left: 2%; top: 3%; width: 18%; height: 13%; }
.cluster-sw { left: 5%; top: 63%; width: 14%; height: 20%; }
.cluster-east { left: 78%; top: 56%; width: 18%; height: 32%; }

.house-row {
  left: 26%;
  top: 8%;
  width: 20%;
  height: 18%;
  background:
    linear-gradient(180deg, #f6d9a7 0 64%, #cb9b6f 64% 100%),
    linear-gradient(45deg, transparent 0 20%, #955734 20% 30%, transparent 30% 100%);
  border: 3px solid #7f4b33;
  border-radius: 10px;
  box-shadow: 0 6px 0 rgba(73, 43, 30, 0.5);
}

.house-row::before,
.house-row::after {
  content: "";
  position: absolute;
  background: #6f3c2b;
  border-radius: 8px;
  width: 18%;
  height: 46%;
  bottom: 0;
}

.house-row::before { left: 18%; }
.house-row::after { right: 18%; }

.stable-building,
.event-building {
  border-radius: 12px;
  border: 3px solid rgba(34, 42, 67, 0.7);
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.25);
}

.stable-building {
  left: 50%;
  top: 8%;
  width: 20%;
  height: 17%;
  background: linear-gradient(180deg, #b4f4ce 0%, #68b88e 100%);
}

.event-building {
  left: 74%;
  top: 8%;
  width: 21%;
  height: 17%;
  background: linear-gradient(180deg, #f3b8ff 0%, #ac6fdd 100%);
}

.stable-building span,
.event-building span {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  color: #132037;
  font-size: 0.78rem;
  font-weight: 800;
}

.pond {
  left: 56%;
  top: 67%;
  width: 15%;
  height: 17%;
  border-radius: 55% 45% 58% 42%;
  background: radial-gradient(circle at 40% 35%, #c8f4ff 0 7%, #5ab2ff 30%, #2a6ccd 76%);
  border: 2px solid rgba(191, 239, 255, 0.5);
}

.fence {
  background: repeating-linear-gradient(90deg, #b78954 0 6px, #835833 6px 9px);
  box-shadow: 0 1px 0 rgba(255, 223, 179, 0.4);
}

.fence-west { left: 18%; top: 46%; width: 2%; height: 34%; }
.fence-east { left: 48%; top: 46%; width: 2%; height: 34%; }

.flowers {
  left: 84%;
  top: 70%;
  width: 10%;
  height: 12%;
  background:
    radial-gradient(circle at 14% 38%, #ff9cd9 0 6%, transparent 7%),
    radial-gradient(circle at 35% 69%, #ffd65f 0 6%, transparent 7%),
    radial-gradient(circle at 66% 52%, #9cd7ff 0 6%, transparent 7%),
    radial-gradient(circle at 88% 42%, #b4ff9f 0 6%, transparent 7%);
}

.bushes {
  left: 72%;
  top: 48%;
  width: 12%;
  height: 10%;
  background:
    radial-gradient(circle at 25% 62%, #3e8e55 0 22%, transparent 26%),
    radial-gradient(circle at 58% 39%, #4ea564 0 20%, transparent 24%),
    radial-gradient(circle at 80% 68%, #2f774a 0 21%, transparent 25%);
}

.gp-interactable {
  position: absolute;
  z-index: 3;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #eff9ff;
  background: rgba(8, 17, 32, 0.72);
  font-size: 0.67rem;
  font-weight: 700;
  padding: 3px 7px;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.gp-interactable:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px rgba(130, 237, 255, 0.3);
}

.sign-town { left: 34%; top: 28%; }
.sign-wild { left: 23%; top: 46%; }
.board { left: 39%; top: 33%; }
.entrance-stable { left: 56%; top: 25%; }
.entrance-event { left: 80%; top: 25%; }

.gp-player-wrap,
.gp-other {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: 54px;
  height: 56px;
  display: grid;
  place-items: center;
}

.gp-player-shadow {
  position: absolute;
  width: 28px;
  height: 12px;
  border-radius: 50%;
  background: rgba(6, 12, 22, 0.48);
  filter: blur(1.3px);
  bottom: 6px;
}

.gp-avatar {
  position: relative;
  z-index: 2;
}

.gp-player-wrap .gp-explorer-avatar[data-facing="left"],
.gp-player-wrap .gp-explorer-avatar[data-facing="right"] {
  transform: scaleX(0.95) scale(var(--scale, 1));
}

.gp-player-wrap .gp-explorer-avatar[data-facing="up"] {
  filter: brightness(0.92);
}

.gp-name-tag {
  position: absolute;
  transform: translate(-50%, -165%);
  font-size: 0.67rem;
  background: rgba(7, 10, 17, 0.87);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
  z-index: 6;
  color: #e3f3ff;
}

.gp-log {
  min-height: 200px;
  max-height: 300px;
  overflow: auto;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(5, 10, 20, 0.84);
  padding: 12px;
}

.gp-log p { margin: 0 0 8px; font-size: 0.88rem; color: var(--muted); }
.gp-small { font-size: 0.86rem; color: var(--muted); }

@keyframes gp-water-shimmer {
  0% { opacity: 0.8; }
  50% { opacity: 1; }
  100% { opacity: 0.8; }
}

.gp-profile-summary { gap: 14px; }
.gp-profile-top { display: flex; gap: 12px; align-items: center; }
.gp-stat-block { border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 10px; background: rgba(5, 10, 21, 0.45); }
.gp-stat-block h3 { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.gp-stat-block p { font-size: 1.05rem; color: #f7fbff; font-weight: 700; }

.gp-active-strip { border-radius: 12px; padding: 10px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(13, 22, 42, 0.8); }

.gp-onboarding-track { display: flex; flex-wrap: wrap; gap: 8px; }
.gp-track-step {
  font-size: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 4px 10px;
  color: #d8e9ff;
  background: rgba(255, 255, 255, 0.05);
}

.gp-track-step.is-active {
  border-color: rgba(140, 255, 153, 0.8);
  box-shadow: 0 0 16px rgba(140, 255, 153, 0.24);
}

.gp-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.gp-bullet-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

.gp-zone-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.gp-zone-preview,
.gp-type-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.03);
}

.gp-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.gp-starter-card.is-locked { opacity: 0.7; }

.gp-avatar-edit-shell {
  display: grid;
  grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
  gap: 14px;
}

.gp-avatar-editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.gp-editor-field {
  display: grid;
  gap: 6px;
  font-size: 0.84rem;
}

.gp-editor-field select,
.gp-editor-field input {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(2, 5, 12, 0.7);
  color: #d9eeff;
  padding: 8px;
}

.gp-avatar-preview-wrap {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px;
  background: rgba(4, 8, 18, 0.55);
  display: grid;
  place-items: center;
  gap: 12px;
}

.gp-explorer-avatar {
  position: relative;
  display: grid;
  justify-items: center;
  width: 88px;
  height: 104px;
  transform: scale(var(--scale, 1));
}

.gp-explorer-avatar--lg { width: 110px; height: 130px; }
.gp-explorer-avatar--xl { width: 150px; height: 180px; }
.gp-explorer-avatar--mini { width: 42px; height: 48px; }

.gp-explorer-avatar .gp-av-head {
  width: 46%;
  height: 30%;
  border-radius: 999px;
  background: var(--skin);
  position: relative;
  margin-top: 2px;
}

.gp-explorer-avatar .gp-av-face { position: absolute; inset: 0; }
.gp-av-eye { position: absolute; width: 4px; height: 4px; background: var(--eyes); border-radius: 50%; top: 47%; }
.gp-av-eye.left { left: 28%; }
.gp-av-eye.right { right: 28%; }
.gp-av-mouth { position: absolute; left: 50%; bottom: 24%; width: 10px; height: 4px; border-bottom: 2px solid #1b1e32; border-radius: 999px; transform: translateX(-50%); }

.gp-av-hair { position: absolute; left: 7%; right: 7%; top: -8%; height: 42%; background: var(--hair); border-radius: 999px 999px 10px 10px; }
.hair-bob { border-radius: 16px 16px 10px 10px; height: 52%; }
.hair-spike { clip-path: polygon(0 80%, 15% 20%, 25% 75%, 45% 15%, 60% 76%, 80% 25%, 100% 80%); }
.hair-mop { height: 56%; border-radius: 999px; }
.hair-puff { border-radius: 999px; height: 62%; }
.hair-none { display: none; }

.gp-av-hat { position: absolute; top: -22%; left: 10%; right: 10%; height: 22%; display: none; }
.hat-beanie,
.hat-cap,
.hat-hornband,
.hat-crown { display: block; background: #2f4477; border-radius: 999px 999px 6px 6px; }
.hat-cap { background: #3a67ff; }
.hat-hornband { background: #6e56ff; }
.hat-crown { background: #d4b55f; }

.gp-av-body {
  width: 52%;
  height: 34%;
  margin-top: -2px;
  background: var(--top);
  border-radius: 12px;
}

.gp-av-bottom {
  width: 48%;
  height: 30%;
  margin-top: -1px;
  background: var(--bottom);
  border-radius: 8px;
}

.acc-scarf::before,
.acc-visor::before,
.acc-headphones::before,
.acc-badge::before {
  content: "";
  position: absolute;
}

.acc-scarf::before { width: 24%; height: 5%; background: #ff79df; top: 40%; border-radius: 999px; }
.acc-visor::before { width: 34%; height: 6%; background: #71ebff; top: 16%; border-radius: 6px; }
.acc-headphones::before { width: 66%; height: 22%; border: 2px solid #b0c7ff; border-bottom: none; border-radius: 999px 999px 0 0; top: 6%; }
.acc-badge::before { width: 8%; height: 8%; background: #ffd86f; bottom: 22%; right: 34%; border-radius: 50%; }

.body-small { --scale: 0.9; }
.body-medium { --scale: 1; }
.body-broad { --scale: 1.12; }

.gp-avatar-label { font-size: 0.66rem; color: #cde4ff; }

.eyes-sleepy .gp-av-eye { height: 2px; border-radius: 2px; }
.eyes-wide .gp-av-eye { width: 5px; height: 5px; }
.eyes-spark .gp-av-eye { box-shadow: 0 0 8px var(--eyes); }
.eyes-cat .gp-av-eye { border-radius: 2px; height: 5px; width: 3px; }

.hidden { display: none !important; }

@media (max-width: 1080px) {
  .gp-hero,
  .gp-grid-3,
  .gp-grid-2,
  .gp-avatar-edit-shell {
    grid-template-columns: 1fr;
  }

  .gp-zone-preview-grid,
  .gp-type-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 930px) {
  .gp-control-grid { grid-template-columns: 1fr; }
}

/* ===== 2026 Route Overworld Upgrade ===== */
.gp-home-hero {
  grid-template-columns: minmax(0, 1.4fr) minmax(330px, 0.9fr);
}

.gp-team-list,
.gp-recent-captures {
  display: grid;
  gap: 8px;
}

.gp-team-item {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  background: rgba(6, 12, 24, 0.6);
}

.gp-team-item.is-active {
  border-color: rgba(141, 238, 255, 0.7);
  box-shadow: 0 0 0 1px rgba(141, 238, 255, 0.35) inset;
}

.gp-area-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}

#map-landmarks {
  pointer-events: none;
}

.gp-exit-marker {
  position: absolute;
  z-index: 3;
  border: 1px dashed rgba(255, 255, 255, 0.45);
  background: rgba(8, 13, 21, 0.45);
  display: grid;
  place-items: center;
  pointer-events: none;
}

.gp-exit-marker span {
  font-size: 0.64rem;
  color: #f5fcff;
  opacity: 0.92;
  letter-spacing: 0.08em;
}

.gp-exit-north,
.gp-exit-south {
  left: 44%;
  width: 12%;
  height: 5%;
}

.gp-exit-north { top: 0; border-top: none; border-radius: 0 0 8px 8px; }
.gp-exit-south { bottom: 0; border-bottom: none; border-radius: 8px 8px 0 0; }

.gp-exit-east,
.gp-exit-west {
  top: 41%;
  width: 5%;
  height: 18%;
}

.gp-exit-west { left: 0; border-left: none; border-radius: 0 8px 8px 0; }
.gp-exit-east { right: 0; border-right: none; border-radius: 8px 0 0 8px; }

.gp-area-banner {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  z-index: 8;
  background: rgba(8, 13, 24, 0.88);
  border: 1px solid rgba(155, 238, 255, 0.6);
  border-radius: 12px;
  padding: 10px 14px;
  display: grid;
  gap: 3px;
  text-align: center;
  animation: gp-banner-in 260ms ease;
}

.gp-area-banner strong { font-size: 0.92rem; }
.gp-area-banner span { font-size: 0.77rem; color: var(--muted); }

@keyframes gp-banner-in {
  from { opacity: 0; transform: translate(-50%, -6px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.gp-overworld[data-theme="spawn_town"] .gp-map-base {
  background: linear-gradient(180deg, #3e6d54, #274b39 58%, #1f352a 100%);
}

.gp-overworld[data-theme="tallgrass_route"] .gp-map-base {
  background: linear-gradient(180deg, #6d8e42, #4c7636 55%, #395629 100%);
}

.gp-overworld[data-theme="stable_district"] .gp-map-base {
  background: linear-gradient(180deg, #536873, #405861 55%, #2d3f48 100%);
}

.gp-overworld[data-theme="event_plaza"] .gp-map-base {
  background: linear-gradient(180deg, #604f76, #453a63 53%, #2b2448 100%);
}

.gp-overworld[data-theme="mushroom_grove"] .gp-map-base {
  background: linear-gradient(180deg, #455c3d, #394d35 48%, #253826 100%);
}

.gp-overworld[data-theme="neon_rift"] .gp-map-base {
  background: linear-gradient(180deg, #2f2d67, #271f5d 52%, #1a1739 100%);
}

.gp-overworld[data-theme="scrapyard"] .gp-map-base {
  background: linear-gradient(180deg, #556166, #434f56 50%, #313a3f 100%);
}

.gp-overworld[data-theme="pondside_path"] .gp-map-base {
  background: linear-gradient(180deg, #2f5f58, #2a4b55 48%, #1b3844 100%);
}

.gp-encounter-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(6, 10, 18, 0.68);
  backdrop-filter: blur(1.5px);
  display: grid;
  place-items: center;
  padding: 18px;
}

.gp-encounter-panel {
  width: min(920px, 100%);
  max-height: 92vh;
  overflow: auto;
  border-radius: 16px;
  border: 1px solid rgba(137, 228, 255, 0.5);
  background: linear-gradient(180deg, rgba(18, 28, 47, 0.98), rgba(8, 13, 26, 0.98));
  padding: 14px;
  box-shadow: 0 22px 42px rgba(0, 0, 0, 0.48);
}

.gp-encounter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.gp-encounter-actions {
  margin-top: 6px;
}

.gp-overlay-log {
  min-height: 120px;
  max-height: 170px;
}

.gp-explorer-avatar {
  width: 96px;
  height: 116px;
  transform: scale(var(--scale, 1));
}

.gp-explorer-avatar--mini {
  width: 54px;
  height: 60px;
  animation: gp-avatar-idle 880ms ease-in-out infinite alternate;
}

.gp-explorer-avatar .gp-av-head {
  width: 54%;
  height: 33%;
  border-radius: 42% 42% 46% 46%;
  border: 1px solid rgba(24, 22, 20, 0.25);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}

.gp-av-hair {
  left: 3%;
  right: 3%;
  top: -14%;
  height: 56%;
  border-radius: 80% 80% 16% 16%;
}

.gp-av-body {
  width: 56%;
  height: 32%;
  border-radius: 11px;
  position: relative;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}

.gp-av-body::before,
.gp-av-body::after {
  content: "";
  position: absolute;
  top: 16%;
  width: 11px;
  height: 17px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--top) 72%, #ffffff);
}

.gp-av-body::before { left: -9px; }
.gp-av-body::after { right: -9px; }

.gp-av-bottom {
  width: 52%;
  height: 28%;
  border-radius: 8px 8px 10px 10px;
  position: relative;
}

.gp-av-bottom::before,
.gp-av-bottom::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 6px;
  background: #e6edf8;
  border-radius: 6px;
  bottom: -5px;
}

.gp-av-bottom::before { left: 18%; }
.gp-av-bottom::after { right: 18%; }

.gp-player-wrap .gp-explorer-avatar[data-facing="left"] { transform: scaleX(-1) scale(var(--scale, 1)); }
.gp-player-wrap .gp-explorer-avatar[data-facing="right"] { transform: scaleX(1) scale(var(--scale, 1)); }
.gp-player-wrap .gp-explorer-avatar[data-facing="up"] { filter: brightness(0.9) saturate(0.85); }

@keyframes gp-avatar-idle {
  from { transform: translateY(0); }
  to { transform: translateY(-1px); }
}

@media (max-width: 930px) {
  .gp-encounter-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== 2026 Corrective Upgrade ===== */
.gp-page .page-main {
  width: min(100%, 1880px);
  padding: 24px 20px 52px;
}

.gp-page .gp-shell {
  width: min(1760px, 100%);
  gap: 20px;
}

.gp-home-hero {
  grid-template-columns: minmax(0, 1.6fr) minmax(420px, 0.85fr);
}

.gp-control-grid--overworld {
  grid-template-columns: minmax(0, 1.48fr) minmax(280px, 0.52fr);
}

.gp-overworld {
  max-width: none;
  min-height: clamp(520px, 62vh, 700px);
  aspect-ratio: 16 / 10;
  border-radius: 18px;
}

.gp-map-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.gp-map-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.6;
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 40px);
}

.gp-prop {
  position: absolute;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 6px 16px rgba(0, 0, 0, 0.26);
}

.gp-prop span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #eaf6ff;
  background: rgba(10, 16, 27, 0.7);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

.scene-spawn-town {
  background: linear-gradient(180deg, #4f8767 0%, #366148 54%, #254733 100%);
}

.path-cross {
  inset: 0;
  border: none;
  box-shadow: none;
  background:
    linear-gradient(90deg, transparent 0 37%, rgba(197, 162, 119, 0.95) 37% 63%, transparent 63% 100%),
    linear-gradient(180deg, transparent 0 39%, rgba(197, 162, 119, 0.95) 39% 61%, transparent 61% 100%);
}

.building-townhall { background: linear-gradient(180deg, #e8d0a5 0 68%, #b67b53 68% 100%); }
.building-stable { background: linear-gradient(180deg, #9ee3b8, #598f70); }
.building-event { background: linear-gradient(180deg, #f2b9ff, #9353bc); }
.lamp-row {
  border: none;
  box-shadow: none;
  background: repeating-linear-gradient(90deg, transparent 0 12%, #f9e3a4 12% 14%, transparent 14% 24%);
}
.garden-grid {
  border: none;
  box-shadow: none;
  background:
    radial-gradient(circle at 16% 24%, #ff8ed8 0 6%, transparent 8%),
    radial-gradient(circle at 42% 68%, #93d5ff 0 7%, transparent 9%),
    radial-gradient(circle at 70% 34%, #b8ff92 0 6%, transparent 9%),
    radial-gradient(circle at 84% 72%, #ffd46c 0 7%, transparent 9%);
}

.scene-tallgrass-route {
  background: linear-gradient(180deg, #648e43 0%, #476f34 56%, #2f4f24 100%);
}
.route-road {
  background: linear-gradient(180deg, #b49467, #927349);
}
.tallgrass-block {
  background:
    radial-gradient(circle at 20% 70%, #89d45d 0 12%, transparent 15%),
    radial-gradient(circle at 50% 30%, #78bf4f 0 11%, transparent 14%),
    radial-gradient(circle at 76% 63%, #5f9f3e 0 12%, transparent 14%);
}
.route-sign { background: linear-gradient(180deg, #e7ddbf, #b18a58); }

.scene-mushroom-grove {
  background: linear-gradient(180deg, #4d6744 0%, #334a34 52%, #202f22 100%);
}
.grove-path { background: linear-gradient(180deg, #7b6e5a, #5d5343); }
.mushroom-ring {
  background:
    radial-gradient(circle at 22% 72%, #e185ff 0 11%, transparent 14%),
    radial-gradient(circle at 51% 32%, #ff7db8 0 10%, transparent 13%),
    radial-gradient(circle at 76% 66%, #8fd3ff 0 10%, transparent 13%);
}
.tree-mass { background: radial-gradient(circle at 40% 40%, #3f7f4f 0 45%, #2f623a 46% 100%); }
.spores {
  border: none;
  box-shadow: none;
  background:
    radial-gradient(circle at 14% 42%, rgba(255, 255, 255, 0.45) 0 4%, transparent 6%),
    radial-gradient(circle at 44% 64%, rgba(227, 138, 255, 0.4) 0 5%, transparent 7%),
    radial-gradient(circle at 76% 28%, rgba(156, 245, 170, 0.4) 0 5%, transparent 7%);
}

.scene-neon-rift {
  background: linear-gradient(180deg, #34316f 0%, #241f53 56%, #161332 100%);
}
.rift-river {
  border: none;
  box-shadow: none;
  background: linear-gradient(180deg, rgba(111, 238, 255, 0.88), rgba(143, 104, 255, 0.86));
}
.neon-grid {
  background:
    repeating-linear-gradient(0deg, rgba(103, 228, 255, 0.24) 0 7px, transparent 7px 16px),
    repeating-linear-gradient(90deg, rgba(255, 116, 220, 0.24) 0 7px, transparent 7px 16px),
    rgba(14, 21, 58, 0.68);
}
.crystal-stack {
  background: linear-gradient(160deg, #8ae4ff, #f088ff 55%, #8f7bff);
  clip-path: polygon(10% 100%, 20% 50%, 30% 80%, 40% 30%, 55% 88%, 67% 36%, 84% 100%);
}

.scene-scrapyard {
  background: linear-gradient(180deg, #636f75 0%, #4b575f 54%, #323b42 100%);
}
.junk-road { background: linear-gradient(180deg, #7d756d, #5a534e); }
.scrap-heap {
  background:
    repeating-linear-gradient(45deg, #6d7b84 0 8px, #8f9aa3 8px 15px, #57626b 15px 24px),
    #516069;
}
.barrel-row {
  background: repeating-linear-gradient(90deg, #8f5f47 0 12px, #6a4330 12px 20px);
}

.scene-pondside-path {
  background: linear-gradient(180deg, #3f736f 0%, #335863 52%, #1f3d48 100%);
}
.water-strip {
  background: linear-gradient(180deg, #70d2ff 0%, #4a9de4 42%, #2e6bb4 100%);
}
.boardwalk { background: repeating-linear-gradient(90deg, #c39a64 0 14px, #9a7546 14px 20px); }
.reed-bed {
  background: radial-gradient(circle at 16% 60%, #89d06c 0 11%, transparent 14%), radial-gradient(circle at 47% 30%, #6ebc5e 0 11%, transparent 14%), radial-gradient(circle at 80% 62%, #97da72 0 11%, transparent 14%);
}
.lily-cluster {
  background: radial-gradient(circle at 22% 56%, #c4ffd1 0 11%, transparent 14%), radial-gradient(circle at 58% 42%, #9bffd7 0 10%, transparent 13%), radial-gradient(circle at 84% 64%, #b0ffb9 0 10%, transparent 13%);
}

.scene-stable-district {
  background: linear-gradient(180deg, #657a82 0%, #4a5f67 54%, #33454e 100%);
}
.stable-road { background: linear-gradient(180deg, #9fa28b, #7b806e); }
.barn-long { background: linear-gradient(180deg, #d9c8a2 0 63%, #a3714d 63% 100%); }
.wagon-yard {
  background: repeating-linear-gradient(45deg, #73634e 0 11px, #5a4c3a 11px 20px);
}

.scene-event-plaza {
  background: linear-gradient(180deg, #675785 0%, #4e3f6f 56%, #342a4f 100%);
}
.plaza-stage { background: linear-gradient(180deg, #cf9aff, #8558bd); }
.plaza-rings {
  border-radius: 999px;
  background:
    radial-gradient(circle at center, transparent 0 25%, rgba(255, 255, 255, 0.14) 26% 34%, transparent 35% 45%, rgba(155, 229, 255, 0.22) 46% 53%, transparent 54% 100%);
}
.neon-pillar {
  background: linear-gradient(180deg, #8de8ff, #ff8de7);
}

.gp-exit-marker {
  border: 1px dashed rgba(255, 255, 255, 0.62);
  background: rgba(8, 13, 21, 0.55);
  border-radius: 10px;
  pointer-events: none;
}

.gp-exit-marker span {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Avatar corrective renderer */
.gp-explorer-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 98px;
  height: 120px;
  transform: scale(var(--scale, 1));
}

.gp-explorer-avatar--lg { width: 120px; height: 148px; }
.gp-explorer-avatar--xl { width: 160px; height: 196px; }
.gp-explorer-avatar--mini { width: 58px; height: 72px; }

.gp-av-shell {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  justify-items: center;
  grid-template-rows: 36% 34% 30%;
}

.gp-av-head {
  width: 50%;
  height: 86%;
  align-self: end;
  border-radius: 42% 42% 46% 46%;
  background: var(--skin);
  position: relative;
  border: 1px solid rgba(36, 27, 23, 0.28);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}

.gp-av-hair {
  position: absolute;
  left: 2%;
  right: 2%;
  top: -14%;
  height: 50%;
  background: var(--hair);
}
.hair-short { border-radius: 76% 76% 20% 20%; }
.hair-bob { border-radius: 58% 58% 35% 35%; height: 62%; }
.hair-spike { clip-path: polygon(0 80%, 14% 18%, 30% 76%, 48% 12%, 64% 77%, 82% 20%, 100% 80%); }
.hair-mop { border-radius: 999px; height: 66%; }
.hair-puff { border-radius: 999px; height: 70%; }
.hair-none { display: none; }

.gp-av-face { position: absolute; inset: 0; }
.gp-av-eye {
  position: absolute;
  top: 48%;
  width: 12%;
  height: 11%;
  border-radius: 999px;
  background: var(--eyes);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);
}
.gp-av-eye.left { left: 26%; }
.gp-av-eye.right { right: 26%; }
.gp-av-mouth {
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: 24%;
  height: 8%;
  border-bottom: 2px solid rgba(38, 37, 51, 0.9);
  border-radius: 999px;
  transform: translateX(-50%);
}

.eyes-sleepy .gp-av-eye { height: 4%; border-radius: 4px; }
.eyes-wide .gp-av-eye { width: 14%; height: 13%; }
.eyes-spark .gp-av-eye { box-shadow: 0 0 6px var(--eyes); }
.eyes-cat .gp-av-eye { width: 10%; height: 14%; border-radius: 3px; }

.gp-av-hat {
  position: absolute;
  top: -30%;
  left: 12%;
  right: 12%;
  height: 26%;
  display: none;
}
.hat-beanie,
.hat-cap,
.hat-hornband,
.hat-crown { display: block; border-radius: 999px 999px 9px 9px; }
.hat-beanie { background: #2f4477; }
.hat-cap { background: #3a67ff; }
.hat-hornband { background: #6e56ff; }
.hat-crown { background: #d4b55f; clip-path: polygon(0 100%, 0 56%, 14% 38%, 32% 56%, 48% 28%, 65% 57%, 83% 38%, 100% 56%, 100% 100%); }

.gp-av-torso {
  width: 58%;
  height: 92%;
  align-self: center;
  border-radius: 22% 22% 16% 16%;
  background: var(--top);
  border: 1px solid rgba(21, 24, 42, 0.25);
  position: relative;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18);
}

.top-jacket { border-radius: 18% 18% 16% 16%; }
.top-tee { border-radius: 24% 24% 18% 18%; }
.top-robe { border-radius: 12% 12% 18% 18%; }
.top-armor { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.24), inset 0 0 0 2px rgba(186, 222, 255, 0.3); }

.gp-av-arm {
  position: absolute;
  top: 18%;
  width: 19%;
  height: 42%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--top) 72%, #f0f4ff);
}
.gp-av-arm.left { left: -14%; }
.gp-av-arm.right { right: -14%; }

.gp-av-legs {
  width: 56%;
  height: 96%;
  align-self: start;
  position: relative;
}

.gp-av-leg {
  position: absolute;
  width: 34%;
  height: 76%;
  top: 0;
  border-radius: 8px 8px 10px 10px;
  background: var(--bottom);
  border: 1px solid rgba(18, 21, 35, 0.25);
}
.gp-av-leg.left { left: 11%; }
.gp-av-leg.right { right: 11%; }

.bottom-skirt .gp-av-leg { height: 64%; top: 12%; border-radius: 6px 6px 12px 12px; }
.bottom-greaves .gp-av-leg { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 2px rgba(216, 236, 255, 0.25); }

.gp-av-shoe {
  position: absolute;
  bottom: -4%;
  width: 28%;
  height: 14%;
  border-radius: 999px;
  background: #e3ebf6;
}
.gp-av-shoe.left { left: 14%; }
.gp-av-shoe.right { right: 14%; }

.gp-av-acc {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.acc-scarf::before,
.acc-visor::before,
.acc-headphones::before,
.acc-badge::before {
  content: "";
  position: absolute;
}

.acc-scarf::before { left: 35%; top: 39%; width: 30%; height: 6%; border-radius: 999px; background: #ff79df; }
.acc-visor::before { left: 34%; top: 14%; width: 32%; height: 8%; border-radius: 6px; background: rgba(113, 235, 255, 0.9); }
.acc-headphones::before { left: 21%; top: 8%; width: 58%; height: 20%; border: 2px solid #b0c7ff; border-bottom: none; border-radius: 999px 999px 0 0; }
.acc-badge::before { right: 31%; top: 47%; width: 8%; height: 8%; border-radius: 999px; background: #ffd86f; }

.gp-player-wrap .gp-explorer-avatar[data-facing="left"] { transform: scaleX(-1) scale(var(--scale, 1)); }
.gp-player-wrap .gp-explorer-avatar[data-facing="right"] { transform: scaleX(1) scale(var(--scale, 1)); }
.gp-player-wrap .gp-explorer-avatar[data-facing="up"] { filter: brightness(0.9) saturate(0.84); }

.gp-player-wrap .gp-explorer-avatar--mini,
.gp-other .gp-explorer-avatar--mini {
  animation: gp-avatar-idle 880ms ease-in-out infinite alternate;
}

.gp-home-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 14px;
}

@media (max-width: 1120px) {
  .gp-home-main-grid,
  .gp-home-hero,
  .gp-control-grid--overworld {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .gp-page .page-main {
    width: 100%;
    padding: 22px 12px 44px;
  }
}

/* ===== 2026 Proportion + Mobile Overworld Refinement ===== */
.gp-explorer-avatar {
  width: 104px;
  height: 152px;
}

.gp-explorer-avatar--lg { width: 130px; height: 190px; }
.gp-explorer-avatar--xl { width: 172px; height: 248px; }
.gp-explorer-avatar--mini { width: 62px; height: 94px; }

.gp-av-shell {
  width: 100%;
  height: 100%;
  display: grid;
  justify-items: center;
  grid-template-rows: 45% 28% 27%;
  position: relative;
}

.gp-av-head-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  justify-items: center;
  align-items: end;
}

.gp-av-head {
  width: 60%;
  height: 92%;
  border-radius: 50% 50% 48% 48%;
  align-self: end;
  background: var(--skin);
  position: relative;
  border: 1px solid rgba(36, 27, 23, 0.28);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12), 0 2px 0 rgba(255, 255, 255, 0.17);
}

.gp-av-neck {
  width: 14%;
  height: 9%;
  margin-top: -2%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--skin) 90%, #f6d8bf);
  border: 1px solid rgba(36, 27, 23, 0.18);
}

.gp-av-hair {
  position: absolute;
  left: 3%;
  right: 3%;
  top: -14%;
  height: 56%;
  background: var(--hair);
}
.hair-short { border-radius: 82% 82% 26% 26%; }
.hair-bob { border-radius: 62% 62% 36% 36%; height: 68%; }
.hair-spike { clip-path: polygon(0 82%, 13% 18%, 30% 79%, 48% 11%, 66% 78%, 84% 20%, 100% 82%); }
.hair-mop { border-radius: 999px; height: 72%; }
.hair-puff { border-radius: 999px; height: 76%; }
.hair-none { display: none; }

.gp-av-face { position: absolute; inset: 0; }
.gp-av-eye {
  position: absolute;
  top: 46%;
  width: 12%;
  height: 11%;
  border-radius: 999px;
  background: var(--eyes);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);
}
.gp-av-eye.left { left: 27%; }
.gp-av-eye.right { right: 27%; }
.gp-av-mouth {
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: 24%;
  height: 8%;
  border-bottom: 2px solid rgba(38, 37, 51, 0.9);
  border-radius: 999px;
  transform: translateX(-50%);
}

.eyes-sleepy .gp-av-eye { height: 4%; border-radius: 4px; }
.eyes-wide .gp-av-eye { width: 14%; height: 13%; }
.eyes-spark .gp-av-eye { box-shadow: 0 0 6px var(--eyes); }
.eyes-cat .gp-av-eye { width: 10%; height: 14%; border-radius: 3px; }

.gp-av-hat {
  position: absolute;
  top: -27%;
  left: 12%;
  right: 12%;
  height: 25%;
  display: none;
}
.hat-beanie,
.hat-cap,
.hat-hornband,
.hat-crown { display: block; border-radius: 999px 999px 10px 10px; }
.hat-beanie { background: #2f4477; }
.hat-cap { background: #3a67ff; }
.hat-hornband { background: #6e56ff; }
.hat-crown { background: #d4b55f; clip-path: polygon(0 100%, 0 56%, 14% 38%, 32% 56%, 48% 28%, 65% 57%, 83% 38%, 100% 56%, 100% 100%); }

.gp-av-torso {
  width: 44%;
  height: 74%;
  align-self: center;
  margin-top: 8%;
  border-radius: 30% 30% 19% 19%;
  background: var(--top);
  border: 1px solid rgba(21, 24, 42, 0.25);
  position: relative;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}

.top-jacket { border-radius: 24% 24% 17% 17%; }
.top-tee { border-radius: 32% 32% 22% 22%; }
.top-robe { border-radius: 18% 18% 20% 20%; }
.top-armor { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.24), inset 0 0 0 2px rgba(186, 222, 255, 0.3); }

.gp-av-arm {
  position: absolute;
  top: 28%;
  width: 13%;
  height: 36%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--top) 72%, #f0f4ff);
}
.gp-av-arm.left { left: -14%; }
.gp-av-arm.right { right: -14%; }

.gp-av-legs {
  width: 46%;
  height: 90%;
  align-self: start;
  margin-top: 8%;
  position: relative;
}

.gp-av-leg {
  position: absolute;
  width: 32%;
  height: 66%;
  top: 0;
  border-radius: 10px 10px 12px 12px;
  background: var(--bottom);
  border: 1px solid rgba(18, 21, 35, 0.25);
}
.gp-av-leg.left { left: 12%; }
.gp-av-leg.right { right: 12%; }

.bottom-skirt .gp-av-leg { height: 58%; top: 11%; border-radius: 8px 8px 12px 12px; }
.bottom-greaves .gp-av-leg { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 2px rgba(216, 236, 255, 0.25); }

.gp-av-shoe {
  position: absolute;
  bottom: 8%;
  width: 29%;
  height: 16%;
  border-radius: 999px;
  background: #e3ebf6;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.gp-av-shoe.left { left: 14%; }
.gp-av-shoe.right { right: 14%; }

.gp-av-ground-shadow {
  position: absolute;
  bottom: 1%;
  width: 48%;
  height: 7%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(6, 14, 27, 0.44) 0%, rgba(6, 14, 27, 0.06) 75%, transparent 100%);
  pointer-events: none;
}

.gp-av-acc {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.acc-scarf::before,
.acc-visor::before,
.acc-headphones::before,
.acc-badge::before {
  content: "";
  position: absolute;
}

.acc-scarf::before { left: 37%; top: 52%; width: 26%; height: 4%; border-radius: 999px; background: #ff79df; }
.acc-visor::before { left: 36%; top: 16%; width: 28%; height: 6%; border-radius: 6px; background: rgba(113, 235, 255, 0.9); }
.acc-headphones::before { left: 23%; top: 10%; width: 54%; height: 16%; border: 2px solid #b0c7ff; border-bottom: none; border-radius: 999px 999px 0 0; }
.acc-badge::before { right: 36%; top: 62%; width: 7%; height: 6%; border-radius: 999px; background: #ffd86f; }

.gp-explorer-avatar--mini .gp-av-ground-shadow {
  width: 56%;
  height: 8%;
  bottom: 2%;
  opacity: 0.95;
}
.gp-touch-controls-wrap {
  display: none;
  margin-top: 10px;
  border: 1px solid rgba(122, 208, 255, 0.34);
  background: rgba(10, 19, 33, 0.78);
  border-radius: 14px;
  padding: 10px;
}

.gp-touch-hint {
  margin: 0 0 8px;
}

.gp-dpad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  max-width: 240px;
  gap: 8px;
}

.gp-dpad .up {
  grid-column: 2;
  grid-row: 1;
}

.gp-dpad .left {
  grid-column: 1;
  grid-row: 2;
}

/* ===== 2026 Home Base + Avatar Head Correction ===== */
.gp-home-hub-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr) minmax(260px, 0.75fr);
  gap: 14px;
  align-items: stretch;
}

.gp-home-utility-stack {
  display: grid;
  gap: 14px;
  align-content: start;
}

.gp-home-active-card,
.gp-home-team-card {
  min-height: 100%;
}

.gp-home-lower-grid {
  display: grid;
  gap: 14px;
}

.gp-home-status-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gp-stats-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#starter-status {
  margin: 0;
  padding: 0 4px;
}

.gp-profile-summary {
  min-height: 100%;
}

@media (max-width: 1160px) {
  .gp-home-hub-grid {
    grid-template-columns: 1fr 1fr;
  }

  .gp-home-utility-stack {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .gp-home-hub-grid,
  .gp-home-utility-stack,
  .gp-home-status-grid,
  .gp-stats-grid-2 {
    grid-template-columns: 1fr;
  }
}

.gp-av-head {
  width: 64%;
  height: 93%;
  border-radius: 55% 55% 52% 52%;
  background:
    radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.28), transparent 40%),
    linear-gradient(180deg, color-mix(in srgb, var(--skin) 84%, #ffe7d6), color-mix(in srgb, var(--skin) 92%, #af7d60));
  border: 1px solid rgba(44, 30, 24, 0.26);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.12), 0 2px 0 rgba(255, 255, 255, 0.15);
}

.gp-av-hair {
  left: 4%;
  right: 4%;
  top: -12%;
  height: 54%;
  border-radius: 84% 84% 28% 28%;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.17);
}

.hair-bob { border-radius: 66% 66% 36% 36%; height: 66%; }
.hair-mop { border-radius: 92% 92% 48% 48%; height: 70%; }
.hair-puff { border-radius: 999px; height: 73%; }

.gp-av-face {
  inset: 0 0 2% 0;
}

.gp-av-eye {
  top: 48%;
  width: 11%;
  height: 10%;
}

.gp-av-eye.left { left: 29%; }
.gp-av-eye.right { right: 29%; }

.gp-av-mouth {
  bottom: 20%;
  width: 22%;
}

.gp-av-hat {
  top: -25%;
  left: 11%;
  right: 11%;
  height: 27%;
}

.hat-beanie,
.hat-cap,
.hat-hornband,
.hat-crown {
  border-radius: 999px 999px 12px 12px;
}

.gp-explorer-avatar--mini .gp-av-head {
  width: 66%;
  height: 94%;
}

.gp-explorer-avatar--mini .gp-av-eye {
  width: 12%;
  height: 12%;
  top: 49%;
}

.gp-dpad .right {
  grid-column: 3;
  grid-row: 2;
}

.gp-dpad .down {
  grid-column: 2;
  grid-row: 3;
}

.gp-dpad-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border-radius: 12px;
  border: 1px solid rgba(155, 229, 255, 0.42);
  background: linear-gradient(180deg, rgba(48, 97, 162, 0.75), rgba(28, 58, 100, 0.92));
  color: #ecf7ff;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
  -webkit-user-select: none;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  cursor: pointer;
}

.gp-dpad-btn.is-active {
  transform: translateY(1px) scale(0.98);
  background: linear-gradient(180deg, rgba(88, 154, 227, 0.95), rgba(36, 79, 146, 0.95));
  box-shadow: inset 0 0 0 1px rgba(202, 238, 255, 0.52), 0 0 0 2px rgba(88, 167, 255, 0.15);
}

.gp-touch-controls-wrap,
.gp-dpad,
.gp-dpad-btn,
.gp-dpad-btn * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.gp-encounter-paused-note {
  margin-top: 6px;
  margin-bottom: 8px;
}

@media (max-width: 980px) {
  .gp-control-grid--overworld {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .gp-overworld {
    min-height: auto;
    width: 100%;
    aspect-ratio: 16 / 11;
  }

  .gp-overworld-sidebar {
    max-height: none;
  }

  .gp-touch-controls-wrap {
    display: block;
  }

  .gp-encounter-panel {
    width: min(760px, 100%);
  }

  .gp-encounter-actions .btn {
    width: 100%;
    min-height: 46px;
  }

  .gp-encounter-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .gp-page .page-main {
    padding: 16px 10px 100px;
  }

  .gp-shell {
    gap: 14px;
  }

  .gp-banner,
  .gp-card {
    padding: 12px;
  }

  .gp-area-head {
    gap: 8px;
    flex-direction: column;
    align-items: flex-start;
  }

  .gp-overworld {
    aspect-ratio: 4 / 3;
    border-radius: 14px;
  }

  .gp-name-tag {
    font-size: 0.62rem;
    transform: translate(-50%, -150%);
  }

  .gp-touch-controls-wrap {
    position: sticky;
    bottom: 8px;
    z-index: 9;
  }

  .gp-dpad {
    max-width: 100%;
  }

  .gp-dpad-btn {
    min-height: 58px;
    font-size: 1.3rem;
  }

  .gp-overworld-banner p,
  #overworld-hint {
    font-size: 0.83rem;
  }

  .gp-area-banner {
    max-width: calc(100% - 18px);
    padding: 8px 10px;
  }

  .gp-encounter-overlay {
    padding: 8px;
  }

  .gp-encounter-panel {
    max-height: 96vh;
    padding: 10px;
  }

  .gp-pet-canvas {
    height: 144px;
  }

  .gp-overlay-log {
    min-height: 98px;
    max-height: 128px;
  }

  .gp-log {
    max-height: 200px;
  }
}

/* ===== 2026 Home Base Full Redesign ===== */
.gp-home-base {
  gap: 22px;
}

.gp-home-base .btn {
  border-radius: 12px;
  border-color: rgba(123, 199, 255, 0.34);
  background: linear-gradient(180deg, rgba(20, 34, 59, 0.92), rgba(10, 18, 35, 0.95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 14px rgba(0, 0, 0, 0.28);
}

.gp-home-base .btn:hover {
  transform: translateY(-1px);
  border-color: rgba(139, 227, 255, 0.8);
}

.gp-home-base .btn.btn-primary {
  border-color: rgba(130, 246, 255, 0.8);
  background: linear-gradient(150deg, #2b63ff 0%, #2fd9ff 45%, #40ffd2 100%);
  color: #041022;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(56, 202, 255, 0.4);
}

.gp-home-hero-v2 {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 16px;
}

.gp-home-intro-panel,
.gp-trainer-panel,
.gp-active-feature,
.gp-team-rail,
.gp-storage-utility,
.gp-action-station,
.gp-mission-board,
.gp-home-mini-card,
.gp-starter-showcase,
.gp-explorer-hangar {
  border-radius: 24px;
  border: 1px solid rgba(111, 171, 255, 0.3);
  background: linear-gradient(165deg, rgba(19, 31, 55, 0.96) 0%, rgba(11, 17, 33, 0.96) 58%, rgba(12, 29, 46, 0.94) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 24px 36px rgba(2, 8, 22, 0.44);
}

.gp-home-intro-panel {
  position: relative;
  overflow: hidden;
  padding: 28px;
  display: grid;
  gap: 14px;
}

.gp-home-intro-panel::before,
.gp-home-intro-panel::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(10px);
  pointer-events: none;
}

.gp-home-intro-panel::before {
  width: 260px;
  height: 260px;
  right: -70px;
  top: -90px;
  background: radial-gradient(circle, rgba(58, 207, 255, 0.4) 0%, rgba(58, 207, 255, 0) 70%);
}

.gp-home-intro-panel::after {
  width: 220px;
  height: 220px;
  left: -80px;
  bottom: -100px;
  background: radial-gradient(circle, rgba(171, 105, 255, 0.3) 0%, rgba(171, 105, 255, 0) 75%);
}

.gp-home-intro-panel h1 {
  margin: 0;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
}

.gp-home-intro-copy {
  margin: 0;
  max-width: 58ch;
  color: #c9daf6;
  line-height: 1.65;
}

.gp-home-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gp-home-tag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 12px;
  background: linear-gradient(180deg, rgba(86, 205, 255, 0.24), rgba(104, 131, 255, 0.16));
  border: 1px solid rgba(124, 218, 255, 0.5);
  color: #e9f7ff;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.gp-trainer-panel {
  padding: 18px;
  gap: 14px;
}

.gp-trainer-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gp-trainer-identity {
  align-items: center;
}

.gp-trainer-copy h2 { margin: 0; }
.gp-trainer-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.gp-home-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(330px, 0.75fr);
  gap: 16px;
  align-items: start;
}

.gp-home-side-rail {
  display: grid;
  gap: 14px;
}

.gp-active-feature {
  padding: 20px;
  gap: 16px;
}

.gp-active-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gp-active-feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 18px;
}

.gp-pet-stage {
  position: relative;
  border-radius: 20px;
  padding: 10px;
  border: 1px solid rgba(122, 177, 255, 0.34);
  background:
    radial-gradient(circle at 60% 18%, rgba(100, 227, 255, 0.22), transparent 55%),
    radial-gradient(circle at 35% 95%, rgba(148, 106, 255, 0.2), transparent 55%),
    linear-gradient(180deg, rgba(9, 20, 38, 0.95), rgba(10, 13, 28, 0.95));
}

.gp-pet-stage-glow {
  position: absolute;
  inset: 28% 20% 14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(68, 215, 255, 0.35), rgba(68, 215, 255, 0));
  filter: blur(8px);
}

.gp-pet-canvas-stage {
  position: relative;
  height: 280px;
  border: 0;
  background: transparent;
}

.gp-active-meta h2 { margin: 0; font-size: 1.6rem; }
.gp-active-chip-row { margin: 8px 0 10px; }
.gp-active-actions { margin-top: 8px; }

.gp-team-rail,
.gp-storage-utility,
.gp-action-station,
.gp-mission-board,
.gp-home-mini-card {
  padding: 16px;
}

.gp-team-list {
  display: grid;
  gap: 10px;
}

.gp-team-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  border-radius: 14px;
  border: 1px solid rgba(133, 165, 215, 0.3);
  background: linear-gradient(180deg, rgba(18, 32, 58, 0.86), rgba(10, 18, 34, 0.9));
  padding: 10px;
}

.gp-team-item.is-active {
  border-color: rgba(99, 242, 237, 0.9);
  box-shadow: 0 0 0 1px rgba(99, 242, 237, 0.25), 0 12px 22px rgba(22, 114, 141, 0.25);
}

.gp-team-types .gp-type-badge {
  margin-bottom: 4px;
}

.gp-recent-captures {
  display: grid;
  gap: 8px;
}

.gp-recent-captures p {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.03);
}

.gp-action-buttons {
  display: grid;
  gap: 10px;
}

.gp-action-buttons .btn {
  width: 100%;
  justify-content: center;
}

.gp-home-status-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.45fr);
  gap: 14px;
}

.gp-home-status-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.gp-mission-board .gp-stat-block {
  border-radius: 12px;
  border: 1px solid rgba(127, 172, 233, 0.3);
  background: linear-gradient(180deg, rgba(18, 31, 54, 0.72), rgba(7, 14, 28, 0.8));
}

.gp-home-adoption-row {
  display: grid;
  gap: 10px;
}

.gp-explorer-hangar {
  padding: 18px;
}

@media (max-width: 1150px) {
  .gp-home-hero-v2,
  .gp-home-main-grid,
  .gp-home-status-row,
  .gp-active-feature-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .gp-trainer-stat-grid,
  .gp-home-status-grid {
    grid-template-columns: 1fr;
  }
}