/* Journey world: the pixel-art view beside the timeline. */
.journey { position: relative; }
[data-journey-mode="world"] .journey-controls { display: none !important; }

.journey-world { position: relative; height: clamp(540px, calc(100svh - 170px), 780px); overflow: hidden; background: #1b1b1b radial-gradient(#ffffff0f 1px, transparent 1.2px) 0 0 / 14px 14px; color: #fff; font-family: 'Geist Mono', monospace; }
.journey-world[hidden] { display: none; }
.world-viewport { position: absolute; inset: 0; overflow: hidden; outline: none; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.world-viewport.is-grabbing canvas { cursor: grabbing !important; }
.world-viewport:focus-visible { box-shadow: inset 0 0 0 2px #7aa9ff; }
.world-canvas { position: absolute; top: 0; left: 0; display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.world-labels { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
/* Logo badges pinned above each place's roof; the name opens out at the current one. */
.world-badge { position: absolute; top: 0; left: 0; padding-bottom: 7px; will-change: transform; }
.world-badge.is-hovered { z-index: 1; }
.world-badge-card { position: relative; isolation: isolate; display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 6px; border-radius: 11px; background: #121212; box-shadow: inset 0 0 0 1px #ffffff47, 0 4px 12px #00000080; color: #f2f2f2; font-size: 12px; line-height: 1; white-space: nowrap; pointer-events: auto; cursor: pointer; transform-origin: 50% calc(100% + 7px); transition: scale 180ms cubic-bezier(.3, 1.5, .6, 1); }
/* The pin's point, reaching down to the roof. */
.world-badge-card::after { content: ''; position: absolute; z-index: -1; top: calc(100% - 5px); left: 50%; width: 10px; height: 10px; border: solid #ffffff47; border-width: 0 1px 1px 0; background: inherit; transform: translateX(-50%) rotate(45deg); }
.world-badge.is-hovered .world-badge-card { scale: 1.15; }
.world-badge-icons { display: flex; gap: 5px; }
.world-badge-icons img { display: block; width: 22px; height: 22px; border-radius: 5px; object-fit: contain; }
.world-badge-icons img.is-inverted { filter: invert(1); }
.world-badge-icons img.is-white { filter: brightness(0) invert(1); }
.world-badge-name { display: none; padding-right: 3px; }
.world-badge.is-current .world-badge-card { background: #0d99ff; box-shadow: 0 4px 12px #00000080; }
.world-badge.is-current .world-badge-card::after { border-color: transparent; }
.world-badge.is-current .world-badge-name { display: inline; }
@media (prefers-reduced-motion: reduce) { .world-badge-card { transition: none; } }
.world-badge[hidden], .world-name[hidden] { display: none; }
.world-name { position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: 5px; color: #fff; font-size: 11px; line-height: 1; text-shadow: 0 1px 2px #000000b3; white-space: nowrap; will-change: transform; }
.world-name::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #00000080; }
/* Another visitor, in their live-cursor colour; cursor chat shows under the name. */
.world-peer { flex-direction: column; align-items: flex-start; gap: 3px; padding: 4px 7px 5px; border-radius: 10px; background: var(--peer); box-shadow: 0 1px 3px #0005; text-shadow: none; font: 400 11px/1 'Inter', sans-serif; }
.world-peer::before { display: none; }
.world-peer-message { display: none; }
.world-peer.is-chatting { padding: 6px 11px 8px; border-radius: 14px; }
.world-peer.is-chatting .world-peer-name { font-size: 10px; opacity: .8; }
.world-peer.is-chatting .world-peer-message { display: block; width: max-content; max-width: 220px; font-size: 13px; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
/* A gesture's emoji, popping up over the name tag; a heart beats. */
.world-emoji { position: absolute; left: 50%; bottom: calc(100% + 6px); font-size: 24px; line-height: 1; text-shadow: none; filter: drop-shadow(0 2px 3px #00000059); transform: translateX(-50%); transform-origin: 50% 100%; animation: world-emoji-in 420ms cubic-bezier(.3, 1.5, .5, 1) both, world-emoji-out 450ms ease-in calc(var(--emoji-time, 2s) - 450ms) forwards; }
.world-emoji > span { display: block; }
.world-emoji[data-emote="heart"] > span { animation: world-emoji-beat 1s ease-in-out 420ms infinite; }
@keyframes world-emoji-in { from { opacity: 0; scale: .3; translate: 0 10px; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes world-emoji-out { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -14px; } }
@keyframes world-emoji-beat { 0%, 40%, 100% { scale: 1; } 12% { scale: 1.2; } 26% { scale: 1.1; } }
@media (prefers-reduced-motion: reduce) {
  .world-emoji { animation-name: world-emoji-fade-in, world-emoji-fade-out; animation-timing-function: ease; }
  .world-emoji[data-emote="heart"] > span { animation: none; }
  @keyframes world-emoji-fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes world-emoji-fade-out { from { opacity: 1; } to { opacity: 0; } }
}
.world-fade { position: absolute; z-index: 2; inset: 0; background: #050505; opacity: 0; pointer-events: none; transition: opacity 160ms linear; }
.world-fade.is-visible { opacity: 1; }

.world-chapters { position: absolute; z-index: 3; top: 60px; left: 5.754vw; transform-origin: top left; width: 196px; padding: 10px 6px 6px; border-radius: 14px; background: #0a0a0ad9; box-shadow: inset 0 0 0 1px #ffffff1f; }
.world-chapters-title { display: flex; justify-content: space-between; align-items: center; margin: 0 2px 6px 8px; cursor: pointer; user-select: none; color: #8b8b8b; font-size: 11px; line-height: 14px; }
.world-chapters-end { display: flex; align-items: center; gap: 4px; }
.world-chapters svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.world-chapters .world-chapters-fold { display: grid; place-items: center; width: 22px; min-height: 0; height: 22px; padding: 0; border-radius: 6px; color: #8b8b8b; }
.world-chapters :is(.world-chapters-fold, .world-chapters-unfold) { grid-template-columns: 1fr; justify-items: center; }
.world-chapters .world-chapters-fold::after, .world-chapters .world-chapters-unfold::after { content: none; }
.world-chapters .world-chapters-fold svg { width: 14px; height: 14px; }
.world-chapters-title:hover .world-chapters-fold { background: #ffffff14; color: #ddd; }
.world-chapters .world-chapters-unfold { display: none; }
/* Folded: only the button shows, sized like the toolbar's. */
.world-chapters.is-folded { width: auto; padding: 0; background: none; box-shadow: none; }
.world-chapters.is-folded :is(.world-chapters-title, ol) { display: none; }
.world-chapters.is-folded .world-chapters-unfold { display: grid; place-items: center; width: 36px; height: 36px; min-height: 0; padding: 0; border-radius: 10px; background: #0a0a0ad9; color: #ddd; box-shadow: inset 0 0 0 1px #ffffff1f; }
.world-chapters.is-folded .world-chapters-unfold:hover { color: #fff; }
.world-chapters ol { margin: 0; padding: 0; list-style: none; }
.world-chapters button { display: grid; grid-template-columns: 30px 1fr 10px; align-items: center; width: 100%; min-height: 26px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: #cfcfcf; font: inherit; font-size: 11px; line-height: 14px; text-align: left; cursor: pointer; }
.world-chapters button::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #3a3a3a; justify-self: end; }
.world-chapters button.is-visited::after { background: #7ee787; }
.world-chapters button[aria-current] { background: #0d99ff; color: #fff; }
.world-chapters button[aria-current]::after { background: #fff; }
.world-chapters button:focus-visible { outline: 1px solid #7aa9ff; outline-offset: -1px; }
.world-chapter-year { color: #777; }
.world-chapters button[aria-current] .world-chapter-year { color: #ffffffb3; }
.world-chapter-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.world-tools { position: absolute; z-index: 3; left: 5.754vw; bottom: 16px; display: flex; gap: 6px; }
.world-tools button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: #0a0a0ad9; color: #ddd; box-shadow: inset 0 0 0 1px #ffffff1f; cursor: pointer; }
.world-tools svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.world-tools button:focus-visible { outline: 1px solid #7aa9ff; outline-offset: 1px; }

.world-tutorial { position: absolute; z-index: 4; top: 14px; right: 14px; width: 236px; padding: 14px 16px 12px; border-radius: 14px; background: #161616f2; box-shadow: inset 0 0 0 1px #ffffff1f, 0 10px 30px #0000004d; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.world-tutorial[hidden] { display: none; }
.world-tutorial-head { display: flex; justify-content: space-between; margin: 0 0 4px; color: #8b8b8b; font-family: 'Geist Mono', monospace; font-size: 11px; }
.world-tutorial-title { margin: 0 0 6px; color: #fff; font-size: 14px; font-weight: 500; }
.world-tutorial-text { margin: 0 0 10px; color: #a9a9a9; font-size: 12px; line-height: 1.45; }
.world-tutorial-keys { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.world-tutorial-keys:empty { display: none; }
.world-tutorial-keys span { display: flex; gap: 3px; }
.world-tutorial-keys em { color: #777; font-size: 11px; font-style: normal; }
.world-tutorial-keys kbd { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 5px; background: #262626; box-shadow: inset 0 -1px 0 #ffffff14, inset 0 0 0 1px #ffffff1f; color: #ddd; font: 500 10px 'Geist Mono', monospace; }
.world-tutorial-skip { padding: 0; border: 0; background: none; color: #8b8b8b; font-family: 'Geist Mono', monospace; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.world-tutorial-skip:focus-visible { outline: 1px solid #7aa9ff; outline-offset: 2px; }
.world-card { position: absolute; z-index: 4; top: 14px; right: 14px; bottom: 14px; display: flex; flex-direction: column; width: min(380px, 40%); overflow: hidden; border-radius: 18px; background: #0a0a0af0; box-shadow: inset 0 0 0 1px #ffffff1f, 0 12px 40px #00000059; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.world-card-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 18px 18px 16px; overscroll-behavior: contain; scrollbar-width: thin; }
.world-card[hidden] { display: none; }
.world-card-close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #1e1e1e; color: #bbb; cursor: pointer; }
.world-card-close:focus-visible, .world-card-nav button:focus-visible { outline: 1px solid #7aa9ff; outline-offset: 1px; }
.world-card-meta { margin: 0 40px 6px 0; color: #8b8b8b; font-family: 'Geist Mono', monospace; font-size: var(--text-label); line-height: var(--leading-label); }
.world-card-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 40px 18px 0; font-size: 18px; font-weight: 500; line-height: 1.3; outline: none; }
.world-card-title .journey-company { display: inline-flex; align-items: center; gap: 6px; }
.world-card .journey-project-card { display: block; margin: 22px 0 0; }
.world-card-role { display: flex; gap: 10px; margin: 0 0 20px; padding: 10px 0; border-block: 1px solid #ffffff14; color: #e5e5e5; font-size: 13px; line-height: 1.4; }
.world-card-role span { min-width: 34px; color: #8b8b8b; font-family: 'Geist Mono', monospace; font-size: var(--text-label); line-height: inherit; }
.world-card .journey-copy { display: block; padding: 0; color: #e5e5e5; font-size: 14px; line-height: 1.5; }
.world-card .journey-copy p { margin: 0 0 14px; }
.world-card .journey-copy p:last-child { margin-bottom: 0; }
.world-card .journey-detail { color: #9a9a9a; }
.world-card-note { margin: 0 0 16px; color: #9a9a9a; font-size: 14px; line-height: 1.5; }
.world-card-nav { flex: none; display: flex; justify-content: space-between; gap: 8px; padding: 12px 18px 14px; border-top: 1px solid #ffffff14; }
.world-card-nav:empty { display: none; }
.world-card-nav button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 10px; background: #1e1e1e; color: #ddd; font-family: 'Geist Mono', monospace; font-size: var(--text-label); cursor: pointer; }
.world-card-nav button:disabled { opacity: .35; cursor: default; }

.world-status { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; margin: 0; background: #050505; color: #aaa; font-size: 12px; }
.world-status:empty, .journey-world.is-ready .world-status:empty { display: none; }

@media (max-width: 1279px) {
}
@media (max-width: 1023px) {
}
@media (max-width: 760px) {
  .journey-world { height: min(72svh, 620px); margin: 0 -20px; }
  .world-chapters { top: 12px; left: 12px; width: auto; max-width: calc(100% - 24px); padding: 4px; }
  .world-chapters-title { display: none; }
  .world-chapters.is-folded { padding: 4px; background: #0a0a0ad9; box-shadow: inset 0 0 0 1px #ffffff1f; }
  .world-chapters.is-folded ol { display: flex; }
  .world-chapters.is-folded .world-chapters-unfold { display: none; }
  .world-chapters ol { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
  .world-chapters button { grid-template-columns: auto; min-height: 32px; padding: 0 8px; }
  .world-chapters button::after, .world-chapter-name { display: none; }
  .world-chapter-year:empty::before { content: '•'; }
  .world-chapters li:last-child .world-chapter-year::before { content: '✉'; }
  .world-tools { left: 12px; bottom: 12px; }
  .world-card { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 58%; }
}
@media (hover: none) {
}
@media (prefers-reduced-motion: reduce) {
  .world-fade { transition: none; }
}
@media (max-width: 760px) {
  .world-card .journey-project-visual { max-height: 132px; }
  .world-card .journey-project-visual img { width: 100%; height: 132px; object-fit: cover; }
}

@media (max-width: 760px) {
  .world-tutorial { top: auto; right: 12px; bottom: 60px; width: min(236px, calc(100% - 24px)); }
}

/* Minimap: the whole town with the view outlined; drag on it to look around. */
.world-minimap { position: absolute; z-index: 3; top: 24px; right: 24px; width: 220px; height: 152px; border-radius: 14px; background: #0a0a0ad9; box-shadow: inset 0 0 0 1px #ffffff1f; opacity: 0; transition: opacity 240ms linear; }
.world-minimap.is-ready { opacity: 1; }
.world-minimap-map { display: block; width: 100%; height: 100%; cursor: pointer; touch-action: none; }
.world-minimap.is-dragging .world-minimap-map { cursor: grabbing !important; }
.world-minimap-lock { position: absolute; top: -9px; right: -9px; display: flex; align-items: center; gap: 6px; height: 32px; min-width: 32px; padding: 0 7px; border: 0; border-radius: 16px; background: #121212; color: #8b8b8b; box-shadow: inset 0 0 0 1px #ffffff26, 0 2px 6px #0000004d; font: inherit; font-size: 11px; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color 160ms linear, color 160ms linear; }
.world-minimap-lock svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.world-minimap-lock svg circle:last-child { fill: currentColor; stroke: none; }
.world-minimap-lock span { display: none; padding-right: 3px; }
.world-minimap-lock:hover { color: #ddd; }
.world-minimap-lock:focus-visible { outline: 1px solid #7aa9ff; outline-offset: 1px; }
.world-minimap.is-free .world-minimap-lock { background: #0d99ff; color: #fff; box-shadow: 0 2px 8px #0000004d; }
.world-minimap.is-free .world-minimap-lock span { display: inline; }
@media (min-width: 761px) {
  .world-card:not([hidden]) ~ .world-minimap { visibility: hidden; }
}
@media (max-width: 760px) {
  /* From the top of the logo to the bottom of the view switch, narrower where the switch is close. */
  .world-minimap { top: 32px; right: 24px; width: clamp(84px, calc(100vw - 240px), 140px); height: 107px; border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .world-minimap, .world-minimap-lock { transition: none; }
}

/* Full-page world: the scene fills the window and the page chrome floats on it. */
[data-journey-mode="world"] .portfolio-page[data-view="journey"] { height: 100svh; overflow: hidden; }
[data-journey-mode="world"] [data-view="journey"] .journey-world { position: fixed; inset: 0; z-index: 0; height: auto; }
[data-journey-mode="world"] [data-view="journey"] .intro { position: relative; z-index: 5; pointer-events: none; }
[data-journey-mode="world"] [data-view="journey"] .intro > * { pointer-events: auto; }
/* The toolbar row spans the width; only its controls take the pointer, so the minimap under it stays usable. */
[data-journey-mode="world"] [data-view="journey"] .intro > .view-toolbar { pointer-events: none; }
[data-journey-mode="world"] [data-view="journey"] .view-toolbar > * { pointer-events: auto; }
[data-journey-mode="world"] [data-view="journey"] .world-chapters { top: 162px; }
[data-journey-mode="world"] [data-view="journey"] .journey-bottom { display: none; }
/* The footer's links and chat hint move into the toolbar (journey-world.js). */
[data-journey-mode="world"] .portfolio-page[data-view="journey"] > .site-footer { display: none; }
.world-tools .site-menu-toggle { display: grid; order: -1; text-decoration: none; }
.world-tools .site-menu-toggle[aria-expanded="true"] { background: #1e1e1e; color: #fff; }
.world-tools .site-menu { position: absolute; z-index: 6; left: 0; bottom: calc(100% + 8px); display: none; flex-direction: column; width: 196px; padding: 6px; border-radius: 14px; background: #0a0a0af2; box-shadow: inset 0 0 0 1px #ffffff1f, 0 12px 32px #00000066; font-size: 11px; line-height: 20px; white-space: nowrap; }
.world-tools .site-menu.is-open { display: flex; }
.world-tools .site-menu > :is(a, button) { display: flex; align-items: center; justify-content: space-between; width: 100%; height: auto; min-height: 28px; padding: 0 8px; border: 0; border-radius: 8px; background: none; box-shadow: none; color: #cfcfcf; font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background-color 120ms, color 120ms; }
.world-tools .site-menu > :is(a, button):is(:hover, :focus-visible) { background: #ffffff14; color: #fff; outline: none; }
.world-tools .site-menu > [hidden], .site-menu-controls { display: none; }
.world-tools .site-menu kbd { display: grid; place-items: center; min-width: 18px; height: 18px; border-radius: 5px; background: #ffffff1a; color: #f2f2f2; font: 600 10px/1 ui-monospace, "SFMono-Regular", Menlo, monospace; }
.world-tools .live-hint { position: static; display: inline-flex; align-items: center; gap: 6px; width: auto; height: 36px; padding: 0 12px 0 8px; border-radius: 10px; background: #0a0a0ad9; box-shadow: inset 0 0 0 1px #ffffff1f; color: #8a8a8a; font-family: inherit; font-size: 11px; line-height: 1; white-space: nowrap; cursor: pointer; transition: color 120ms; }
.world-tools .live-hint:hover { color: #f2f2f2; }
.world-tools .live-hint[hidden] { display: none; }
.world-tools .live-hint kbd { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0; border: 0; border-radius: 6px; background: #ffffff1f; color: #f2f2f2; font: 600 11px/1 ui-monospace, "SFMono-Regular", Menlo, monospace; opacity: 1; }
@media (min-width: 761px) {
  /* "?" lives in the menu; on a phone it stays under the "more" button. */
  .world-tools [data-world-controls] { display: none; }
  .world-tools .site-menu .site-menu-controls { display: flex; }
}
@media (max-width: 760px) {
  .world-tools :is(.site-menu-toggle, .site-menu) { display: none !important; }
}
@media (max-width: 1279px) {
}
@media (max-width: 760px) {
  [data-journey-mode="world"] [data-view="journey"] .journey-world { margin: 0; }
  [data-journey-mode="world"] [data-view="journey"] .world-chapters { top: auto; bottom: 12px; left: 12px; right: 12px; max-width: none; }
  [data-journey-mode="world"] [data-view="journey"] .world-tools { bottom: 64px; left: auto; right: 12px; }
  [data-journey-mode="world"] [data-view="journey"] .world-tutorial { bottom: 112px; }
  /* Folding is a desktop idea: on a phone the strip always shows its chapters. */
  .journey-world .world-chapters.is-folded ol { display: flex; }
  [data-journey-mode="world"] .portfolio-page[data-view="journey"] > .site-footer { display: none; }
}

/* Things to do: the use prompt, wallet, messages and the café counter. */
.world-hud { position: absolute; z-index: 3; inset: 0; pointer-events: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.world-hud button { font: inherit; }
.world-prompt { position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px 0 5px; border: 0; border-radius: 10px; background: #f2f2f2; color: #111; box-shadow: 0 3px 10px #0000004d; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; pointer-events: auto; will-change: transform; }
.world-prompt[hidden] { display: none; }
.world-prompt:not(:has(kbd)) { padding-left: 11px; }
.world-prompt kbd { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 6px; background: #111; color: #fff; font: 600 11px/1 ui-monospace, "SFMono-Regular", Menlo, monospace; }
.world-prompt:focus-visible { outline: 2px solid #7aa9ff; outline-offset: 2px; }
.world-wallet { position: absolute; left: calc(5.754vw + var(--world-tools-width, 384px) + 6px); bottom: 16px; display: flex; align-items: center; gap: 7px; height: 36px; margin: 0; padding: 0 12px; border-radius: 10px; background: #0a0a0ad9; box-shadow: inset 0 0 0 1px #ffffff1f; color: #eee; font-size: 12px; font-variant-numeric: tabular-nums; }
.world-wallet-coin { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fbe7a1, #d9b45a 60%, #a8842f); box-shadow: 0 0 0 1px #00000040; }
.world-toast { position: absolute; left: 50%; bottom: 72px; max-width: min(440px, calc(100% - 24px)); margin: 0; padding: 9px 14px; border-radius: 12px; background: #0a0a0af0; box-shadow: inset 0 0 0 1px #ffffff1f, 0 8px 24px #00000059; color: #f2f2f2; font-size: 13px; line-height: 1.4; text-align: center; transform: translateX(-50%); }
.world-toast[hidden] { display: none; }
.world-toast-action { margin: 0 0 0 4px; padding: 0; border: 0; background: none; color: #fff; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; pointer-events: auto; }
/* Wearing the jetpack from the crash site (journey-world-ufo.js). */
.world-jet { position: absolute; left: 50%; top: 16px; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 4px 0 12px; border-radius: 10px; background: #0a0a0ad9; box-shadow: inset 0 0 0 1px #ffffff1f; color: #eee; font-size: 12px; white-space: nowrap; transform: translateX(-50%); pointer-events: auto; }
.world-jet[hidden] { display: none; }
.world-jet-dot { width: 8px; height: 8px; border-radius: 50%; background: #5fe6d6; box-shadow: 0 0 0 3px #5fe6d62e; }
.world-jet-name { font-weight: 600; }
.world-jet-help { display: flex; align-items: center; gap: 6px; color: #aaa; }
.world-jet kbd { display: grid; place-items: center; height: 20px; padding: 0 6px; border-radius: 6px; background: #ffffff1f; color: #eee; font: 600 11px/1 ui-monospace, "SFMono-Regular", Menlo, monospace; }
.world-jet button { height: 28px; padding: 0 10px; border: 0; border-radius: 8px; background: #ffffff14; color: #ddd; font-size: 12px; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.world-jet button:hover { background: #ffffff24; }
.world-jet button:focus-visible { outline: 2px solid #7aa9ff; outline-offset: 1px; }
.world-menu { position: absolute; left: 50%; bottom: 72px; width: min(300px, calc(100% - 24px)); padding: 12px; border-radius: 16px; background: #0a0a0af2; box-shadow: inset 0 0 0 1px #ffffff1f, 0 12px 40px #00000066; color: #f2f2f2; transform: translateX(-50%); pointer-events: auto; }
.world-menu[hidden] { display: none; }
.world-menu-head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 8px; font-size: 13px; font-weight: 600; }
.world-menu-close { width: 26px; height: 26px; border: 0; border-radius: 8px; background: #ffffff14; color: #ddd; cursor: pointer; }
.world-menu ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.world-menu li button { display: flex; justify-content: space-between; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: #ffffff0f; color: #f2f2f2; font-size: 13px; text-align: left; cursor: pointer; }
.world-menu li button span:last-child { color: #e8c86a; font-variant-numeric: tabular-nums; }
.world-menu button:hover { background: #ffffff1f; }
.world-menu button:focus-visible { outline: 2px solid #7aa9ff; outline-offset: 1px; }
.world-menu-tip { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 2px 0; border-top: 1px solid #ffffff1a; color: #aaa; font-size: 12px; }
.world-menu-tip span { margin-right: auto; }
.world-menu-tip button { padding: 6px 10px; border: 0; border-radius: 8px; background: #ffffff14; color: #e8c86a; font-size: 12px; cursor: pointer; }
@media (max-width: 760px) {
  [data-journey-mode="world"] [data-view="journey"] .world-wallet { left: 12px; bottom: 64px; }
  .world-toast, .world-menu { bottom: 112px; }
}

/* The loading screen (journey-world-loader.js) covers the world until it opens. */
.world-loader { position: absolute; z-index: 6; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.journey-world.is-loading .world-status { visibility: hidden; }
/* The world's controls fade in once the town has opened. */
.journey-world :is(.world-chapters, .world-tools, .world-tutorial, .world-labels, .world-hud) { transition: opacity 400ms ease, visibility 400ms; }
.journey-world.is-loading :is(.world-chapters, .world-tools, .world-tutorial, .world-labels, .world-hud, .world-minimap) { visibility: hidden; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .journey-world :is(.world-chapters, .world-tools, .world-tutorial, .world-labels, .world-hud) { transition: none; } }

/* The controls card (? button or key). */
.world-controls { position: absolute; z-index: 7; left: 50%; top: 50%; width: min(380px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto; padding: 16px 18px 14px; border-radius: 16px; background: #0a0a0af2; box-shadow: inset 0 0 0 1px #ffffff1f, 0 16px 50px #00000080; color: #eee; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13px; transform: translate(-50%, -50%); }
.world-controls[hidden] { display: none; }
.world-controls-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.world-controls-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.world-controls-close { width: 28px; height: 28px; border: 0; border-radius: 8px; background: #ffffff14; color: #ddd; cursor: pointer; }
.world-controls-close:focus-visible { outline: 2px solid #7aa9ff; outline-offset: 1px; }
.world-controls:not(.world-secrets) { width: min(500px, calc(100% - 32px)); padding: 16px 20px 18px; }
.world-controls:not(.world-secrets) .world-controls-head { margin-bottom: 14px; }
.world-controls-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.world-controls-list > section, .world-controls-cols + section { margin-top: 16px; }
.world-controls-list > section:first-child { margin-top: 0; }
.world-controls-list h4 { margin: 0 0 4px; color: #8b8b8b; font: 400 11px/14px 'Geist Mono', monospace; }
.world-controls-list dl { margin: 0; }
.world-controls-list dl > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; border-bottom: 1px solid #ffffff0f; }
.world-controls-list dl > div:last-child { border-bottom: 0; }
.world-controls-list dt { color: #e6e6e6; }
.world-controls-list dd { display: flex; align-items: center; gap: 4px; margin: 0; color: #a3a3a3; white-space: nowrap; }
.world-controls-skate p { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 6px 0 0; color: #e6e6e6; }
.world-controls-skate span { display: inline-flex; align-items: center; gap: 4px; }
.world-controls-note { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid #ffffff14; color: #888; font-size: 12px; line-height: 1.45; }
@media (max-width: 520px) { .world-controls-cols { grid-template-columns: 1fr; } .world-controls-cols section + section { margin-top: 16px; } }
.world-controls kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; background: #ffffff1a; box-shadow: inset 0 -1px 0 #ffffff26; color: #fff; font: 600 11px/1 ui-monospace, "SFMono-Regular", Menlo, monospace; }
.journey-world.is-loading .world-controls { visibility: hidden; }

/* Admin tools (journey-world-admin.js), styled like the controls card. */
.world-admin { position: absolute; z-index: 9; top: 16px; right: 16px; width: 248px; max-height: calc(100% - 32px); overflow: auto; padding: 10px 12px 12px; border-radius: 14px; background: #0a0a0af2; box-shadow: inset 0 0 0 1px #ffffff1f, 0 16px 50px #00000080; color: #eee; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 12px; }
.world-admin[hidden] { display: none; }
.world-admin-head { display: flex; align-items: center; justify-content: space-between; }
.world-admin-fold { padding: 2px 0; border: 0; background: none; color: #fff; font: 600 13px/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: .02em; cursor: pointer; }
.world-admin-fold::after { content: " ▾"; color: #888; }
.world-admin.is-folded .world-admin-fold::after { content: " ▸"; }
.world-admin.is-folded { width: auto; }
.world-admin.is-folded .world-admin-body { display: none; }
.world-admin-close { width: 24px; height: 24px; border: 0; border-radius: 7px; background: #ffffff14; color: #ddd; cursor: pointer; }
.world-admin section { margin-top: 12px; }
.world-admin h4 { margin: 0 0 6px; color: #999; font-size: 11px; font-weight: 500; text-transform: lowercase; }
.world-admin select { width: 100%; height: 30px; padding: 0 8px; border: 0; border-radius: 8px; background: #ffffff14; color: #fff; font: inherit; }
.world-admin option { background: #1a1a1a; }
.world-admin-hint { margin: 6px 0 0; color: #888; }
.world-admin kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 4px; background: #ffffff1a; color: #fff; font: 600 10px/1 ui-monospace, "SFMono-Regular", Menlo, monospace; }
.world-admin-switches { display: grid; gap: 8px; }
.world-admin-switches label { display: grid; grid-template-columns: 30px 1fr; align-items: center; column-gap: 8px; cursor: pointer; }
.world-admin-switches input { grid-row: span 2; appearance: none; width: 30px; height: 18px; margin: 0; border-radius: 9px; background: #ffffff24; cursor: pointer; transition: background .15s; }
.world-admin-switches input::before { content: ""; display: block; width: 14px; height: 14px; margin: 2px; border-radius: 50%; background: #fff; transition: transform .15s; }
.world-admin-switches input:checked { background: #3a7bff; }
.world-admin-switches input:checked::before { transform: translateX(12px); }
.world-admin-switches small { color: #888; font-size: 11px; }
.world-admin-speeds, .world-admin-row { display: flex; gap: 4px; }
.world-admin-speeds button, .world-admin-row button { flex: 1; height: 28px; border: 0; border-radius: 7px; background: #ffffff14; color: #ddd; font: 600 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; }
.world-admin-speeds button[aria-pressed="true"] { background: #3a7bff; color: #fff; }
.world-admin-quirks { flex-wrap: wrap; }
.world-admin-quirks button { flex: 1 0 auto; padding: 0 6px; }
.world-admin-row button:disabled { opacity: .5; cursor: progress; }
.world-admin button:focus-visible, .world-admin select:focus-visible, .world-admin input:focus-visible { outline: 2px solid #7aa9ff; outline-offset: 1px; }
.world-admin-camera { display: grid; gap: 8px; }
.world-admin-camera[hidden] { display: none; }
.world-admin-camera h4 { margin-bottom: -2px; }
.world-admin-camera .world-admin-hint { margin: 0; }
.world-admin-slider { display: grid; grid-template-columns: 44px 1fr 40px; align-items: center; gap: 8px; color: #bbb; }
.world-admin-slider input { width: 100%; margin: 0; accent-color: #3a7bff; }
.world-admin-slider output { color: #cfe; font: 11px/1 ui-monospace, "SFMono-Regular", Menlo, monospace; text-align: right; }
.world-admin-heat-tools { display: grid; gap: 8px; margin-top: 8px; }
.world-admin-heat-tools[hidden], .world-admin-key[hidden], .world-admin-heat-status[hidden] { display: none; }
.world-admin-legend { display: flex; align-items: center; gap: 2px; color: #888; font-size: 10px; }
.world-admin-legend span:first-child { margin-right: 4px; }
.world-admin-legend span:last-child { margin-left: 4px; }
.world-admin-legend i { flex: 1; height: 8px; border-radius: 2px; }
.world-admin-key { display: flex; gap: 4px; margin-top: 8px; }
.world-admin-key input { flex: 1; min-width: 0; height: 28px; padding: 0 8px; border: 0; border-radius: 7px; background: #ffffff14; color: #fff; font: inherit; }
.world-admin-key button { height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: #3a7bff; color: #fff; font: 600 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; }
.world-admin-heat-status { line-height: 1.4; }
.world-admin-stats { margin: 0; color: #cfe; font: 11px/1.4 ui-monospace, "SFMono-Regular", Menlo, monospace; }
.world-admin-exit { position: absolute; z-index: 9; top: 12px; right: 12px; padding: 6px 10px; border: 0; border-radius: 8px; background: #0a0a0acc; color: #eee; font: 500 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; opacity: .2; cursor: pointer; transition: opacity .2s; }
.world-admin-exit:hover, .world-admin-exit:focus-visible { opacity: 1; }
.world-admin-exit[hidden] { display: none; }
/* Photo mode: nothing but the town. */
body.world-photo .journey-world > :not(.world-viewport):not(.world-admin-exit),
body.world-photo .world-viewport > :not(canvas),
body.world-photo .avatar-mark,
body.world-photo .view-toolbar,
body.world-photo .site-footer,
body.world-photo .live-layer { visibility: hidden !important; }
@media (max-width: 760px) {
  .world-admin { top: 12px; right: 12px; width: min(248px, calc(100% - 24px)); max-height: calc(100% - 160px); }
}
/* The tutorial makes way for the admin panel. */
.journey-world:has(.world-admin:not([hidden])) .world-tutorial { display: none; }
/* "Link copied" note on the share button. */
.world-tools [data-world-share] { position: relative; }
.world-tools [data-world-share].is-copied::after { content: "link copied"; position: absolute; bottom: calc(100% + 8px); left: 50%; padding: 5px 8px; border-radius: 7px; background: #0a0a0af2; box-shadow: inset 0 0 0 1px #ffffff1f; color: #fff; font: 500 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; transform: translateX(-50%); pointer-events: none; }
/* Time-of-day picker, above the view buttons. */
.world-daytime { position: absolute; z-index: 6; left: 5.754vw; bottom: 60px; display: flex; gap: 4px; padding: 5px; border-radius: 12px; background: #0a0a0af2; box-shadow: inset 0 0 0 1px #ffffff1f, 0 10px 30px #00000066; }
.world-daytime[hidden] { display: none; }
.world-daytime button { height: 28px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: #ccc; font: 500 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; }
.world-daytime button:hover { background: #ffffff14; }
.world-daytime button[aria-pressed="true"] { background: #ffffff24; color: #fff; }
.world-daytime button:focus-visible { outline: 2px solid #7aa9ff; outline-offset: 1px; }
body.world-photo .world-daytime { visibility: hidden !important; }
@media (max-width: 760px) {
  .world-daytime { left: 12px; right: 12px; bottom: 112px; justify-content: space-between; }
}
/* Speech bubbles over townspeople (journey-world-chatter.js). */
.world-speech { position: absolute; top: 0; left: 0; max-width: 180px; margin-top: -6px; padding: 5px 8px; border-radius: 8px; background: #fbfaf6; box-shadow: 0 0 0 1px #1d1d1d, 0 2px 0 #0000004d; color: #1d1d1d; font: 600 11px/1.25 ui-monospace, "SFMono-Regular", Menlo, monospace; white-space: nowrap; opacity: 0; transition: opacity .25s ease; pointer-events: none; will-change: transform; }
.world-speech::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; margin-left: -4px; background: #fbfaf6; box-shadow: 1px 1px 0 #1d1d1d; transform: rotate(45deg); }
.world-speech.is-shown { opacity: 1; }
.world-speech[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .world-speech { transition: none; } }
/* Secrets: the trophy button with its count, the list and the unlock card. */
.world-tools [data-world-secrets] { display: flex; gap: 4px; width: auto; padding: 0 9px; color: #f2c33d; }
.world-secrets-count { color: #ddd; font: 600 11px/1 ui-monospace, "SFMono-Regular", Menlo, monospace; }
.world-secrets { top: auto; bottom: 64px; width: min(440px, calc(100% - 32px)); max-height: calc(100% - 170px); transform: translateX(-50%); }
.world-secrets-note { margin: -4px 0 12px; color: #999; }
.world-secrets-list { display: grid; gap: 8px; }
.world-achievement { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; background: #ffffff0d; box-shadow: inset 0 0 0 1px #ffffff14; }
.world-achievement p { margin: 0; }
.world-achievement-icon { width: 48px; height: 48px; image-rendering: pixelated; border-radius: 6px; background: #f4efe2; box-shadow: inset 0 0 0 2px #1d1d1d; }
.world-achievement.is-locked .world-achievement-icon { background: #1a1a1c; box-shadow: inset 0 0 0 2px #2c2c30; }
.world-achievement-kicker { color: #e8c86a; font: 600 10px/1.4 ui-monospace, "SFMono-Regular", Menlo, monospace; text-transform: uppercase; letter-spacing: .04em; }
.world-achievement.is-locked .world-achievement-kicker { color: #777; }
.world-achievement-title { color: #fff; font-size: 14px; font-weight: 600; line-height: 1.3; }
.world-achievement.is-locked .world-achievement-title { color: #888; }
.world-achievement-text { color: #bbb; font-size: 12px; line-height: 1.4; }
.world-achievement-toast { position: absolute; z-index: 8; top: 16px; left: 50%; width: min(340px, calc(100% - 32px)); border-radius: 12px; background: #0a0a0af2; box-shadow: 0 0 0 2px #e8c86a, 0 16px 40px #00000080; color: #eee; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; opacity: 0; transform: translate(-50%, -12px); transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
.world-achievement-toast.is-shown { opacity: 1; transform: translate(-50%, 0); }
.world-achievement-toast[hidden] { display: none; }
.world-achievement-toast .world-achievement { background: none; box-shadow: none; }
body.world-photo .world-achievement-toast { visibility: hidden !important; }
@media (prefers-reduced-motion: reduce) { .world-achievement-toast { transition: none; } }
@media (max-width: 760px) { .world-achievement-toast { top: 64px; } }
/* Gestures picker shares the time picker's look. */
.world-emotes button { padding: 0 9px; }
/* Panels in the chapters: the help desk chat, the assistant, minted portraits. */
.world-dialog { width: min(340px, calc(100% - 32px)); }
.world-dialog-body { display: grid; gap: 10px; }
.world-chat { display: grid; gap: 6px; max-height: 220px; overflow: auto; padding: 2px; }
.world-chat-line { justify-self: start; max-width: 85%; margin: 0; padding: 7px 10px; border-radius: 12px 12px 12px 4px; background: #ffffff14; color: #eee; font-size: 12px; line-height: 1.4; }
.world-chat-line.is-mine { justify-self: end; border-radius: 12px 12px 4px; background: #107c10; color: #fff; }
.world-chat-line.is-typing { color: #999; letter-spacing: .2em; }
.world-chat-replies { display: flex; flex-wrap: wrap; gap: 6px; }
.world-chat-replies button, .world-dialog-action { padding: 7px 10px; border: 0; border-radius: 999px; background: #ffffff1f; color: #fff; font-size: 12px; cursor: pointer; }
.world-chat-replies button:hover, .world-dialog-action:hover { background: #ffffff33; }
/* intive: the assistant's kiosk, in large, high-contrast type. */
.world-kiosk-question { margin: 0; color: #fff; font-size: 15px; font-weight: 600; line-height: 1.4; }
.world-kiosk-step, .world-kiosk-status { margin: 0; color: #9fd3f5; font-size: 11px; letter-spacing: .02em; }
.world-kiosk-options { display: grid; gap: 6px; }
.world-kiosk-options button { min-height: 44px; padding: 10px 12px; border: 0; border-radius: 10px; background: #ffffff1f; color: #fff; font-size: 14px; text-align: left; cursor: pointer; }
.world-kiosk-options button:hover { background: #ffffff33; }
.world-kiosk-mode { display: grid; gap: 2px; }
.world-kiosk-mode span { color: #bbb; font-size: 12px; }
.world-kiosk-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.world-kiosk-captions { max-height: min(220px, 32vh); }
.world-kiosk-captions .world-chat-line { font-size: 14px; line-height: 1.45; }
.world-kiosk-captions .world-chat-line.is-mine { background: #0077c8; }
.world-kiosk-type { display: flex; gap: 6px; }
.world-kiosk-type input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid #ffffff33; border-radius: 999px; background: #00000040; color: #fff; font: inherit; font-size: 13px; }
.world-kiosk-type input:focus-visible { outline: 2px solid #7aa9ff; outline-offset: 1px; }
.world-kiosk-type button { padding: 7px 12px; border: 0; border-radius: 999px; background: #0077c8; color: #fff; font-size: 12px; cursor: pointer; }
.world-slip { display: grid; gap: 3px; padding: 12px 14px; border-radius: 4px; background: #f4f1ea; color: #1a1a1a; font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.45; box-shadow: 0 6px 14px #00000066; animation: world-slip .5s ease-out both; }
.world-slip-head { color: #0077c8; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.world-slip strong { font-size: 14px; }
.world-slip-ref { margin-top: 4px; padding-top: 6px; border-top: 1px dashed #b9b4a8; color: #8f8a80; }
@keyframes world-slip { from { opacity: 0; transform: translateY(-10px); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0); } }
@media (prefers-reduced-motion: reduce) { .world-slip { animation: none; } }
/* BWY: the camera's flash over the town. */
.world-flash { position: absolute; inset: 0; z-index: 5; background: #fff; pointer-events: none; animation: world-flash .6s ease-out forwards; }
@keyframes world-flash { from { opacity: .9; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .world-flash { display: none; } }
/* Sesori: the agent's task, a progress bar that fills as it works. */
.world-agent-task { margin: 0; color: #fff; font-size: 13px; font-weight: 600; line-height: 1.35; }
.world-agent-bar { height: 6px; overflow: hidden; border-radius: 999px; background: #ffffff1a; }
.world-agent-bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: #79c0ff; transition: width .5s ease; }
.world-agent-bar.is-done span { width: 100%; background: #7ee787; }
.world-dialog-note { margin: 0; color: #bbb; font-size: 12px; line-height: 1.45; }
.world-mint { display: block; width: 200px; margin: 0 auto; image-rendering: pixelated; border-radius: 6px; }
.world-dialog-action { justify-self: center; }
.world-dialog button:focus-visible { outline: 2px solid #7aa9ff; outline-offset: 1px; }

/* The library's books and app wall, the record shop's listening counter. */
/* Shelves open in the chapter card's place on the right, in the same card. */
.world-shelf.world-dialog { top: 14px; right: 14px; bottom: 14px; left: auto; display: flex; flex-direction: column; gap: 6px; width: min(380px, 40%); max-height: none; padding: 18px 18px 12px; overflow: hidden; border-radius: 18px; background: #0a0a0af0; box-shadow: inset 0 0 0 1px #ffffff1f, 0 12px 40px #00000059; transform: none; }
.world-shelf.world-dialog[hidden] { display: none; }
.world-shelf-head { flex: none; margin-bottom: 8px; }
.world-shelf-title { margin: 0 40px 0 0; color: #fff; font-size: 18px; font-weight: 500; line-height: 1.3; }
.world-shelf-note { margin: 4px 40px 0 0; color: #9a9a9a; font-size: 14px; line-height: 1.5; }
.world-shelf .world-shelf-close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; background: #1e1e1e; color: #bbb; }
.world-shelf .world-shelf-close:focus-visible { outline: 1px solid #7aa9ff; outline-offset: 1px; }
.journey-world:has(.world-shelf:not([hidden])) .world-card { display: none; }
@media (min-width: 761px) {
  .journey-world:has(.world-shelf:not([hidden])) .world-minimap { visibility: hidden; }
}
.world-shelf a { color: inherit; text-decoration: none; }
.world-shelf a:focus-visible { outline: 2px solid #7aa9ff; outline-offset: 1px; border-radius: 6px; }
.world-shelf-list, .world-app-grid { min-height: 0; margin: 0 -4px; padding: 0 4px; overflow-y: auto; overscroll-behavior: contain; list-style: none; touch-action: pan-y; }
.world-shelf-list { display: grid; gap: 2px; }
.world-shelf-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 8px; border-radius: 10px; }
.world-shelf-list li:hover { background: #ffffff0a; }
.world-shelf-list img { display: block; border-radius: 3px; object-fit: cover; background: #ffffff14; }
.world-shelf-list strong { display: block; color: #f2f2f2; font-size: 13px; font-weight: 600; line-height: 1.3; }
.world-shelf-list strong a:hover { text-decoration: underline; text-underline-offset: 2px; }
.world-shelf-list span { display: block; margin-top: 1px; color: #a3a3a3; font-size: 12px; }
.world-shelf-list p { margin: 4px 0 0; color: #c8c8c8; font-size: 12px; line-height: 1.45; }
.world-book-spine { display: block; width: 36px; height: 54px; border-radius: 2px 3px 3px 2px; background: linear-gradient(90deg, #00000040 0 5px, #ffffff14 5px 6px, transparent 6px), var(--spine); }
.world-record-list li > div { position: relative; min-width: 0; }
.world-record-list li > div a { display: inline-block; margin-top: 3px; color: #e1bf57; font-size: 11px; }
.world-record-list li > div a:hover { text-decoration: underline; text-underline-offset: 2px; }
.world-record-disc { display: block; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle, #e1bf57 0 3px, #d9453a 3px 11px, #141414 11px 13px, #1f1f1f 13px 15px, #141414 15px); }
.world-record-progress { position: absolute; right: 0; bottom: -5px; left: 0; height: 2px; border-radius: 1px; background: #e1bf57; transform: scaleX(0); transform-origin: left; opacity: 0; }
.world-record-list li:has([aria-pressed="true"]) .world-record-progress { opacity: 1; }
.world-record-list li:has([aria-pressed="true"]) { background: #e1bf5714; }
.world-record-list li .world-record-play { display: grid; flex: none; place-content: center; place-items: center; width: 36px; height: 36px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: #ffffff1a; color: #f2f2f2; cursor: pointer; transition: background-color .15s ease, transform .15s ease; }
.world-record-play svg { width: 16px; height: 16px; fill: currentColor; }
.world-record-play .is-pause, .world-record-play[aria-pressed="true"] .is-play { display: none; }
.world-record-play[aria-pressed="true"] .is-pause { display: inline; }
.world-record-list li .world-record-play[aria-pressed="true"] { background: #e1bf57; color: #141414; }
.world-record-list li .world-record-play:hover:not(:disabled) { background: #ffffff33; }
.world-record-list li .world-record-play[aria-pressed="true"]:hover { background: #ecd07a; }
.world-record-list li .world-record-play:active:not(:disabled) { transform: scale(.94); }
.world-record-list li .world-record-play:disabled { cursor: default; opacity: .35; }
.world-app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 4px; }
.world-app-grid li > * { display: grid; justify-items: center; gap: 2px; height: 100%; padding: 10px 6px; border-radius: 12px; text-align: center; }
.world-app-grid li > a:hover { background: #ffffff12; }
.world-app-tile { width: 40px; height: 40px; margin-bottom: 4px; overflow: hidden; border-radius: 10px; }
.world-app-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.world-app-tile.is-mark img { width: 60%; height: 60%; object-fit: contain; }
.world-app-tile { display: grid; place-items: center; background: var(--tint); box-shadow: inset 0 0 0 1px #ffffff1f; color: #f4f2ec; font-size: 18px; font-weight: 600; }
.world-app-grid strong { color: #f2f2f2; font-size: 12px; font-weight: 600; }
.world-app-use { display: -webkit-box; overflow: hidden; color: #a3a3a3; font-size: 11px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* Toolbar groups: inline on wide screens; on phones the zoom buttons stack
   above the left end, and time of day, link and controls fold into "⋯". */
.world-tools-group { display: contents; }
.world-tools [data-world-controls] { order: 1; }
.world-tools [data-world-more] { display: none; }
/* Dialogs and the café menu sit above the chapter card. */
.world-hud { z-index: 5; }
.world-menu { z-index: 5; max-height: calc(100% - 96px); overflow: auto; }
@media (max-width: 760px) {
  .journey-world .world-tools { left: 12px; right: 12px; justify-content: flex-end; }
  [data-journey-mode="world"] [data-view="journey"] .world-tools { left: 12px; right: 12px; }
  .world-tools-turn { display: flex; gap: 6px; margin-right: auto; }
  .world-tools-zoom { position: absolute; left: 0; bottom: calc(100% + 6px); display: flex; flex-direction: column; gap: 6px; }
  .world-tools-more { position: absolute; right: 0; bottom: calc(100% + 6px); display: none; flex-direction: column; align-items: center; gap: 6px; padding: 6px; border-radius: 14px; background: #0a0a0af2; box-shadow: inset 0 0 0 1px #ffffff1f, 0 10px 30px #00000066; }
  .world-tools.is-more .world-tools-more { display: flex; }
  .journey-world .world-tools { z-index: 6; }
  /* While a chapter card is open (reading, not steering) the toolbar steps aside; the chapters strip stays. */
  .journey-world:has(.world-card:not([hidden])) .world-tools { display: none; }
  .world-tools [data-world-more] { display: grid; order: 2; }
  .world-tools [data-world-controls] { order: 0; }
  /* The wallet lives in the ⋯ menu on a phone (placed there by journey-world.js). */
  [data-journey-mode="world"] [data-view="journey"] .world-tools-more .world-wallet { position: static; height: 44px; padding: 0 10px; background: none; box-shadow: none; }
  .world-menu { max-height: calc(100% - 170px); }
  /* The zoom stack steps aside for the library and record shop lists too. */
  .world-shelf.world-dialog { top: auto; left: 8px; right: 8px; bottom: 116px; width: auto; max-height: calc(100% - 260px); }
  .journey-world:has(.world-shelf:not([hidden])) .world-tools-zoom { display: none; }
  /* The chapter card takes the toolbar's place, just above the chapters strip. */
  [data-journey-mode="world"] [data-view="journey"] .world-card { bottom: 68px; max-height: calc(100% - 220px); }
  /* The chapters tip: the town dims, the strip stays lit, a callout points down at it. */
  .world-tip-scrim { position: absolute; inset: 0; z-index: 7; background: #000000a6; animation: world-tip-fade 220ms linear both; }
  .journey-world.is-chapters-tip .world-chapters { z-index: 8; box-shadow: inset 0 0 0 1px #ffffff2e, 0 0 0 3px #0d99ff73; }
  .world-tip { position: absolute; z-index: 9; left: 50%; bottom: 72px; display: flex; align-items: stretch; width: max-content; max-width: calc(100% - 32px); border-radius: 12px; background: #0a0a0a; box-shadow: inset 0 0 0 1px #ffffff26, 0 12px 32px #00000099; color: #f2f2f2; font: 500 13px/18px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; translate: -50% 0; animation: world-tip-in 240ms cubic-bezier(.2, .8, .2, 1) 80ms both; }
  .world-tip::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: #0a0a0a; box-shadow: 1px 1px 0 #ffffff26; transform: translateX(-50%) rotate(45deg); }
  .world-tip p { margin: 0; padding: 13px 12px 13px 16px; }
  .world-tip-close { display: grid; place-items: center; width: 44px; padding: 0; border: 0; border-left: 1px solid #ffffff1f; border-radius: 0 12px 12px 0; background: none; color: #a8a8a8; cursor: pointer; }
  .world-tip-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .world-tip-close:focus-visible { outline: 2px solid #7aa9ff; outline-offset: -2px; }
  .world-tip[hidden], .world-tip-scrim[hidden] { display: none; }

  /* On a phone a dialog takes the card's place while it's open. */
  .journey-world:has(.world-menu:not([hidden])) .world-card { display: none; }
}
/* Fingers need bigger targets than pointers. */
@media (pointer: coarse) {
  .world-tools button { width: 44px; height: 44px; border-radius: 12px; }
  .world-tools [data-world-secrets] { width: auto; padding: 0 12px; }
  .world-prompt { height: 40px; padding-right: 14px; font-size: 13px; }
  .world-card-close { width: 44px; height: 44px; }
  .world-menu-close, .world-controls-close { width: 40px; height: 40px; }
  .world-daytime button { height: 40px; }
  .world-chapters button { min-height: 40px; }
  .world-menu li button, .world-chat-replies button { min-height: 40px; }
  .world-tutorial-skip { padding: 10px 12px; }
}

/* The menu a right click (or a long press) opens on the map (journey-world-wayfinding.js). */
.world-goto { position: absolute; z-index: 5; top: 0; left: 0; width: 0; height: 0; pointer-events: none; }
.world-goto[hidden] { display: none; }
.world-goto-spot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #ffffff40, 0 1px 4px #00000080; }
.world-goto-row { position: absolute; top: 0; left: 0; display: flex; gap: 8px; pointer-events: auto; animation: world-goto-in 140ms ease-out; }
.world-goto-row button[hidden] { display: none; }
.world-goto-row button { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 6px; border: 0; border-radius: 18px; background: #fff; color: #111; box-shadow: 0 4px 14px #00000059; font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color 120ms linear; }
.world-goto-row button:hover { background: #ececec; }
.world-goto-row button:focus-visible { outline: 2px solid #7aa9ff; outline-offset: 2px; }
.world-goto-row kbd { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #e9e9e9; color: #555; font: 500 11px/1 ui-monospace, "SFMono-Regular", Menlo, monospace; }
@keyframes world-goto-in { from { opacity: 0; translate: 0 -4px; } }
@media (max-width: 480px) {
  .world-goto-row { gap: 6px; }
  .world-goto-row button { gap: 6px; height: 34px; padding: 0 11px 0 5px; font-size: 12px; }
  .world-goto-row kbd { width: 22px; height: 22px; }
}
/* The visitor, out of view: their face on the edge, the arrow pointing to them. */
.world-locator { position: absolute; z-index: 2; top: 0; left: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; border-radius: 50%; background: none; opacity: 0; visibility: hidden; cursor: pointer; pointer-events: auto; transition: opacity 180ms linear, visibility 180ms; }
.world-locator.is-shown { opacity: 1; visibility: visible; }
.world-locator-face { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; background: #ececec; box-shadow: 0 0 0 2px #fff, 0 4px 12px #00000080; transition: box-shadow 160ms linear; }
.world-locator-face canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.world-locator-arrow { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #121212; color: #ddd; box-shadow: inset 0 0 0 1px #ffffff26, 0 2px 6px #0000004d; }
.world-locator-arrow svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.world-locator:hover .world-locator-face { box-shadow: 0 0 0 2px #0d99ff, 0 4px 12px #00000080; }
.world-locator:focus-visible { outline: 2px solid #7aa9ff; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .world-goto-row { animation: none; } .world-locator { transition: none; } }

/* The skateboard's trick bar, above the bottom row while riding; the toast,
   menus and docked chat move up out of its way. */
.world-skate-bar { position: absolute; z-index: 4; left: 50%; bottom: 64px; display: flex; gap: 2px; padding: 4px; border-radius: 14px; background: #0a0a0ad9; box-shadow: inset 0 0 0 1px #ffffff1f, 0 8px 24px #00000059; transform: translateX(-50%); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.world-skate-bar[hidden] { display: none; }
.world-skate-bar button { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px 0 5px; border: 0; border-radius: 10px; background: transparent; color: #eee; font-family: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .15s; }
.world-skate-bar button:hover { background: #ffffff14; }
.world-skate-bar button:focus-visible { outline: 2px solid #7aa9ff; outline-offset: 1px; }
.world-skate-bar kbd { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 7px; background: #f2f2f2; color: #111; font: 600 11px/1 ui-monospace, "SFMono-Regular", Menlo, monospace; transition: transform .12s, background .2s; }
.world-skate-bar button.is-active { background: #ffffff26; }
.world-skate-bar button.is-active kbd { transform: translateY(1px) scale(.92); }
.world-skate-bar button.is-landed kbd { background: #e8c86a; }
.world-skate-bar button.is-landed span { color: #e8c86a; }
.world-skate-bar [data-skate="off"] { margin-left: 4px; box-shadow: -3px 0 0 -2px #ffffff26; }
:root[data-skating] .world-toast, :root[data-skating] .world-menu, :root[data-skating] .live-chat.is-docked { bottom: 120px; }
:root[data-skating] .world-emotes { display: none; }
:root[data-skating] .world-daytime { bottom: 120px; }
/* With a chapter card open on the right, the bar centres in the space left of it. */
:root:has(.world-card:not([hidden])) .world-skate-bar { left: calc((100% - min(380px, 40%) - 28px) / 2); }
@media (prefers-reduced-motion: reduce) {
  .world-skate-bar button, .world-skate-bar kbd { transition: none; }
}
/* A word over the rider's head when a trick lands, or on a fall. */
.world-skate-call { position: absolute; top: 0; left: 0; z-index: 2; color: #f2c33d; font: 700 15px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: .02em; white-space: nowrap; text-shadow: 0 1px 0 #000, 0 0 3px #000, 0 2px 8px #0009; pointer-events: none; will-change: transform; animation: world-skate-call 900ms ease-out forwards; }
.world-skate-call[hidden] { display: none; }
.world-skate-call.is-fall { color: #fbfaf6; }
@keyframes world-skate-call { 0% { opacity: 0; translate: 0 6px; scale: .8; } 15% { opacity: 1; translate: 0 0; scale: 1.08; } 30% { scale: 1; } 75% { opacity: 1; translate: 0 -14px; } 100% { opacity: 0; translate: 0 -22px; } }
@keyframes world-skate-call-still { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .world-skate-call { animation-name: world-skate-call-still; animation-timing-function: linear; }
}
@keyframes world-tip-fade { from { opacity: 0; } }
@keyframes world-tip-in { from { opacity: 0; transform: translateY(6px); } }
@media (min-width: 761px) { .world-tip, .world-tip-scrim { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .world-tip { animation: world-tip-fade 120ms linear both; }
  .world-tip-scrim { animation: none; }
}
.world-boat-hint { display: flex; align-items: center; padding: 0 10px 0 8px; color: #ffffffb3; font-size: 12px; font-weight: 500; white-space: nowrap; }
/* On a phone the bar sits above the toolbar, clear of the zoom stack; the toast says to tap the water. */
@media (max-width: 760px) {
  .world-boat-bar { bottom: 132px; }
  .world-boat-hint { display: none; }
  .world-boat-bar [data-skate="off"] { margin-left: 0; box-shadow: none; padding-left: 12px; }
  :root[data-skating] .world-toast { bottom: 188px; }
}
/* Chess in Kiseleff: puzzles and whole games, a wooden board with coordinates. */
.world-chess { width: min(344px, calc(100% - 24px)); max-height: calc(100% - 96px); overflow: auto; }
.world-chess-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-bottom: 10px; padding: 2px; border-radius: 10px; background: #ffffff0f; }
.world-chess-modes button { height: 30px; border: 0; border-radius: 8px; background: transparent; color: #ffffffa6; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.world-chess-modes button[aria-selected="true"] { background: #ffffff1f; color: #fff; }
.world-chess.is-versus .world-chess-modes { display: none; }
.world-chess-status { min-height: 2.8em; margin: 0 2px 8px; color: #ffffffcc; font-size: 12px; line-height: 1.4; }
.world-chess-board { display: grid; grid-template-columns: repeat(8, 1fr); padding: 6px; border-radius: 10px; background: #3b2a1e; box-shadow: inset 0 0 0 1px #00000066, 0 6px 18px #00000066; }
.world-chess-square { position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: 0; background: #8b6447; font-size: 30px; line-height: 1; cursor: pointer; }
.world-chess-square.is-light { background: #e8d5b0; }
.world-chess-piece { position: relative; z-index: 1; width: 84%; height: 84%; background: center / contain no-repeat; image-rendering: pixelated; filter: drop-shadow(0 2px 0 #0000004d); transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
.world-chess-square.is-last::before { content: ""; position: absolute; inset: 0; background: #f2c33d59; }
.world-chess-square.is-picked::before { content: ""; position: absolute; inset: 0; background: #f2c33d8c; }
.world-chess-square.is-check::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, #ff3b30d9 0, #ff3b3066 45%, transparent 72%); }
.world-chess-square.has-move::after { content: ""; position: absolute; width: 28%; height: 28%; border-radius: 50%; background: #1a1a1a40; }
.world-chess-square.has-capture::after { content: ""; position: absolute; inset: 6%; border-radius: 50%; box-shadow: inset 0 0 0 3px #1a1a1a4d; }
.world-chess-square:hover { filter: brightness(1.08); }
.world-chess-square:focus-visible { outline: 2px solid #7aa9ff; outline-offset: -2px; z-index: 2; }
.world-chess-coord { position: absolute; z-index: 1; font: 600 8px/1 ui-monospace, "SFMono-Regular", Menlo, monospace; color: #00000080; pointer-events: none; }
.world-chess-square:not(.is-light) .world-chess-coord { color: #ffffff8c; }
.world-chess-coord.is-rank { top: 2px; left: 2px; }
.world-chess-coord.is-file { right: 2px; bottom: 2px; }
.world-chess-actions { display: flex; gap: 6px; margin-top: 10px; }
.world-chess-actions button { flex: 1; height: 32px; border: 0; border-radius: 9px; background: #ffffff14; color: #f2f2f2; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.world-chess-actions button:hover { background: #ffffff24; }
@media (prefers-reduced-motion: reduce) { .world-chess-piece { transition: none; } }
/* The graffiti wall's spray colours. */
.world-paint-swatches { display: flex; gap: 8px; }
.world-paint-swatches button { flex: 1; aspect-ratio: 1; border: 0; border-radius: 10px; background: var(--paint); box-shadow: inset 0 0 0 1px #ffffff33; cursor: pointer; transition: transform .12s; }
.world-paint-swatches button:hover { transform: translateY(-2px); }
.world-paint-swatches button:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
/* Through the telescope: a round view of the night sky. */
.world-scope { position: absolute; inset: 0; z-index: 6; pointer-events: auto; display: grid; place-content: center; justify-items: center; gap: 14px; background: #000000d9; cursor: pointer; }
.world-scope[hidden] { display: none; }
.world-scope canvas { width: min(360px, 70vmin); aspect-ratio: 1; border-radius: 50%; image-rendering: pixelated; box-shadow: 0 0 0 6px #1d1d1f, 0 0 0 7px #ffffff26, 0 20px 60px #000; }
.world-scope-caption { margin: 0; color: #f2f2f2; font-size: 14px; }