/* ═══════════════════════════════════════════
   WORLD SELECT — portal showcase
   Each .ws-card carries a full world token set via data-world-scope,
   so every var() below resolves to that world's palette and face.
   ═══════════════════════════════════════════ */

.screen--world {
  background: var(--c-bg);
  /* Three stacked footer rows can outgrow a short phone — scroll, never clip. */
  overflow-y: auto;
  overscroll-behavior: contain;
}

.world-select {
  width: 100%;
  max-width: 1200px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 0
           calc(12px + env(safe-area-inset-bottom, 0px));
}

.world-select__head {
  text-align: center;
  padding: 0 16px;
}

.world-select__head h2 {
  font-family: var(--font-display);
  font-size: var(--fs-6);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-bright);
}

.world-select__sub {
  margin-top: 4px;
  color: var(--c-text-dim);
  font-size: var(--fs-3);
}

/* ─── Portal rail ─── */
.world-select__list {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 12px max(16px, calc(50% - 180px));
  scrollbar-width: thin;
  scrollbar-color: var(--c-border) transparent;
}

.ws-card {
  position: relative;
  flex: 0 0 auto;
  width: min(78vw, 340px);
  height: min(58vh, 440px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  scroll-snap-align: center;
  border-radius: 16px;
  border: 1px solid var(--c-border);
  overflow: hidden;
  cursor: pointer;
  background: var(--c-bg);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
@media (hover: hover) {
  .ws-card:hover,
  .ws-card--active {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 24px var(--c-glow);
    border-color: var(--c-accent);
  }
}


/* Scene — the world's own abyss gradients + a wash of its surface tones. */
.ws-card__scene {
  position: absolute;
  inset: 0;
  background: var(--bg-abyss), linear-gradient(180deg, var(--c-bg-warm) 0%, var(--c-bg) 70%);
}

/* Grain so the scene doesn't read as flat gradients. */
.ws-card__scene::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--fog-texture);
  opacity: 0.5;
}

.ws-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.55) 40%);
}

.ws-card__status {
  align-self: flex-start;
  font-size: var(--fs-1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent);
  background: var(--c-accent-dim);
  border: 1px solid var(--c-border);
  border-radius: var(--r-chip);
  padding: 2px 8px;
}

.ws-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-7);
  line-height: 1.05;
  color: var(--c-text-bright);
  text-shadow: 0 0 22px var(--c-glow);
}

.ws-card__sub {
  font-size: var(--fs-2);
  line-height: 1.45;
  color: var(--c-text-dim);
}

.ws-card__mech {
  font-size: var(--fs-2);
  color: var(--c-accent-2, var(--c-accent));
}

.ws-card__progress {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ws-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  font-size: var(--fs-1);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--c-text);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--c-border);
  border-radius: var(--r-chip);
}

.ws-card__chip svg {
  width: 12px;
  height: 12px;
}

.ws-card__chip--relic {
  color: var(--c-gold);
  border-color: var(--c-gold-dim);
}

.ws-card__btn {
  margin-top: 6px;
  padding: 10px 16px;
  font-family: var(--font-ui);
  font-size: var(--fs-3);
  font-weight: 600;
  color: var(--c-text-bright);
  background: var(--c-accent-dim);
  border: 1px solid var(--c-accent);
  border-radius: var(--r-card);
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
@media (hover: hover) {
  .ws-card__btn:hover:not(:disabled) {
    box-shadow: 0 0 16px var(--c-glow);
  }
}


.ws-card__btn:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Locked world — a dark silhouette until essence opens it. */
.ws-card--locked {
  cursor: default;
}

.ws-card--locked .ws-card__scene {
  filter: grayscale(0.7) brightness(0.5);
}

.ws-card--locked .ws-card__name {
  color: var(--c-text-dim);
  text-shadow: none;
}

.world-select__foot {
  display: flex;
  justify-content: center;
  gap: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .ws-card,
  .ws-card__btn { transition: none; }
  .ws-card:hover,
  .ws-card--active { transform: none; }
}

/* ─── World emblem — the card scene finally has a face. ─── */
.ws-card__emblem {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-accent);
  opacity: 0.5;
  pointer-events: none;
}

.ws-card__emblem svg,
.ws-card__emblem svg.gi {
  width: 38%;
  height: 38%;
  filter: drop-shadow(0 0 24px var(--c-glow));
}