/* WonderKids Brain Labs — interactive adventure-map home. */
body.home-world-active {
  min-height: 100dvh;
  overflow: hidden;
  background: #8fd7ff;
}

/* Establish the viewport-height layout in CSS before the header-measurement
   script runs. This prevents the map from briefly rendering at 100dvh below
   the header and clipping its lower destinations during page load. */
body.home-world-active .student-wrapper {
  width: 100%;
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.home-world-active #site-header {
  flex: 0 0 auto;
}

body.home-world-active main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.brainlabs-page #site-header,
body.brainlabs-page #site-header .header.header-content {
  background: #fff !important;
}

/* These floating rewards belong to the main site, not the focused preschool
   map experience. Keep them available everywhere else through body scoping. */
body.brainlabs-page #inventory-container,
body.brainlabs-page .coin-banner {
  display: none !important;
}

/* The shared site stylesheet forces every .toast to be visible. Brain Labs
   keeps its notification mounted, so hide it until core.js adds .show. */
body.brainlabs-page #toast:not(.show) {
  display: none !important;
  opacity: 0 !important;
}

body.brainlabs-page #toast.show {
  display: block !important;
  opacity: 1 !important;
}

body.home-world-active .topnav,
body.home-world-active .mobile-nav {
  display: none !important;
}

body.home-world-active #page-home {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: hidden;
}

@media (max-width: 768px) {
  body.brainlabs-page {
    padding-bottom: 0 !important;
  }
}

.adventure-home,
.adventure-map {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.adventure-map {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #f8fbff;
  background:
    radial-gradient(circle at 50% 49%, rgba(79,239,255,.47) 0 7%, rgba(14,158,255,.2) 20%, transparent 42%),
    radial-gradient(circle at 7% 88%, rgba(150,65,255,.72) 0 4%, transparent 32%),
    radial-gradient(circle at 91% 82%, rgba(103,45,255,.57) 0 5%, transparent 31%),
    radial-gradient(circle at 86% 8%, rgba(0,198,255,.4) 0 4%, transparent 31%),
    linear-gradient(140deg, #29108f 0%, #1535ba 31%, #007ad8 56%, #164ec9 74%, #5620cf 100%);
}

.adventure-map::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 49%, rgba(226,254,255,.46) 0 2%, rgba(81,228,255,.16) 18%, transparent 42%),
    repeating-conic-gradient(from 3deg at 50% 49%, rgba(184,239,255,.075) 0deg .8deg, transparent 1.2deg 16deg),
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 32% 72%, rgba(18,5,91,.16));
  mask-image: radial-gradient(circle at 50% 49%, #000 0 44%, transparent 76%);
  opacity: .58;
}

.adventure-map::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(255,255,255,.92) 0 1px, rgba(102,226,255,.45) 1.2px 2px, transparent 2.3px) 13px 17px / 176px 143px,
    radial-gradient(circle, rgba(205,244,255,.72) 0 1px, transparent 1.7px) 73px 42px / 119px 101px;
  mask-image: linear-gradient(180deg, transparent 2%, #000 14%, #000 91%, transparent);
  opacity: .65;
  box-shadow: inset 0 0 120px rgba(17,3,88,.28);
}

.adventure-sky-glow {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 49%;
  width: min(32vw, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(213,252,255,.5), rgba(79,224,255,.14) 35%, transparent 69%);
  filter: blur(1px);
  pointer-events: none;
}

.adventure-brand-card {
  position: absolute;
  z-index: 30;
  top: clamp(10px, 1.6vh, 18px);
  left: 50%;
  width: min(92vw, 470px);
  min-height: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 25px;
  transform: translateX(-50%);
  border: 3px solid rgba(255,255,255,.96);
  border-radius: 30px 38px 31px 40px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 6px 0 rgba(50,81,198,.2), 0 0 24px rgba(85,223,255,.28), 0 16px 34px rgba(20,43,137,.2), inset 0 1px 0 #fff;
}

.adventure-brand-card::before,
.adventure-brand-card::after {
  content: '';
  position: absolute;
  bottom: -7px;
  width: 48px;
  height: 25px;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
}

.adventure-brand-card::before { left: 35px; }
.adventure-brand-card::after { right: 38px; }

.adventure-brand-logo {
  width: clamp(122px, 10vw, 170px);
  height: auto;
  flex: 0 0 auto;
}

.adventure-brand-card > div {
  min-width: 0;
  padding-left: 15px;
  border-left: 1px solid #d9e5f3;
}

.adventure-brand-kicker {
  display: block;
  margin-bottom: 2px;
  color: #6c56d9;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.adventure-brand-card h1 {
  margin: 0;
  color: #203a61;
  font: 800 clamp(.92rem, 1.1vw, 1.15rem)/1.2 'Poppins', sans-serif;
  white-space: nowrap;
}

.adventure-routes {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.adventure-routes path {
  fill: none;
  stroke: rgba(221,250,255,.86);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 3 8;
  vector-effect: non-scaling-stroke;
  opacity: .78;
  filter: drop-shadow(0 0 3px rgba(89,230,255,.55));
  transition: stroke .22s ease, opacity .22s ease, filter .22s ease;
}

.adventure-routes path.is-preview {
  stroke: #fff6a3;
  stroke-width: 3;
  opacity: 1;
  filter: drop-shadow(0 0 5px rgba(255,221,66,.9));
}

.adventure-routes path.is-active {
  stroke: url('#adventure-route-gold');
  stroke-width: 4;
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(255,210,55,.92));
}

.adventure-mobile-trail { display: none; }

.adventure-map .skill-pillars-grid {
  position: absolute;
  z-index: 12;
  inset: 0;
  display: block;
  pointer-events: none;
}

.skill-destination {
  --map-x: 50%;
  --map-y: 50%;
  --skill-color: #6c56d9;
  position: absolute;
  left: var(--map-x);
  top: var(--map-y);
  width: clamp(130px, 11.2vw, 184px);
  padding: 0;
  transform: translate(-50%, -50%);
  border: 0;
  color: #173a57;
  background: transparent;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.destination-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 9px 9px rgba(10,18,95,.23));
  transition: transform .22s cubic-bezier(.2,.8,.2,1), filter .22s ease;
}

.destination-visual::before {
  display: none;
}

.destination-orbit {
  position: relative;
  width: clamp(68px, 5.8vw, 94px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: clamp(3px, .28vw, 5px) solid #fff;
  border-radius: 50%;
  color: var(--skill-color);
  background: #fff;
  box-shadow:
    0 0 0 4px var(--skill-color),
    0 0 18px 5px color-mix(in srgb, var(--skill-color) 66%, transparent),
    0 10px 18px rgba(12,19,89,.28),
    inset 0 2px 0 #fff;
  font-size: clamp(1.55rem, 2.25vw, 2.35rem);
  transition: transform .26s cubic-bezier(.2,.9,.25,1.3), box-shadow .25s ease;
}

.destination-orbit::after {
  content: '';
  position: absolute;
  inset: -15px;
  border: 3px dotted rgba(255,255,255,.9);
  border-radius: inherit;
  opacity: 0;
  transform: scale(.82);
  transition: opacity .2s ease, transform .3s ease;
}

.destination-symbol {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  line-height: 1;
  filter: drop-shadow(0 3px 3px rgba(39,57,77,.14));
  transform: translateY(-1px) scale(1);
  transition: opacity .22s ease, transform .22s ease;
}

.destination-symbol img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.skill-destination.is-selected .destination-symbol {
  opacity: .08;
  transform: translateY(-1px) scale(.55);
}

.destination-label {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 100%;
  height: 60px;
  margin-top: 1px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 3px solid var(--skill-color);
  border-radius: 15px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--skill-color) 58%, #173a57), 0 0 15px color-mix(in srgb, var(--skill-color) 53%, transparent), inset 0 1px 0 #fff;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.destination-label::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -6px;
  width: 12px;
  height: 12px;
  transform: translateX(-50%) rotate(45deg);
  border-left: 3px solid var(--skill-color);
  border-top: 3px solid var(--skill-color);
  background: #fff;
}

.destination-title {
  position: relative;
  z-index: 1;
  display: block;
  color: #173a57;
  font: 800 clamp(.72rem, .84vw, .9rem)/1.12 'Poppins', sans-serif;
}

.destination-count {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 0;
  color: color-mix(in srgb, var(--skill-color) 45%, #14233e);
  font-size: clamp(.62rem, .68vw, .75rem);
  font-weight: 900;
}

/* The lower row has two-line titles. Add a little breathing room below its
   icons on desktop without changing the compact mobile orbit layout. */
@media (min-width: 761px) {
  .destination-planning .destination-label,
  .destination-creativity .destination-label,
  .destination-coding .destination-label,
  .destination-codes .destination-label {
    height: 68px;
    margin-top: 7px;
    padding: 8px 10px 6px;
    gap: 3px;
  }
}

.skill-destination:focus-visible .destination-visual {
  transform: translateY(-3px) scale(1.012);
  filter: drop-shadow(0 11px 9px rgba(35,73,111,.24));
}

.skill-destination:focus-visible .destination-orbit {
  transform: translateY(-2px) scale(1.025);
  box-shadow:
    0 0 0 5px var(--skill-color),
    0 0 25px 8px color-mix(in srgb, var(--skill-color) 72%, transparent),
    0 12px 20px rgba(11,18,89,.3),
    inset 0 2px 0 #fff;
}

.skill-destination:focus-visible .destination-orbit::after,
.skill-destination.is-selected .destination-orbit::after {
  opacity: .7;
  transform: scale(.96);
}

.skill-destination.is-selected .destination-orbit { transform: scale(1.04); }
.skill-destination.is-selected .destination-label {
  background: #fff;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--skill-color) 58%, #173a57), 0 0 22px color-mix(in srgb, var(--skill-color) 68%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .skill-destination:hover .destination-visual {
    transform: translateY(-3px) scale(1.012);
    filter: drop-shadow(0 11px 9px rgba(35,73,111,.24));
  }

  .skill-destination:hover .destination-orbit {
    transform: translateY(-2px) scale(1.025);
    box-shadow:
      0 0 0 5px var(--skill-color),
      0 0 25px 8px color-mix(in srgb, var(--skill-color) 72%, transparent),
      0 12px 20px rgba(11,18,89,.3),
      inset 0 2px 0 #fff;
  }

  .skill-destination:hover .destination-label {
    background: #fff;
    box-shadow: 0 3px 0 color-mix(in srgb, var(--skill-color) 58%, #173a57), 0 0 21px color-mix(in srgb, var(--skill-color) 64%, transparent);
  }
}

.skill-destination:focus-visible { outline: none; }
.skill-destination:focus-visible .destination-label { outline: 3px solid #fff; outline-offset: 4px; }

.adventure-explorer {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: 51%;
  width: clamp(72px, 5.6vw, 90px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  transform-origin: 50% 88%;
  pointer-events: none;
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
  contain: layout style;
}

.explorer-portrait {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 4px solid rgba(255,255,255,.98);
  border-radius: 50%;
  background: radial-gradient(circle at 48% 38%, #fff5c7, #ffbd45 70%, #dc7524);
  box-shadow: 0 0 0 5px #ffb52f, 0 0 0 9px rgba(75,239,255,.78), 0 0 28px 10px rgba(50,229,255,.62), 0 14px 24px rgba(6,10,70,.34), inset 0 2px 0 #fff;
}

.adventure-explorer img {
  position: absolute;
  left: 50%;
  top: -48%;
  display: block;
  width: 150%;
  max-width: none;
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 5px 5px rgba(92,45,12,.22));
}

.explorer-aura {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: -28%;
  width: 154%;
  height: 25%;
  border-radius: 50%;
  transform: translateX(-50%);
  border: 2px solid rgba(214,252,255,.94);
  background: linear-gradient(180deg, rgba(119,248,255,.95), rgba(39,126,255,.75) 44%, rgba(94,53,255,.72));
  box-shadow: 0 0 16px rgba(48,232,255,.92), 0 6px 0 rgba(43,49,196,.7), inset 0 2px 0 rgba(255,255,255,.9);
  animation: auraPulse 1.8s ease-in-out infinite alternate;
}

.explorer-dust {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 65%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff5a8;
  box-shadow: 0 0 10px #ffc83d;
  display: none;
}

.adventure-explorer.has-arrived .explorer-portrait { animation: explorerCelebrate .58s cubic-bezier(.2,.9,.3,1.25) 2; }

/* Keep the travel frame light: the face is the only moving layer while en route. */
.adventure-map.is-traveling .adventure-sky-glow,
.adventure-map.is-traveling .explorer-aura,
.adventure-map.is-traveling .adventure-command-spark {
  animation-play-state: paused;
}

.adventure-map.is-traveling .destination-orbit::after {
  animation: none;
}

.adventure-command {
  box-sizing: border-box;
  position: absolute;
  z-index: 22;
  left: 50%;
  top: 62%;
  width: clamp(190px, 17vw, 245px);
  min-width: 0;
  max-width: calc(100% - 24px);
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 14px;
  transform: translate(-50%, -50%);
  border: 3px solid #ffd34d;
  border-radius: 999px;
  color: #253052;
  background: linear-gradient(180deg, #fff9a4, #ffd84c);
  box-shadow: 0 4px 0 #e89520, 0 0 17px rgba(255,221,64,.72), 0 10px 20px rgba(22,36,122,.2), inset 0 1px 0 #fff;
  font-size: clamp(.72rem, .76vw, .82rem);
  font-weight: 900;
  text-align: center;
  pointer-events: none;
  overflow: hidden;
  white-space: nowrap;
  contain: layout paint;
  transition: transform .25s ease, border-color .25s ease;
}

.adventure-command.is-guiding {
  border-color: #8b5cf6;
  transform: translate(-50%, -50%) scale(1.04);
}

.adventure-command-spark {
  color: #ff8a34;
  animation: commandNudge 1.2s ease-in-out infinite;
}

.adventure-transition {
  position: absolute;
  z-index: 80;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(245,250,255,.98);
  transition: opacity .18s ease, visibility .18s ease;
}

.adventure-transition span {
  display: none;
}

.adventure-map.is-departing .adventure-transition { opacity: 1; visibility: visible; }

@keyframes adventureGlow { to { opacity: .72; transform: translate(-50%, -50%) scale(1.12); } }
@keyframes destinationOrbit { to { rotate: 360deg; } }
@keyframes auraPulse { to { opacity: .86; transform: translateX(-50%) scale(1.045); } }
@keyframes explorerCelebrate { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(5deg) scale(1.08); } }
@keyframes commandNudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

@media (max-width: 760px) {
  body.home-world-active .student-wrapper,
  body.home-world-active main,
  body.home-world-active #page-home,
  .adventure-home,
  .adventure-map {
    width: 100%;
    min-width: 0;
    max-width: 100vw;
  }

  .adventure-map {
    background:
      radial-gradient(circle at 50% 50%, rgba(69,236,255,.4) 0 6%, rgba(26,172,255,.16) 18%, transparent 37%),
      radial-gradient(circle at 7% 84%, rgba(146,56,255,.58) 0 5%, transparent 34%),
      radial-gradient(circle at 94% 78%, rgba(99,43,255,.48) 0 5%, transparent 33%),
      linear-gradient(160deg, #29108f 0%, #1439bd 38%, #087ed0 61%, #5220c7 100%);
  }

  .adventure-map::before {
    background:
      radial-gradient(circle at 50% 50%, rgba(226,254,255,.38) 0 2%, rgba(81,228,255,.12) 15%, transparent 35%),
      repeating-conic-gradient(from 3deg at 50% 50%, rgba(184,239,255,.07) 0deg .8deg, transparent 1.3deg 18deg);
    mask-image: radial-gradient(circle at 50% 50%, #000 0 44%, transparent 78%);
    opacity: .58;
  }

  .adventure-brand-card {
    top: max(7px, env(safe-area-inset-top));
    width: calc(100% - 26px);
    /* min-height: 68px; */
    gap: 10px;
    padding: 9px 14px;
    border-width: 2px;
    border-radius: 23px;
  }

  .adventure-brand-logo { width: clamp(108px, 32vw, 142px); }
  .adventure-brand-card > div { padding-left: 10px; }
  .adventure-brand-kicker { font-size: .55rem; }
  .adventure-brand-card h1 { font-size: clamp(.68rem, 3.1vw, .88rem); white-space: normal; }
  .adventure-routes { display: none; }

  .adventure-mobile-trail {
    position: absolute;
    z-index: 3;
    left: 7%;
    right: 7%;
    top: 6%;
    bottom: 22%;
    display: block;
    width: auto;
    transform: none;
    border: 2px dashed rgba(205,247,255,.78);
    border-radius: 50%;
    background: transparent;
    filter: drop-shadow(0 0 4px rgba(63,224,255,.5));
  }

  .skill-destination {
    left: var(--mobile-x);
    top: var(--mobile-y);
    width: clamp(108px, 26.5vw, 132px);
  }

  .destination-visual { filter: drop-shadow(0 6px 6px rgba(6,15,49,.22)); }
  .destination-orbit { width: clamp(46px, 14vw, 58px); border-width: 3px; transform: translateX(var(--mobile-orbit-shift, 0)); box-shadow: 0 0 0 3px var(--skill-color), 0 0 15px 4px color-mix(in srgb,var(--skill-color) 66%,transparent), 0 9px 15px rgba(11,18,89,.27); font-size: clamp(1.05rem, 5vw, 1.45rem); }
  .destination-orbit::after { inset: -10px; border-width: 2px; }
  .destination-label { height: 30px; margin-top: 1px; padding: 2px 5px; gap: 0; border-width: 2px; border-radius: 999px; box-shadow: 0 2px 0 color-mix(in srgb,var(--skill-color) 55%,#173a57), 0 0 11px color-mix(in srgb,var(--skill-color) 48%,transparent); }
  .destination-planning .destination-label,
  .destination-creativity .destination-label,
  .destination-coding .destination-label,
  .destination-codes .destination-label {
    height: 32px;
    margin-top: 2px;
    padding: 2px 5px;
    gap: 0;
  }
  .destination-label::before { left: calc(50% + var(--mobile-orbit-shift, 0)); top: -5px; width: 8px; height: 8px; border-width: 2px 0 0 2px; }
  .destination-title { font-size: clamp(.61rem, 2.7vw, .74rem); }
  .destination-count { display: none; }
  .destination-memory { top: 9.5%; }
  .destination-brain-games,
  .destination-focus { top: 18.5%; }
  .destination-spatial,
  .destination-logic { top: 40.5%; }
  .destination-codes,
  .destination-planning { top: 64%; }
  .destination-coding,
  .destination-creativity { top: 81%; }

  /* Keep the readable cards in safe columns while placing each circular icon
     directly on the mobile oval route. Mirrored destinations use equal and
     opposite shifts so the map stays optically balanced. */
  .destination-brain-games { --mobile-orbit-shift: 5.5vw; }
  .destination-focus { --mobile-orbit-shift: -5.5vw; }
  .destination-spatial { --mobile-orbit-shift: -9.3vw; }
  .destination-logic { --mobile-orbit-shift: 9.3vw; }
  .destination-codes { --mobile-orbit-shift: -4.2vw; }
  .destination-planning { --mobile-orbit-shift: 4.2vw; }
  .destination-coding { --mobile-orbit-shift: 12.5vw; }
  .destination-creativity { --mobile-orbit-shift: -12.5vw; }
  .adventure-explorer { top: 51%; width: clamp(70px, 21vw, 84px); }
  .adventure-sky-glow { top: 51%; width: 52vw; }

  .adventure-command {
    top: auto;
    bottom: max(13px, env(safe-area-inset-bottom));
    width: min(220px, calc(100% - 24px));
    min-width: 0;
    max-width: 220px;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    padding: 6px 12px;
    transform: translateX(-50%);
    border-width: 2px;
    box-shadow: 0 3px 0 #e89520, 0 0 13px rgba(255,221,64,.62), 0 8px 18px rgba(30,81,120,.18);
    font-size: .7rem;
    white-space: nowrap;
  }

  .adventure-command.is-guiding { transform: translateX(-50%) scale(1.03); }
}

@media (max-width: 350px) {
  .adventure-brand-card { width: calc(100% - 16px); padding-inline: 9px; }
  .adventure-brand-logo { width: 102px; }
  .skill-destination { width: 102px; }
  .destination-title { font-size: .58rem; }
  .destination-count { font-size: .52rem; }
  .adventure-command { width: min(208px, calc(100% - 20px)); min-width: 0; padding-inline: 10px; font-size: .65rem; }
}

/* Browser zoom reduces the CSS viewport height. Keep every destination compact
   before the map reaches the phone breakpoint so the layout cannot collide. */
@media (min-width: 761px) and (max-height: 720px) {
  .adventure-brand-card { top: 7px; width: min(88vw, 430px); padding: 8px 20px; }
  .adventure-brand-logo { width: clamp(112px, 9vw, 145px); }
  .adventure-brand-card h1 { font-size: clamp(.8rem, 1vw, 1rem); }
  .skill-destination { width: clamp(116px, 10.2vw, 146px); }
  .destination-orbit { width: clamp(54px, 5vw, 66px); }
  .destination-label { height: 48px; padding: 3px 7px; }
  .destination-title { font-size: clamp(.64rem, .78vw, .76rem); }
  .destination-count { font-size: clamp(.56rem, .62vw, .66rem); }
  .destination-planning .destination-label,
  .destination-creativity .destination-label,
  .destination-coding .destination-label,
  .destination-codes .destination-label {
    height: 52px;
    padding: 5px 7px 4px;
    gap: 2px;
  }
  .adventure-explorer { width: clamp(58px, 5vw, 70px); }
  .adventure-command { width: 210px; height: 34px; min-height: 34px; max-height: 34px; padding: 5px 11px; font-size: .68rem; }
}

@media (orientation: landscape) and (max-height: 500px) {
  .adventure-brand-card { top: 5px; width: 330px;  padding: 6px 13px; border-radius: 19px; }
  .adventure-brand-logo { width: 105px; }
  .adventure-brand-kicker { font-size: .48rem; }
  .adventure-brand-card h1 { font-size: .69rem; white-space: nowrap; }
  .adventure-routes { display: block; }
  .adventure-mobile-trail { display: none; }
  .skill-destination { left: var(--map-x); top: var(--map-y); width: clamp(94px, 16vw, 122px); }
  .destination-orbit { width: clamp(36px, 7vw, 50px); }
  .destination-label { height: 42px; margin-top: 1px; padding-block: 2px; }
  .destination-title { font-size: .58rem; }
  .destination-count { font-size: .5rem; }
  .adventure-explorer { width: clamp(46px, 8vw, 62px); }
  .adventure-command { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .adventure-sky-glow,
  .adventure-routes path,
  .destination-orbit::after,
  .explorer-portrait,
  .explorer-aura,
  .explorer-dust,
  .adventure-command-spark,
  .adventure-transition span {
    animation: none !important;
  }

  .destination-visual,
  .destination-orbit,
  .adventure-command { transition: none; }
}