.world-chrome {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  color: #eef3f7;
}

.world-chrome-top {
  position: absolute;
  inset: 0 0 auto 0;
  height: 9.1%;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(2,7,13,.93), rgba(2,8,15,.79));
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  backdrop-filter: blur(16px) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
}

.world-mark {
  position: absolute;
  left: 6.0%;
  top: 16%;
  width: 4.0%;
  height: 68%;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(231,189,95,.12));
}

.world-nav-glyphs {
  position: absolute;
  left: 35.5%;
  top: 0;
  width: 27%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.world-nav-glyphs i {
  display: block;
  width: 30px;
  height: 2px;
  border-radius: 999px;
  background: rgba(228,235,241,.64);
  box-shadow: 0 0 7px rgba(255,255,255,.04);
}

.world-nav-glyphs i:first-child {
  background: #e7bd5f;
  box-shadow: 0 0 10px rgba(231,189,95,.18);
}

.world-search-glyph,
.world-menu-glyph {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  opacity: .88;
}

.world-search-glyph { left: 74.5%; }
.world-menu-glyph { left: 78.4%; }

.world-search-glyph::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 1px;
  width: 12px;
  height: 12px;
  border: 1.8px solid rgba(238,243,247,.9);
  border-radius: 50%;
}

.world-search-glyph::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 1.8px;
  left: 13px;
  top: 14px;
  border-radius: 999px;
  background: rgba(238,243,247,.9);
  transform: rotate(45deg);
  transform-origin: left center;
}

.world-menu-glyph::before,
.world-menu-glyph::after,
.world-menu-glyph span {
  content: "";
  position: absolute;
  left: 1px;
  width: 18px;
  height: 1.5px;
  border-radius: 999px;
  background: rgba(238,243,247,.72);
}

.world-menu-glyph::before { top: 5px; }
.world-menu-glyph span { top: 10px; }
.world-menu-glyph::after { top: 15px; }

.world-gold-pill {
  position: absolute;
  right: 7.7%;
  top: 31%;
  width: 8.8%;
  height: 40%;
  border-radius: 999px;
  background: linear-gradient(100deg, #dca941 0%, #f3d17b 45%, #cf9735 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.46), 0 6px 18px rgba(0,0,0,.20), 0 0 22px rgba(231,189,95,.12);
}

.world-gold-pill::after {
  content: "";
  position: absolute;
  left: 28%;
  right: 28%;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  border-radius: 999px;
  background: rgba(255,255,255,.84);
}

.world-card-rail {
  position: absolute;
  inset: 0;
}

.world-card {
  position: absolute;
  top: 65.7%;
  height: 15.5%;
  overflow: hidden;
  border: 1px solid rgba(238,243,247,.34);
  border-radius: clamp(10px, 1.2vw, 18px);
  background: rgba(3,8,15,.48);
  box-shadow: 0 14px 38px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(7px) saturate(1.12);
  -webkit-backdrop-filter: blur(7px) saturate(1.12);
}

.world-card:nth-child(1) { left: 3%; width: 18.3%; }
.world-card:nth-child(2) { left: 21.8%; width: 18.2%; }
.world-card:nth-child(3) { left: 41%; width: 18.2%; }
.world-card:nth-child(4) { left: 60.1%; width: 18.2%; }
.world-card:nth-child(5) { left: 79.2%; width: 18%; }

.world-card::before,
.world-card::after {
  content: "";
  position: absolute;
}

.world-card .card-arrow {
  position: absolute;
  right: 7%;
  bottom: 11%;
  width: 12%;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.46);
  border-radius: 50%;
  background: rgba(0,4,10,.32);
}

.world-card .card-arrow::before,
.world-card .card-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  background: rgba(255,255,255,.88);
  height: 1.2px;
}

.world-card .card-arrow::before {
  left: 30%;
  width: 38%;
}

.world-card .card-arrow::after {
  width: 23%;
  left: 51%;
  transform: rotate(45deg);
  transform-origin: right center;
}

.world-card .card-line {
  position: absolute;
  left: 7%;
  bottom: 14%;
  width: 26%;
  height: 2px;
  border-radius: 99px;
  background: rgba(255,255,255,.76);
}

/* Card 1: human/voice */
.world-card.card-human {
  background:
    radial-gradient(circle at 44% 30%, rgba(90,148,190,.18), transparent 30%),
    linear-gradient(120deg, rgba(2,7,14,.80), rgba(9,27,43,.64));
}
.world-card.card-human::before {
  left: 29%; top: 17%; width: 24%; height: 43%;
  border-radius: 46% 46% 42% 42%;
  background: linear-gradient(150deg, #33231e, #130f0e 72%);
  box-shadow: 15px 8px 0 -8px rgba(18,25,35,.9);
}
.world-card.card-human::after {
  left: 23%; top: 12%; width: 37%; height: 52%;
  border: 4px solid rgba(20,24,30,.95);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: rotate(-5deg);
}

/* Card 2: land + drone */
.world-card.card-field {
  background:
    linear-gradient(180deg, rgba(77,109,138,.72) 0 42%, transparent 42%),
    repeating-linear-gradient(165deg, #334b23 0 8px, #263a1d 8px 15px);
}
.world-card.card-field::before {
  left: 50%; top: 26%; width: 25%; height: 4px;
  background: rgba(20,27,31,.92);
  box-shadow: -10px 8px 0 -1px rgba(20,27,31,.92), 10px 8px 0 -1px rgba(20,27,31,.92);
}
.world-card.card-field::after {
  left: 61%; top: 18%; width: 4px; height: 21%;
  background: rgba(20,27,31,.92);
}

/* Card 3: connected globe */
.world-card.card-globe {
  background: radial-gradient(circle at 50% 49%, rgba(30,120,225,.42), rgba(2,14,32,.84) 56%, rgba(0,5,13,.95) 100%);
}
.world-card.card-globe::before {
  width: 43%; aspect-ratio: 1; left: 29%; top: 11%;
  border: 1px solid rgba(92,182,255,.74);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(23,128,255,.62), inset 0 0 16px rgba(40,147,255,.34);
}
.world-card.card-globe::after {
  left: 35%; right: 35%; top: 31%; height: 1px;
  background: rgba(166,220,255,.75);
  box-shadow: 0 14px rgba(166,220,255,.44), 0 27px rgba(166,220,255,.28);
  transform: rotate(-11deg);
}

/* Card 4: people at horizon */
.world-card.card-people {
  background:
    linear-gradient(180deg, rgba(98,124,145,.56), rgba(55,72,79,.35) 48%, transparent 49%),
    linear-gradient(162deg, transparent 45%, rgba(26,41,34,.95) 46% 63%, rgba(12,25,22,.97) 64%);
}
.world-card.card-people::before {
  left: 28%; top: 36%; width: 7%; aspect-ratio: 1; border-radius: 50%;
  background: #11161b;
  box-shadow: 18px 3px 0 #10151a, 37px -2px 0 #11161b;
}
.world-card.card-people::after {
  left: 26%; top: 47%; width: 12%; height: 32%;
  border-radius: 45% 45% 12% 12%;
  background: #10151a;
  box-shadow: 18px 1px 0 -2px #11171c, 37px -1px 0 -2px #10151a;
}

/* Card 5: glass studio */
.world-card.card-studio {
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(227,238,244,.22) 8.5% 9.1%, transparent 9.4% 48%, rgba(227,238,244,.18) 48.5% 49.1%, transparent 49.4% 88%, rgba(227,238,244,.18) 88.5% 89.1%, transparent 89.4%),
    linear-gradient(180deg, rgba(57,89,109,.55), rgba(9,17,22,.82));
}
.world-card.card-studio::before {
  left: 19%; top: 61%; width: 42%; height: 6%;
  border-radius: 2px;
  background: rgba(209,219,220,.52);
  box-shadow: 25px -19px 0 -7px rgba(78,123,151,.94);
}
.world-card.card-studio::after {
  right: 18%; bottom: 0; width: 11%; height: 55%;
  border-radius: 50% 50% 0 0;
  background: rgba(10,14,18,.95);
}

.world-home.webgl-ready .world-chrome {
  opacity: 1;
}

@media (max-width: 760px) {
  .world-nav-glyphs i { width: 18px; }
  .world-search-glyph, .world-menu-glyph { transform: translateY(-50%) scale(.72); }
  .world-card { border-radius: 7px; }
}