/* Orli v3 site · Worlds (worlds.html)
   ---------------------------------------------------------------------------
   The living worlds (../../living-worlds) in the site frame. The stage fills
   the window under the shell's header, less one short band that says how to
   move and leads down to "Who lives where". The guide card sits on the stage,
   on flat ground: left on a wide window, a sheet at the foot of the stage on
   a narrow one. The 3D frames each island in the space the card leaves.

   Adapted from living-worlds/css/living.css for the site (that file keys on
   its own page's header and tier attributes); system tokens only.
   ------------------------------------------------------------------------- */

.wv {
  --wv-sky: #f4d6c2;                    /* the generated sky's mid tone (living worlds), shown before the picture */
  --wv-card-w: min(460px, 36vw);
  /* the card lines up with the page's content grid (1200), like every
     section on the site; only the header and footer run wider */
  --wv-card-x: max(var(--o-gutter), (100% - var(--o-max)) / 2);
  --wv-band: var(--o-space-9);
  position: relative;
}

/* ================================================================ stage */
.wv-stage {
  position: relative; isolation: isolate;
  height: calc(100svh - var(--o-header-h) - var(--wv-band));
  min-height: 520px;
  overflow: clip;
  background: var(--wv-sky) url("../../living-worlds/assets/sky/sky.webp") center / cover no-repeat;
  /* A finger dragging up or down scrolls the page (native scroll); sideways
     looks around. A mouse drags in any direction. */
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* The focus ring sits above the canvas and the pictures (an outline on the
   stage itself would paint under them): the 3 px #1F3D32 ring with a cream
   edge either side, as Find the Orli's field draws it, so it shows over the
   sky, the islands and the clouds alike. */
.wv-stage:focus-visible { outline: none; }
.wv-stage::after {
  content: ""; position: absolute; inset: 6px; z-index: 5;
  border-radius: var(--o-r-control);
  pointer-events: none; opacity: 0;
}
.wv-stage:focus-visible::after {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--o-paper), inset 0 0 0 3px var(--o-focus), inset 0 0 0 5px var(--o-paper);
}
.wv-stage[data-pointer="grab"] { cursor: grab; }
.wv-stage[data-pointer="grabbing"] { cursor: grabbing; }
.wv-stage[data-pointer="island"] { cursor: pointer; }
.wv-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 500ms var(--o-ease); }
.wv[data-mode="live"][data-ready] .wv-canvas { opacity: 1; }
.wv:not([data-mode="live"]) .wv-canvas { display: none; }
.wv[data-mode="live"] .wv-pictures { display: none; }
/* until the page knows its mode, nothing loads under the stage's own sky */
html.js .wv:not([data-mode]) .wv-pictures { display: none; }

/* The pictures: the static tier (3D off, Still motion, no WebGL), and the
   page without script. Each is fitted into the space the card leaves. */
.wv-pictures { position: absolute; inset: 0; }
.wv-pic {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity 420ms var(--o-ease);
}
.wv-pic.is-on { opacity: 1; }
.wv-pic--island {
  box-sizing: border-box; object-fit: contain;
  padding: 5% 3% 5% calc(var(--wv-card-x) + var(--wv-card-w) + var(--o-gutter));
}
/* The overview picture (the islands in their own sky) sits in the space the
   card leaves, its sky fading into the stage's at the edges. */
.wv-pic--overview {
  inset: 50% auto auto calc(var(--wv-card-x) + var(--wv-card-w) + var(--o-gutter));
  width: calc(100% - var(--wv-card-x) - var(--wv-card-w) - 2 * var(--o-gutter)); height: auto; max-height: 94%; aspect-ratio: 16 / 9;
  translate: 0 -50%; object-fit: contain;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
html:not(.js) .wv-pic--overview { opacity: 1; }

/* The paper name tag under the island you point at. */
.wv-tag {
  position: absolute; z-index: 3; left: 0; top: 0;
  --pill-bg: var(--o-paper);
  box-shadow: 0 1px 2px rgb(47 46 43 / .12), 0 6px 18px -6px rgb(60 57 50 / .25);
  translate: -50% 0;
  pointer-events: none;
  transition: opacity var(--o-t-interact) var(--o-ease);
}
.wv-tag[hidden] { display: inline-flex !important; opacity: 0; }

/* A short veil over a cut under Reduced motion (none under Still). */
.wv-veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--wv-sky); opacity: 0; }
.wv-veil.is-on { opacity: 1; }
.wv-veil.is-fading { transition: opacity 260ms var(--o-ease); }

/* ================================================================= card */
/* Until the script knows what the card shows (the address can name a world,
   or its close-up), it waits unseen, so it never swaps in view. */
html.js .wv:not([data-state]) .wv-card, .wv[data-boot] .wv-card { visibility: hidden; }
.wv-card {
  position: absolute; z-index: 4;
  left: var(--wv-card-x); bottom: var(--o-space-6);
  width: var(--wv-card-w);
  max-height: calc(100% - 2 * var(--o-space-6));
  overflow: auto; overscroll-behavior: contain;
  padding: var(--o-space-6) var(--o-space-6) var(--o-space-5);
  background: var(--o-surface);
  border-radius: var(--o-r-card);
  box-shadow: var(--o-shadow-raised);
  color: var(--o-ink);
  scrollbar-width: thin;
}
.wv-card:focus-visible { outline-offset: 3px; }
.wv-card__view { display: flex; flex-direction: column; align-items: flex-start; }
.wv-card__title {
  margin-block-start: var(--o-gap-tight);
  font: var(--o-weight-title) var(--o-text-title) / var(--o-lh-title) var(--o-font-ui);
  letter-spacing: var(--o-track-title); text-wrap: balance;
}
.wv-card__lead {
  margin-block-start: var(--o-gap);
  font-size: var(--o-text-body); line-height: var(--o-lh-body); color: var(--o-ink-2);
  text-wrap: pretty;
}

/* "Nova's world", a dot in the world's accent. The one handwritten thing in
   view is the world's name under it. */
.wv-card__who {
  display: inline-flex; align-items: center; gap: var(--o-space-2);
  font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui);
  color: var(--o-ink-2);
}
.wv-card__who::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--world-accent); }
.wv-card__name {
  align-self: stretch;                /* so a long name can measure its room */
  min-height: 1.25em;
  margin-block-start: var(--o-space-2);
  color: var(--world-deep);
  font: var(--o-weight-title) var(--o-text-title) / var(--o-lh-title) var(--o-font-ui);
  letter-spacing: var(--o-track-title);
  white-space: nowrap;
}
.wv-card__name .hand { --hand-size: 1em; }
.wv-card__name:focus { outline: none; }
.wv-card__actions { margin-block-start: var(--o-gap-loose); gap: var(--o-space-3); }
/* the close-up couldn't load: one quiet line under the buttons */
.wv-card__note {
  margin-block-start: var(--o-space-3);
  font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui);
  color: var(--o-ink-2);
}

/* Travel: back, count, next, all worlds. Quiet, under a hairline. */
.wv-travel {
  display: flex; align-items: center; gap: var(--o-space-2);
  align-self: stretch;
  margin-block-start: var(--o-space-5); padding-block-start: var(--o-space-3);
  border-block-start: 1px solid var(--o-line);
}
.wv-travel__count {
  min-width: 3.5em; text-align: center;
  font: var(--o-weight-ui) var(--o-text-small) / 1 var(--o-font-ui); color: var(--o-ink-2);
  font-variant-numeric: tabular-nums;
}
.wv-travel__all {
  margin-inline-start: auto; min-height: var(--o-target); padding-inline: var(--o-space-2);
  background: none; border: 0; cursor: pointer;
  font: var(--o-weight-ui) var(--o-text-small) / 1 var(--o-font-ui);
}
.wv-arrow {
  display: block; width: 18px; height: 11px; background: currentColor;
  -webkit-mask: url("../../../v2/system/assets/doodles/arrow-right.svg") center / contain no-repeat;
          mask: url("../../../v2/system/assets/doodles/arrow-right.svg") center / contain no-repeat;
}
.wv-arrow--back { scale: -1 1; }

/* The world list (overview): each island as a cut-out, like the header's
   Worlds flyout, its name and host beside it. */
.wv-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--o-space-1) var(--o-space-2);
  align-self: stretch;
  margin: var(--o-space-5) calc(-1 * var(--o-space-2)) 0; padding: 0; list-style: none;
}
.wv-world {
  display: flex; align-items: center; gap: var(--o-space-2);
  width: 100%; min-height: 52px; padding: var(--o-space-1);
  border: 0; border-radius: var(--o-r-control);
  background: none; color: var(--o-ink); text-align: start; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--o-t-interact) var(--o-ease);
}
@media (hover: hover) and (pointer: fine) { .wv-world:hover { background: var(--o-warm); } }
.wv-world[data-hot] { background: var(--o-warm); }
.wv-world:focus-visible { outline-offset: 0; }
.wv-world__art { position: relative; flex: none; width: 48px; aspect-ratio: 10 / 7; }
.wv-world__art img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.wv-world__text { display: grid; gap: 1px; min-width: 0; }
.wv-world__name { font: var(--o-weight-ui) var(--o-text-small) / 1.25 var(--o-font-ui); text-wrap: balance; }
.wv-world__host { font-size: var(--o-text-small); line-height: 1.25; color: var(--o-ink-2); }

/* ========================================================= explore mode
   Go closer: the island close up (../explore) on a layer beside the stage,
   in the stage's own box, so its pointer events and its role="application"
   never nest in the living worlds'. The card (z-index 4) stays on top as its
   guide: the island is framed in the space the card leaves (explore's inset). */
.wv .wv-explore {
  position: absolute; inset: 0 0 auto; z-index: 3;
  height: calc(100svh - var(--o-header-h) - var(--wv-band)); min-height: 520px;
  pointer-events: none;               /* only an island on show takes the pointer */
}
.wv .wv-explore[hidden] { display: none; }
/* Each mount is its own element in the layer (the island explore draws in),
   so one that's been overtaken can finish loading out of sight. */
.wv .wv-explore__island {
  position: absolute; inset: 0;
  pointer-events: auto;
  transition: opacity var(--o-t-enter) var(--o-ease);
}
/* mounting: laid out (it measures itself) but not yet seen or reachable */
.wv .wv-explore__island[data-phase="prep"] { opacity: 0; visibility: hidden; pointer-events: none; }
.wv .wv-explore__island[data-phase="out"] { opacity: 0; pointer-events: none; }
html:is([data-motion="reduced"], [data-motion="still"]) .wv .wv-explore__island { transition: none; }
@media (prefers-reduced-motion: reduce) { html:not([data-motion]) .wv .wv-explore__island { transition: none; } }
/* its focus ring sits over the canvas, as the stage's does */
.wv .wv-explore__island:focus-visible { outline: none; }
.wv .wv-explore__island::after {
  content: ""; position: absolute; inset: 6px; z-index: 5;
  border-radius: var(--o-r-control); pointer-events: none; opacity: 0;
}
.wv .wv-explore__island:focus-visible::after {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--o-paper), inset 0 0 0 3px var(--o-focus), inset 0 0 0 5px var(--o-paper);
}

/* The loader (Little lift Orla) on a paper chip in the middle of the space
   the card leaves: never over the card, never words straight on a busy
   picture. After 10 s it says it's taking longer, with Try again and the
   picture instead. */
.wv-stage > .wv-loader {
  inset: auto; left: var(--wv-lx, 50%); top: var(--wv-ly, 50%); translate: -50% -50%;
  gap: var(--o-space-2);
  width: max-content; max-inline-size: min(24rem, calc(100% - 2 * var(--o-space-4)));
  padding: var(--o-space-4) var(--o-space-5) var(--o-space-3);
  border-radius: var(--o-r-card);
  background: var(--o-paper); color: var(--o-ink-2);
  box-shadow: 0 1px 2px rgb(60 57 50 / .08), 0 10px 28px -10px rgb(60 57 50 / .32);
}
.wv-stage > .wv-loader .s-loader__more { padding-block-start: var(--o-space-1); }
.wv-stage > .wv-loader .s-loader__more p { color: var(--o-ink); }

/* The card while exploring: the name, one lead, Play and Step back, then,
   under a hairline, where you are, the places and who's exploring. The
   travel row rests until you step back. */
.wv[data-state="moment"] .wv-travel { display: none; }
.wv[data-state="moment"] .wv-card { padding-block: var(--o-space-5) var(--o-space-4); }
/* more below in the card (a short window): a soft fade at its foot says so */
.wv-card[data-more]::after {
  content: ""; position: sticky; bottom: 0; z-index: 1; display: block;
  height: var(--o-space-7); margin: calc(-1 * var(--o-space-7)) calc(-1 * var(--o-space-5)) 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--o-surface) 0%, transparent), var(--o-surface) 85%);
  pointer-events: none;
}
.wv[data-state="moment"] .wv-card__lead { margin-block-start: var(--o-space-3); }
.wv[data-state="moment"] .wv-card__actions { margin-block-start: var(--o-space-5); }
.wv-xp {
  display: flex; flex-direction: column; gap: var(--o-space-3);
  align-self: stretch;
  margin-block-start: var(--o-space-4); padding-block-start: var(--o-space-3);
  border-block-start: 1px solid var(--o-line);
}
.wv-xp[hidden], .wv-xp [hidden] { display: none; }
.wv-xp__now {
  margin: 0; padding: var(--o-space-2) var(--o-space-3);
  border-radius: var(--o-r-control); background: var(--world-wash);
  color: var(--world-deep);
  font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui);
  text-wrap: pretty;
}
.wv-xp__group { margin: 0; padding: 0; border: 0; min-width: 0; }
.wv-xp__sub {
  display: flex; gap: var(--o-space-2); align-items: baseline;
  margin: 0 0 var(--o-space-1); padding: 0;
  font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui);
  color: var(--o-ink-2);
}
.wv-xp__sub b { font-weight: inherit; color: var(--world-deep); }

/* Places (explore's placesList), in two columns like the world list: Enter
   walks there, focus marks the spot on the island, and the one you're at
   is in the world's wash with its dot filled. */
.wv .wv-xp__places {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--o-space-1);
  margin: 0 calc(-1 * var(--o-space-2)); padding: 0; list-style: none;
}
.wv .ex-place {
  display: flex; align-items: center; gap: var(--o-space-2);
  width: 100%; min-height: var(--o-target); padding: var(--o-space-1) var(--o-space-2);
  border: 0; border-radius: var(--o-r-control); background: none; color: var(--o-ink);
  font: var(--o-weight-ui) var(--o-text-small) / 1.25 var(--o-font-ui); text-align: start; text-wrap: balance;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--o-t-interact) var(--o-ease);
}
.wv .ex-place__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--world-accent); }
.wv .ex-place__label { min-width: 0; }
.wv .ex-place__here { display: none; }
@media (hover: hover) and (pointer: fine) { .wv .ex-place:hover { background: var(--o-warm); } }
.wv .ex-place:focus-visible { outline-offset: 0; }
.wv .ex-place[aria-current="location"] { background: var(--world-wash); color: var(--world-deep); }
.wv .ex-place[aria-current="location"] .ex-place__dot { background: var(--world-accent); }

/* Who's exploring: the cast (never the host) as a row of faces, radio
   buttons named in words; the one exploring wears the world's ring. Or your
   own Orli, named, when you've made one. */
.wv-xp__chips { display: flex; flex-wrap: wrap; gap: var(--o-space-2); }
.wv .ex-chip {
  position: relative; flex: none; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--o-warm);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--o-t-interact) var(--o-ease), box-shadow var(--o-t-interact) var(--o-ease);
}
.wv .ex-chip input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; border-radius: 50%; cursor: pointer; }
.wv .ex-chip img { width: 40px; height: 36px; object-fit: contain; pointer-events: none; }
.wv .ex-chip span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .wv .ex-chip:hover { background: var(--o-warm-high); } }
.wv .ex-chip:has(input:checked) { background: var(--world-wash); box-shadow: inset 0 0 0 3px var(--world-accent); }
.wv .ex-chip:has(input:focus-visible) { outline: var(--o-focus-ring); outline-offset: var(--o-focus-offset); }
.wv-xp__mine {
  display: flex; align-items: center; gap: var(--o-space-3); margin: 0; padding-block: var(--o-space-1);
  font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui); color: var(--o-ink);
}
.wv-xp__mine-art { flex: none; display: block; width: 48px; height: 48px; }
.wv-xp__mine-art svg { display: block; width: 100%; height: 100%; overflow: hidden; }   /* the drawing fits its box, hat and all, as Your Orli's own seats do */
.wv-xp__mine-art:empty { display: none; }

/* ================================================================= band
   One line under the stage, like Find the Orli's: how to move, and the way
   down to the list. */
.wv-band {
  min-height: var(--wv-band);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--o-space-2) var(--o-space-5); padding-block: var(--o-space-4);
}
.wv-band__help { color: var(--o-ink-2); }
.wv-band__orli { margin-inline-start: auto; }
.wv-band__link { display: inline-flex; align-items: center; min-height: var(--o-target); font: var(--o-weight-ui) var(--o-text-body) / 1.3 var(--o-font-ui); }

/* ======================================================= who lives where
   Every world in a line: its island, its name, who lives there and what the
   place is like, then the two ways in. Neutral: the artwork carries the
   colour. Two columns on a wide window. */
.wv-who { padding-block-start: var(--o-space-8); }
.wv-who__list {
  display: grid; gap: var(--o-space-6) var(--o-grid-gap);
  grid-template-columns: minmax(0, 1fr);
  margin: 0; padding: 0; list-style: none;
}
@media (min-width: 900px) { .wv-who__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--o-space-7); } }
html:not([data-verify="on"]) [data-verify-only] { display: none; }
.wv-who__item { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: var(--o-space-5); align-items: start; }
.wv-who__art { position: relative; display: block; aspect-ratio: 10 / 7; }
.wv-who__art::before {
  content: ""; position: absolute; left: 16%; right: 16%; bottom: -3%; height: 12%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(60 57 50 / .2), rgb(60 57 50 / 0));
}
.wv-who__art img { position: relative; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.wv-who__text { display: grid; gap: var(--o-space-1); min-width: 0; padding-block-start: var(--o-space-1); }
.wv-who__name { font: var(--o-weight-title) var(--o-text-heading) / var(--o-lh-heading) var(--o-font-ui); letter-spacing: var(--o-track-heading); text-wrap: balance; }
.wv-who__meta { font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui); color: var(--o-ink-2); }
.wv-who__line { margin-block-start: var(--o-space-1); color: var(--o-ink-2); max-inline-size: 46ch; text-wrap: pretty; }
/* One way in per world (Visit, with the arrow), then a quieter pair: its
   Orli's page and its game, small and in the second ink. */
.wv-who__links { margin-block-start: calc(var(--o-space-1) - 12px); }   /* the arrow link's own 12 px keeps its 44 px target */
.wv-who__more { display: flex; flex-wrap: wrap; gap: var(--o-space-1) var(--o-space-5); margin-block-start: 0; }
.wv-who__quiet {
  display: inline-flex; align-items: center; min-height: 32px;
  font: var(--o-weight-ui) var(--o-text-small) / 1.3 var(--o-font-ui);
  color: var(--o-ink-2);
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 32%, transparent);
}

/* ================================================================ phones
   Under 900px the card is a sheet at the foot of the stage. */
@media (max-width: 899.98px) {
  .wv { --wv-card-w: auto; --wv-band: var(--o-space-8); }
  .wv-stage { min-height: 480px; }
  .wv-card {
    left: var(--o-space-3); right: var(--o-space-3); bottom: max(var(--o-space-3), env(safe-area-inset-bottom));
    width: auto; max-height: 58%;
    padding: var(--o-space-5) var(--o-space-5) var(--o-space-4);
  }
  .wv-card__title { font-size: var(--o-text-heading); line-height: var(--o-lh-heading); letter-spacing: var(--o-track-heading); margin-block-start: var(--o-space-1); }
  .wv-card__lead { margin-block-start: var(--o-space-2); }
  .wv-card__name { font-size: var(--o-text-heading); }
  .wv-card__name .hand { --hand-size: 1.2em; }
  .wv-card__actions { margin-block-start: var(--o-space-4); }
  .wv-card__actions .o-btn { --h: var(--o-btn-h-sm); --px: 18px; --fs: .9375rem; }
  .wv-travel { margin-block-start: var(--o-space-3); padding-block-start: var(--o-space-2); }
  /* the list becomes one row that scrolls sideways */
  .wv-list {
    display: flex; gap: var(--o-space-2); overflow-x: auto; scroll-snap-type: x proximity;
    margin: var(--o-space-4) calc(-1 * var(--o-space-5)) 0; padding: 2px var(--o-space-5) var(--o-space-1);
    scroll-padding-inline: var(--o-space-5); scrollbar-width: none;
  }
  .wv-list::-webkit-scrollbar { display: none; }
  .wv-list li { flex: none; scroll-snap-align: start; }
  .wv-world { width: auto; min-height: var(--o-target); padding: 0 var(--o-space-4) 0 var(--o-space-2); background: var(--o-warm); border-radius: var(--o-r-pill); gap: var(--o-space-2); }
  .wv-world__art { width: 44px; }
  .wv-world__host { display: none; }
  .wv-world__name { white-space: nowrap; }
  .wv-pic--island { padding: 4% 3% 62% 3%; }
  .wv-pic--overview {
    inset: 16% auto auto 0; width: 100%; translate: none; max-height: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
            mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  }
  .wv-band { padding-block: var(--o-space-3); }
  .wv-band__help { flex: 1 1 14rem; }
  .wv-band__orli { order: 3; }
  .wv .wv-explore { min-height: 480px; }
  /* exploring on a phone: the island keeps most of the stage. The paper tag
     on the island says where you are; the places and the cast each scroll
     sideways in one row. */
  .wv[data-state="moment"] .wv-card__who { display: none; }
  .wv[data-state="moment"] .wv-card__name { margin-block-start: 0; }
  .wv[data-state="moment"] .wv-card__actions { margin-block-start: var(--o-space-3); }
  .wv-xp { gap: var(--o-space-2); margin-block-start: var(--o-space-3); padding-block-start: var(--o-space-2); }
  .wv-xp__now { display: none; }
  .wv-xp__sub { margin-block-end: 0; }
  .wv .wv-xp__places, .wv-xp__chips {
    display: flex; flex-wrap: nowrap; gap: var(--o-space-2); overflow-x: auto; overscroll-behavior-x: contain;
    margin: 0 calc(-1 * var(--o-space-5)); padding: 2px var(--o-space-5) 4px;
    scroll-padding-inline: var(--o-space-5); scroll-snap-type: x proximity; scrollbar-width: none;
  }
  .wv-xp__places::-webkit-scrollbar, .wv-xp__chips::-webkit-scrollbar { display: none; }
  .wv-xp__places li { flex: none; scroll-snap-align: start; }
  .wv .ex-chip { scroll-snap-align: start; }
  .wv .ex-place { width: auto; white-space: nowrap; padding-inline: var(--o-space-3) var(--o-space-4); background: var(--o-warm); border-radius: var(--o-r-pill); }
}
/* A mid-size window (900–1279px): a slightly wider card, and the list as
   names alone so none of them breaks. */
@media (min-width: 900px) and (max-width: 1279.98px) {
  .wv { --wv-card-w: min(400px, 40vw); }
  /* Who's exploring: seven faces (eight Orlis, less the host) can't share
     one row of this card, so they sit four over three, never six and one */
  .wv-xp__chips:has(> .ex-chip:nth-child(7)) { display: grid; grid-template-columns: repeat(4, 48px); }
  .wv-world__art { display: none; }
  .wv-world { min-height: var(--o-target); padding-inline: var(--o-space-2); }
  /* the world's game and Go closer / Step back stay on one line */
  .wv-card__actions .o-btn { --h: var(--o-btn-h-sm); --px: 18px; --fs: .9375rem; }
}
/* A short wide window while exploring (a school laptop at 1366 × 768): the
   world's name leads without its kicker, and the paper tag on the island
   says where you are, so the places get the room. */
@media (min-width: 900px) and (max-height: 820px) {
  .wv[data-state="moment"] .wv-card__who, .wv-xp__now { display: none; }
  .wv[data-state="moment"] .wv-card__name { margin-block-start: 0; }
}
@media (min-width: 600px) and (max-width: 899.98px) {
  .wv-card { right: auto; width: min(480px, calc(100% - 2 * var(--o-space-3))); left: var(--o-gutter); bottom: var(--o-gutter); }
}
@media (max-width: 599.98px) {
  .wv-who__item { grid-template-columns: 104px minmax(0, 1fr); gap: var(--o-space-4); }
}
/* (a phone: a smaller island, so the words get about 34 characters a line;
   spacing rules, 2 Nov) */
@media (max-width: 479px) {
  .wv-who__item { grid-template-columns: 80px minmax(0, 1fr); }
}
/* A short window (a school laptop at 1366 × 768, a phone held sideways):
   the band gets slimmer so the stage keeps its room. */
@media (max-height: 760px) { .wv { --wv-band: var(--o-space-8); } }

/* ======================================================== motion levels */
html[data-motion="still"] :is(.wv-pic, .wv-tag, .wv-canvas, .wv-world, .ex-place, .ex-chip) { transition: none; }
@media (prefers-reduced-motion: reduce) { html:not([data-motion]) .wv-pic { transition-duration: 200ms; } }

@media (forced-colors: active) {
  .wv-stage:focus-visible::after { box-shadow: none; border: 3px solid Highlight; }
  .wv-card { border: 1px solid CanvasText; }
  .wv-arrow { background: ButtonText; }
  .wv-who__art::before { display: none; }
  .wv-world:is(:hover, [data-hot]) { outline: 2px solid Highlight; }
  .wv .wv-explore__island:focus-visible::after { box-shadow: none; border: 3px solid Highlight; }
  .wv-stage > .wv-loader { border: 1px solid CanvasText; }
  .wv .ex-place, .wv .ex-chip { border: 1px solid ButtonText; }
  .wv .ex-place[aria-current="location"], .wv .ex-chip:has(input:checked) { outline: 2px solid Highlight; box-shadow: none; }
  .wv .ex-place__dot { border-color: ButtonText; }
  .wv-xp__now { border: 1px solid CanvasText; }
}