/* Worlds (/worlds): the listing and a world's page. A world's page is
   dark, to sit around the world, which is drawn on #1b1d22; /worlds itself
   is light (.wd-sunny, below). */
.wd, .wd-index {
  --wd-bg: #14161b;
  --wd-panel: #1b1e24;
  --wd-raise: #23262e;
  --wd-hover: #2c3039;
  --wd-float: #262a33; /* panels that float over the page (Share) */
  --wd-line: #2c3038;
  --wd-text: #eceef2;
  --wd-muted: #9aa0ab;
  --wd-accent: #5fe36a;
  /* focus rings, white rather than the accent green */
  --wd-focus: rgba(255, 255, 255, 0.8);
  --wd-accent-ink: #13301a;
  --wd-me: #2f6f3a;
  --wd-warn: #ffb3a6;
  --wd-danger: #ff8a7a;
  color: var(--wd-text);
  background: var(--wd-bg);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.wd *, .wd-index * { box-sizing: border-box; }
html.planetarium-page body:has(.wd), html.planetarium-page body:has(.wd-index) { background: #14161b; }

.wd-button {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 0; border-radius: 9px;
  background: var(--wd-raise); color: var(--wd-text); font: 600 13px system-ui, -apple-system, sans-serif;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.wd-button:hover { background: var(--wd-hover); }
.wd-button:disabled { opacity: 0.6; cursor: default; }
.wd-button.wd-primary { background: var(--wd-accent); color: var(--wd-accent-ink); }
.wd-button.wd-primary:hover { background: #79ec83; }
.wd-button:focus-visible, .wd-send:focus-visible, .wd-card:focus-visible { outline: 2px solid var(--wd-focus); outline-offset: 2px; }
/* On a world, a ring only once Tab has been pressed (world_controller.js
   wd-tabbing; a click takes it away): a button clicked keeps the focus, and
   the arrow keys pressed next to walk would otherwise ring it */
.wd:not(.wd-tabbing) :focus-visible:not(input, textarea) { outline: none !important; }

/* ---- The listing ---- */
.wd-index { min-height: 100vh; padding: 0 16px 48px; }
.wd-nav { display: flex; justify-content: space-between; align-items: baseline; max-width: 1180px; margin: 0 auto; padding: 18px 0; }
.wd-wordmark { color: var(--wd-text); font-weight: 700; font-size: 18px; text-decoration: none; letter-spacing: -0.01em; }
.wd-labs { color: var(--wd-muted); font-size: 13px; text-decoration: none; }
.wd-labs:hover { color: var(--wd-text); }
.wd-hero { max-width: 1180px; margin: 28px auto 12px; }
.wd-hero h1 { margin: 0; font-size: clamp(34px, 6vw, 56px); line-height: 1.05; letter-spacing: -0.03em; }
.wd-hero p { max-width: 640px; margin: 14px 0 0; color: var(--wd-muted); font-size: 16px; }
.wd-section { max-width: 1180px; margin: 40px auto 0; }
.wd-section h2 { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wd-muted); }
.wd-section-text { max-width: 640px; margin: -6px 0 16px; color: var(--wd-muted); font-size: 14px; }
.wd-button.wd-big { display: inline-block; padding: 12px 22px; font-size: 16px; text-decoration: none; }
.wd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.wd-card { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: var(--wd-panel); color: inherit; text-decoration: none; border: 1px solid var(--wd-line); transition: transform 0.15s, border-color 0.15s; }
.wd-card:hover { transform: translateY(-2px); border-color: #3d6f46; }
.wd-card-form { display: flex; margin: 0; }
.wd-tile { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wd-tile > .wd-card, .wd-tile > .wd-card-form { flex: 1; }
/* Show more under your worlds: once open, the rest follow on, with Show fewer (the same button) under them */
.wd-more > summary, .wd-fewer { display: inline-block; margin-top: 16px; padding: 7px 12px; border: 1px solid var(--wd-line); border-radius: 4px; color: var(--wd-text); font: 13px system-ui, sans-serif; list-style: none; cursor: pointer; }
.wd-more > summary::-webkit-details-marker { display: none; }
.wd-fewer { background: none; }
.wd-more > summary:hover, .wd-fewer:hover { border-color: rgba(111, 243, 216, 0.5); }
.wd-more > summary:focus-visible, .wd-fewer:focus-visible { outline: 2px solid var(--wd-focus); outline-offset: 2px; }
.wd-more[open] > summary { display: none; }
.wd-more > .wd-grid { margin-top: 16px; }
button.wd-card { width: 100%; padding: 0; font: inherit; text-align: left; cursor: pointer; }
.wd-card-image { display: block; aspect-ratio: 16 / 9; background: var(--wd-raise); overflow: hidden; }
.wd-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wd-card-body { display: flex; flex-direction: column; gap: 4px; padding: 11px 13px 14px; }
.wd-card-name { font-weight: 650; font-size: 15px; }
.wd-badge-public { background: rgba(95, 227, 106, 0.16); color: #9fe3a6; }
.wd-card-text { color: var(--wd-muted); font-size: 13px; }
.wd-badge { align-self: flex-start; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--wd-raise); color: var(--wd-muted); }
.wd-badge-unlisted { background: rgba(120, 170, 255, 0.16); color: #a9c6ff; }
.wd-footer { max-width: 1180px; margin: 48px auto 0; color: var(--wd-muted); font-size: 13px; }

/* ---- /worlds, its pricing, credits, people's pages and the 404 (.wd-sunny):
   light and minimal. An off-white page in near-black ink, one green for
   what to do, flat cards that are just their picture and words, and Plus
   Jakarta Sans throughout. /worlds itself opens on a banner: a picture of
   the first ready-made world with the headline over it (since 2026-11-09;
   before, a toon sky with hills, a meadow and signposts). The admin pages
   keep the plain listing styles above. ---- */
.wd-sunny {
  --wd-ink: #17181c;
  --wd-ink-soft: #5e6068;
  --wd-ground: #fafaf7;
  --wd-field: #efefea; /* inputs and quiet buttons */
  --wd-rule: #e4e4de;
  --wd-go: #1f9d55;
  --wd-go-hover: #188447;
  --wd-go-ink: #1f7a4a; /* green words on the page */
  --wd-text: var(--wd-ink);
  --wd-muted: var(--wd-ink-soft);
  --wd-line: var(--wd-rule);
  --wd-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wd-gutter: 40px;
  padding: 0 0 40px;
  color: var(--wd-ink);
  background: var(--wd-ground);
  font: 15px/1.5 var(--wd-font);
}
html:has(.wd-sunny) { color-scheme: light; background: #fafaf7; }
html.planetarium-page body:has(.wd-sunny) { background: #fafaf7; }
.wd-sunny ::selection { background: #d9f0e2; color: var(--wd-ink); }
.wd-sunny :focus-visible { outline: 2px solid var(--wd-ink); outline-offset: 2px; }

/* the top of every light page: the nav, then (on all but /worlds) the page's title */
.wd-top { position: relative; z-index: 5; max-width: 1200px; margin: 0 auto; padding: 0 var(--wd-gutter); }
.wd-sunny .wd-nav { display: flex; align-items: center; gap: 16px 24px; max-width: none; margin: 0; padding: 22px 0; }
.wd-sunny .wd-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--wd-ink); font-size: 17px; font-weight: 800; letter-spacing: -0.01em; text-decoration: none; }
/* "Emergent Mind Worlds", one name on one line */
.wd-brand-name { display: flex; align-items: baseline; gap: 0.28em; white-space: nowrap; }
/* the mark: a sun over a hill (worlds/_mark) */
.wd-sun { display: block; flex: none; width: 22px; height: 22px; color: var(--wd-ink); }
.wd-nav-links { display: flex; gap: 22px; align-items: center; margin-left: auto; }
.wd-nav-links > a, .wd-account > summary { white-space: nowrap; }
.wd-nav-icon { display: inline-grid; place-items: center; }
.wd-nav-icon svg { display: block; }
.wd-sunny .wd-labs { color: var(--wd-ink); font-size: 15px; font-weight: 600; text-decoration: none; }
.wd-sunny .wd-labs:hover { color: var(--wd-go-ink); }
/* Plans and Credits, come from a world: the way back to it, over the title */
.wd-back-to-world { display: inline-block; margin-bottom: 10px; color: var(--wd-ink-soft); font-size: 14px; font-weight: 600; text-decoration: none; }
.wd-back-to-world:hover { color: var(--wd-go-ink); }
.wd-sunny .wd-nav-icon { color: var(--wd-ink-soft); }
.wd-sunny .wd-signup { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 12px; background: var(--wd-ink); color: #fff; }
.wd-sunny .wd-signup:hover { background: #2c2e35; color: #fff; }
/* the account menu: a details that opens a card under it */
.wd-account { position: relative; }
.wd-account > summary { list-style: none; cursor: pointer; }
.wd-account > summary::-webkit-details-marker { display: none; }
.wd-account > summary::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.wd-account-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; display: flex; flex-direction: column; min-width: 190px; padding: 6px; border: 1px solid var(--wd-rule); border-radius: 14px; background: #fff; box-shadow: 0 14px 34px rgba(23, 24, 28, 0.12); }
.wd-account-menu a, .wd-account-menu button { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: none; color: var(--wd-ink); font: 600 14.5px/1.2 var(--wd-font); text-align: left; text-decoration: none; cursor: pointer; }
.wd-account-menu a:hover, .wd-account-menu button:hover { background: var(--wd-field); }
.wd-account-menu form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--wd-rule); }

/* Search, after the name: a quiet field, its results in a card right under it (world_search_controller.js) */
.wd-search { position: relative; flex: 0 1 228px; min-width: 0; }
.wd-search-form { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 12px; background: var(--wd-field); color: var(--wd-ink-soft); }
.wd-search-form:focus-within { background: #fff; box-shadow: inset 0 0 0 2px var(--wd-ink); }
.wd-search-icon { flex: none; }
.wd-search-form input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; color: var(--wd-ink); font: 500 15px/1 var(--wd-font); outline: none; }
.wd-search-form input:focus-visible { outline: none; }
.wd-search-form input::placeholder { color: var(--wd-ink-soft); }
.wd-search-form input::-webkit-search-cancel-button { cursor: pointer; }
.wd-search-results { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; width: min(460px, calc(100vw - 32px)); max-height: min(440px, 70vh); overflow-y: auto; padding: 8px; border: 1px solid var(--wd-rule); border-radius: 16px; background: #fff; box-shadow: 0 18px 40px rgba(23, 24, 28, 0.14); color: var(--wd-ink); }
.wd-search-results[hidden] { display: none; }
.wd-search-count, .wd-search-none { margin: 4px 8px 8px; color: var(--wd-ink-soft); font-size: 13.5px; font-weight: 600; }
.wd-search-none { margin-bottom: 4px; }
.wd-search-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.wd-search-item { display: flex; align-items: flex-start; gap: 12px; padding: 8px; border-radius: 11px; color: inherit; text-decoration: none; }
.wd-search-item:hover, .wd-search-item:focus-visible { background: var(--wd-field); outline: none; }
.wd-search-item img { flex: none; width: 96px; height: 54px; object-fit: cover; border-radius: 8px; background: var(--wd-field); }
.wd-search-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wd-search-name { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-search-mine { color: var(--wd-ink-soft); font-size: 12.5px; font-weight: 600; }
.wd-search-about { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; color: var(--wd-ink-soft); font-size: 13.5px; line-height: 1.4; }

/* a page's title and what it's for (Pricing, Your credits, someone's page, the 404) */
.wd-sunny .wd-hero { display: block; max-width: none; margin: 28px 0 0; }
.wd-sunny .wd-hero h1 { margin: 0; color: var(--wd-ink); font-size: clamp(34px, 4vw, 48px); line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; }
.wd-sunny .wd-hero-text { max-width: 36em; margin: 14px 0 0; text-wrap: balance; color: #4a4c55; font-size: 16.5px; line-height: 1.55; }
.wd-hero-actions, .wd-sunny .wd-lost-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }
.wd-hero-actions form { margin: 0; }
/* a Copy button is a form (WorldsController#copy) that lays out like the links beside it */
.wd-copy-form { display: contents; }

/* /worlds: the first ready-made world in a wide frame, its people saying
   hello, with the headline and what to do over its darker left side. The
   whole picture opens the world. On a computer the frame is 21:9, so the
   16:9 picture is cut a little at the top and bottom: --scale and --off map
   a point on the picture (Worlds::HERO_SAYS) to the frame. */
.wd-banner { position: relative; width: min(1120px, 100% - 2 * var(--wd-gutter)); margin: 4px auto 0; aspect-ratio: 21 / 9; border-radius: 20px; overflow: hidden; background: #d9a27a; color: #fff; --scale: 1.3125; --off: 14.375%; }
.wd-banner-view { position: absolute; inset: 0; display: block; }
.wd-banner-view img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
.wd-banner-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22, 14, 8, 0.8) 0%, rgba(22, 14, 8, 0.5) 36%, rgba(22, 14, 8, 0) 62%); pointer-events: none; }
/* clicks between the words fall through to the picture's link */
.wd-banner-text { position: absolute; left: 0; bottom: 0; max-width: 580px; padding: clamp(26px, 3.4vw, 48px); pointer-events: none; }
.wd-banner-text a, .wd-banner-text button { pointer-events: auto; }
.wd-sunny .wd-banner h1 { margin: 0; color: #fff; font-size: clamp(34px, 3.8vw, 52px); line-height: 1.04; font-weight: 800; letter-spacing: -0.03em; }
.wd-sunny .wd-banner .wd-hero-text { color: rgba(255, 255, 255, 0.9); }
.wd-sunny .wd-banner .wd-hero-actions { margin-top: 22px; }
.wd-sunny .wd-banner .wd-button:not(.wd-primary) { background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.75); color: #fff; }
.wd-sunny .wd-banner .wd-button:not(.wd-primary):hover { background: rgba(255, 255, 255, 0.24); }
.wd-sunny .wd-banner :focus-visible { outline-color: #fff; }
/* what its people say (Worlds::HERO_SAYS): a white bubble over each one's head, its tail at --x, --y on the picture */
.wd-banner-say { position: absolute; left: var(--x); top: calc(var(--y) * var(--scale) - var(--off)); padding: 6px 11px; border-radius: 11px; background: #fff; color: var(--wd-ink); font-size: 13.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); transform: translate(-50%, calc(-100% - 2px)); animation: wd-say-in 0.35s calc(0.5s + var(--i) * 0.45s) both ease-out; }
.wd-banner-say::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: #fff; transform: translateX(-50%) rotate(45deg); }
@keyframes wd-say-in { from { opacity: 0; transform: translate(-50%, calc(-100% + 4px)) scale(0.85); } }
@media (prefers-reduced-motion: reduce) { .wd-banner-say { animation: none; } }

/* buttons: a green one for what to do, outlined ones beside it */
.wd-sunny .wd-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--wd-ink); color: var(--wd-ink); font: 700 15px/1.2 var(--wd-font); text-decoration: none; cursor: pointer; }
.wd-sunny .wd-button:hover { background: var(--wd-field); }
.wd-sunny .wd-button.wd-primary { background: var(--wd-go); box-shadow: none; color: #fff; }
.wd-sunny .wd-button.wd-primary:hover { background: var(--wd-go-hover); }
.wd-sunny .wd-button.wd-big { min-height: 48px; padding: 0 22px; font-size: 15.5px; }
.wd-sunny .wd-button svg { flex: none; }

/* How it works, logged out: three short steps in a row between two rules */
.wd-sunny .wd-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; list-style: none; }
.wd-steps-wrap { max-width: 1200px; margin: 64px auto 0; padding: 0 var(--wd-gutter); }
.wd-steps-wrap .wd-steps { margin: 0; padding: 30px 0 0; border-top: 1px solid var(--wd-rule); }
.wd-step h3 { margin: 0; color: var(--wd-go-ink); font-size: 13px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.wd-step p { margin: 6px 0 0; color: #4a4c55; }

/* the lists */
.wd-sunny .wd-section { max-width: 1200px; margin: 48px auto 0; padding: 0 var(--wd-gutter); }
.wd-sunny .wd-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; margin-bottom: 6px; }
.wd-sunny .wd-section :is(h1, h2) { margin: 0; color: var(--wd-ink); font-size: 22px; line-height: 1.2; font-weight: 800; letter-spacing: -0.015em; text-transform: none; }
/* someone's page names them big, as its title */
.wd-sunny .wd-section h1 { font-size: clamp(30px, 3.4vw, 40px); letter-spacing: -0.03em; }
/* "by <username>" right after Your Worlds, smaller; it opens the username dialog */
/* (8px after the heading, not the row's 16px) */
.wd-by-me { margin: 0 auto 0 -8px; color: var(--wd-ink-soft); font-size: 15px; font-weight: 600; text-decoration: none; }
.wd-by-me:hover { color: var(--wd-ink); text-decoration: underline; text-underline-offset: 3px; }
.wd-by-me[hidden] { display: none; }
.wd-sunny .wd-count { flex: none; color: var(--wd-ink-soft); font-size: 14px; font-weight: 500; white-space: nowrap; }
.wd-sunny .wd-section-text { max-width: 640px; margin: 0 0 20px; color: var(--wd-ink-soft); font-size: 15px; }
.wd-sunny .wd-section-head + .wd-user-none { margin-top: 10px; }
/* under a section's grid, the way to more of it (More Examples), left like Your Worlds' Show more and as far under its grid */
.wd-sunny .wd-section-foot { display: flex; margin: 24px 0 0; }
.wd-sunny .wd-section-head + .wd-grid, .wd-sunny .wd-section-head + .wd-more { margin-top: 18px; }
.wd-sunny .wd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px 20px; }
.wd-sunny .wd-starter-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 26px 18px; }
/* on a computer, rows of --cols (index.html.erb picks it so no card is left alone on a row) */
@media (min-width: 1001px) { .wd-sunny .wd-starter-grid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); } }
.wd-sunny .wd-tile { gap: 0; }

/* a card is its picture, then its name and a line or two: no box around it */
.wd-sunny .wd-card { position: relative; display: flex; flex-direction: column; gap: 10px; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 14px; overflow: visible; background: none; color: var(--wd-ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: none; }
.wd-sunny .wd-card:hover { transform: none; }
.wd-sunny .wd-card-form { height: 100%; }
.wd-sunny .wd-card-image { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; background: var(--wd-field); }
.wd-sunny .wd-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.wd-sunny .wd-card:hover .wd-card-image img, .wd-sunny .wd-prompt-card-go:hover .wd-card-image img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .wd-sunny .wd-card-image img { transition: none; } }
.wd-sunny .wd-card-body { display: flex; flex-direction: column; gap: 3px; padding: 0 2px; }
.wd-sunny .wd-card-name { color: var(--wd-ink); font-size: 16px; font-weight: 700; line-height: 1.3; }
.wd-sunny .wd-card:hover .wd-card-name { color: var(--wd-go-ink); }
.wd-sunny .wd-card-text { display: -webkit-box; overflow: hidden; color: var(--wd-ink-soft); font-size: 14px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } /* three lines at most */
/* a world's own description, three lines at most */
.wd-card-text.wd-card-about { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
/* what's special about a world, on a small white label on its picture */
.wd-sticker { position: absolute; top: 8px; left: 8px; padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); color: var(--wd-ink); font-size: 12px; font-weight: 700; line-height: 1.2; }
.wd-sunny .wd-badge { align-self: flex-start; margin-top: 2px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.5; }
.wd-sunny .wd-badge-private { background: #f0eee8; color: #5e6068; }
.wd-sunny .wd-badge-unlisted { background: #e6eff9; color: #24527d; }
.wd-sunny .wd-badge-public { background: #e2f3e8; color: var(--wd-go-ink); }

.wd-sunny .wd-more > summary, .wd-sunny .wd-fewer { display: inline-flex; align-items: center; min-height: 44px; margin-top: 24px; padding: 0 18px; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--wd-ink); color: var(--wd-ink); font: 700 15px/1.2 var(--wd-font); }
.wd-sunny .wd-more > summary:hover, .wd-sunny .wd-fewer:hover { background: var(--wd-field); }
.wd-sunny .wd-more > .wd-grid { margin-top: 24px; }
.wd-sunny .wd-more[open] > summary { display: none; }
.wd-sunny .wd-fewer { cursor: pointer; }

/* A starter made from one prompt (worlds/_prompt_starter_card), in the one
   grid with the ready-made ones: only the picture and name open the world,
   so the whole prompt under them can be read and selected */
.wd-sunny .wd-prompt-card { height: auto; cursor: auto; }
.wd-sunny .wd-prompt-card .wd-card-form { height: auto; }
.wd-prompt-card-go { display: flex; flex-direction: column; gap: 10px; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 14px; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.wd-prompt-card-go:focus-visible { outline: 2px solid var(--wd-ink); outline-offset: 3px; }
.wd-sunny .wd-prompt-card-go:hover .wd-card-name { color: var(--wd-go-ink); }
.wd-sunny .wd-prompt-card .wd-card-name { padding: 0 2px; }
/* /worlds/examples: a picture, then the name and Show prompt on one row (_example_card) */
.wd-sunny .wd-example { cursor: auto; }
.wd-example-picture { display: block; border-radius: 14px; }
.wd-sunny .wd-example-picture:hover .wd-card-image img { transform: scale(1.03); }
.wd-example-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 0 2px; }
.wd-sunny .wd-example .wd-card-name { min-width: 0; padding-top: 3px; text-decoration: none; }
.wd-sunny .wd-example .wd-card-name:hover, .wd-sunny .wd-example:has(.wd-example-picture:hover) .wd-card-name { color: var(--wd-go-ink); }
.wd-example-show { flex: none; padding: 6px 11px; border: 0; border-radius: 999px; background: var(--wd-field); color: var(--wd-ink); font: 600 13px/1.2 var(--wd-font); white-space: nowrap; cursor: pointer; }
.wd-example-show:hover { background: var(--wd-rule); }
.wd-example-show:focus-visible, .wd-sunny .wd-example .wd-card-name:focus-visible { outline: 2px solid var(--wd-ink); outline-offset: 2px; }
.wd-modal.wd-example-dialog { position: relative; width: min(520px, calc(100vw - 32px)); }
.wd-example-dialog h2 { padding-right: 36px; }
.wd-sunny .wd-modal .wd-example-label { margin: 14px 0 0; color: var(--wd-ink-soft); font-size: 13.5px; font-weight: 600; }
.wd-example-prompt { margin: 8px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--wd-field); color: var(--wd-ink); font: 500 16px/1.55 var(--wd-font); text-wrap: pretty; }
.wd-prompt { padding: 4px 2px 0; }
/* the whole prompt, in quotes */
.wd-prompt-text { margin: 0; color: var(--wd-ink-soft); font-size: 13.5px; line-height: 1.45; }
.wd-prompt-text::before { content: "\201C"; }
.wd-prompt-text::after { content: "\201D"; }

.wd-sunny .wd-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; max-width: none; margin: 64px max(var(--wd-gutter), calc((100% - 1120px) / 2)) 0; padding: 26px 0 0; border-top: 1px solid var(--wd-rule); color: var(--wd-ink-soft); font-size: 14px; }
.wd-footer-name { color: var(--wd-ink); font-size: 15px; font-weight: 800; }
.wd-footer-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.wd-footer-links a { color: var(--wd-ink-soft); font-weight: 500; text-decoration: none; }
.wd-footer-links a:hover { color: var(--wd-ink); text-decoration: underline; }

/* A dialog on the light pages (the username one): a white card */
.wd-sunny .wd-modal { padding: 22px; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 24px 60px rgba(23, 24, 28, 0.25); color: var(--wd-ink); font-family: var(--wd-font); }
.wd-sunny .wd-modal::backdrop { background: rgba(23, 24, 28, 0.4); }
.wd-sunny .wd-modal h2 { color: var(--wd-ink); font-size: 21px; font-weight: 800; letter-spacing: -0.01em; }
.wd-sunny .wd-modal .wd-field label { color: var(--wd-ink-soft); font-size: 14px; font-weight: 600; }
.wd-sunny .wd-modal .wd-field input[type="text"] { border: 1.5px solid #d6d6cf; border-radius: 11px; background: #fff; color: var(--wd-ink); font: 500 16px/1.2 var(--wd-font); }
.wd-sunny .wd-modal .wd-field input[type="text"]:focus { border-color: var(--wd-ink); outline: none; }
.wd-sunny .wd-modal .wd-field input[readonly] { background: var(--wd-field); }
/* the description in Name and description, opened from a card on /worlds: a light field like the name's */
.wd-sunny .wd-rename textarea { border: 1.5px solid #d6d6cf; border-radius: 11px; background: #fff; color: var(--wd-ink); font: 500 15px/1.4 var(--wd-font); }
.wd-sunny .wd-rename textarea:focus { border-color: var(--wd-ink); }
.wd-sunny .wd-modal .wd-help { color: var(--wd-ink-soft); font-size: 13.5px; }
.wd-sunny .wd-modal .wd-status-error { color: #b42318; }
.wd-sunny .wd-modal .wd-username-page { color: var(--wd-go-ink); }
.wd-sunny .wd-modal .wd-modal-close { color: var(--wd-ink-soft); }
.wd-sunny .wd-modal .wd-modal-close:hover { background: var(--wd-field); color: var(--wd-ink); }

/* /worlds/credits */
.wd-balance { margin: 16px 0 0; color: var(--wd-ink-soft); font-size: 18px; font-weight: 600; }
.wd-balance-number { color: var(--wd-ink); font-size: clamp(44px, 6vw, 60px); line-height: 1; font-weight: 800; letter-spacing: -0.03em; }
.wd-credits-flash { display: inline-block; margin: 16px 0 0; padding: 9px 14px; border-radius: 12px; background: #e2f3e8; color: var(--wd-go-ink); font-weight: 600; }
.wd-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; margin-top: 18px; }
.wd-pack { display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 1px solid var(--wd-rule); border-radius: 18px; background: #fff; }
.wd-pack-credits { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.wd-pack-credits span { color: var(--wd-ink-soft); font-size: 17px; font-weight: 600; letter-spacing: 0; }
.wd-pack-note { margin: 0 0 12px; color: var(--wd-ink-soft); font-size: 14px; }
.wd-pack form { margin-top: auto; }
.wd-pack .wd-button { width: 100%; }
.wd-how { max-width: 680px; margin: 12px 0 0; padding-left: 0; list-style: none; color: #4a4c55; line-height: 1.6; }
.wd-how li + li { margin-top: 8px; }
.wd-how-more { margin: 20px 0 0; }

/* /worlds/pricing: Monthly or Annual, then a card per plan */
.wd-billing { display: inline-flex; gap: 4px; margin: 24px 0 0; padding: 4px; border-radius: 13px; background: var(--wd-field); }
.wd-billing-option { min-height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: none; color: var(--wd-ink-soft); font: 700 14.5px/1.2 var(--wd-font); cursor: pointer; }
.wd-billing-option span { color: var(--wd-go-ink); font-size: 13px; }
.wd-billing-option.wd-billing-on { background: #fff; color: var(--wd-ink); box-shadow: 0 1px 3px rgba(23, 24, 28, 0.12); }
.wd-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; margin: 32px 0 0; }
.wd-plan { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--wd-rule); border-radius: 20px; background: #fff; }
.wd-plan-current { box-shadow: inset 0 0 0 2px var(--wd-go); }
.wd-sunny .wd-plan .wd-plan-name { margin: 0; color: var(--wd-ink); font-size: 20px; font-weight: 800; letter-spacing: -0.01em; text-transform: none; }
.wd-plan-price { margin: 14px 0 0; color: var(--wd-ink); font-size: 42px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; }
.wd-plan-per { margin-left: 2px; color: var(--wd-ink-soft); font-size: 16px; font-weight: 600; letter-spacing: 0; }
.wd-plan-billing { min-height: 1.4em; margin: 6px 0 0; color: var(--wd-ink-soft); font-size: 14px; }
.wd-plan-features { margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--wd-rule); list-style: none; color: var(--wd-ink); font-size: 16px; }
.wd-plan-features b { font-size: 20px; font-weight: 800; }
/* about how many changes that is, under it */
.wd-plan-changes { display: block; margin-top: 4px; color: var(--wd-ink-soft); font-size: 14px; }
.wd-plan-action { margin-top: auto; padding-top: 22px; }
.wd-plan-action .wd-button { width: 100%; }
.wd-plan-yours { margin: 0; padding: 12px 0; color: var(--wd-go-ink); font-size: 15px; font-weight: 700; text-align: center; }

@media (max-width: 1000px) {
  /* the banner's words go under its picture, which shows whole (16:9) */
  .wd-banner { aspect-ratio: auto; overflow: visible; border-radius: 0; background: none; color: var(--wd-ink); --scale: 1; --off: 0%; }
  .wd-banner-view { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px; background: #d9a27a; }
  .wd-banner-shade { display: none; }
  .wd-banner-text { position: static; max-width: 640px; padding: 22px 0 0; pointer-events: auto; }
  .wd-sunny .wd-banner h1 { color: var(--wd-ink); }
  .wd-sunny .wd-banner .wd-hero-text { color: #4a4c55; }
  .wd-sunny .wd-banner .wd-button:not(.wd-primary) { background: #fff; box-shadow: inset 0 0 0 1.5px var(--wd-ink); color: var(--wd-ink); }
  .wd-sunny .wd-banner .wd-button:not(.wd-primary):hover { background: var(--wd-field); }
  .wd-sunny .wd-banner :focus-visible { outline-color: var(--wd-ink); }
  .wd-sunny .wd-steps { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 860px) { .wd-plans { grid-template-columns: minmax(0, 1fr); max-width: 440px; } }
@media (max-width: 640px) {
  .wd-sunny { --wd-gutter: 16px; }
  .wd-sunny .wd-nav { flex-wrap: wrap; row-gap: 12px; padding: 16px 0 14px; }
  .wd-brand-name { display: none; } /* the core links need the room: just the sun */
  .wd-sun { width: 26px; height: 26px; }
  /* search on a row of its own, all the way across, under the sun and the links */
  .wd-search { order: 3; flex: 1 1 100%; }
  .wd-search-results { width: 100%; }
  .wd-nav-links { gap: 16px; }
  .wd-sunny .wd-labs { font-size: 14.5px; }
  .wd-sunny .wd-signup { height: 40px; padding: 0 14px; }
  .wd-nav-extra { display: none; }
  .wd-banner-say { font-size: 12px; padding: 5px 9px; }
  .wd-hero-actions .wd-button { flex: 1 1 100%; }
  .wd-sunny .wd-section { margin-top: 40px; }
  .wd-sunny .wd-section :is(h1, h2) { font-size: 20px; }
  .wd-sunny .wd-section h1 { font-size: 28px; }
  /* two to a row, the words a little smaller */
  .wd-sunny .wd-grid, .wd-sunny .wd-starter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .wd-sunny .wd-card, .wd-prompt-card-go { gap: 8px; }
  .wd-sunny .wd-card-image, .wd-sunny .wd-starter-grid .wd-card-image { aspect-ratio: 4 / 3; border-radius: 12px; }
  .wd-sunny .wd-card-name { font-size: 15px; }
  .wd-sunny .wd-card-text { font-size: 13px; }
  .wd-sticker { top: 6px; left: 6px; padding: 3px 7px; font-size: 11px; }
  .wd-prompt-text { font-size: 13px; }
  /* the name over Show prompt, in a card half the screen wide */
  .wd-example-row { flex-direction: column; gap: 6px; }
  .wd-example-show { padding: 5px 10px; font-size: 12.5px; }
  .wd-sunny .wd-footer { flex-direction: column; align-items: flex-start; margin-top: 52px; }
}

/* ---- A world ---- */
.wd { position: fixed; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
/* The bar floats over the top of the world (it's on the stage, so it comes
   along to full screen), not a band above it: the way back and the name on
   the left, the actions on the right, each a see-through pill like the
   world's own buttons, with the world showing between them. (On a phone
   it's the menu instead; see below.) */
.wd-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 12px; pointer-events: none; transition: opacity 0.3s, visibility 0s; }
.wd-bar > * { pointer-events: auto; }
.wd-back { color: var(--wd-muted); text-decoration: none; font-size: 13px; white-space: nowrap; }
.wd-back:hover { color: var(--wd-text); }
/* anything but a phone (the opposite of world_controller.js PHONE), where the bar is the gear's menu instead */
@media (min-width: 761px) and (min-height: 521px), (min-width: 761px) and (pointer: fine), (min-width: 761px) and (pointer: none) {
  .wd-bar :is(.wd-back, .wd-name, .wd-actions > .wd-button, .wd-share > .wd-button, .wd-copy-form .wd-button, .wd-controls-button, .wd-fullscreen-button) { box-sizing: border-box; height: 32px; border: 0; border-radius: 999px; background: rgba(20, 22, 28, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: rgba(255, 255, 255, 0.85); font: 600 12.5px system-ui, -apple-system, sans-serif; text-decoration: none; }
  .wd-bar :is(.wd-back, .wd-actions > .wd-button:not(.wd-menu-only), .wd-share > .wd-button, .wd-copy-form .wd-button, .wd-controls-button) { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; }
  .wd-bar :is(.wd-back, .wd-actions > .wd-button, .wd-share > .wd-button, .wd-controls-button, .wd-fullscreen-button):hover { background: rgba(20, 22, 28, 0.85); color: #fff; text-decoration: none; }
  .wd-bar .wd-button.wd-primary { background: var(--wd-accent); color: var(--wd-accent-ink); }
  .wd-bar .wd-button.wd-primary:hover { background: #79ec83; }
  .wd-bar .wd-fullscreen-button { width: 32px; padding: 0; }
  /* the name in its pill (with its owner, who can visit as a label: "Your world · Private" is a phone's menu's), 380px at most, a long name cut short with an ellipsis */
  .wd-bar .wd-name { flex: 0 1 auto; align-items: center; max-width: 380px; padding: 0 14px; }
  .wd-bar .wd-name h1 { color: #fff; font-size: 13.5px; }
  .wd-bar .wd-name > span { display: none; }
  /* Video, not Download Video (a phone's menu says it in full); Share and History with their icons, as Controls and Video have */
  .wd-bar .wd-video-verb { display: none; }
  .wd-bar .wd-actions > [data-action="world#openHistory"] .wd-menu-icon, .wd-bar .wd-share > .wd-button .wd-menu-icon { display: block; flex: none; width: 16px; height: 16px; }
  /* an owner's name fills its pill, so a click anywhere on it opens Rename; its faint pencil brightens as it's pointed at */
  /* An owner's: the name in a pill of its own, then who can visit in a small one beside it, a little apart */
  .wd-bar .wd-name:has(.wd-title-show) { gap: 8px; max-width: none; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .wd-bar .wd-name:has(.wd-title-show) h1 { height: 100%; max-width: 380px; border-radius: 999px; background: rgba(20, 22, 28, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .wd-bar .wd-title-show { padding: 0 10px 0 14px; border-radius: 999px; }
  .wd-bar .wd-name h1:has(.wd-title-show:hover) { background: rgba(20, 22, 28, 0.85); }
  /* whose it is, for someone else: inside the name's pill, after the name, smaller and fainter, to their page */
  .wd-bar .wd-name .wd-by { flex: none; color: rgba(255, 255, 255, 0.6); font: 500 12px system-ui, -apple-system, sans-serif; white-space: nowrap; text-decoration: none; }
  .wd-bar .wd-name .wd-by:hover { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
  .wd-bar .wd-name .wd-by:focus-visible { outline: 2px solid var(--wd-focus); outline-offset: 2px; border-radius: 3px; }
  .wd-bar .wd-name:has(.wd-by) { gap: 8px; }
  /* who can visit, in a pill like the name's, to its right; it opens a dialog with Share's switches (world_controller.js openVisibility) */
  .wd-bar .wd-visibility { display: inline-flex; align-items: center; flex: none; align-self: stretch; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(20, 22, 28, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
  .wd-bar .wd-visibility:hover { background: rgba(20, 22, 28, 0.85); }
  .wd-bar .wd-visibility:focus-visible { outline: 2px solid var(--wd-focus); outline-offset: 1px; }
  .wd-bar .wd-title-pencil { width: 13px; height: 13px; margin-top: 0; color: #fff; opacity: 0.4; transition: opacity 0.15s; }
  .wd-bar .wd-title-show:is(:hover, :focus-visible) .wd-title-pencil { opacity: 0.85; }
  .wd-bar .wd-actions { margin-left: auto; }
  /* Share's arrow points at the Share button, from its middle (the panel's own, set from its right, can't know the button's width) */
  .wd-bar .wd-panel::before { display: none; }
  .wd-bar .wd-share:has(> .wd-panel:not([hidden]))::after { content: ""; position: absolute; z-index: 21; top: calc(100% + 4px); left: calc(50% - 6px); width: 12px; height: 12px; box-sizing: border-box; background: var(--wd-float); border-left: 1px solid rgba(255, 255, 255, 0.14); border-top: 1px solid rgba(255, 255, 255, 0.14); transform: rotate(45deg); }
}
/* the name, then what it is, on one line, centered in the bar with the rest; what it is gives way first when there's no room */
.wd-name { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.wd-name h1 { flex: 0 1 auto; min-width: 0; margin: 0; font-size: 15px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* whose it is (a phone's menu: under the name, with what it's built on) */
.wd-by { color: var(--wd-accent); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.wd-by:hover { text-decoration: underline; }
.wd-name > span { flex: 0 100 auto; min-width: 0; color: var(--wd-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* an owner's name is a button that opens Rename (worlds/rename.js), plain text with a pencil */
.wd-title-show { display: flex; align-items: center; gap: 7px; max-width: 100%; height: 100%; padding: 0 14px; border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wd-title-show:focus-visible { outline: 2px solid var(--wd-focus); outline-offset: -2px; }
.wd-title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wd-title-pencil { flex: none; color: var(--wd-muted); }
.wd-modal.wd-rename { position: relative; }
.wd-rename h2 { padding-right: 36px; }
.wd-rename .wd-field { margin-top: 16px; }
.wd-rename .wd-field input[type="text"] { padding: 9px 11px; font-size: 15px; }
/* three lines of description, no more (it scrolls) */
.wd-rename .wd-field + .wd-field { margin-top: 14px; }
/* the username dialog: the box, then its own page */
.wd-username .wd-field { margin-top: 16px; }
.wd-username .wd-field input[type="text"] { padding: 9px 11px; font-size: 15px; }
.wd-username-page { align-self: flex-start; margin-top: 4px; color: var(--wd-accent); font-size: 13px; font-weight: 600; }
.wd-username .wd-status { margin: 8px 0 0; }
.wd-username .wd-status[hidden] { display: none; }
.wd-modal.wd-username { position: relative; }
.wd-username h2 { padding-right: 36px; }
@media (pointer: coarse) { .wd-username .wd-field input[type="text"] { font-size: 16px; } }
.wd-rename textarea { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--wd-line); border-radius: 8px; background: var(--wd-bg); color: var(--wd-text); font: 15px/1.4 system-ui, -apple-system, sans-serif; resize: none; }
.wd-rename textarea:focus { outline: none; border-color: #3d6f46; }
.wd-rename textarea::placeholder { color: var(--wd-muted); }
/* (16px on a touch screen, which would zoom in on anything smaller) */
@media (pointer: coarse) { .wd-rename .wd-field input[type="text"], .wd-rename textarea { font-size: 16px; } }
.wd-rename .wd-status { margin: 8px 0 0; }
.wd-rename .wd-status[hidden] { display: none; }
/* a phone: the name over what it is, each cut short with an ellipsis rather than running under the buttons */
.wd-actions { display: flex; align-items: center; gap: 8px; }
.wd-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wd-body { flex: 1; min-height: 0; display: flex; }
.wd-view { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wd-stage { position: relative; flex: 1; min-height: 0; background: #1b1d22; }
/* a long press on the world (or what's over it) picks no text and offers no Copy or Search; the box to type in still selects */
.wd-stage { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.wd-stage textarea, .wd-stage input { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
/* the page's own scrollbar would otherwise eat a strip of the full screen world */
/* a world's page never scrolls (it's the window, fixed), so no strip kept for a scrollbar (the site keeps one, scrollbar-gutter: stable) down its right edge, in full screen or out */
html:has(.wd-stage), html:has(.wd-stage) body { overflow: hidden; scrollbar-gutter: auto; }
/* phones and tablets walk with the on-screen pads instead */
.wd-world { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.wd-cover { position: absolute; inset: 0; display: grid; place-items: center; background: #1b1d22; color: var(--wd-muted); font-size: 15px; transition: opacity 0.25s; z-index: 2; }
/* while it loads: a spinner over the words (host.js's fatal puts plain words in its place) */
/* The loading screen: a spinner, a bar that moves on with each step, and the step in words */
.wd-loading { display: grid; justify-items: center; width: min(320px, 76%); text-align: center; }
.wd-loading-title { margin: 18px 0 14px; color: #fff; font-size: 17px; font-weight: 600; }
.wd-loading-track { width: 100%; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.wd-loading-bar { position: relative; display: block; width: 4%; height: 100%; border-radius: inherit; background: #fff; overflow: hidden; transition: width 0.5s ease-out; }
/* a glint running along the bar, so it's alive between steps */
.wd-loading-bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(27, 29, 34, 0.28), transparent); animation: wd-glint 1.3s linear infinite; }
.wd-loading-step { margin: 12px 0 0; min-height: 1.4em; font-size: 14px; }
@keyframes wd-glint { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .wd-loading-bar { transition: none; } .wd-loading-bar::after { animation: none; } }
.wd-spinner { width: 34px; height: 34px; border: 3px solid rgba(255, 255, 255, 0.16); border-top-color: #fff; border-radius: 50%; animation: wd-spin 0.8s linear infinite; }
@keyframes wd-spin { to { transform: rotate(360deg); } }
/* less motion: it still turns, slowly, so it still says something is happening */
@media (prefers-reduced-motion: reduce) { .wd-spinner { animation-duration: 2.4s; } }
.wd-cover.wd-cover-error { padding: 24px; color: var(--wd-text); text-align: center; line-height: 1.5; }
.wd-cover.wd-gone { opacity: 0; pointer-events: none; }
/* nothing to change until the world is there: the owner's box waits for the cover to go (or stays away if the world failed to start) */
.wd-stage:has(.wd-cover:not(.wd-gone)) .wd-overlay { display: none; }
/* controls: a sheet with every control, any time (worlds/controls.js) */
.wd-cap { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border: 1px solid rgba(255, 255, 255, 0.28); border-bottom-width: 3px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); color: #fff; font: 600 12px system-ui, -apple-system, sans-serif; }
.wd-cap-wide { min-width: 64px; }
.wd-controls-button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 999px; background: rgba(20, 22, 28, 0.55); color: rgba(255, 255, 255, 0.85); font: 600 12px system-ui, -apple-system, sans-serif; cursor: pointer; }
.wd-controls-button:hover { background: rgba(20, 22, 28, 0.85); color: #fff; }
.wd-controls-button:focus-visible { outline: 2px solid var(--wd-focus); outline-offset: 2px; }
/* on a touch screen, just the icon */
@media (pointer: coarse), (max-width: 760px) { .wd-controls-button { padding: 7px; } .wd-controls-button span { display: none; } }
.wd-fullscreen-button { display: grid; place-items: center; padding: 7px; border: 0; border-radius: 999px; background: rgba(20, 22, 28, 0.55); color: rgba(255, 255, 255, 0.85); cursor: pointer; }
.wd-fullscreen-button[hidden] { display: none; }
.wd-fullscreen-button:hover { background: rgba(20, 22, 28, 0.85); color: #fff; }
.wd-fullscreen-button:focus-visible { outline: 2px solid var(--wd-focus); outline-offset: 2px; }
.wd-fullscreen-exit, .wd-fullscreen-button[aria-pressed="true"] .wd-fullscreen-enter { display: none; }
.wd-fullscreen-button[aria-pressed="true"] .wd-fullscreen-exit { display: inline; }
/* the mouse still a while: no cursor over the world (world_controller.js wakeCursor; the world's frame hides its own) */
.wd-stage.wd-cursor-hidden, .wd-stage.wd-cursor-hidden .wd-world { cursor: none; }
/* in full screen, the bar fades when the mouse is still (world_controller.js wakeButtons) */
.wd-stage.wd-idle .wd-bar { opacity: 0; visibility: hidden; transition: opacity 0.6s, visibility 0s 0.6s; }
.wd-modal.wd-controls { position: relative; width: min(460px, calc(100vw - 32px)); }
.wd-controls-list { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; align-items: center; margin: 16px 0 0; }
.wd-controls-list dt { display: flex; gap: 4px; flex-wrap: wrap; }
.wd-controls-list dd { margin: 0; color: var(--wd-muted); }
.wd-controls .wd-cap { border-color: var(--wd-line); background: var(--wd-raise); color: var(--wd-text); }
.wd-controls-toggle { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--wd-line); color: var(--wd-text); cursor: pointer; }
.wd-controls-toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--wd-accent); }
.wd-notice { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 3; max-width: min(560px, 90%); margin: 0; padding: 8px 14px; border-radius: 10px; background: rgba(20, 22, 28, 0.88); color: var(--wd-warn); font-size: 13px; text-align: center; }

/* Share panel */
.wd-share { position: relative; }
.wd-panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 20; width: min(340px, calc(100vw - 24px)); padding: 14px; border-radius: 12px; background: var(--wd-float); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; gap: 14px; }
/* it floats over the chat column, which shares the page's panel color: a lighter surface, a brighter edge, and a point up at Share set it apart */
.wd-panel::before { content: ""; position: absolute; top: -7px; right: 26px; width: 12px; height: 12px; background: var(--wd-float); border-left: 1px solid rgba(255, 255, 255, 0.14); border-top: 1px solid rgba(255, 255, 255, 0.14); transform: rotate(45deg); }
.wd-panel .wd-button { background: var(--wd-hover); }
.wd-download-video { display: inline-flex; align-items: center; gap: 7px; }
.wd-download-video svg { flex: none; }
.wd-panel .wd-button:hover { background: #363b46; }
.wd-panel[hidden] { display: none; }
/* everything but the open panel (z-index 20): the world, its controls and the bar */
.wd-share-backdrop { display: none; position: fixed; inset: 0; z-index: 19; }
.wd-panel:not([hidden]) + .wd-share-backdrop { display: block; }
.wd-field { display: flex; flex-direction: column; gap: 6px; }
.wd-field[hidden] { display: none; }
.wd-field label { color: var(--wd-muted); font-size: 12px; font-weight: 600; padding: 0; }
.wd-field input[type="text"] { width: 100%; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--wd-line); background: var(--wd-bg); color: var(--wd-text); font: inherit; }
.wd-field input[type="text"]:focus { outline: none; border-color: #3d6f46; }
.wd-help { margin: 2px 0 0; color: var(--wd-muted); font-size: 12px; }
/* Share's switches (Shared, then copies and Public once it's shared): what it is on the left, the switch on the right */
.wd-switches { display: flex; flex-direction: column; gap: 14px; }
.wd-switches[hidden] { display: none; }
.wd-switch { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; cursor: pointer; }
.wd-switch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wd-switch-label { color: var(--wd-text); font-size: 14px; font-weight: 600; }
.wd-switch .wd-help { margin: 0; text-wrap: pretty; }
.wd-switch input { flex: none; appearance: none; -webkit-appearance: none; position: relative; width: 40px; height: 24px; margin: 0; border-radius: 999px; background: #3a3f4a; cursor: pointer; transition: background 0.15s; }
.wd-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); transition: transform 0.15s; }
.wd-switch input:checked { background: var(--wd-accent); }
.wd-switch input:checked::after { transform: translateX(16px); }
.wd-switch input:focus-visible { outline: 2px solid var(--wd-focus); outline-offset: 2px; }
.wd-switch input:disabled { opacity: 0.6; cursor: progress; }
/* the ones that only mean something once it's shared, set in under Shared */
.wd-switches .wd-switches { padding-left: 14px; border-left: 2px solid var(--wd-line); }
.wd-link { display: flex; gap: 6px; }
/* Share's sections, a line between each, as above Delete */
.wd-panel-section { display: flex; flex-direction: column; gap: 14px; }
.wd-panel-section + .wd-panel-section { padding-top: 14px; border-top: 1px solid var(--wd-line); }
.wd-panel-section.wd-field { gap: 6px; }
.wd-panel-foot:has(.wd-status:empty) { display: none; }
.wd-panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--wd-line); padding-top: 14px; }
.wd-danger { padding: 0; border: 0; background: none; color: var(--wd-danger); font: 600 13px system-ui, sans-serif; cursor: pointer; }
.wd-danger:hover { text-decoration: underline; }
.wd-status { color: var(--wd-muted); font-size: 12px; }
.wd-status.wd-status-error { color: var(--wd-warn); }

/* The owner's box for changing the world, over the bottom of the world
   (worlds/host.js fills in what's said above it). It's open (wd-open) while
   in use: then the model and credits show under it and the keys on screen
   step aside. On a phone it's a Change button that opens it as a sheet. */
/* Opening it adds the row under the box without moving anything: closed, the box floats that row's height higher (--wd-foot), so a press on it never shifts what's under the pointer */
.wd-overlay { --wd-glass: rgba(16, 18, 23, 0.84); --wd-foot: 36px; position: absolute; left: 0; right: 0; bottom: 18px; z-index: 4; width: min(640px, calc(100% - 380px)); min-width: 340px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.wd-overlay > *, .wd-sheet > * { pointer-events: auto; }
.wd-sheet { display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.wd-sheet-head, .wd-sheet-back, .wd-write-own, .wd-send-words, .wd-sparkles-button, .wd-menu-button, .wd-menu-only, .wd-panel-title { display: none; }
.wd-link-button { padding: 0; border: 0; background: none; color: var(--wd-muted); font: 12px system-ui, sans-serif; cursor: pointer; }
.wd-link-button:hover { color: var(--wd-text); text-decoration: underline; }

/* what the latest change did, or the one in progress: one card, centered over the box */
/* as wide as the box under it, whatever it says */
.wd-caption { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.wd-caption:empty { display: none; }
.wd-caption-card { position: relative; box-sizing: border-box; width: 100%; padding: 9px 14px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; background: var(--wd-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28); color: #fff; font-size: 14px; line-height: 1.45; transition: opacity 0.6s; }
.wd-caption-card.wd-fading { opacity: 0; }
.wd-caption-card.wd-closable { padding-right: 36px; }
.wd-caption-card.wd-warn { border-color: rgba(255, 179, 166, 0.45); }
.wd-caption-card.wd-warn .wd-caption-text { color: var(--wd-warn); }
.wd-caption-asked { color: #aab0ba; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-caption-text { white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.wd-caption-close { position: absolute; top: 5px; right: 6px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; color: #aab0ba; font: 18px/1 system-ui, sans-serif; cursor: pointer; }
.wd-caption-close:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.wd-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.wd-acts button { padding: 3px 10px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.12); color: #fff; font: 600 12px system-ui, sans-serif; cursor: pointer; }
.wd-acts button:hover { background: rgba(255, 255, 255, 0.2); }
.wd-acts button.wd-act-primary { background: var(--wd-accent); color: var(--wd-accent-ink); }
/* how it's going, smaller than what was asked */
/* a change in progress: one line, more see-through than a reply, what was asked on the left (cut short if it's long) and how it's going on the right */
.wd-caption-card.wd-thinking { display: flex; align-items: center; gap: 14px; background: rgba(16, 18, 23, 0.62); }
.wd-thinking .wd-caption-asked { flex: 1; min-width: 0; }
.wd-thinking .wd-caption-text { display: block; flex: none; margin: 0; font-size: 11.5px; white-space: nowrap; }
.wd-thinking i { display: inline-block; width: 5px; height: 5px; margin-right: 3px; border-radius: 50%; background: #aab0ba; vertical-align: 1px; animation: wd-dot 1.2s infinite; }
.wd-thinking i:nth-child(2) { animation-delay: 0.2s; }
.wd-thinking i:nth-child(3) { animation-delay: 0.4s; }
.wd-thinking span { color: #aab0ba; }
.wd-stop-button { flex: none; width: 26px; height: 26px; margin: -3px -6px -3px -4px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); cursor: pointer; }
.wd-stop-button::before { content: ""; display: block; width: 9px; height: 9px; margin: auto; border-radius: 2px; background: #fff; }
.wd-stop-button:hover { background: rgba(255, 255, 255, 0.28); }
.wd-stop-button:focus-visible { outline: 2px solid var(--wd-focus); outline-offset: 2px; }
.wd-stop-button[hidden] { display: none; }
@keyframes wd-dot { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
/* what's waiting to be sent next: as wide as the card over it, but lighter, a dashed outline on a fainter glass */
.wd-queued { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.wd-queued-chip { box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 6px 5px 14px; border: 1px dashed rgba(255, 255, 255, 0.35); border-radius: 12px; background: rgba(16, 18, 23, 0.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #d7dae0; font-size: 12.5px; }
.wd-queued-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-queued-chip button { padding: 0 6px; border: 0; background: none; color: #aab0ba; font: 15px/1 system-ui, sans-serif; cursor: pointer; }
.wd-queued-chip button:hover { color: #fff; }

/* the ideas: things you'd say, so in your green; a new world's first ones always, the model's ones with its reply or while the box is open */
.wd-ideas { display: none; }
.wd-overlay[data-ideas="starters"] .wd-ideas,
.wd-overlay.wd-fresh[data-ideas="suggestions"] .wd-ideas,
.wd-overlay.wd-open[data-ideas="suggestions"]:not(.wd-typing) .wd-ideas { display: block; }
.wd-suggestions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.wd-suggestions-label { padding: 4px 9px; border-radius: 999px; background: var(--wd-glass); color: #aab0ba; font: 600 10.5px system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; }
.wd-suggestion { max-width: 100%; padding: 5px 12px; border: 1px solid rgba(95, 227, 106, 0.5); border-radius: 14px; background: var(--wd-glass); color: #c3f3c8; font: 12.5px/1.35 system-ui, sans-serif; text-align: left; text-wrap: pretty; cursor: pointer; }
.wd-suggestion:hover { border-color: var(--wd-accent); background: rgba(30, 60, 36, 0.92); color: #fff; }
.wd-suggestion:focus-visible { outline: 2px solid var(--wd-focus); outline-offset: 2px; }
/* the model's two ideas, side by side: a long one wraps inside its pill rather than onto a row of its own */
.wd-try-next { flex-wrap: nowrap; }
.wd-try-next .wd-suggestions-label { flex: none; }
.wd-try-next .wd-suggestion { flex: 0 1 auto; min-width: 0; text-align: center; text-wrap: balance; }
/* the model gives four; over the world there's room for its first two (a phone's sheet shows them all) */
.wd-try-next .wd-suggestion:nth-of-type(n+3) { display: none; }

.wd-dock { position: relative; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 16px; background: var(--wd-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); }
.wd-open .wd-dock { border-color: rgba(95, 227, 106, 0.55); }
.wd-compose { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 12px; }
.wd-compose textarea { flex: 1; min-width: 0; max-height: 140px; padding: 7px 0; border: 0; resize: none; background: transparent; color: #fff; font: inherit; outline: none; }
.wd-compose textarea::placeholder { color: #9aa0ab; }
.wd-send { flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 10px; background: var(--wd-accent); color: var(--wd-accent-ink); font: 700 16px system-ui, sans-serif; cursor: pointer; }
.wd-dock-foot { display: none; box-sizing: border-box; height: var(--wd-foot); align-items: center; gap: 12px; padding: 0 12px 8px; }
.wd-open .wd-dock-foot { display: flex; }
.wd-dock-foot:not(:has(> *)) { display: none; }
/* level with the world's bottom row of keys (--edge in lib/worlds/runner/builder.js), so
   the credits go inside the box beside Send: under it, opening the box would push it up */
@media (min-width: 761px) {
  .wd-open .wd-dock-foot { position: absolute; right: 48px; bottom: 6px; height: 34px; padding: 0; }
  .wd-open:has(.wd-credits-line) .wd-compose textarea { padding-right: 180px; }
}
/* the gallery: ready-made things, opened from the button in the box */
.wd-gallery-toggle { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; margin-left: -6px; border: 0; border-radius: 10px; background: transparent; color: #aab0ba; cursor: pointer; }
.wd-gallery-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.wd-gallery-toggle:hover, .wd-gallery-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, 0.1); color: #fff; }
.wd-gallery-toggle:focus-visible { outline: 2px solid var(--wd-focus); outline-offset: 1px; }
/* a fixed height, so it stays put while a search narrows it down */
.wd-gallery { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 5; display: flex; flex-direction: column; height: min(56vh, 520px); border: 1px solid var(--wd-line); border-radius: 14px; background: var(--wd-panel); box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45); }
.wd-gallery[hidden] { display: none; }
.wd-gallery-head { display: flex; align-items: baseline; gap: 8px; padding: 12px 14px 8px; }
.wd-gallery-head b { font-size: 14px; }
.wd-gallery-head span { flex: 1; color: var(--wd-muted); font-size: 12px; }
.wd-gallery-tools { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 8px; }
.wd-gallery-search { padding: 7px 10px; border: 1px solid var(--wd-line); border-radius: 8px; background: var(--wd-bg); color: var(--wd-text); font: 13px system-ui, -apple-system, sans-serif; }
.wd-gallery-search:focus { outline: 2px solid var(--wd-focus); outline-offset: 0; }
.wd-gallery-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.wd-gallery-tabs::-webkit-scrollbar { display: none; }
.wd-gallery-tab { flex: 0 0 auto; padding: 4px 10px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--wd-muted); font: 600 12px system-ui, -apple-system, sans-serif; white-space: nowrap; cursor: pointer; }
.wd-gallery-tab:hover { border-color: rgba(255, 255, 255, 0.35); color: var(--wd-text); }
.wd-gallery-tab[aria-pressed="true"] { border-color: var(--wd-accent); background: var(--wd-accent); color: var(--wd-accent-ink); }
.wd-gallery-tab:focus-visible { outline: 2px solid var(--wd-focus); outline-offset: 1px; }
.wd-gallery-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 8px; padding: 4px 12px 12px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.22) transparent; }
.wd-gallery-section { grid-column: 1 / -1; margin: 8px 2px 0; color: var(--wd-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.wd-gallery-section:first-child { margin-top: 0; }
.wd-gallery-section[hidden], .wd-gallery-item[hidden] { display: none; }
.wd-gallery-none { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; padding: 28px 12px; color: var(--wd-muted); font-size: 13px; text-align: center; }
.wd-gallery-none[hidden] { display: none; }
.wd-gallery-item { display: flex; flex-direction: column; gap: 4px; padding: 4px 4px 6px; border: 1px solid transparent; border-radius: 10px; background: var(--wd-raise); color: var(--wd-text); font: 600 12px system-ui, sans-serif; cursor: pointer; }
.wd-gallery-item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 7px; background: var(--wd-bg); }
.wd-gallery-item:hover, .wd-gallery-item:focus-visible { border-color: var(--wd-accent); outline: none; }
.wd-gallery-item:disabled { opacity: 0.6; cursor: progress; }
/* which model writes the next change (worlds/model_picker.js): one line under the box, its list opening above */
.wd-model { position: relative; flex: 0 1 auto; min-width: 0; display: flex; align-items: center; font-size: 11px; color: var(--wd-muted); }
.wd-model-button { min-width: 0; max-width: 100%; display: flex; align-items: baseline; gap: 6px; padding: 4px 24px 4px 9px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px; background: rgba(255, 255, 255, 0.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239aa0ab' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 8px center; color: #fff; text-align: left; cursor: pointer; }
.wd-model-button:hover { border-color: rgba(255, 255, 255, 0.35); }
.wd-model-button:focus-visible { outline: 2px solid var(--wd-focus); outline-offset: 1px; }
.wd-model-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
.wd-model-panel { position: absolute; left: 0; bottom: calc(100% + 8px); width: min(440px, calc(100vw - 24px)); z-index: 20; display: flex; flex-direction: column; max-height: min(420px, 56vh); border: 1px solid var(--wd-line); border-radius: 12px; background: var(--wd-panel); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45); overflow: hidden; }
.wd-model-search { flex: 0 0 auto; margin: 8px; padding: 7px 10px; border: 1px solid var(--wd-line); border-radius: 8px; background: var(--wd-bg); color: var(--wd-text); font: 13px system-ui, -apple-system, sans-serif; }
.wd-model-search:focus { outline: 2px solid var(--wd-focus); outline-offset: 0; }
.wd-model-list { flex: 1; min-height: 0; margin: 0; padding: 0 6px 6px; overflow-y: auto; list-style: none; }
.wd-model-maker { margin: 8px 8px 2px; color: var(--wd-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.wd-model-maker:first-child { margin-top: 2px; }
.wd-model-option { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: 7px; cursor: pointer; }
.wd-model-option:hover, .wd-model-option.wd-model-active { background: var(--wd-hover); }
.wd-model-option[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--wd-accent); }
.wd-model-option-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; color: var(--wd-text); font-size: 13px; font-weight: 600; }
.wd-model-option-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-model-option-price { margin-left: auto; flex: 0 0 auto; color: var(--wd-muted); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.wd-model-key { margin: -2px 14px 6px; color: var(--wd-muted); font-size: 11px; text-align: right; }
.wd-model-option-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wd-muted); font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.wd-model-default { padding: 0 6px; border-radius: 999px; background: rgba(95, 227, 106, 0.16); color: #9fe3a6; font-size: 10.5px; font-weight: 600; }
.wd-model-empty { margin: 4px 14px 12px; color: var(--wd-muted); font-size: 12px; }
.wd-credits-line { flex: 0 0 auto; margin: 0 0 0 auto; color: #aab0ba; font-size: 11.5px; white-space: nowrap; }
.wd-credits-line span { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.wd-credits-line a { color: var(--wd-accent); text-decoration: none; }
.wd-credits-line a:hover { text-decoration: underline; }
.wd-spend { margin-top: 4px; color: #e9c46a; font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }

/* a phone, upright or turned sideways (world_controller.js PHONE is the same) */
@media (max-width: 760px), (max-height: 520px) and (pointer: coarse) {
  /* in the menu, All worlds' arrow a little bigger than its words */
  .wd-back span { font-size: 18px; }
  /* the parts go where the world's pads leave room: what's said at the top,
     the Change button over the jump button, and the box as a sheet over the
     bottom, on top of the keyboard */
  .wd-overlay { position: static; width: auto; min-width: 0; margin: 0; }
  /* at the top, the width of the screen */
  .wd-caption { position: absolute; z-index: 4; top: calc(12px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; pointer-events: none; }
  .wd-caption > * { pointer-events: auto; }
  .wd-caption-card { font-size: 13.5px; }
  .wd-sheet { display: none; position: absolute; z-index: 6; left: 0; right: 0; bottom: var(--wd-kb, 0px); padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--wd-line); border-radius: 16px 16px 0 0; background: var(--wd-panel); box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45); pointer-events: auto; }
  .wd-open .wd-sheet { display: flex; }
  .wd-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; font-size: 14px; }
  .wd-sheet-head .wd-link-button { padding: 4px 2px; color: var(--wd-accent); font-size: 14px; font-weight: 600; }
  /* (whatever is typed: the box and the ideas take turns here, and a draft waits in the box) */
  .wd-open[data-ideas]:not([data-ideas=""]) .wd-ideas { display: block; }
  /* open, the sheet is the whole of what's visible (above the keyboard, if
     it's up; world_controller.js fitSheetToView sets --wd-top and --wd-kb),
     and the box fills what the head and the ideas leave */
  /* Its color reaches past it to every edge of the screen (a shadow with
     nothing but spread), so nothing of the world shows: not above it, and
     not below it around a keyboard with see-through, rounded edges (iOS). */
  .wd-open .wd-sheet { top: var(--wd-top, 0px); gap: 12px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); border-top: 0; border-radius: 0; box-shadow: 0 0 0 100vmax var(--wd-panel); }
  /* the head at the top, and the ideas and the box at the foot, by the keyboard */
  .wd-open .wd-sheet-head { margin-bottom: auto; }
  .wd-sheet .wd-ideas { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
  .wd-sheet .wd-dock { flex: none; display: flex; flex-direction: column; }
  /* four lines at most, then it scrolls (host.js autosize grows it to fit) */
  .wd-sheet .wd-compose textarea { line-height: 1.45; max-height: calc(4 * 1.45em + 14px); }
  /* the gallery takes the box's place, over a one-line box, and the ideas make room for it */
  .wd-sheet .wd-dock:has(.wd-gallery:not([hidden])) { flex: 1; min-height: 0; }
  .wd-overlay.wd-open .wd-sheet:has(.wd-gallery:not([hidden])) .wd-ideas { display: none; }
  .wd-sheet .wd-gallery { position: static; flex: 1; min-height: 0; height: auto; border: 0; border-bottom: 1px solid var(--wd-line); border-radius: 16px 16px 0 0; background: none; box-shadow: none; }
  /* the ideas one above the other, each the full width: filled and borderless,
     so they read as buttons to tap rather than another box to type in */
  .wd-suggestions, .wd-try-next { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; }
  .wd-try-next .wd-suggestions-label { align-self: flex-start; padding: 0 2px; background: none; }
  .wd-suggestion, .wd-try-next .wd-suggestion:nth-of-type(n+3) { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border-color: transparent; border-radius: 12px; background: rgba(95, 227, 106, 0.12); color: #d4f7d8; font-size: 14px; text-align: left; }
  .wd-suggestion::after { content: "↑"; flex: none; margin-left: auto; color: var(--wd-accent); font-weight: 700; }
  .wd-suggestion:hover { border-color: transparent; background: rgba(95, 227, 106, 0.2); }
  .wd-try-next .wd-suggestion { flex: none; text-align: left; text-wrap: pretty; }
  .wd-suggestions-label { background: var(--wd-raise); }
  /* The sheet opens on the ideas (three at most), each sent with one tap,
     with Write your own prompt under them: no box and no keyboard until
     that's tapped (wd-writing, world_controller.js writeOwn). Then the ideas
     go, the box takes their place with Generate under it, and ‹ Ideas in the
     head goes back to them, if there are any. */
  .wd-sheet .wd-suggestion:nth-of-type(n+4) { display: none; }
  .wd-overlay.wd-open:not(.wd-writing) .wd-sheet .wd-dock { display: none; }
  .wd-overlay.wd-open:not(.wd-writing) .wd-write-own { display: flex; }
  .wd-overlay.wd-open.wd-writing .wd-sheet .wd-ideas { display: none; }
  .wd-overlay.wd-writing:has(.wd-ideas .wd-suggestion) .wd-sheet-back { display: block; }
  .wd-sheet-head b { flex: 1; }
  .wd-sheet-back + b { text-align: center; }
  .wd-sheet-head .wd-sheet-back { margin-right: 8px; color: var(--wd-text); font-weight: 400; }
  /* an outline where the ideas are filled: something to start, not something to send */
  .wd-write-own { align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 14px; border: 1px solid var(--wd-line); border-radius: 12px; background: none; color: var(--wd-text); font: 600 14px system-ui, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .wd-write-own:active { background: rgba(255, 255, 255, 0.06); }
  .wd-write-own:focus-visible { outline: 2px solid var(--wd-focus); outline-offset: 2px; }
  .wd-write-own svg { flex: none; color: var(--wd-accent); }
  /* Generate, the width of the box, under what's typed; faint until there's something to send */
  .wd-sheet .wd-compose { flex-wrap: wrap; padding: 8px 8px 8px 12px; }
  .wd-sheet .wd-send { flex: 1 0 100%; height: 44px; margin-top: 4px; border-radius: 12px; font-size: 16px; transition: opacity 0.15s; }
  .wd-sheet .wd-send-arrow { display: none; }
  .wd-sheet .wd-send-words { display: inline; }
  .wd-overlay:not(.wd-typing) .wd-sheet .wd-send { opacity: 0.45; }
  .wd-dock { border-color: var(--wd-line); background: var(--wd-raise); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .wd-compose textarea { font-size: 16px; }
  .wd-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wd-gallery-search { font-size: 16px; }
  /* the sections in one row that scrolls sideways, out to the panel's edges, fading there */
  .wd-gallery-tabs { flex-wrap: nowrap; margin: 0 -12px; padding: 0 12px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 28px), transparent); }
  /* Sparkles (the owner's box for changing it) is one of the world's own
     buttons for a thumb, Jump's size, in the bottom row between the stick
     and Jump, its foot level with both, --wd-gap right of the stick (16px
     where there's room, down to 6px on a 375px phone). The stick is 120px,
     22px in from the left and 22px up; Jump is 64px, 22px in from the right
     and 22px up, with Down and Use above it (app/views/worlds/runner.html.erb).
     The menu's gear goes with the sparkles, always to its right in the row,
     its twin (the same size and look); a desktop has the bar instead. A
     visitor, with no sparkles, gets it in the sparkles' place. The two are
     Jump's size (64px) wherever the row has room, which is any phone 375px
     wide or more; narrower (320px, a small iPhone with Display Zoom), they
     shrink together, to 40px, rather than reach Jump.
     Controls is in the menu instead of a corner of its own. */
  .wd-controls-button, .wd-fullscreen-button, .wd-fullscreen-button[hidden] { display: none; }
  /* --wd-pad: the two buttons' size; the stick takes 142px from the left, Jump 86px from the right */
  .wd { --wd-pad: clamp(40px, (100vw - 240px) / 2, 64px); --wd-gap: clamp(4px, (100vw - 228px - 2 * var(--wd-pad)) / 3, 16px); }
  .wd-sparkles-button, .wd-menu-button { position: absolute; z-index: 4; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); display: grid; place-items: center; width: var(--wd-pad); height: var(--wd-pad); padding: 0; border: 0; border-radius: 50%; background: rgba(20, 22, 28, 0.55); color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  /* the sparkles, or a visitor's gear in its place; then an owner's gear */
  .wd-sparkles-button, .wd-stage:not(:has(.wd-sparkles-button)) .wd-menu-button { left: calc(142px + var(--wd-gap) + env(safe-area-inset-left, 0px)); }
  .wd-stage:has(.wd-sparkles-button) .wd-menu-button { left: calc(142px + 2 * var(--wd-gap) + var(--wd-pad) + env(safe-area-inset-left, 0px)); }
  .wd-sparkles-button:focus-visible, .wd-menu-button:focus-visible { outline: 2px solid var(--wd-focus); outline-offset: 2px; }
  /* nothing to change until the world is there: hidden while it loads (or failed to) */
  .wd-stage:has(.wd-cover:not(.wd-gone)) .wd-sparkles-button { display: none; }
  /* nor the gear while it loads; but if it failed, the menu is the way out (All worlds), so that shows */
  .wd-stage:has(.wd-cover:not(.wd-gone):not(.wd-cover-error)) .wd-menu-button { display: none; }
}

/* Confirmations (worlds/confirm.js) */
/* admins: a change's request and response (worlds/exchange.js) */
.wd-modal.wd-exchange { width: min(920px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; padding: 22px 24px; }
.wd-exchange-heading { margin: 0 0 14px; font-size: 18px; }
.wd-exchange-try + .wd-exchange-try { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--wd-line); }
.wd-exchange-title { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.wd-exchange-title h2 { margin: 0; font-size: 15px; }
.wd-exchange-meta { color: var(--wd-muted); font-size: 12px; }
.wd-exchange-block { margin-top: 12px; }
.wd-exchange-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.wd-exchange-head h3 { margin: 0; color: var(--wd-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.wd-exchange-copy { margin-left: auto; padding: 2px 9px; border: 1px solid var(--wd-line); border-radius: 6px; background: transparent; color: var(--wd-muted); font: 12px system-ui, sans-serif; cursor: pointer; }
.wd-exchange-copy:hover { color: var(--wd-text); border-color: var(--wd-muted); }
.wd-exchange-code { max-height: 42vh; margin: 0; padding: 12px 14px; overflow: auto; border: 1px solid var(--wd-line); border-radius: 10px; background: var(--wd-bg); color: #d7dae0; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-word; tab-size: 2; }
.wd-exchange-error { margin: 10px 0 0; color: var(--wd-warn); font-size: 13px; }
.wd-exchange-full { display: inline-block; margin-top: 10px; color: var(--wd-accent); font-size: 13px; }
.wd-exchange-loading { color: var(--wd-muted); }
.wd-modal { width: min(380px, calc(100vw - 32px)); margin: auto; padding: 20px; border: 1px solid var(--wd-line); border-radius: 14px; background: var(--wd-panel); color: var(--wd-text); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); font: 14px/1.45 system-ui, -apple-system, sans-serif; }
.wd-modal::backdrop { background: rgba(8, 9, 12, 0.6); }
.wd-modal h2 { margin: 0; font-size: 16px; font-weight: 650; text-wrap: balance; }
.wd-modal p { margin: 8px 0 0; color: var(--wd-muted); text-wrap: pretty; }
.wd-modal-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--wd-muted); cursor: pointer; }
.wd-modal-close:hover { color: var(--wd-text); background: var(--wd-hover); }
.wd-modal-close:focus-visible { outline: 2px solid var(--wd-focus); outline-offset: 1px; }
.wd-modal-buttons { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 20px; }
/* Delete world, at the left of the name and description dialog's buttons */
.wd-modal-buttons > .wd-danger { margin-right: auto; }
.wd-modal-buttons > .wd-danger:disabled { opacity: 0.5; cursor: default; text-decoration: none; }
.wd-button.wd-destructive { padding: 7px 13px; border: 0; background: var(--wd-danger); color: #2a0d08; }
.wd-button.wd-destructive:hover { background: #ffa396; }

/* Admins: a world's conversation with the model (/worlds/admin, /worlds/:token/conversation) */
.wc { max-width: 100%; }
.wc-head, .wc-system, .wc-turns, .wc-table-wrap, .wc-pages, .wc-empty, .wc-transcript { max-width: 960px; margin-left: auto; margin-right: auto; }
.wc-head { margin-top: 18px; margin-bottom: 18px; }
.wc-head h1 { margin: 0; font-size: clamp(26px, 4vw, 36px); letter-spacing: -0.02em; }
.wc-head p { margin: 8px 0 0; color: var(--wd-muted); font-size: 14px; }
.wc-head a, .wc-table a, .wc-msg a { color: var(--wd-accent); }
.wc-sub { color: var(--wd-muted); font-size: 12px; font-weight: 400; }
.wc-note { color: var(--wd-muted); font-size: 13px; }
.wc-empty { color: var(--wd-muted); }
.wc pre { margin: 8px 0 0; padding: 12px; max-height: 520px; overflow: auto; border-radius: 10px; background: #111317; color: #d7dbe3; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.wc pre.wc-code { white-space: pre; overflow-wrap: normal; }
.wc details > summary { cursor: pointer; font-size: 13px; color: var(--wd-text); }
.wc-system { padding: 12px 14px; border: 1px solid var(--wd-line); border-radius: 12px; background: var(--wd-panel); }
.wc-turns { list-style: none; margin-top: 18px; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.wc-turn { padding: 14px; border: 1px solid var(--wd-line); border-radius: 14px; background: var(--wd-panel); display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 16px; }
.wc-turn:target { border-color: var(--wd-accent); }
.wc-turn-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--wd-muted); }
.wc-turn-number { color: var(--wd-text) !important; font-weight: 700; text-decoration: none; }
.wc-badge { padding: 2px 8px; border-radius: 999px; background: var(--wd-raise); color: var(--wd-text); font-size: 12px; }
.wc-badge.wc-good { background: rgba(95, 227, 106, 0.16); color: #9fe3a6; }
.wc-badge.wc-bad { background: rgba(255, 138, 120, 0.16); color: var(--wd-danger); }
.wc-bad-text { color: var(--wd-danger); font-size: 13px; }
.wc-msg { padding: 10px 12px; border-radius: 12px; border-left: 3px solid var(--wd-line); background: var(--wd-raise); }
.wc-msg p { margin: 4px 0 0; }
.wc-msg.wc-user { border-left-color: #4f9d5a; }
.wc-msg.wc-model { border-left-color: #8a7cf0; }
.wc-msg.wc-retry { border-left-color: var(--wd-warn); }
.wc-msg.wc-world { border-left-color: #48b8d0; }
.wc-role { font-size: 12px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wd-muted); }
.wc-role .wc-sub { text-transform: none; letter-spacing: 0; }
.wc-request { font-size: 16px; font-weight: 600; }
.wc-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wc-suggestions span { padding: 3px 10px; border: 1px solid var(--wd-line); border-radius: 999px; font-size: 12px; }
.wc-transcript { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.ws-h { max-width: 960px; margin: 34px auto 10px; font-size: 16px; }
.ws-table td { vertical-align: top; }
.ws-ideas { margin-top: 4px; max-width: 360px; color: var(--wd-muted); font-size: 12px; }
.ws-range { display: block; color: var(--wd-muted); font-size: 11px; white-space: nowrap; }
.ws-primary { background: rgba(95, 227, 106, 0.06); }
.ws-tag { padding: 0 6px; border-radius: 999px; background: var(--wd-raise); color: var(--wd-muted); font-size: 11px; }
.ws-tag-lead { background: rgba(95, 227, 106, 0.18); color: #9fe3a6; }
.ws-leads td:first-child strong { color: #9fe3a6; }
.wc-table-wrap { overflow-x: auto; border: 1px solid var(--wd-line); border-radius: 12px; }
.wc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.wc-table th, .wc-table td { padding: 10px 12px; border-bottom: 1px solid var(--wd-line); text-align: left; vertical-align: top; }
.wc-table th { color: var(--wd-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.wc-table tr:last-child td { border-bottom: 0; }
.wc-table td a { font-weight: 600; text-decoration: none; }
.wc-table .wc-sub { display: block; }
.wc-num { text-align: right !important; font-variant-numeric: tabular-nums; }
.wc-pages { margin-top: 14px; }
.wc-pages nav { display: flex; gap: 10px; font-size: 14px; }

/* ---- A world on a phone: no bar, a menu ---- */
/* The bar takes room the world needs, so on a phone it's hidden, and the
   gear by the world's sparkles button opens it as a menu over the top of the
   page, 480px wide at most: the name (which its owner can rename there), what
   it is, then every action as a tall row with its icon (two to a row on a
   phone turned sideways, which is short), Share opening in place, and All
   worlds last.
   (world_controller.js has the same query as MENU.) */
.wd-menu-close, .wd-menu-backdrop, .wd-menu-icon, .wd-visibility { display: none; }
/* a phone either way up, as everywhere (world_controller.js PHONE): the gear that opens it is styled with the sparkles button, above */
@media (max-width: 760px), (max-height: 520px) and (pointer: coarse) {
  .wd-bar { display: none; }
  .wd-menu-open .wd-menu-backdrop { display: block; position: fixed; inset: 0; z-index: 29; background: rgba(8, 9, 12, 0.55); }
  .wd-menu-open .wd-bar { pointer-events: auto; background: var(--wd-panel); position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: flex; flex-direction: column; align-items: stretch; gap: 14px; max-height: 100dvh; overflow-y: auto; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 16px; border-bottom: 1px solid var(--wd-line); border-radius: 0 0 16px 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); }
  .wd-menu-open .wd-menu-close { position: absolute; z-index: 2; top: calc(10px + env(safe-area-inset-top, 0px)); right: 10px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--wd-muted); cursor: pointer; }
  /* the name first, clear of the close button, then the actions, then All worlds */
  .wd-menu-open .wd-name { order: 1; padding-right: 44px; }
  /* the name in full, wrapping to two lines at most */
  .wd-menu-open .wd-name h1 { font-size: 18px; line-height: 1.3; white-space: normal; text-overflow: clip; }
  .wd-menu-open .wd-name h1:not(:has(.wd-title-show)), .wd-menu-open .wd-title-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  /* an owner's: the name and a pencil, which opens Rename */
  .wd-menu-open .wd-title-show { align-items: flex-start; gap: 8px; width: 100%; padding: 0; }
  .wd-menu-open .wd-title-pencil { margin-top: 4px; }
  /* the name over what it is, as on a phone held upright, however wide it's turned */
  .wd-menu-open .wd-name { flex-direction: column; align-items: flex-start; gap: 0; }
  .wd-menu-open .wd-name > span { flex: none; max-width: 100%; font-size: 13px; }
  .wd-menu-open .wd-actions { order: 2; flex-direction: column; align-items: stretch; gap: 8px; }
  /* the bar's own buttons, not the ones inside Share */
  .wd-menu-open .wd-actions > .wd-button, .wd-menu-open .wd-share > .wd-button, .wd-menu-open .wd-copy-form .wd-button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; justify-content: flex-start; padding: 0 16px; border-radius: 14px; font-size: 16px; }
  .wd-menu-open .wd-menu-icon { display: block; flex: none; }
  .wd-menu-open .wd-video-button svg { flex: none; width: 20px; height: 20px; }
  .wd-menu-open .wd-video-label { display: inline; }
  .wd-menu-open .wd-bar { max-width: 480px; margin: 0 auto; }
  /* sideways, short: two to a row (Edit World across both) */
  @media (orientation: landscape) {
    .wd-menu-open .wd-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .wd-menu-open .wd-actions > .wd-primary, .wd-menu-open .wd-copy-form .wd-button { grid-column: 1 / -1; }
    .wd-sharing .wd-actions { display: flex; }
  }
  /* Share, History, then Download Video (a visitor's Copy and Edit stays first) */
  .wd-menu-open .wd-share { order: 1; }
  .wd-menu-open .wd-actions > [data-action="world#openHistory"] { order: 2; }
  .wd-menu-open .wd-video-button { order: 3; }
  .wd-menu-open .wd-menu-only { display: flex; order: 4; }
  /* Share, from the menu, is a screen of its own: the menu shows only it, the
     whole height, with its name at the top, and its X closes both */
  .wd-sharing .wd-bar { bottom: 0; max-height: none; border-radius: 0; }
  .wd-sharing .wd-bar > :not(.wd-actions):not(.wd-menu-close), .wd-sharing .wd-actions > :not(.wd-share), .wd-sharing .wd-share > .wd-button { display: none; }
  .wd-sharing .wd-share .wd-panel { margin-top: 0; padding: 0; border: 0; background: none; }
  .wd-sharing .wd-panel-title { display: block; margin: 4px 48px 18px 0; color: var(--wd-text); font-size: 20px; font-weight: 650; }
  /* admins only, so last */
  .wd-menu-open .wd-back { order: 3; padding: 10px 2px 0; border-top: 1px solid var(--wd-line); font-size: 15px; }
  /* Share opens in place in the menu, as part of it */
  .wd-menu-open .wd-share .wd-panel { position: relative; z-index: auto; top: auto; right: auto; width: auto; margin-top: 8px; box-shadow: none; }
  .wd-menu-open .wd-share .wd-panel::before { display: none; }
  /* In the menu the panel is in the bar's own layer (z-index auto, so the
     menu's X shows over it), where Share's tap-outside layer would be on top
     of it and take every tap on a switch, closing the menu instead. The menu
     has its own backdrop, and as a screen of its own Share covers the page. */
  .wd-menu-open .wd-panel:not([hidden]) + .wd-share-backdrop { display: none; }
}

/* Download Video, and the editor that trims the last minute and saves it */
.wd-video-button { display: inline-flex; align-items: center; gap: 6px; }
.wd-modal.wd-clip { position: relative; width: min(720px, calc(100vw - 32px)); }
.wd-clip h2 { padding-right: 40px; }
.wd-clip-preview { display: block; width: 100%; height: auto; margin-top: 14px; border-radius: 10px; background: #000; }
.wd-trim { position: relative; height: 54px; margin: 14px 10px 0; border-radius: 8px; touch-action: none; cursor: pointer; user-select: none; -webkit-user-select: none; }
.wd-trim-strip { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 8px; }
.wd-trim-shade { position: absolute; top: 0; bottom: 0; background: rgba(8, 9, 12, 0.72); }
.wd-trim-shade:first-of-type { border-radius: 9px 0 0 9px; }
.wd-trim-keep { position: absolute; top: -3px; bottom: -3px; border: 3px solid var(--wd-accent); border-radius: 8px; pointer-events: none; }
.wd-trim-playhead { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 4px rgba(0, 0, 0, 0.6); pointer-events: none; }
.wd-trim-handle { position: absolute; top: -6px; bottom: -6px; width: 14px; margin-left: -7px; border-radius: 5px; background: var(--wd-accent); cursor: ew-resize; }
.wd-trim-handle::after { content: ""; position: absolute; left: 5px; top: 50%; width: 4px; height: 18px; margin-top: -9px; border-left: 1px solid rgba(0, 0, 0, 0.45); border-right: 1px solid rgba(0, 0, 0, 0.45); }
.wd-trim-handle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.wd-clip-status { min-height: 1.45em; }
@media (max-width: 760px), (max-height: 520px) and (pointer: coarse) {
  .wd-video-label { display: none; }
  /* the whole screen on a phone, with nothing of the world showing around
     it, and the preview as big as what's left over leaves it */
  .wd-modal.wd-clip { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; box-sizing: border-box; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; }
  .wd-modal.wd-clip:not([open]) { display: none; }
  .wd-modal.wd-clip::backdrop { background: #1b1e24; }
  .wd-clip .wd-modal-close { top: calc(10px + env(safe-area-inset-top, 0px)); }
  .wd-clip-preview { flex: 1 1 0; min-height: 0; height: 0; object-fit: contain; background: none; }
  .wd-clip .wd-modal-buttons { margin-top: 12px; }
}

/* A world's history (worlds/history.js): a panel over the right of the world (a sheet on phones) */
.wd-modal.wd-history { position: fixed; inset: 0 0 0 auto; width: min(440px, 100vw); max-width: none; height: 100%; max-height: none; margin: 0; padding: 18px 16px 0; border-width: 0 0 0 1px; border-radius: 0; display: flex; flex-direction: column; }
.wd-modal.wd-history:not([open]) { display: none; }
.wd-modal.wd-history::backdrop { background: rgba(8, 9, 12, 0.3); }
.wd-history-head { display: flex; align-items: center; justify-content: space-between; }
.wd-history .wd-clip-status:empty { display: none; }
/* admins: the world's conversation, under the intro */
.wd-history-conversation { align-self: flex-start; margin-top: 10px; color: #e9c46a; font-size: 13px; font-weight: 600; text-decoration: none; }
.wd-history-conversation:hover { text-decoration: underline; }
.wd-history-head .wd-modal-close { position: static; }
/* centered by the numbers, it looks a touch low next to the heading */
.wd-history-head .wd-modal-close svg { transform: translateY(-1px); }
.wd-versions { flex: 1; min-height: 0; list-style: none; margin: 12px -16px 0; padding: 0 16px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.wd-version { padding: 10px 12px; border: 1px solid var(--wd-line); border-radius: 10px; background: var(--wd-raise); }
.wd-version.wd-current { border-color: var(--wd-accent); }
.wd-version-head { display: flex; align-items: flex-start; gap: 12px; }
.wd-version-text { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.wd-version-text b { font-size: 14px; overflow-wrap: anywhere; }
.wd-version-reply { color: var(--wd-text); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.wd-version-reply.wd-warn { color: var(--wd-warn); }
.wd-version-reply.wd-inspectable { cursor: pointer; }
.wd-version-reply.wd-inspectable:hover { outline: 1px dashed rgba(233, 196, 106, 0.6); outline-offset: 2px; }
.wd-version-meta { color: var(--wd-muted); font-size: 12px; overflow-wrap: anywhere; }
.wd-version-picture { flex: 0 0 auto; display: grid; place-items: center; width: 96px; height: 54px; overflow: hidden; border-radius: 6px; background: var(--wd-bg); color: var(--wd-muted); font-size: 11px; text-decoration: none; }
.wd-version-picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wd-version-sub .wd-version-head { padding-left: 108px; }
a.wd-version-picture:hover { outline: 2px solid var(--wd-accent); }
.wd-version-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 5px; }
.wd-version-actions:empty { display: none; }
.wd-version-actions .wd-button { padding: 5px 11px; background: var(--wd-hover); }
.wd-version-actions .wd-button:hover { background: #363b46; }
.wd-version-link { flex: 1 1 100%; min-width: 0; padding: 5px 8px; border: 1px solid var(--wd-line); border-radius: 8px; background: var(--wd-hover); color: var(--wd-text); font: 12px system-ui, sans-serif; }
.wd-badge-now { flex: none; background: rgba(95, 227, 106, 0.16); color: #9fe3a6; }
/* the version the world is at: Now, centered under its picture */
.wd-version-side { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wd-version-side .wd-badge { align-self: center; }
/* (a row with no picture has it in its buttons, centered on them) */
.wd-version-actions .wd-badge { align-self: center; }
@media (max-width: 760px), (max-height: 520px) and (pointer: coarse) {
  /* the whole screen on a phone, bar and all: there's nothing to keep in view behind it */
  .wd-modal.wd-history { inset: 0; width: 100%; height: 100%; padding-top: calc(14px + env(safe-area-inset-top, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); border-width: 0; border-radius: 0; }
  .wd-version-picture { width: 72px; height: 41px; }
  .wd-version-sub .wd-version-head { padding-left: 84px; }
}

/* Your Worlds on /worlds: each card says how many changes are in it, across from who can see it, and has a menu over its picture's corner to rename, duplicate or delete it (world_cards_controller.js). */
.wd-sunny .wd-mine { position: relative; height: 100%; min-width: 0; }
.wd-sunny .wd-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.wd-sunny .wd-card-meta .wd-badge { margin-top: 0; }
.wd-sunny .wd-card-changes { color: var(--wd-ink-soft); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.wd-card-menu { position: absolute; top: 8px; right: 8px; z-index: 5; }
.wd-card-menu[open] { z-index: 20; }
.wd-card-menu > summary { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--wd-ink); box-shadow: 0 1px 4px rgba(23, 24, 28, 0.18); list-style: none; cursor: pointer; }
.wd-card-menu > summary::-webkit-details-marker { display: none; }
.wd-card-menu > summary:hover, .wd-card-menu[open] > summary { background: #fff; }
.wd-card-menu > summary:focus-visible { outline: 2px solid var(--wd-go-ink); outline-offset: 2px; }
.wd-card-menu-list { position: absolute; right: 0; top: calc(100% + 6px); display: flex; flex-direction: column; min-width: 170px; padding: 6px; border: 1px solid var(--wd-rule); border-radius: 14px; background: #fff; box-shadow: 0 14px 34px rgba(23, 24, 28, 0.12); }
.wd-card-menu-list button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: none; color: var(--wd-ink); font: 600 14.5px/1.2 var(--wd-font); text-align: left; cursor: pointer; }
.wd-card-menu-list button:hover { background: var(--wd-field); }
.wd-card-menu-list button:disabled { opacity: 0.55; cursor: default; }
.wd-card-menu-list button.wd-card-menu-danger { color: #b3261e; }
/* What went wrong (or right) on /worlds, under the nav. */
.wd-flash { max-width: 1200px; margin: 4px auto 0; padding: 0 var(--wd-gutter); }
.wd-flash[hidden] { display: none; }
.wd-flash-message { margin: 0; padding: 11px 15px; border-radius: 12px; background: #fde8e6; color: #8f1d17; font-weight: 600; line-height: 1.4; }
.wd-flash-message + .wd-flash-message { margin-top: 8px; }
.wd-flash-message.wd-flash-good { background: #e2f3e8; color: var(--wd-go-ink); }
/* Who can visit, from the label by the name: Share's switches and link, in a dialog (they go back to Share when it closes) */
.wd-modal.wd-visibility-dialog { position: relative; width: min(400px, calc(100vw - 32px)); }
.wd-visibility-dialog h2 { margin: 0 40px 16px 0; }
.wd-visibility-dialog .wd-button:not(.wd-primary) { background: var(--wd-hover); }
.wd-visibility-dialog .wd-status { display: block; min-height: 1.45em; margin-top: 10px; }