@charset "UTF-8";
/* main.scss — entry point, imports all partials */
/* base — resets, fonts, layout */
/* Pin every face to the hhea metrics (920/-316, no line gap). These descriptors
   only exist on @font-face, so they have to live on "Hyundai Sans Head" itself.
   Safari already lays the font out on those metrics; without the overrides
   Chrome, Edge and Firefox on Windows and Android read the OS/2 typo metrics
   instead (750/-250, USE_TYPO_METRICS) and sit the letters at a different
   height in the line. Pinned, every engine agrees, so one fixed offset
   (--piece-text-offset) centres the yellow piece text. Explicit line-heights
   elsewhere keep the same line box size; only the baseline inside each line
   moves, and only on engines that were not already using hhea. */
@font-face {
  font-family: "Hyundai Sans Head";
  src: url("HyundaiSansHead-Light.woff2") format("woff2"), url("HyundaiSansHead-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: block;
  ascent-override: 92%;
  descent-override: 31.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Hyundai Sans Head";
  src: url("HyundaiSansHead-Regular.woff2") format("woff2"), url("HyundaiSansHead-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: block;
  ascent-override: 92%;
  descent-override: 31.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Hyundai Sans Head";
  src: url("HyundaiSansHead-Medium.woff2") format("woff2"), url("HyundaiSansHead-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: block;
  ascent-override: 92%;
  descent-override: 31.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Hyundai Sans Head";
  src: url("HyundaiSansHead-Bold.woff2") format("woff2"), url("HyundaiSansHead-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: block;
  ascent-override: 92%;
  descent-override: 31.6%;
  line-gap-override: 0%;
}
/* Hyundai Sans Head ships no italic, so the browser would otherwise slant the
   roman and produce a faux italic. Hyundai Sans Text is the companion text face
   and does carry drawn italics; it shares Head's vertical metrics (1000 upm,
   920/-316 hhea, 680 cap height) and character set exactly, so registering its
   italics under the Head family name swaps them in without moving any line box.
   Keep these weights in step with the roman faces declared above. */
@font-face {
  font-family: "Hyundai Sans Head";
  src: url("HyundaiSansText-Italic.woff2") format("woff2"), url("HyundaiSansText-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: block;
  ascent-override: 92%;
  descent-override: 31.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Hyundai Sans Head";
  src: url("HyundaiSansText-MediumItalic.woff2") format("woff2"), url("HyundaiSansText-MediumItalic.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: block;
  ascent-override: 92%;
  descent-override: 31.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Hyundai Sans Head";
  src: url("HyundaiSansText-BoldItalic.woff2") format("woff2"), url("HyundaiSansText-BoldItalic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: block;
  ascent-override: 92%;
  descent-override: 31.6%;
  line-gap-override: 0%;
}
:root {
  --bg: #fff;
  --text: #111;
  --accent: #ffff00;
  --piece-text-bg: #ffff00;
  --piece-text-fg: #111;
  --bodyFont: Hyundai Sans Head, sans-serif;
  --hud-margin: clamp(12px, 3vw, 18px);
  --hud-bottom: calc(max(var(--hud-margin), env(safe-area-inset-bottom)) + var(--vvb, 0px));
  /* Hyundai Sans Head carries more descent than ascent, so a line box centred by
     the browser leaves the cap-to-baseline block sitting high. Split the vertical
     button padding to drop labels back onto the centre without changing control
     height. Positive values move labels down. How far the label sits off centre
     depends on which font metrics the engine reads, so this can only ever be an
     approximation — the text-box-trim block at the end of this file is the real
     fix, and zeroes this out wherever it applies. */
  --btn-text-offset: 0.04em;
  /* The same imbalance inside the yellow piece text. On the pinned Hyundai
     Sans Head metrics the cap-to-baseline block sits
     (descent - ascent + cap) / 2 = (0.316 - 0.92 + 0.68) / 2 = 0.038em above
     the middle of every line, whatever the line-height or line count, so
     moving the text down by that much centres it. */
  --piece-text-offset: 0.038em;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  height: calc(var(--vvt, 0px) + var(--vvh, 100dvh));
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--text);
  font-family: var(--bodyFont);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-touch-callout: none;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

img {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

/* hard viewport container — every page renders inside #viewport, which is
   strictly clipped to the user's viewport. Decor, captions, drifting critters,
   or parallax-shifted elements that go past the edges are clipped here. */
#viewport {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  height: calc(var(--vvt, 0px) + var(--vvh, 100dvh));
  overflow: hidden;
  background: inherit;
}

/* hide scrollbars on every element that could ever scroll, so even the
   scroll=x / scroll=y opt-ins below never show a visible bar */
html, body, #viewport, #landscape {
  scrollbar-width: none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar, #viewport::-webkit-scrollbar, #landscape::-webkit-scrollbar {
  display: none;
}

/* landscape */
#landscape {
  position: relative;
  overflow: visible;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  min-height: 100vh;
  min-height: 100dvh;
}
#landscape > * {
  position: absolute !important;
}
#landscape > div.decor[decor],
#landscape > .page-shader,
#landscape > .tx {
  position: fixed !important;
  inset: 0 !important;
}

@media (min-width: 641px) {
  #landscape > [data-mobile-only] {
    display: none !important;
  }
}
/* On a phone the scene is a larger camera surface. mobile.js supplies the
   left/top camera position so fixed HUD pins stay screen-fixed while the
   authored landscape can be explored with hold + drag. */
html.mobile-scene-pan #landscape {
  cursor: grab;
  touch-action: none;
}

html.mobile-scene-pan #landscape.-mobile-scene-panning {
  cursor: grabbing;
}

html.desktop-scene-pan #landscape {
  cursor: grab;
  touch-action: none;
}

html.desktop-scene-pan #landscape.-desktop-scene-panning {
  cursor: grabbing;
}

html.mobile-scene-pan #landscape :is(.obj, .zone, .decor:not(.scene-bg), .repeat-copy-frame, .txt, .world-placed):not([pin]):not([data-mobile-space=viewport]):not(.bleed) {
  translate: var(--mobile-parallax-x, 0px) var(--mobile-parallax-y, 0px);
}

html.mobile-scene-pan.mobile-css-parallax #landscape :is(.obj, .zone, .decor:not(.scene-bg), .repeat-copy-frame, .txt, .world-placed):not([pin]):not([data-mobile-space=viewport]):not(.bleed) {
  translate: calc(var(--mobile-parallax-dx, 0px) * (var(--mobile-parallax-factor-x, 1) - 1) + var(--mobile-text-hold-x, 0px)) calc(var(--mobile-parallax-dy, 0px) * (var(--mobile-parallax-factor-y, 1) - 1) + var(--mobile-text-hold-y, 0px));
}

html.mobile-scene-pan.-edge-pulling #landscape :is(.obj, .zone, .txt, .world-placed):not([pin]):not([data-mobile-space=viewport]):not(.bleed) {
  translate: calc(var(--mobile-parallax-x, 0px) + var(--edge-pull-x, 0px)) calc(var(--mobile-parallax-y, 0px) + var(--edge-pull-y, 0px));
}

html.mobile-scene-pan.mobile-css-parallax.-edge-pulling #landscape :is(.obj, .zone, .txt, .world-placed):not([pin]):not([data-mobile-space=viewport]):not(.bleed) {
  translate: calc(var(--mobile-parallax-dx, 0px) * (var(--mobile-parallax-factor-x, 1) - 1) + var(--edge-pull-x, 0px) + var(--mobile-text-hold-x, 0px)) calc(var(--mobile-parallax-dy, 0px) * (var(--mobile-parallax-factor-y, 1) - 1) + var(--edge-pull-y, 0px) + var(--mobile-text-hold-y, 0px));
}

html.mobile-scene-pan #landscape :is(.obj, .zone, .decor:not(.scene-bg), .repeat-copy-frame, .txt, .world-placed):not([pin]):not([data-mobile-space=viewport]):not(.bleed)[hover~=lift]:hover {
  translate: var(--mobile-parallax-x, 0px) calc(var(--mobile-parallax-y, 0px) - 4px * var(--hover-amp, 1));
}

html.mobile-scene-pan.mobile-css-parallax #landscape :is(.obj, .zone, .decor:not(.scene-bg), .repeat-copy-frame, .txt, .world-placed):not([pin]):not([data-mobile-space=viewport]):not(.bleed)[hover~=lift]:hover {
  translate: calc(var(--mobile-parallax-dx, 0px) * (var(--mobile-parallax-factor-x, 1) - 1) + var(--mobile-text-hold-x, 0px)) calc(var(--mobile-parallax-dy, 0px) * (var(--mobile-parallax-factor-y, 1) - 1) - 4px * var(--hover-amp, 1) + var(--mobile-text-hold-y, 0px));
}

.scene-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#landscape > .scene-bg {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  height: calc(var(--vvt, 0px) + var(--vvh, 100dvh)) !important;
  min-height: 0 !important;
  background-size: cover !important;
}

#viewport > .scene-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  height: calc(var(--vvt, 0px) + var(--vvh, 100dvh)) !important;
  min-height: 0 !important;
  pointer-events: none !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

html.mobile-scene-pan #viewport > .scene-bg ~ #landscape {
  background: transparent !important;
}

/* edge-pinned objects —
   An object marked flush to a screen corner in the composer opts OUT of the
   scene coordinate box (where `left/bottom %` are measured against #landscape,
   which pans and can be wider than the screen) and pins to the viewport edge
   instead — the same escape hatch the page-shader / decor layers above use.
   It then holds a constant distance from that edge across desktop and mobile,
   never drifts off when the scene pans, and always clears the phone's safe
   area (notch / home indicator). Which sides are pinned is named in the `pin`
   attribute ("right bottom"); each offset is authored per side as a --pin-*
   custom property. Size is left exactly as authored — pinning is position-only. */
#landscape > .obj[pin] {
  position: fixed !important;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
}

#landscape > .obj[pin~=left] {
  left: max(var(--pin-left, 0px), env(safe-area-inset-left));
}

#landscape > .obj[pin~=right] {
  right: max(var(--pin-right, 0px), env(safe-area-inset-right));
}

#landscape > .obj[pin~=top] {
  top: max(var(--pin-top, 0px), env(safe-area-inset-top));
}

#landscape > .obj[pin~=bottom] {
  bottom: max(var(--pin-bottom, 0px), env(safe-area-inset-bottom));
}

/* per-page scroll opt-ins live on #viewport, not on html/body, so the outer
   document can never grow past the viewport and expose --bg behind it */
html:has(#landscape[scroll=x]) #viewport {
  overflow-x: auto;
  overflow-y: hidden;
}

html:has(#landscape[scroll=y]) #viewport {
  overflow-x: hidden;
  overflow-y: auto;
}

html:has(#landscape[scroll=none]) #viewport {
  overflow: hidden;
}

/* Respect motion preferences across page shaders, scene atmosphere, and HUD.
   This leaves the final visual state in place rather than hiding authored work. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
/* components — objects, tag, alerts, decor, text, utilities */
.obj {
  position: absolute;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.1s ease, scale 0.1s ease, opacity 0.32s ease, filter 0.32s ease;
  z-index: 10;
}
.obj.-interactable:hover {
  scale: 1.03;
}
.obj img {
  display: block;
  max-width: 100%;
  pointer-events: none;
}

.zone {
  position: absolute;
  z-index: 10;
}

.center, .center-x, .center-y,
.center-top, .center-bottom, .center-left, .center-right {
  position: absolute;
}

.center {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.center-x {
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.center-y {
  top: 50%;
  transform: translateY(-50%);
}

.center-top {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.center-bottom {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.center-left {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.center-right {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

/* cursor tag */
#tag {
  position: fixed;
  left: 0;
  top: 0;
  bottom: auto;
  transform: none;
  pointer-events: none;
  z-index: 9100;
  max-width: min(440px, 100vw - 32px);
  padding: 9px 14px;
  font-family: "Hyundai Sans Head", sans-serif;
  color: #111;
  background: #ffff00;
  border: 1px solid #111;
  box-shadow: none;
  font-size: 0.82rem;
  line-height: 1.35;
  letter-spacing: 0.03em;
  text-align: center;
  display: none;
}

@media (max-width: 640px), (pointer: coarse) {
  #tag {
    display: none !important;
  }
}
/* acquisition notice — a small, soft notice when something is gathered: the
   object, its name, and the one quote + citation it carries, held on the
   accent surface while the map remains visible around it.
   Driven by shared/notify.js. */
.world-acquire {
  position: fixed;
  inset: 0;
  z-index: 9600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  box-sizing: border-box;
  color: #1a1a1a;
  font-family: "Hyundai Sans Head", sans-serif;
  /* The shared WorldModal root owns the backdrop and blur. */
  opacity: 0;
  transition: opacity 0.4s ease;
}
.world-acquire.-in {
  opacity: 1;
}
.world-acquire.-out {
  opacity: 0;
}

.world-acquire-inner {
  position: relative;
  max-width: 500px;
  width: 100%;
  padding: 34px 40px 38px;
  text-align: center;
  background: var(--piece-text-bg, #ffff00);
}

.world-acquire-obj {
  display: block;
  margin: 0 auto 15px;
  max-width: 128px;
  max-height: 128px;
  object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.14));
}

.world-acquire-name {
  font-size: 17px;
  letter-spacing: 0.05em;
  color: #111;
}

.world-acquire-quote {
  margin: 14px auto 0;
}
.world-acquire-quote blockquote {
  margin: 0;
  font-size: 16px;
  line-height: 1.48;
  color: #1a1a1a;
}
.world-acquire-quote figcaption {
  margin-top: 9px;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: #5a564c;
}
.world-acquire-quote cite {
  font-style: normal;
}

/* The clone that lingers where the object was, then drifts slowly to the
   inventory dock as the notice fades. notify.js sets the start state inline and
   flips the transform after a linger; this transition carries it home. The
   opacity fade is delayed so it stays visible most of the way, then dissolves
   as it reaches the dock. */
.world-fly {
  position: fixed;
  z-index: 9650;
  transform: translate(-50%, -50%);
  object-fit: contain;
  pointer-events: none;
  opacity: 1;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.28));
  transition: transform 1.25s cubic-bezier(0.4, 0.02, 0.28, 1), opacity 0.55s ease-in 0.8s;
  will-change: transform, opacity;
}

/* Staggered text reveal — the notice can assemble itself word by word (or
   letter, or line) as the accent surface settles, instead of fading in all at
   once. notify.js wraps each unit in .wa-u and stamps a running index on
   --wa-i; the delay walks down that index so the quote reads on top-to-bottom.
   Opt in per reveal via WorldNotify.acquire(item, { reveal:'words' }) or set the
   default with WorldNotify.setReveal('chars'). */
.world-acquire-inner.-reveal .wa-u {
  opacity: 0;
  transform: translateY(0.5em);
  filter: blur(4px);
  will-change: opacity, transform, filter;
}

.world-acquire-inner.-reveal-words .wa-u,
.world-acquire-inner.-reveal-chars .wa-u {
  display: inline-block;
}

.world-acquire.-in .world-acquire-inner.-reveal .wa-u {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.55s ease;
  /* hold until the cloud is up, then cascade */
  transition-delay: calc(0.24s + var(--wa-i) * 0.05s);
}

/* letters are many, so step them tighter and start from a shorter rise */
.world-acquire-inner.-reveal-chars .wa-u {
  transform: translateY(0.35em);
}

.world-acquire.-in .world-acquire-inner.-reveal-chars .wa-u {
  transition-delay: calc(0.24s + var(--wa-i) * 0.02s);
}

/* whole-line mode: blocks rise as one, a touch further apart */
.world-acquire.-in .world-acquire-inner.-reveal-lines .wa-u {
  transition-delay: calc(0.2s + var(--wa-i) * 0.16s);
}

@media (prefers-reduced-motion: reduce) {
  .world-acquire {
    transition: opacity 0.2s ease;
  }
  /* no per-unit motion when reduced — notify.js also skips the split, but guard
     the styles in case a reveal was built before the query flipped */
  .world-acquire-inner.-reveal .wa-u {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}
/* alert overlay */
.alert-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.alert-box {
  max-width: 60%;
  font-size: 1.1rem;
  line-height: 160%;
  text-align: center;
  padding: 2rem;
}

/* decor overlays */
div.decor[decor] {
  position: fixed !important;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 8000;
}
div.decor[decor][decor=noise] {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
  mix-blend-mode: overlay;
  opacity: 0.5;
}
div.decor[decor][decor=halftone] {
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.55) 26%, rgba(0, 0, 0, 0) 30%);
  background-size: 5px 5px;
  mix-blend-mode: overlay;
  opacity: 0.4;
}
div.decor[decor][decor=scope] {
  z-index: 8010;
  background: radial-gradient(circle, rgba(255, 255, 255, 0) 0%, black 75%);
}
div.decor[decor][decor=vignette] {
  box-shadow: 0 0 120px 60px rgba(0, 0, 0, 0.7) inset;
}
div.decor[decor][decor=fog] {
  background: linear-gradient(to top, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.4) 100%);
}

/* word — click-spawned captions; clamp width so a long random caption
   near the right edge can't extend past the viewport */
[word] {
  font-size: 1.15rem;
  pointer-events: none;
  max-width: min(48ch, 100vw - 240px);
  word-wrap: break-word;
}
[word][word~=diff] {
  mix-blend-mode: difference;
}
[word][word~=tag] {
  color: #ff5fa2;
  background: #fff;
  padding: 2px 8px;
  font-size: 1.4rem;
  text-transform: uppercase;
  white-space: nowrap;
}

[s~=white] {
  color: #fff;
  mix-blend-mode: screen;
  text-shadow: 0 0 2px #fff, 0 0 5px #fff;
}

[s~=shadow] {
  text-shadow: 0 0 15px #fff;
}

[s~=xs] {
  font-size: 0.5rem;
}

[s~=small] {
  font-size: 0.75rem;
}

[s~=md] {
  font-size: 1.25rem;
}

[s~=lg] {
  font-size: 1.75rem;
}

[s~=large] {
  font-size: 2rem;
}

[s~=xl] {
  font-size: 2.5rem;
}

[s~="2xl"] {
  font-size: 3.5rem;
}

[s~="3xl"] {
  font-size: 5rem;
}

[s~=huge] {
  font-size: 8rem;
}

[s~=serif] {
  font-family: Georgia, "Times New Roman", serif;
}

[s~=mono] {
  font-family: "Courier New", Courier, monospace;
}

[s~=script] {
  font-family: "Brush Script MT", "Segoe Script", cursive;
}

[s~=italic] {
  font-style: italic;
}

[s~=bold] {
  font-weight: bold;
}

[s~=thin] {
  font-weight: 200;
}

[s~=upper] {
  text-transform: uppercase;
  letter-spacing: 2px;
}

[s~=lower] {
  text-transform: lowercase;
}

[s~=spacing] {
  letter-spacing: 4px;
}

[s~=wide] {
  letter-spacing: 8px;
}

/* text */
h1 {
  font-size: 4rem;
}

.heading, h1 {
  font-weight: normal;
  text-transform: uppercase;
  margin: 0;
  color: #111;
}

.caption {
  font-size: 0.65rem;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.glow {
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.dim {
  opacity: 0.5;
}

.ghost {
  opacity: 0.15;
}

.hidden {
  opacity: 0;
}

.text-center {
  text-align: center;
}

.noclick {
  pointer-events: none;
}

/* effects — page shaders, fx attributes, hover effects, filter-based effects */
.page-shader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 8100;
}
.page-shader[shader=scanlines] {
  background: repeating-linear-gradient(to bottom, transparent 0px, transparent 2px, rgba(0, 0, 0, 0.15) 2px, rgba(0, 0, 0, 0.15) 4px);
}
.page-shader[shader=scanlines-heavy] {
  background: repeating-linear-gradient(to bottom, transparent 0px, transparent 1px, rgba(0, 0, 0, 0.3) 1px, rgba(0, 0, 0, 0.3) 3px);
}
.page-shader[shader=rgb-split] {
  mix-blend-mode: screen;
  opacity: 0.4;
  background: linear-gradient(to right, rgba(255, 0, 0, 0.15), transparent 33%), linear-gradient(to left, rgba(0, 0, 255, 0.15), transparent 33%);
}
@keyframes grain-shift {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: -20% 30%;
  }
  50% {
    background-position: 40% -10%;
  }
  75% {
    background-position: -30% 20%;
  }
  100% {
    background-position: 10% -30%;
  }
}
.page-shader[shader=grain] {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
  opacity: 0.06;
  mix-blend-mode: overlay;
  animation: grain-shift 0.5s steps(4) infinite;
}
.page-shader[shader=static] {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
  mix-blend-mode: overlay;
  opacity: 0.15;
  animation: grain-shift 0.2s steps(2) infinite;
}
.page-shader[shader=burn] {
  background: radial-gradient(circle, rgba(180, 80, 20, 0.1) 0%, rgba(120, 30, 0, 0.15) 100%);
  mix-blend-mode: color;
}
.page-shader[shader=cold] {
  background: radial-gradient(circle, rgba(40, 60, 120, 0.1) 0%, rgba(20, 30, 80, 0.15) 100%);
  mix-blend-mode: color;
}
.page-shader[shader=dream] {
  background: radial-gradient(circle at 50% 50%, rgba(255, 200, 150, 0.08) 0%, transparent 70%);
  mix-blend-mode: screen;
}
.page-shader[shader=underwater] {
  background: radial-gradient(ellipse at 30% 40%, rgba(0, 100, 120, 0.12) 0%, transparent 50%), radial-gradient(ellipse at 70% 60%, rgba(0, 80, 100, 0.1) 0%, transparent 50%);
  mix-blend-mode: overlay;
}
@keyframes vhs-track {
  0%, 100% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(2px);
  }
  20% {
    transform: translateX(-1px);
  }
  30% {
    transform: translateX(3px);
  }
  40% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-2px);
  }
  60% {
    transform: translateX(1px);
  }
  70% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(0);
  }
  90% {
    transform: translateX(2px);
  }
}
.page-shader[shader=vhs] {
  background: repeating-linear-gradient(to bottom, transparent 0px, transparent 3px, rgba(0, 0, 0, 0.05) 3px, rgba(0, 0, 0, 0.05) 4px);
  animation: vhs-track 0.4s steps(3) infinite;
}
@keyframes glitch-clip {
  0%, 90%, 100% {
    clip-path: none;
    opacity: 0;
  }
  92% {
    clip-path: inset(20% 0 60% 0);
    opacity: 1;
    transform: translateX(4px);
  }
  94% {
    clip-path: inset(50% 0 20% 0);
    opacity: 1;
    transform: translateX(-3px);
  }
  96% {
    clip-path: inset(70% 0 5% 0);
    opacity: 1;
    transform: translateX(5px);
  }
  98% {
    clip-path: none;
    opacity: 0;
  }
}
.page-shader[shader=glitch] {
  background: inherit;
  mix-blend-mode: difference;
  opacity: 0;
  animation: glitch-clip 4s steps(1) infinite;
}
.page-shader[shader=fade-edges] {
  box-shadow: inset 0 0 200px 80px rgba(0, 0, 0, 0.8);
}
.page-shader[shader=spotlight] {
  background: radial-gradient(circle 200px at var(--spot-x, 50%) var(--spot-y, 50%), transparent 0%, rgba(0, 0, 0, 0.85) 100%);
}
@keyframes rain-fall {
  to {
    background-position: 0 1200px, 0 800px;
  }
}
.page-shader[shader=rain] {
  background: repeating-linear-gradient(102deg, transparent 0 9px, rgba(190, 205, 225, 0.28) 9px 10px), repeating-linear-gradient(102deg, transparent 0 5px, rgba(190, 205, 225, 0.16) 5px 6px);
  background-size: 100px 1200px, 60px 800px;
  animation: rain-fall 0.5s linear infinite;
  opacity: 0.7;
}
@keyframes snow-fall {
  to {
    background-position: 40px 900px, -30px 700px, 20px 500px;
  }
}
.page-shader[shader=snow] {
  background: radial-gradient(2.5px 2.5px at 20px 30px, #fff 50%, transparent 55%), radial-gradient(2px 2px at 120px 80px, rgba(255, 255, 255, 0.9) 50%, transparent 55%), radial-gradient(1.5px 1.5px at 70px 160px, rgba(255, 255, 255, 0.8) 50%, transparent 55%);
  background-size: 200px 300px, 180px 240px, 140px 200px;
  animation: snow-fall 8s linear infinite;
  opacity: 0.85;
}
@keyframes mist-drift {
  to {
    background-position: 600px 0, -400px 0;
  }
}
.page-shader[shader=mist] {
  background: linear-gradient(to top, rgba(220, 225, 235, 0.3), transparent 45%), radial-gradient(120% 60% at 30% 100%, rgba(220, 225, 235, 0.22), transparent 60%);
  background-size: 1400px 100%, 1800px 100%;
  animation: mist-drift 26s linear infinite alternate;
}
@keyframes dapple-drift {
  to {
    background-position: 180px 90px, -140px 60px;
  }
}
.page-shader[shader=dapple] {
  mix-blend-mode: multiply;
  background: radial-gradient(90px 70px at 25% 30%, rgba(20, 30, 15, 0.3), transparent 70%), radial-gradient(120px 90px at 70% 60%, rgba(20, 30, 15, 0.24), transparent 70%);
  background-size: 340px 300px, 420px 360px;
  filter: blur(6px);
  animation: dapple-drift 22s ease-in-out infinite alternate;
}

body.-pfx-hue-shift {
  filter: hue-rotate(30deg);
}
body.-pfx-hue-invert {
  filter: hue-rotate(180deg);
}
body.-pfx-sepia {
  filter: sepia(0.6) contrast(1.1);
}
body.-pfx-desat {
  filter: grayscale(0.5);
}
body.-pfx-night {
  filter: brightness(0.6) saturate(0.4) hue-rotate(180deg);
}
body.-pfx-thermal {
  filter: hue-rotate(270deg) contrast(1.5) saturate(2);
}
body.-pfx-overexpose {
  filter: brightness(1.8) contrast(0.8);
}
body.-pfx-crush {
  filter: contrast(3) brightness(0.8);
}
body.-pfx-bloom {
  filter: brightness(1.2) blur(0.5px) contrast(0.9);
}

.repeat-x {
  background-repeat: repeat-x;
}

/* ─── text ─── */
[word][word~=caption], [word][word~=caption-bg], [word][word~=caption-y] {
  left: 50%;
  bottom: 10%;
  transform: translateX(-50%);
  text-align: center;
  max-width: 90vw;
  width: 100%;
}
[word][word~=caption], [word][word~=caption-bg] {
  font-size: 1.85rem;
}
[word][word~=caption-bg] {
  background: #fff;
  color: #000;
}
[word][word~=caption-y] {
  font-size: 2rem;
  color: yellow;
  text-shadow: 2px 0 0 black, -2px 0 0 black, 0 2px 0 black, 0 -2px 0 black, 1.5px 1.5px 0 black, -1.5px 1.5px 0 black, 1.5px -1.5px 0 black, -1.5px -1.5px 0 black;
}

/* ─── fx ─────────────────────────────────────────────── */
[fx][fx~=blur] {
  filter: blur(2px);
}
[fx][fx~=blur-5] {
  filter: blur(5px);
}
[fx][fx~=invert] {
  filter: invert(1);
}
[fx][fx~=bw] {
  filter: grayscale(1) contrast(1.5) brightness(0.7);
}
[fx][fx~=dark] {
  filter: brightness(0.5) contrast(2);
}
[fx][fx~=bright] {
  filter: brightness(4) contrast(1.5);
}
[fx][fx~=xbright] {
  filter: brightness(2.5);
}
[fx][fx~=xxbright] {
  filter: brightness(3.5);
}
[fx][fx~=bright-5] {
  filter: brightness(5);
}
[fx][fx~=bright-5-blur-5] {
  filter: brightness(5) blur(5px);
  transition: filter 1.5s ease;
}
[fx][fx~=bright-10] {
  filter: brightness(10);
}
[fx][fx~=dark-0] {
  filter: brightness(0);
}
[fx][fx~=contrast] {
  filter: contrast(1.5);
}

/* ─── texture overlays ─────────────────────────────── */
.tx {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: calc(var(--vvt, 0px) + var(--vvh, 100vh));
  background-size: cover;
  background-position: center;
  pointer-events: none;
  z-index: 8000;
}
.tx[tx=stars] {
  background-image: url("/a/tx/stars.gif");
  mix-blend-mode: screen;
  opacity: 0.6;
}
.tx[tx=lights] {
  background-image: url("/a/tx/lights.gif");
  mix-blend-mode: screen;
  opacity: 1;
}
.tx[tx=pin-light] {
  background-image: url("/a/tx/pin-light.gif");
  mix-blend-mode: exclusion;
  opacity: 0.5;
}
.tx[tx=pin-stars] {
  background-image: url("/a/tx/pin-stars.jpg");
  mix-blend-mode: screen;
  opacity: 0.4;
}
.tx[tx=pin-water] {
  background-image: url("/a/tx/pin-waterlight.gif");
  mix-blend-mode: overlay;
  opacity: 0.5;
}
.tx[tx=water] {
  background-image: url("/a/tx/water.gif");
  mix-blend-mode: overlay;
  opacity: 0.4;
}
.tx[tx=butterfly] {
  background-image: url("/a/tx/butterfly.gif");
  mix-blend-mode: screen;
  opacity: 0.3;
}
.tx[blend=screen] {
  mix-blend-mode: screen;
}
.tx[blend=overlay] {
  mix-blend-mode: overlay;
}
.tx[blend=multiply] {
  mix-blend-mode: multiply;
}
.tx[blend=exclusion] {
  mix-blend-mode: exclusion;
}
.tx[blend=difference] {
  mix-blend-mode: difference;
}
.tx[blend=soft-light] {
  mix-blend-mode: soft-light;
}
.tx[blend=hard-light] {
  mix-blend-mode: hard-light;
}

/* ─── hover effects ─────────────────────────────────── */
[hover] {
  transition: transform 0.2s ease, scale 0.2s ease, translate 0.2s ease, filter 0.2s ease, opacity 0.2s ease, text-shadow 0.2s ease;
}
[hover][hover~=scale]:hover {
  scale: calc(1 + 0.05 * var(--hover-amp, 1));
}
[hover][hover~=lift]:hover {
  translate: 0 calc(-4px * var(--hover-amp, 1));
}
[hover][hover~=glow]:hover {
  text-shadow: 0 0 calc(20px * var(--hover-amp, 1)) rgba(255, 255, 255, 0.5);
}
[hover][hover~=dim]:hover {
  opacity: calc(1 - 0.6 * var(--hover-amp, 1));
}
[hover][hover~=bright]:hover {
  opacity: 1;
  filter: brightness(calc(1 + 0.3 * var(--hover-amp, 1)));
}
[hover][hover~=blur]:hover {
  filter: blur(calc(2px * var(--hover-amp, 1)));
}

/* animations — keyframes, looping anims, enter/exit transitions */
[data-roam-started] {
  will-change: transform;
}

/* ─── looping animations (anim attribute) ──────────────────────────────── */
@keyframes drift {
  0%, 100% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) translateY(0);
  }
  50% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) translateY(calc(-8px * var(--amp, 1)));
  }
}
@keyframes sway {
  0%, 100% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) translateX(0);
  }
  50% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) translateX(calc(6px * var(--amp, 1)));
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: calc(1 - 0.5 * var(--amp, 1));
  }
}
@keyframes flicker {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  75% {
    opacity: 0.9;
  }
}
@keyframes spin {
  from {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) rotate(0deg);
  }
  to {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) rotate(360deg);
  }
}
@keyframes breathe {
  0%, 100% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) scale(1);
  }
  50% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) scale(calc(1 + 0.05 * var(--amp, 1)));
  }
}
@keyframes flutter {
  0%, 100% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) translateY(0) rotate(calc(-4deg * var(--amp, 1)));
  }
  25% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) translateY(calc(-2px * var(--amp, 1))) rotate(calc(3deg * var(--amp, 1)));
  }
  50% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) translateY(0) rotate(calc(-2deg * var(--amp, 1)));
  }
  75% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) translateY(calc(-1px * var(--amp, 1))) rotate(calc(4deg * var(--amp, 1)));
  }
}
@keyframes bob {
  0%, 100% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) translateY(0);
  }
  50% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) translateY(calc(-14px * var(--amp, 1)));
  }
}
@keyframes float {
  0%, 100% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) translate(0, 0);
  }
  25% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) translate(calc(4px * var(--amp, 1)), calc(-5px * var(--amp, 1)));
  }
  50% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) translate(0, calc(-8px * var(--amp, 1)));
  }
  75% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) translate(calc(-4px * var(--amp, 1)), calc(-5px * var(--amp, 1)));
  }
}
@keyframes swing {
  0%, 100% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) rotate(calc(-5deg * var(--amp, 1)));
  }
  50% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) rotate(calc(5deg * var(--amp, 1)));
  }
}
@keyframes wobble {
  0%, 100% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) rotate(calc(-3deg * var(--amp, 1)));
  }
  50% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) rotate(calc(3deg * var(--amp, 1)));
  }
}
@keyframes shiver {
  0%, 100% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) translateX(0);
  }
  25% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) translateX(calc(-1.5px * var(--amp, 1)));
  }
  75% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) translateX(calc(1.5px * var(--amp, 1)));
  }
}
@keyframes heartbeat {
  0%, 40%, 100% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) scale(1);
  }
  10% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) scale(calc(1 + 0.09 * var(--amp, 1)));
  }
  20% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) scale(1);
  }
  30% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) scale(calc(1 + 0.06 * var(--amp, 1)));
  }
}
[anim][anim~=drift] {
  animation: drift calc(4s / var(--spd, 1)) ease-in-out infinite;
}
[anim][anim~=sway] {
  animation: sway calc(3s / var(--spd, 1)) ease-in-out infinite;
}
[anim][anim~=pulse] {
  animation: pulse calc(3s / var(--spd, 1)) ease-in-out infinite;
}
[anim][anim~=pulse-slow] {
  animation: pulse calc(6s / var(--spd, 1)) ease-in-out infinite;
}
[anim][anim~=pulse-slower] {
  animation: pulse calc(10s / var(--spd, 1)) ease-in-out infinite;
}
[anim][anim~=pulse-crawl] {
  animation: pulse calc(16s / var(--spd, 1)) ease-in-out infinite;
}
[anim][anim~=flicker] {
  animation: flicker calc(0.3s / var(--spd, 1)) steps(2) infinite;
}
[anim][anim~=spin] {
  animation: spin calc(8s / var(--spd, 1)) linear infinite;
}
[anim][anim~=breathe] {
  animation: breathe calc(4s / var(--spd, 1)) ease-in-out infinite;
}
[anim][anim~=flutter] {
  animation: flutter calc(0.5s / var(--spd, 1)) ease-in-out infinite;
}
[anim][anim~=bob] {
  animation: bob calc(5s / var(--spd, 1)) ease-in-out infinite;
}
[anim][anim~=float] {
  animation: float calc(6s / var(--spd, 1)) ease-in-out infinite;
}
[anim][anim~=swing] {
  animation: swing calc(3.5s / var(--spd, 1)) ease-in-out infinite;
  transform-origin: top center;
}
[anim][anim~=wobble] {
  animation: wobble calc(3s / var(--spd, 1)) ease-in-out infinite;
}
[anim][anim~=shiver] {
  animation: shiver calc(0.25s / var(--spd, 1)) ease-in-out infinite;
}
[anim][anim~=heartbeat] {
  animation: heartbeat calc(2s / var(--spd, 1)) ease-in-out infinite;
}

/* ─── on-click animations (click-anim attribute) ───────────────────────────── */
@keyframes shake {
  0%, 100% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) translateX(0);
  }
  20% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) translateX(calc(-6px * var(--click-amp, 1)));
  }
  40% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) translateX(calc(6px * var(--click-amp, 1)));
  }
  60% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) translateX(calc(-4px * var(--click-amp, 1)));
  }
  80% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) translateX(calc(4px * var(--click-amp, 1)));
  }
}
@keyframes wiggle {
  0%, 100% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) rotate(0deg);
  }
  25% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) rotate(calc(-8deg * var(--click-amp, 1)));
  }
  75% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) rotate(calc(8deg * var(--click-amp, 1)));
  }
}
@keyframes pop {
  0%, 100% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) scale(1);
  }
  40% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) scale(calc(1 + 0.25 * var(--click-amp, 1)));
  }
}
:is([interactions], [click-actions], [click-anim]).-anim-shake {
  animation: shake 0.5s ease;
}

:is([interactions], [click-actions], [click-anim]).-anim-wiggle {
  animation: wiggle 0.5s ease;
}

:is([interactions], [click-actions], [click-anim]).-anim-pop {
  animation: pop 0.35s ease;
}

:is([interactions], [click-actions], [click-anim]).-anim-spin-once {
  animation: spin 0.7s linear;
}

/* ─── item-use rejection ───────────────────────────────────────────────── */
@keyframes rejectWobble {
  0%, 100% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) rotate(0deg);
  }
  15% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) rotate(-5deg);
  }
  42% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) rotate(4deg);
  }
  68% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) rotate(-2.5deg);
  }
  88% {
    transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) rotate(1.5deg);
  }
}
:is([interactions], [record-interaction], [click-actions], [click-anim], [link], [gives-item]).-interact-reject {
  animation: rejectWobble 0.42s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  @keyframes rejectWobble {
    0%, 100% {
      opacity: 1;
    }
    45% {
      opacity: 0.55;
    }
  }
}
/* ─── enter/exit animations ────────────────────────────────────────────── */
[enter] {
  opacity: 0;
}
[enter][enter~=blur] {
  filter: blur(12px);
}
[enter][enter~=rise] {
  transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) translateY(30px);
}
[enter][enter~=fall] {
  transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) translateY(-30px);
}
[enter][enter~=grow] {
  transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) scale(0.6);
}
[enter][enter~=slide-left] {
  transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) translateX(-40px);
}
[enter][enter~=slide-right] {
  transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) translateX(40px);
}
[enter].-entered {
  opacity: 1;
  filter: none;
  transition: opacity var(--anim-dur, 1.5s) ease, filter var(--anim-dur, 1.5s) ease, transform var(--anim-dur, 1.5s) ease;
}
[enter][enter~=rise].-entered, [enter][enter~=fall].-entered, [enter][enter~=grow].-entered, [enter][enter~=slide-left].-entered, [enter][enter~=slide-right].-entered {
  transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1));
}

[enter].-exiting,
.-exiting {
  transition: opacity var(--anim-dur, 1s) ease, filter var(--anim-dur, 1s) ease, transform var(--anim-dur, 1s) ease;
}

.-exit-fade {
  opacity: 0 !important;
}

.-exit-blur {
  filter: blur(12px) !important;
  opacity: 0 !important;
}

.-exit-rise {
  transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) translateY(-30px) !important;
  opacity: 0 !important;
}

.-exit-fall {
  transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) translateY(30px) !important;
  opacity: 0 !important;
}

.-exit-shrink {
  transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) scale(0.6) !important;
  opacity: 0 !important;
}

.-exit-slide-left {
  transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) translateX(-40px) !important;
  opacity: 0 !important;
}

.-exit-slide-right {
  transform: var(--object-live-roam-transform, translate(0, 0)) var(--object-live-drag-transform, translate(0, 0)) var(--object-base-transform, translate(0, 0)) scaleX(var(--object-live-facing-x, 1)) translateX(40px) !important;
  opacity: 0 !important;
}

@property --edge-core {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}
@property --edge-mid {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}
@property --edge-soft {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}
.world-edge {
  position: fixed;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #222;
  font-family: "Hyundai Sans Head", sans-serif;
  font-size: 20px;
  cursor: pointer;
  --edge-core:rgba(255, 255, 255, 0.88);
  --edge-mid:rgba(255, 255, 255, 0.58);
  --edge-soft:rgba(255, 255, 255, 0.26);
  user-select: none;
  touch-action: none;
  transition: --edge-core 0.35s ease-out, --edge-mid 0.35s ease-out, --edge-soft 0.35s ease-out, background-size 0.35s ease-out, width 0.35s ease-out, height 0.35s ease-out, filter 0.35s ease-out, opacity 0.15s ease, visibility 0.15s ease;
}
.world-edge .arrow {
  opacity: 0.95;
  transition: transform 0.25s ease;
}
.world-edge {
  background-repeat: no-repeat;
}
.world-edge.-top {
  top: var(--vvt, 0px);
  left: 0;
  right: 0;
  height: 58px;
  background-image: linear-gradient(to bottom, var(--edge-core) 0%, var(--edge-mid) 24%, var(--edge-soft) 58%, transparent 100%);
  background-size: 100% 56px;
  background-position: top;
  animation: worldFadeIn 2.2s ease-out 0.35s both, worldEdgePulseV 3.2s ease-in-out 2.55s infinite;
}
.world-edge.-bottom {
  bottom: var(--vvb, 0px);
  left: 0;
  right: 0;
  height: 58px;
  background-image: linear-gradient(to top, var(--edge-core) 0%, var(--edge-mid) 24%, var(--edge-soft) 58%, transparent 100%);
  background-size: 100% 56px;
  background-position: bottom;
  animation: worldFadeIn 2.2s ease-out 0.35s both, worldEdgePulseV 3.2s ease-in-out 2.55s infinite;
}
.world-edge.-left {
  left: 0;
  top: 0;
  bottom: 0;
  width: 54px;
  background-image: linear-gradient(to right, var(--edge-core) 0%, var(--edge-mid) 24%, var(--edge-soft) 58%, transparent 100%);
  background-size: 52px 100%;
  background-position: left;
  animation: worldFadeIn 2.2s ease-out 0.35s both, worldEdgePulseH 3.2s ease-in-out 2.55s infinite;
}
.world-edge.-right {
  right: 0;
  top: 0;
  bottom: 0;
  width: 54px;
  background-image: linear-gradient(to left, var(--edge-core) 0%, var(--edge-mid) 24%, var(--edge-soft) 58%, transparent 100%);
  background-size: 52px 100%;
  background-position: right;
  animation: worldFadeIn 2.2s ease-out 0.35s both, worldEdgePulseH 3.2s ease-in-out 2.55s infinite;
}
@media (max-width: 640px) {
  .world-edge.-top {
    height: 36px;
    background-size: 100% 34px;
  }
  .world-edge.-bottom {
    height: 36px;
    background-size: 100% 34px;
  }
  .world-edge.-left {
    width: 32px;
    background-size: 30px 100%;
  }
  .world-edge.-right {
    width: 32px;
    background-size: 30px 100%;
  }
}
.world-edge::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background-repeat: no-repeat;
}
.world-edge.-top::after {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.2) 48%, transparent 100%);
  background-size: 100% 28px;
  background-position: top;
}
.world-edge.-bottom::after {
  background-image: linear-gradient(to top, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.2) 48%, transparent 100%);
  background-size: 100% 28px;
  background-position: bottom;
}
.world-edge.-left::after {
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.2) 48%, transparent 100%);
  background-size: 24px 100%;
  background-position: left;
}
.world-edge.-right::after {
  background-image: linear-gradient(to left, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.2) 48%, transparent 100%);
  background-size: 24px 100%;
  background-position: right;
}
.world-edge.-more.-edge-flash::after {
  animation: worldEdgeFindFlash 2200ms ease-in-out;
}
.world-edge.-leave {
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  height: 72px;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  background-image: linear-gradient(to top, var(--edge-core) 0%, var(--edge-mid) 24%, var(--edge-soft) 58%, transparent 100%);
  background-size: 100% 58px;
  background-position: bottom;
  animation: none;
}
.world-edge.-leave:active {
  cursor: pointer;
}
.world-edge.-leave::after {
  content: none;
}
.world-edge.-leave .arrow {
  transform: rotate(90deg);
  font-size: 22px;
}
.world-edge.-leave .world-edge-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}
.world-edge.-leave:hover {
  filter: brightness(1.06) saturate(1.1);
}
.world-edge.-leave:hover .arrow {
  transform: rotate(90deg) translateX(-3px);
}

/* touch screens keep :hover on whatever ends up under the last tap (e.g. an
   edge revealed when the "Get hints" button disappears), so the hover glow is
   only for real pointers; touch gets the same look from .-armed */
.world-edge.-top.-armed,
.world-edge.-bottom.-armed {
  --edge-core:white;
  --edge-mid:rgba(255, 255, 255, 0.85);
  --edge-soft:rgba(255, 255, 255, 0.5);
  height: 86px;
  background-size: 100% 84px;
  filter: brightness(1.45) saturate(1.35);
}

.world-edge.-left.-armed,
.world-edge.-right.-armed {
  --edge-core:white;
  --edge-mid:rgba(255, 255, 255, 0.85);
  --edge-soft:rgba(255, 255, 255, 0.5);
  width: 80px;
  background-size: 78px 100%;
  filter: brightness(1.45) saturate(1.35);
}

@media (max-width: 640px) {
  .world-edge.-top.-armed,
  .world-edge.-bottom.-armed {
    height: 52px;
    background-size: 100% 50px;
  }
  .world-edge.-left.-armed,
  .world-edge.-right.-armed {
    width: 48px;
    background-size: 46px 100%;
  }
}

@media (hover: hover) {
  .world-edge.-top:hover,
  .world-edge.-bottom:hover {
    --edge-core:white;
    --edge-mid:rgba(255, 255, 255, 0.85);
    --edge-soft:rgba(255, 255, 255, 0.5);
    height: 86px;
    background-size: 100% 84px;
    filter: brightness(1.45) saturate(1.35);
  }

  .world-edge.-left:hover,
  .world-edge.-right:hover {
    --edge-core:white;
    --edge-mid:rgba(255, 255, 255, 0.85);
    --edge-soft:rgba(255, 255, 255, 0.5);
    width: 80px;
    background-size: 78px 100%;
    filter: brightness(1.45) saturate(1.35);
  }
}

@media (hover: hover) and (max-width: 640px) {
  .world-edge.-top:hover,
  .world-edge.-bottom:hover {
    height: 52px;
    background-size: 100% 50px;
  }
  .world-edge.-left:hover,
  .world-edge.-right:hover {
    width: 48px;
    background-size: 46px 100%;
  }
}
html.seam-gesturing .world-edge {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}

#seam-track::after {
  content: "";
  position: absolute;
  z-index: 4;
  pointer-events: none;
  left: calc(100vw - 48px);
  top: 0;
  width: 96px;
  height: 100vh;
  opacity: 0;
  background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.035) 28%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.035) 72%, transparent 100%);
  will-change: opacity;
  transition: opacity 0.1s ease;
}

html.seam-gesturing #seam-track::after {
  opacity: 1;
}

html.seam-edge-left #seam-track::after {
  left: -48px;
}

html.seam-edge-up #seam-track::after,
html.seam-edge-down #seam-track::after {
  left: 0;
  top: calc(100vh - 48px);
  width: 100vw;
  height: 96px;
  background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.035) 28%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.035) 72%, transparent 100%);
}

html.seam-edge-up #seam-track::after {
  top: -48px;
}

@media (min-width: 641px) and (pointer: fine) {
  .world-edge.-top {
    cursor: n-resize;
  }
  .world-edge.-bottom {
    cursor: s-resize;
  }
  .world-edge.-left {
    cursor: w-resize;
  }
  .world-edge.-right {
    cursor: e-resize;
  }
}
/* On the Artlab commission page the site's fixed 50px header overlays the top
   of the frame below 1024px, hiding the top edge and scene title under it */
@media (max-width: 1023px) {
  html.-embedded .world-edge.-top,
  html.-embedded .world-arrival {
    margin-top: 50px;
  }
  /* popups (Inventory, quotes, map) start below the header too */
  html.-embedded .world-overlay:not(.-region) {
    padding-top: calc(max(24px, env(safe-area-inset-top)) + 50px);
  }
}
.world-edge.-edge-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none !important;
}

@keyframes worldEdgeFindFlash {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  64% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* the HUD eases in — hard pops read as flicker after a crossing. (The edge
   gradients' slower 2.2s rise is comma-joined into their side rules above:
   a lone .world-edge shorthand would lose to those higher-specificity rules.) */
.world-arrival, .world-corner-btn {
  animation: worldFadeIn 0.45s ease-out both;
}

body.-world-overlay-dismissed .world-arrival, body.-world-overlay-dismissed .world-corner-btn, body.-world-overlay-dismissed .world-hotbar {
  animation: none;
}
body.-world-overlay-dismissed .world-edge {
  animation: none;
}
body.-world-overlay-dismissed .world-edge.-top, body.-world-overlay-dismissed .world-edge.-bottom {
  animation: worldEdgePulseV 3.2s ease-in-out infinite;
}
body.-world-overlay-dismissed .world-edge.-left, body.-world-overlay-dismissed .world-edge.-right {
  animation: worldEdgePulseH 3.2s ease-in-out infinite;
}

.world-placed {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 50;
  pointer-events: none;
  user-select: none;
  height: auto;
}

.-condition-hidden {
  display: none !important;
}

.obj.-inert {
  pointer-events: none;
}

.-interactable {
  cursor: pointer;
}

.interaction-sheen {
  position: absolute;
  pointer-events: none;
}

.interaction-sheen-band {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.-cue-flash {
  animation: cueBoxFlash 2200ms ease-in-out;
}

@keyframes cueBoxFlash {
  0%, 100% {
    outline: 2px solid rgba(255, 255, 255, 0);
    outline-offset: 2px;
  }
  18%, 70% {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
  }
}
.-item-target {
  animation: worldItemTargetBox 1.5s ease-in-out infinite;
}

/* drop-shadow follows the image's own shape; a box-shadow would trace the
   element's rectangle, which shows as a box around transparent artwork */
@keyframes worldItemTargetBox {
  0%, 100% {
    filter: var(--appearance-filter, brightness(1)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.35));
  }
  50% {
    filter: var(--appearance-filter, brightness(1)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.65));
  }
}
.txt[reveal-on-interact]:not(.-revealed),
.obj[reveal-on-interact]:not(.-revealed) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none !important;
  transition: opacity 0.34s ease, filter 0.34s ease, visibility 0s linear 0.34s;
}

.txt[reveal-on-interact].-revealed,
.obj[reveal-on-interact].-revealed {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.34s ease, filter 0.34s ease;
}

.txt[reveal-after]:not(.-timed-revealed),
.obj[reveal-after]:not(.-timed-revealed) {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.34s ease, filter 0.34s ease, visibility 0s linear 0.34s;
}

.txt[reveal-after],
.obj[reveal-after] {
  transition: opacity 0.34s ease, filter 0.34s ease;
}

#landscape .-rand-absent {
  display: none !important;
}

.-state-removing {
  opacity: 0 !important;
  filter: blur(2px);
  pointer-events: none !important;
  transition: opacity 0.28s ease, filter 0.28s ease;
}

img.-state-swapping,
.scene-bg.-state-swapping {
  opacity: 0.2;
  filter: blur(2px);
  transition: opacity 0.25s ease, filter 0.25s ease;
}

.repeat-copy:not(.-repeat-copy-ready) {
  opacity: 0 !important;
}

.repeat-copy.-repeat-copy-ready {
  transition: opacity 0.25s ease, filter 0.25s ease;
}

@keyframes worldEdgePulseV {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.58;
  }
}
@keyframes worldEdgePulseH {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.58;
  }
}
.scene-caption {
  position: fixed;
  left: 50%;
  bottom: calc(var(--hud-bottom) + 104px);
  transform: translateX(-50%);
  max-width: min(70vw, 560px);
  text-align: center;
  font-family: "Hyundai Sans Head", sans-serif;
  font-size: 13px;
  font-style: italic;
  color: var(--piece-text-fg, #111);
  line-height: 1.6;
  background: var(--piece-text-bg, #ffff00);
  --piece-pad-y: 8px;
  padding: calc(var(--piece-pad-y) + var(--piece-text-offset)) 14px calc(var(--piece-pad-y) - var(--piece-text-offset));
  z-index: 8500;
  pointer-events: none;
}
.scene-caption.-top-left, .scene-caption.-top-center, .scene-caption.-top-right, .scene-caption.-center-left, .scene-caption.-center, .scene-caption.-center-right, .scene-caption.-bottom-left, .scene-caption.-bottom-center, .scene-caption.-bottom-right {
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  transform: none;
  text-align: center;
  max-width: min(60vw, 440px);
}
.scene-caption.-top-left {
  top: calc(var(--vvt, 0px) + 60px);
  left: 18px;
}
.scene-caption.-top-center {
  top: calc(var(--vvt, 0px) + 18px);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  max-width: min(70vw, 560px);
}
.scene-caption.-top-right {
  top: calc(var(--vvt, 0px) + 60px);
  right: 18px;
}
.scene-caption.-center-left {
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
}
.scene-caption.-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  max-width: min(70vw, 560px);
}
.scene-caption.-center-right {
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
}
.scene-caption.-bottom-left {
  bottom: calc(var(--hud-bottom) + 56px);
  left: 18px;
}
.scene-caption.-bottom-center {
  bottom: calc(var(--hud-bottom) + 104px);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  max-width: min(70vw, 560px);
}
.scene-caption.-bottom-right {
  bottom: calc(var(--hud-bottom) + 56px);
  right: 18px;
}
.scene-caption.-narrow {
  max-width: min(50vw, 320px);
}
.scene-caption.-wide {
  max-width: min(80vw, 720px);
}

.obj.-interacted, .repeat.-interacted {
  opacity: 0.6;
}

#landscape .repeat[anim]:not(.-anim-shake):not(.-anim-wiggle):not(.-anim-pop):not(.-anim-spin-once) {
  animation: none;
}

#landscape .decor:not([decor]) {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  user-select: none;
  width: auto;
  height: auto;
  object-fit: contain;
}

img.decor, img.obj {
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
}

.txt {
  font-family: "Hyundai Sans Head", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--piece-text-fg, #111);
  background: var(--piece-text-bg, #ffff00);
  --piece-pad-y: 6px;
  padding: calc(var(--piece-pad-y) + var(--piece-text-offset)) 12px calc(var(--piece-pad-y) - var(--piece-text-offset));
  z-index: 7999 !important;
  max-width: min(95vw, 460px);
  overflow-wrap: anywhere;
  text-align: center;
}
.txt.-panel {
  color: #f2f2f7;
  background: rgba(23, 23, 23, 0.85);
}
.txt.-plain {
  color: #fff;
  background: none;
  padding: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.7);
}
.txt.-dark {
  color: #111;
  background: none;
  padding: 0;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}
.txt.-narrow {
  max-width: min(50vw, 320px);
}
.txt.-wide {
  max-width: min(80vw, 720px);
}

.txt-word {
  opacity: 0;
  transition: opacity 0.55s ease;
}

.txt-word.-in {
  opacity: 1;
}

.txt:not(.-anim-ready) {
  visibility: hidden;
}

.cite-tip {
  position: fixed;
  z-index: 9100;
  pointer-events: none;
  max-width: min(100vw - 16px, 220px);
  font-family: "Hyundai Sans Head", sans-serif;
  font-size: 10px;
  line-height: 1.3;
  color: #d5d1c7;
  background: rgba(23, 23, 23, 0.94);
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.42);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.cite-tip.-on {
  opacity: 1;
  pointer-events: auto;
}
.cite-tip a {
  color: #d5d1c7;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cite-tip a:hover {
  color: #fff;
}

/* Text is normally freeform on desktop. Named positions trade coordinates for
   a resilient, centered reading location. */
.txt[data-desktop-pos] {
  max-width: calc(100vw - 32px);
}
.txt[data-desktop-pos][data-desktop-pos=top] {
  left: 50% !important;
  right: auto !important;
  top: 60px !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  text-align: center !important;
}
.txt[data-desktop-pos][data-desktop-pos=center] {
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  text-align: center !important;
}
.txt[data-desktop-pos][data-desktop-pos=bottom] {
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 100px !important;
  transform: translateX(-50%) !important;
  text-align: center !important;
}
.txt[data-desktop-pos][data-desktop-pos=bottom-left] {
  left: 18px !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(var(--hud-bottom) + 128px) !important;
  transform: none !important;
  text-align: center !important;
}

/* On a short desktop window the scene stays 800px tall and the extra is clipped,
   so a bottom offset measured against #landscape lands on the fixed HUD.
   Named spots pin to the viewport; the authored bottom offset already clears
   the progress pill. The map hint sits above the left-hand button stack.
   --hud-nudge is set only when a spot still intersects the HUD. An unset
   variable invalidates the translate, so every other caption stays at none. */
@media (min-width: 641px) {
  #landscape > .txt[data-desktop-pos] {
    position: fixed !important;
  }
  #landscape > .txt {
    translate: 0 calc(var(--hud-nudge) * -1);
  }
  .txt[data-desktop-pos][data-desktop-pos=bottom-left] {
    bottom: calc(var(--hud-bottom) + 160px) !important;
  }
}

/* ambient life: sway uses the standalone "rotate" property so it composes
   with any inline transform set by Decor.scatter's rotate option. */
@keyframes lifeSway {
  from {
    rotate: -3deg;
  }
  to {
    rotate: 3deg;
  }
}
@keyframes lifeSwayBig {
  from {
    rotate: -7deg;
  }
  to {
    rotate: 7deg;
  }
}
.life-sway, .life-sway-big {
  transform-origin: 50% 100%;
  animation: lifeSway 4s ease-in-out infinite alternate;
  will-change: rotate;
}

.life-sway-big {
  animation-name: lifeSwayBig;
}

body.-world-fade-in {
  animation: worldFadeIn 0.6s ease-out both;
}

@keyframes worldFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes veilLoadingPulse {
  0%, 100% {
    opacity: 0.15;
  }
  50% {
    opacity: 0.55;
  }
}
/* EntryHold (helpers.js): the scene stays hidden until the entry screen or redirect */
html.world-entry-pending,
html.world-entry-pending body {
  background: #fff !important;
}
html.world-entry-pending body > *:not(.world-overlay) {
  visibility: hidden !important;
}

.world-arrival-veil {
  position: fixed;
  inset: 0;
  z-index: 9600;
  background: var(--bg, #000);
  opacity: 1;
  transition: opacity 1s ease-out;
  will-change: opacity;
}
.world-arrival-veil.-home-entry {
  background: #fff;
}
.world-arrival-veil.-home-entry::after {
  content: "· · ·";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: "Hyundai Sans Head", sans-serif;
  font-size: 15px;
  letter-spacing: 0.35em;
  color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  animation: veilLoadingPulse 1.5s ease-in-out 1.2s infinite;
}
.world-arrival-veil.-home-entry.-lift::after {
  animation: none;
  opacity: 0;
}
.world-arrival-veil.-portal-entry {
  background: #fff;
  transition-duration: 2.4s;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
.world-arrival-veil.-cross-entry {
  background: #fff;
  transition-duration: 1.6s;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
.world-arrival-veil.-lift {
  opacity: 0;
  pointer-events: none;
}

.world-cross-veil {
  position: fixed;
  inset: 0;
  z-index: 9600;
  background: #fff;
  opacity: 0;
  transition: opacity 0.5s ease-out;
  will-change: opacity;
}
.world-cross-veil.-in {
  opacity: 1;
}

html.-edge-pulling:not(.mobile-scene-pan) #landscape :is(.obj, .zone, .txt, .world-placed):not([pin]):not([data-mobile-space=viewport]):not(.bleed) {
  translate: var(--edge-pull-x, 0px) var(--edge-pull-y, 0px);
}
html.-edge-pulling:not(.mobile-scene-pan) #landscape > .txt {
  translate: var(--edge-pull-x, 0px) calc(var(--edge-pull-y, 0px) - var(--hud-nudge, 0px));
}

html.-edge-pull-spring #landscape :is(.obj, .zone, .txt, .world-placed):not([pin]):not([data-mobile-space=viewport]):not(.bleed) {
  transition: translate 0.3s ease-out;
}

/* scene things are looked at and panned across, never selected,
   highlighted, or dragged off as ghost images */
#landscape, #landscape *, #landscape .decor,
.scene-caption, .world-arrival, .world-edge {
  user-select: none;
  -webkit-user-select: none;
}

img {
  -webkit-user-drag: none;
  user-drag: none;
}

.world-arrival {
  position: fixed;
  top: max(var(--hud-margin, 14px), env(safe-area-inset-top));
  left: 50%;
  z-index: 9001;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 220px);
  font-family: "Hyundai Sans Head", sans-serif;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
  background: #fff;
  padding: 7px 12px;
  transition: opacity 0.65s ease;
}
.world-arrival-area {
  color: rgba(17, 17, 17, 0.48);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.world-arrival-scene {
  margin-top: 2px;
  color: rgba(17, 17, 17, 0.82);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.world-arrival.-leaving {
  animation: none;
  opacity: 0;
}

.world-progress {
  position: fixed;
  bottom: var(--hud-bottom);
  left: 50%;
  z-index: 9001;
  transform: translateX(-50%);
  width: auto;
  min-width: 140px;
  padding: calc(11px + var(--btn-text-offset)) 26px calc(11px - var(--btn-text-offset));
  border-radius: 999999999px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 0.6s ease, visibility 0s linear;
}
.world-progress.-hidden, .world-progress.-empty {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.world-progress .world-progress-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--found, 0) * 100%);
  background: #ffff00;
  transition: width 0.5s ease;
}
.world-progress .world-progress-label {
  position: relative;
  z-index: 1;
  font-family: "Hyundai Sans Head", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.2;
  color: #222;
}

.world-corner-btn {
  position: fixed;
  z-index: 9001;
  color: #222;
  font-family: "Hyundai Sans Head", sans-serif;
  font: inherit;
  font-family: "Hyundai Sans Head", sans-serif;
  font-size: 13px;
  letter-spacing: normal;
  line-height: 1.2;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background: #fff;
  padding: calc(11px + var(--btn-text-offset)) 26px calc(11px - var(--btn-text-offset));
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 999999999px;
  text-align: center;
  min-width: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.world-corner-btn:hover:not(:disabled), .world-corner-btn:focus-visible:not(:disabled) {
  background: #000;
  color: #fff;
}
.world-corner-btn.-options {
  bottom: calc(var(--hud-bottom) + 52px);
  left: max(var(--hud-margin, 14px), env(safe-area-inset-left));
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.world-corner-btn.-about {
  bottom: calc(var(--hud-bottom) + 100px);
  left: max(var(--hud-margin, 14px), env(safe-area-inset-left));
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}
/* "About" label beside the "?", on hover (pointer devices) or keyboard focus */
.world-corner-btn.-about::after {
  content: "About";
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  padding: calc(6px + var(--btn-text-offset)) 12px calc(6px - var(--btn-text-offset));
  color: #222;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 999999999px;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-4px, -50%);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
@media (hover: hover) {
  .world-corner-btn.-about:hover::after {
    opacity: 1;
    transform: translate(0, -50%);
  }
}
.world-corner-btn.-about:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
}
.world-corner-btn.-options svg {
  width: 19px;
  height: 19px;
  display: block;
  pointer-events: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.world-corner-btn.-tl {
  bottom: var(--hud-bottom);
  left: max(var(--hud-margin, 14px), env(safe-area-inset-left));
}
.world-corner-btn.-tr {
  bottom: var(--hud-bottom);
  right: max(var(--hud-margin, 14px), env(safe-area-inset-right));
}
.world-corner-btn.-bc {
  bottom: var(--hud-bottom);
  left: 50%;
  transform: translateX(-50%);
}

.world-corner-btn.-leaving {
  opacity: 0;
  pointer-events: none;
  animation: none;
  transition: opacity 0.15s ease;
}

body:has(.world-overlay) .world-edge,
body:has(.world-overlay) .world-corner-btn,
body:has(.world-overlay) .world-hotbar,
body:has(.world-overlay) .world-hotbar-held,
body:has(.world-overlay) .world-arrival,
body:has(.world-overlay) .world-progress,
body.-world-modal-open .world-edge,
body.-world-modal-open .world-corner-btn,
body.-world-modal-open .world-hotbar,
body.-world-modal-open .world-hotbar-held,
body.-world-modal-open .world-arrival,
body.-world-modal-open .world-progress {
  visibility: hidden;
  pointer-events: none;
}

.world-hotbar {
  position: fixed;
  z-index: 9001;
  right: max(var(--hud-margin, 14px), env(safe-area-inset-right));
  bottom: calc(var(--hud-bottom) + 52px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
  animation: worldFadeIn 0.45s ease-out both;
}

.world-hotbar-slot {
  width: 56px;
  height: 56px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.world-hotbar-slot.-empty {
  pointer-events: none;
  background: rgba(255, 255, 255, 0.82);
}
.world-hotbar-slot.-filled {
  pointer-events: auto;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.world-hotbar-slot.-filled:hover {
  transform: translateX(-3px);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
}
.world-hotbar-slot.-armed {
  border-color: #000;
  box-shadow: 0 0 0 2px #000, 0 0 0 6px rgba(255, 255, 255, 0.9), 0 0 34px 8px white, 0 4px 18px rgba(0, 0, 0, 0.3);
  transform: translateX(-6px);
  animation: worldHotbarArmedGlow 1.8s ease-in-out infinite;
}
.world-hotbar-slot.-spotlight:not(.-armed) {
  animation: worldHotbarSpotlight 1.6s ease-in-out infinite;
}
.world-hotbar-slot.-lifting {
  animation: none;
}
.world-hotbar-slot.-lifting .world-hotbar-item {
  opacity: 0.25;
}
.world-hotbar-slot.-item-use-confirm, .world-hotbar-slot.-item-use-consume {
  animation: worldHotbarUseConfirm 700ms ease-out both;
  pointer-events: none;
}
.world-hotbar-slot.-spotlight.-item-use-confirm:not(.-armed), .world-hotbar-slot.-spotlight.-item-use-consume:not(.-armed) {
  animation: worldHotbarUseConfirm 700ms ease-out both;
}
.world-hotbar-slot.-item-use-confirm .world-hotbar-item {
  animation: worldHotbarItemPulse 700ms ease-in-out both;
}
.world-hotbar-slot.-item-use-consume .world-hotbar-item {
  animation: worldHotbarItemConsume 700ms cubic-bezier(0.2, 0.8, 0.35, 1) both;
}
.world-hotbar-slot.-used {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 0, 0, 0.18);
}
.world-hotbar-slot.-used .world-hotbar-item {
  opacity: 0.4;
  filter: grayscale(1);
}

@keyframes worldHotbarSpotlight {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 5px rgba(255, 255, 255, 0.45);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 16px rgba(255, 255, 255, 0.7);
  }
}
@keyframes worldHotbarUseConfirm {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.38), 0 0 5px rgba(255, 255, 255, 0.35);
  }
  30% {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 0 24px rgba(255, 255, 255, 0.9);
  }
  58% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75), 0 0 14px rgba(255, 255, 255, 0.6);
  }
}
@keyframes worldHotbarItemPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  30% {
    opacity: 1;
    transform: scale(1.28);
  }
  58% {
    opacity: 0.9;
    transform: scale(0.82);
  }
  78% {
    opacity: 1;
    transform: scale(1.08);
  }
}
@keyframes worldHotbarItemConsume {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  28% {
    opacity: 1;
    transform: scale(1.28);
  }
  54% {
    opacity: 0.9;
    transform: scale(0.82);
  }
  76% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}
.world-hotbar-item {
  max-width: 78%;
  max-height: 78%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  transition: opacity 0.15s ease, filter 0.15s ease;
}

@keyframes worldHotbarArmedGlow {
  0%, 100% {
    box-shadow: 0 0 0 2px #000, 0 0 0 5px rgba(255, 255, 255, 0.8), 0 0 22px 5px rgba(255, 255, 255, 0.85), 0 4px 18px rgba(0, 0, 0, 0.28);
  }
  50% {
    box-shadow: 0 0 0 2px #000, 0 0 0 7px white, 0 0 44px 12px white, 0 5px 20px rgba(0, 0, 0, 0.34);
  }
}
.world-hotbar-held {
  position: fixed;
  z-index: 9400;
  left: 0;
  top: 0;
  width: 116px;
  height: 116px;
  object-fit: contain;
  transform: translate(14px, 14px) scale(0.92) rotate(2deg);
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.95)) drop-shadow(0 5px 12px rgba(0, 0, 0, 0.28));
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.world-hotbar-held.-active {
  opacity: 1;
  transform: translate(14px, 14px) scale(1) rotate(2deg);
}

@media (hover: none), (pointer: coarse) {
  .world-hotbar-held {
    display: none;
  }
  .world-hotbar-slot.-armed {
    animation: none;
    border-color: #000;
    box-shadow: 0 0 0 2px #000, 0 0 0 5px rgba(255, 255, 255, 0.95), 0 0 24px 7px rgba(255, 255, 255, 0.9), 0 4px 16px rgba(0, 0, 0, 0.28);
    transform: translateX(-4px) scale(1.06);
  }
  .world-hotbar-slot.-lifting .world-hotbar-item {
    opacity: 1;
  }
  .world-hotbar-drag {
    opacity: 1;
  }
}
.world-hotbar-drag {
  position: fixed;
  z-index: 9400;
  width: 64px;
  height: 64px;
  object-fit: contain;
  transform: translate(-50%, -50%) rotate(-4deg);
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
  opacity: 0.92;
}

@media (max-height: 560px) {
  .world-hotbar {
    gap: 6px;
  }
  .world-hotbar-slot {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }
}
.world-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  height: calc(var(--vvt, 0px) + var(--vvh, 100dvh));
  background: rgba(0, 0, 0, 0.12);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: safe center;
  justify-content: safe center;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) calc(max(24px, env(safe-area-inset-bottom)) + 58px) max(24px, env(safe-area-inset-left));
  box-sizing: border-box;
  overflow: auto;
  font-family: "Hyundai Sans Head", sans-serif;
  color: #222;
  animation: world-overlay-in 0.32s ease both;
}
.world-overlay.-region {
  padding: 0;
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  overflow: hidden;
}

.world-modal-frame {
  height: min(760px, 100%);
}

.world-overlay-close {
  position: fixed;
  left: 50%;
  bottom: var(--hud-bottom);
  transform: translateX(-50%);
  z-index: 9600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 120px;
  padding: calc(9px + var(--btn-text-offset)) 26px calc(9px - var(--btn-text-offset));
  box-sizing: border-box;
  font-family: "Hyundai Sans Head", sans-serif;
  font-size: 13px;
  letter-spacing: normal;
  text-transform: none;
  color: #111;
  background: #fff;
  cursor: pointer;
  text-align: center;
  border: 0;
  border-radius: 999999999px;
  transition: background 0.15s ease, color 0.15s ease;
}
.world-overlay-close:hover:not(:disabled), .world-overlay-close:focus-visible:not(:disabled) {
  background: #000;
  color: #fff;
}

.world-overlay.-close-attached .world-overlay-close {
  position: static;
  order: 99;
  transform: none;
  min-height: 54px;
  min-width: 144px;
  padding: calc(12px + var(--btn-text-offset)) 30px calc(12px - var(--btn-text-offset));
  font-size: 16px;
}

.world-options {
  width: min(400px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 24px;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  color: #111;
}
.world-options h2 {
  margin: 0 0 20px;
  font-size: 20px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
}

.world-options-control-label {
  font-size: 13px;
  line-height: 1.3;
}

.world-options-setting {
  display: grid;
  gap: 10px;
}

.world-options-segmented {
  width: 100%;
  padding: 3px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 999999999px;
  background: rgba(0, 0, 0, 0.06);
}
.world-options-segmented button {
  min-height: 54px;
  padding: calc(12px + var(--btn-text-offset)) 14px calc(12px - var(--btn-text-offset));
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999999999px;
  color: rgba(17, 17, 17, 0.62);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.world-options-segmented button.-on {
  color: #fff;
  background: #111;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.2);
}
.world-options-segmented button:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

.world-options-volume {
  display: block;
  margin-top: 16px;
  transition: opacity 0.15s ease;
}
.world-options-volume-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.world-options-volume output {
  color: rgba(17, 17, 17, 0.56);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.world-options-volume input[type=range] {
  width: 100%;
  height: 34px;
  min-height: 44px;
  display: block;
  margin: 0;
  cursor: pointer;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
}
.world-options-volume input[type=range]::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 999999999px;
  background: rgba(0, 0, 0, 0.18);
}
.world-options-volume input[type=range]::-webkit-slider-thumb {
  width: 26px;
  height: 26px;
  margin-top: -8px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  background: #111;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  appearance: none;
  -webkit-appearance: none;
}
.world-options-volume input[type=range]::-moz-range-track {
  height: 10px;
  border: 0;
  border-radius: 999999999px;
  background: rgba(0, 0, 0, 0.18);
}
.world-options-volume input[type=range]::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  background: #111;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.world-options-volume input[type=range]:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

.world-options.-muted .world-options-volume {
  opacity: 0.38;
}
.world-options.-muted .world-options-volume input {
  cursor: not-allowed;
}

.world-options-divider {
  height: 1px;
  margin: 18px 0;
  background: rgba(0, 0, 0, 0.18);
}

.world-options-replay {
  min-height: 44px;
  padding: calc(10px + var(--btn-text-offset)) 18px calc(10px - var(--btn-text-offset));
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 999999999px;
  color: #111;
  background: #fff;
  font-family: "Hyundai Sans Head", sans-serif;
  font-size: 13px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.world-options-replay:hover:not(:disabled), .world-options-replay:focus-visible:not(:disabled) {
  background: #000;
  color: #fff;
}

.world-options-replay:focus-visible,
.world-corner-btn.-options:focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
}

@keyframes world-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.world-overlay.-out {
  animation: world-overlay-out 0.28s ease both;
  pointer-events: none;
}

@keyframes world-overlay-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.world-cite-link {
  color: inherit;
  font-style: normal;
  opacity: 0.58;
}

.world-cite-arrow {
  white-space: nowrap;
}

a.world-cite-link {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  cursor: pointer;
}
a.world-cite-link:hover, a.world-cite-link:focus-visible {
  opacity: 0.8;
}

.world-quote {
  position: relative;
  width: min(90vw, 500px);
  max-height: calc(100vh - 48px);
  max-height: calc(var(--vvh, 100dvh) - 48px);
  box-sizing: border-box;
  overflow: auto;
  padding: 34px 40px 38px;
  text-align: center;
  background: var(--piece-text-bg, #ffff00);
}
.world-quote-title {
  font-size: 12px;
  font-style: normal;
  color: var(--piece-text-fg, #5a564c);
  margin-top: 9px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  text-align: center;
}
.world-quote-fg {
  display: block;
  max-width: 128px;
  max-height: 128px;
  margin: 0 auto 15px;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.14));
}
.world-quote-text {
  font-size: 16px;
  line-height: 1.48;
  color: var(--piece-text-fg, #1a1a1a);
}

.world-quote-overlay {
  flex-direction: column;
  gap: 18px;
  -webkit-backdrop-filter: blur(12px) saturate(0.72);
  backdrop-filter: blur(12px) saturate(0.72);
  background: rgba(0, 0, 0, 0.3);
}

.world-region {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  height: calc(var(--vvt, 0px) + var(--vvh, 100dvh));
  box-sizing: border-box;
  padding: max(24px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Hyundai Sans Head", sans-serif;
  color: #111;
  background: #fff;
  text-align: center;
  overflow: hidden;
}
.world-region-eyebrow {
  position: relative;
  z-index: 2;
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: #111;
}
.world-region-title {
  position: relative;
  z-index: 2;
  margin: 0 0 -34px;
  font-size: clamp(42px, 5.4vw, 76px);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.025em;
  line-height: 1;
  text-transform: capitalize;
  color: #111;
}
.world-region-media {
  position: relative;
  z-index: 1;
  width: min(96vw, 1500px);
  height: min(82vh, 860px);
  min-height: 190px;
  margin: 0 0 -56px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.world-region-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transition: opacity 0.42s ease;
  -webkit-mask-image: radial-gradient(ellipse closest-side at center, #000 0%, #000 42%, rgba(0, 0, 0, 0.96) 50%, rgba(0, 0, 0, 0.78) 61%, rgba(0, 0, 0, 0.42) 73%, rgba(0, 0, 0, 0.14) 85%, transparent 99%);
  mask-image: radial-gradient(ellipse closest-side at center, #000 0%, #000 42%, rgba(0, 0, 0, 0.96) 50%, rgba(0, 0, 0, 0.78) 61%, rgba(0, 0, 0, 0.42) 73%, rgba(0, 0, 0, 0.14) 85%, transparent 99%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.world-region-image.-ready {
  opacity: 1;
}
.world-region.-image-missing .world-region-title {
  margin-bottom: 24px;
}
.world-region-btns {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.world-region-enter {
  background: #fff;
  color: #111;
  border: 1px solid rgba(0, 0, 0, 0.72);
  border-radius: 999999999px;
  padding: calc(12px + var(--btn-text-offset)) 38px calc(12px - var(--btn-text-offset));
  min-width: 150px;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.world-region-enter:hover:not(:disabled), .world-region-enter:focus-visible:not(:disabled) {
  background: #000;
  color: #fff;
}
.world-region-cancel {
  border: 0;
  padding: 2px 8px;
  color: #111;
  background: transparent;
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.world-region-cancel:hover {
  opacity: 0.58;
}

@media (max-width: 640px) {
  .world-region {
    padding-top: max(18px, env(safe-area-inset-top));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }
  .world-region-eyebrow {
    font-size: 12px;
  }
  .world-region-title {
    margin-bottom: -16px;
    font-size: clamp(36px, 12vw, 54px);
  }
  .world-region-media {
    width: 98vw;
    height: min(64vh, 520px);
    min-height: 170px;
    margin-bottom: -30px;
  }
  .world-region-enter {
    min-width: 144px;
    padding: calc(10px + var(--btn-text-offset)) 32px calc(10px - var(--btn-text-offset));
  }
}
.world-overlay.-region.-entering {
  background: #fff;
  pointer-events: none;
}

.world-region.-entering .world-region-eyebrow,
.world-region.-entering .world-region-title,
.world-region.-entering .world-region-btns {
  opacity: 0;
  transition: opacity 0.42s ease;
}
.world-region.-entering .world-region-media {
  will-change: transform, opacity;
  animation: portalDilate 1.2s cubic-bezier(0.5, 0, 0.3, 1) forwards;
}

@keyframes portalDilate {
  to {
    transform: scale(1.16);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .world-region-image {
    transition: none;
  }
  .world-region.-entering .world-region-media {
    animation: none;
    opacity: 0;
    transition: opacity 0.15s ease;
  }
  .world-overlay.-region.-entering {
    animation: none;
    background: #fff;
  }
  .world-arrival-veil.-portal-entry {
    transition-duration: 0.2s;
  }
  .-item-target {
    animation: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 16px rgba(255, 255, 255, 0.5);
  }
  .world-hotbar-slot.-spotlight:not(.-armed) {
    animation: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 14px rgba(255, 255, 255, 0.6);
  }
  .world-hotbar-slot.-armed {
    animation: none;
  }
  .-interact-confirm {
    animation: worldInteractConfirmRM 500ms ease-out;
  }
}
@media (max-width: 640px) {
  :root {
    --mobile-controls-side:max(10px, env(safe-area-inset-left), env(safe-area-inset-right));
    --mobile-controls-gap:6px;
    --mobile-controls-height:40px;
    --mobile-controls-pill-width:clamp(70px, 23vw, 96px);
    --mobile-controls-bottom:calc(max(10px, env(safe-area-inset-bottom)) + var(--vvb, 0px));
    --mobile-scene-clearance:calc(var(--mobile-controls-bottom) + var(--mobile-controls-height) + var(--mobile-controls-gap) + var(--mobile-controls-height) + 12px);
  }
  .world-edge {
    /* edge hotzones — generous tap targets, safe-area aware */
  }
  .world-edge.-top {
    height: 64px;
    padding-top: env(safe-area-inset-top);
  }
  .world-edge.-bottom {
    height: 64px;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .world-edge.-left {
    width: 64px;
    padding-left: env(safe-area-inset-left);
  }
  .world-edge.-right {
    width: 64px;
    padding-right: env(safe-area-inset-right);
  }
  .world-corner-btn {
    width: var(--mobile-controls-pill-width);
    min-width: 0;
    max-width: var(--mobile-controls-pill-width);
    font-size: clamp(10px, 3.3vw, 12px);
    line-height: 18px;
    padding: calc(7px + var(--btn-text-offset)) 3px calc(7px - var(--btn-text-offset));
    min-height: var(--mobile-controls-height);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .world-corner-btn.-tl,
  .world-corner-btn.-tr,
  .world-corner-btn.-bc {
    bottom: var(--mobile-controls-bottom);
  }
  /* drags that start on the HUD pull the edge band underneath */
  .world-corner-btn,
  .world-progress {
    touch-action: none;
  }
  .world-corner-btn.-about {
    left: var(--mobile-controls-side);
    bottom: calc(var(--mobile-controls-bottom) + (var(--mobile-controls-height) + var(--mobile-controls-gap)) * 2);
    width: var(--mobile-controls-height);
    min-width: var(--mobile-controls-height);
    max-width: var(--mobile-controls-height);
    height: var(--mobile-controls-height);
    min-height: var(--mobile-controls-height);
    padding: 0;
  }
  .world-corner-btn.-options {
    left: var(--mobile-controls-side);
    bottom: calc(var(--mobile-controls-bottom) + var(--mobile-controls-height) + var(--mobile-controls-gap));
    width: var(--mobile-controls-height);
    min-width: var(--mobile-controls-height);
    max-width: var(--mobile-controls-height);
    height: var(--mobile-controls-height);
    min-height: var(--mobile-controls-height);
    padding: 0;
  }
  .world-corner-btn.-tl {
    left: var(--mobile-controls-side);
  }
  .world-corner-btn.-bc {
    width: var(--mobile-controls-pill-width);
    min-width: 0;
    max-width: var(--mobile-controls-pill-width);
    font-size: clamp(10px, 3.3vw, 12px);
    line-height: 18px;
    padding: calc(7px + var(--btn-text-offset)) 3px calc(7px - var(--btn-text-offset));
    min-height: var(--mobile-controls-height);
    bottom: var(--mobile-controls-bottom);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .world-options {
    width: 100%;
    max-height: calc(100dvh - 96px);
    padding: 20px;
    border-radius: 0;
  }
  .world-options-volume input[type=range] {
    min-height: 48px;
  }
  .world-options-volume input[type=range]::-webkit-slider-runnable-track {
    height: 12px;
  }
  .world-options-volume input[type=range]::-webkit-slider-thumb {
    width: 30px;
    height: 30px;
    margin-top: -9px;
  }
  .world-options-volume input[type=range]::-moz-range-track {
    height: 12px;
  }
  .world-options-volume input[type=range]::-moz-range-thumb {
    width: 30px;
    height: 30px;
  }
  .world-hotbar {
    gap: 6px;
    bottom: calc(var(--mobile-controls-bottom) + var(--mobile-controls-height) + var(--mobile-controls-gap));
  }
  .world-hotbar-slot {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }
  .world-hotbar-drag {
    width: 52px;
    height: 52px;
  }
  .txt {
    box-sizing: border-box;
    font-size: 13px;
    width: max-content !important;
    max-width: 90vw !important;
    overflow-wrap: anywhere;
    white-space: normal !important;
  }
  .txt[data-mobile-pos] {
    font-size: 12px;
    --piece-pad-y: 6px;
    padding: calc(var(--piece-pad-y) + var(--piece-text-offset)) 10px calc(var(--piece-pad-y) - var(--piece-text-offset));
    line-height: 1.5;
  }
  #landscape :is(.obj, .zone, .repeat)[data-mobile-layout=override],
  #landscape .txt[data-mobile-layout=override]:not([data-mobile-pos]) {
    left: var(--mobile-left) !important;
    right: var(--mobile-right, auto) !important;
    top: var(--mobile-top) !important;
    bottom: var(--mobile-bottom) !important;
    width: var(--mobile-width) !important;
    height: var(--mobile-height) !important;
    translate: calc(var(--mobile-translate-x, 0px) + var(--mobile-parallax-x, 0px)) calc(var(--mobile-translate-y, 0px) + var(--mobile-parallax-y, 0px)) !important;
  }
  html.mobile-scene-pan.mobile-css-parallax #landscape :is(.obj, .zone, .repeat)[data-mobile-layout=override],
  html.mobile-scene-pan.mobile-css-parallax #landscape .txt[data-mobile-layout=override]:not([data-mobile-pos]) {
    translate: calc(var(--mobile-translate-x, 0px) + var(--mobile-parallax-dx, 0px) * (var(--mobile-parallax-factor-x, 1) - 1) + var(--mobile-text-hold-x, 0px)) calc(var(--mobile-translate-y, 0px) + var(--mobile-parallax-dy, 0px) * (var(--mobile-parallax-factor-y, 1) - 1) + var(--mobile-text-hold-y, 0px)) !important;
  }
  #landscape .txt[data-mobile-layout=override]:not([data-mobile-pos]) {
    text-align: var(--mobile-text-align, center) !important;
  }
  /* the named desktop position's centring transform would shift mobile-placed text */
  #landscape .txt[data-mobile-layout=override][data-desktop-pos]:not([data-mobile-pos]) {
    transform: none !important;
  }
  .scene-caption {
    font-size: 12px;
    --piece-pad-y: 6px;
    padding: calc(var(--piece-pad-y) + var(--piece-text-offset)) 10px calc(var(--piece-pad-y) - var(--piece-text-offset));
    line-height: 1.5;
    max-width: calc(100vw - 32px);
    bottom: var(--mobile-scene-clearance);
  }
  .scene-caption.-top-left, .scene-caption.-top-center, .scene-caption.-top-right, .scene-caption.-center-left, .scene-caption.-center, .scene-caption.-center-right, .scene-caption.-bottom-left, .scene-caption.-bottom-center, .scene-caption.-bottom-right {
    max-width: calc(100vw - 32px);
  }
  .scene-caption.-top-left {
    top: calc(var(--vvt, 0px) + max(18px, env(safe-area-inset-top)));
    left: max(12px, env(safe-area-inset-left));
  }
  .scene-caption.-top-center {
    top: calc(var(--vvt, 0px) + max(18px, env(safe-area-inset-top)));
  }
  .scene-caption.-top-right {
    top: calc(var(--vvt, 0px) + max(18px, env(safe-area-inset-top)));
    right: max(12px, env(safe-area-inset-right));
  }
  .scene-caption.-bottom-left {
    bottom: var(--mobile-scene-clearance);
    left: max(12px, env(safe-area-inset-left));
  }
  .scene-caption.-bottom-center {
    bottom: var(--mobile-scene-clearance);
  }
  .scene-caption.-bottom-right {
    bottom: var(--mobile-scene-clearance);
    right: max(12px, env(safe-area-inset-right));
  }
  .scene-caption.-narrow {
    max-width: calc(100vw - 32px);
  }
  .scene-caption.-wide {
    max-width: calc(100vw - 32px);
  }
  .world-arrival {
    top: max(10px, env(safe-area-inset-top));
    max-width: calc(100vw - 32px);
    padding: 5px 10px;
  }
  .world-arrival-area {
    font-size: 10px;
  }
  .world-arrival-scene {
    font-size: 10px;
  }
}
.-drop-over {
  outline: 2px dashed rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}

.-interact-confirm {
  animation: worldInteractConfirm 620ms ease-out;
}

@keyframes worldInteractConfirm {
  0% {
    scale: 1;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
  30% {
    scale: 1.09;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 22px rgba(255, 255, 255, 0.75);
  }
  100% {
    scale: 1;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
@keyframes worldInteractConfirmRM {
  0% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 20px rgba(255, 255, 255, 0.7);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
/* Live-only debug palette, opened with the backslash key.
   Deliberately plain: this is an author tool, not part of the piece, so it
   reads as one — flat dark panel, mono type, no accent color, no ornament.
   Sections are native <details> so noisy groups fold away. */
.world-debug-overlay {
  z-index: 9600;
  background: rgba(23, 23, 23, 0.72);
}

.world-debug {
  width: min(94vw, 780px);
  max-height: calc(100dvh - 110px);
  margin: auto;
  overflow: auto;
  box-sizing: border-box;
  padding: 14px 18px 18px;
  background: #141418;
  border: 1px solid #3a3a44;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  color: #d2d2da;
  font: 13px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  outline: none;
}
.world-debug-eyebrow {
  color: #8a8a96;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.world-debug-title {
  margin: 3px 0 10px;
  font: inherit;
  font-size: 13px;
  color: #fff;
}
.world-debug-sec {
  border-top: 1px solid #26262e;
}
.world-debug-sec > summary {
  padding: 8px 2px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.world-debug-sec > summary::-webkit-details-marker {
  display: none;
}
.world-debug-sec > summary::before {
  content: "▸ ";
  color: #5c5c68;
}
.world-debug-sec > summary:hover, .world-debug-sec > summary:focus-visible {
  color: #fff;
  outline: none;
}
.world-debug-sec[open] > summary::before {
  content: "▾ ";
}
.world-debug-secbody {
  padding: 0 2px 12px;
}
.world-debug-counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
}
.world-debug-count-context {
  grid-column: 1/-1;
  margin: 0 6px 5px;
  color: #8a8a96;
  font-size: 11px;
}
.world-debug-count-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 6px;
  border-bottom: 1px solid #232329;
}
.world-debug-count-row strong {
  color: #fff;
  font: normal 16px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  white-space: nowrap;
}
.world-debug-count-row small {
  color: #8a8a96;
  font: 11px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.world-debug-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
}
.world-debug-tool {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  padding: 7px 6px;
  border: 0;
  border-bottom: 1px solid #232329;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.world-debug-tool:hover, .world-debug-tool:focus-visible {
  background: #22222b;
  outline: none;
}
.world-debug-tool:disabled {
  cursor: wait;
  opacity: 0.55;
}
.world-debug-tool[aria-busy=true] {
  opacity: 1;
  background: #2a2a34;
}
.world-debug-copy {
  display: grid;
  gap: 2px;
}
.world-debug-copy strong {
  color: #fff;
  font-size: inherit;
  font-weight: normal;
}
.world-debug-note {
  color: #8a8a96;
  font-size: 12px;
  line-height: 1.4;
}
.world-debug-text-color .world-debug-color-copy,
.world-debug-text-color .world-debug-color-current {
  margin: 4px 0 0;
  color: #8a8a96;
  font-size: 12px;
  line-height: 1.4;
}
.world-debug-color-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}
.world-debug-color-option {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid #33333d;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.world-debug-color-option:hover, .world-debug-color-option:focus-visible {
  border-color: #8a8a96;
  outline: none;
}
.world-debug-color-option.is-selected {
  border-color: #fff;
  box-shadow: inset 3px 0 0 #fff;
}
.world-debug-color-swatch {
  width: 22px;
  height: 26px;
  flex: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
}
.world-debug-color-option[data-color="#002C5F"] .world-debug-color-swatch {
  background: #002C5F;
}
.world-debug-color-option[data-color="#AACAE6"] .world-debug-color-swatch {
  background: #AACAE6;
}
.world-debug-color-option[data-color="#00AAD2"] .world-debug-color-swatch {
  background: #00AAD2;
}
.world-debug-color-option[data-color="#A36B4F"] .world-debug-color-swatch {
  background: #A36B4F;
}
.world-debug-color-option[data-color-key=yellow] .world-debug-color-swatch {
  background: #ffff00;
}
.world-debug-color-option[data-color="#FFFFFF"] .world-debug-color-swatch {
  background: #FFFFFF;
}
.world-debug-color-option[data-color="#000000"] .world-debug-color-swatch {
  background: #000000;
}
.world-debug-color-label {
  display: grid;
  min-width: 0;
  gap: 1px;
}
.world-debug-color-label strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: normal;
  color: #d2d2da;
}
.world-debug-color-label small {
  color: #8a8a96;
  font-size: 10px;
  line-height: 1.2;
}
.world-debug-empty {
  margin: 6px 0 0;
  color: #8a8a96;
  font-size: 12px;
}
.world-debug-chips {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.world-debug-inventory-action {
  display: grid;
  gap: 2px;
  margin-top: 10px;
}
.world-debug-inventory-action strong {
  color: #fff;
  font-size: 12px;
  font-weight: normal;
}
.world-debug-inventory-action span {
  color: #8a8a96;
  font-size: 11px;
  line-height: 1.4;
}
.world-debug-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  border: 1px solid #4a4a56;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.world-debug-chip-remove {
  padding-left: 6px;
  border-left: 1px solid #4a4a56;
  color: #a9a9b4;
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
}
.world-debug-chip:hover, .world-debug-chip:focus-visible {
  border-color: #fff;
  color: #fff;
  outline: none;
}
.world-debug-add {
  margin-top: 8px;
  width: 100%;
  padding: 7px 8px;
  border: 1px solid #4a4a56;
  background: #1c1c22;
  color: #d2d2da;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

@media (max-width: 640px) {
  .world-debug {
    padding: 12px 12px 16px;
  }
  .world-debug-list,
  .world-debug-counts,
  .world-debug-color-options {
    grid-template-columns: 1fr;
  }
}
/* Visitor inventory / palm overlay. A centred modal box on the shared overlay
   backdrop, matching the atlas — dismissed by the shared .world-overlay-close. */
.world-palm {
  position: relative;
  width: min(1120px, 100%);
  background: #fff;
  box-shadow: none;
  overflow: hidden;
  display: flex;
  flex-direction: row;
}
.world-palm-stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}
.world-palm-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
.world-palm-item {
  position: absolute;
  max-width: 200px;
  max-height: 200px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: filter 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}
.world-palm-item.-active {
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.88));
}
.world-palm-item.-muted {
  filter: blur(3px) grayscale(0.25);
  opacity: 0.34;
}
.world-palm-item.-dragging {
  cursor: grabbing;
  transition: none;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.35));
}
.world-palm-item.-inspected {
  cursor: default;
  transform: translate(-50%, -50%) scale(2.25) !important;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.4));
}
.world-palm {
  /* Reference list — citations, captions, and memories from interactions. */
}
.world-palm-list {
  flex: 0 0 auto;
  width: min(380px, 32vw);
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: rgba(255, 255, 255, 0.94);
  border-left: 1px solid rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
  padding: 24px 22px 32px;
  color: #111;
  font-family: "Hyundai Sans Head", sans-serif;
}
.world-palm-list-switch {
  width: 100%;
  padding: 3px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 999999999px;
  background: rgba(0, 0, 0, 0.06);
}
.world-palm-list-switch button {
  min-height: 54px;
  padding: calc(12px + var(--btn-text-offset)) 14px calc(12px - var(--btn-text-offset));
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999999999px;
  color: rgba(17, 17, 17, 0.62);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.world-palm-list-switch button.-active {
  color: #fff;
  background: #111;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.2);
}
.world-palm-list-switch button:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}
.world-palm-list-switch {
  margin-bottom: 18px;
}
.world-palm-list-switch button {
  min-height: 44px;
  padding: calc(8px + var(--btn-text-offset)) 10px calc(8px - var(--btn-text-offset));
  font-size: 12px;
}
.world-palm-list-section {
  display: block;
}
.world-palm-list-section.-hidden {
  display: none;
}
.world-palm-list-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}
.world-palm-share-launch {
  flex: 0 0 auto;
  min-height: 30px;
  padding: calc(6px + var(--btn-text-offset)) 13px calc(6px - var(--btn-text-offset));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #111;
  border-radius: 999999999px;
  background: #111;
  color: #fff;
  font: inherit;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.world-palm-share-launch:hover:not(:disabled), .world-palm-share-launch:focus-visible:not(:disabled) {
  background: #ffff00;
  color: #111;
}
.world-palm-share-launch {
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.world-palm-share-launch:hover, .world-palm-share-launch:focus-visible {
  transform: translateY(-1px);
}
.world-palm-list-title.-refs {
  margin-top: 0;
}
.world-palm-list-intro {
  margin: -5px 0 12px;
  color: #666;
  font-size: 10px;
  line-height: 1.5;
}
.world-palm-list-empty {
  font-size: 12px;
  font-style: normal;
  color: #777;
  line-height: 1.6;
}
.world-palm-list ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.world-palm-list li {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.18);
}
.world-palm-list li:last-child {
  border-bottom: 0;
}
.world-palm-list-thumb {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.world-palm-list-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.world-palm-list-body {
  flex: 1;
  min-width: 0;
  align-self: center;
}
.world-palm-list-name {
  font-size: 12px;
  color: #111;
  line-height: 1.4;
}
.world-palm-list-caption {
  font-size: 12px;
  font-style: italic;
  color: #555;
  line-height: 1.5;
  margin-top: 3px;
}
.world-palm-list-description {
  font-size: 12px;
  color: #333;
  line-height: 1.55;
  margin-top: 4px;
}
.world-palm-list-description p {
  margin: 0 0 4px;
}
.world-palm-list ol.-refs li {
  align-items: start;
  padding: 14px 0 16px;
}
.world-palm-list-reference-text {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #111;
  font-size: 13px;
  font-style: normal;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.world-palm-list-origin {
  margin-top: 8px;
  color: #666;
  font-size: 10px;
  font-style: italic;
  line-height: 1.4;
}
.world-palm-list-citation {
  display: block;
  margin: 8px 0 0;
  color: #666;
  font-size: 10px;
  font-style: normal;
  line-height: 1.4;
}
.world-palm-list-citation a {
  color: inherit;
}
.world-palm-list-item {
  position: relative;
  cursor: pointer;
  touch-action: auto;
  transition: background 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}
.world-palm-list-item:focus {
  outline: 1px solid rgba(0, 0, 0, 0.45);
  outline-offset: -2px;
}
.-things .world-palm-list-item:hover {
  background: rgba(0, 0, 0, 0.06);
}
.world-palm-list-item.-active {
  background: rgba(0, 0, 0, 0.06);
}
.world-palm-list-item.-muted {
  opacity: 0.42;
}
.world-palm-list-item.-used {
  opacity: 0.55;
}
.world-palm-list-item.-used .world-palm-list-name {
  color: #666;
}
.world-palm-list-note {
  margin-top: 3px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #777;
}
.world-palm-inspect-detail {
  position: absolute;
  z-index: 1001;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  width: min(860px, 100vw - 48px);
  max-height: min(42dvh, 440px);
  overflow: auto;
  transform: translate(-50%, 14px);
  padding: 24px 48px 28px;
  color: #111;
  background: rgba(255, 255, 255, 0.94);
  border: 0;
  box-shadow: none;
  font-family: "Hyundai Sans Head", sans-serif;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.world-palm-inspect-detail.-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.world-palm-inspect-back {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: calc(7px + var(--btn-text-offset)) 13px calc(7px - var(--btn-text-offset));
  border: 0;
  border-radius: 999999999px;
  background: rgba(0, 0, 0, 0.06);
  color: #333;
  font-family: "Hyundai Sans Head", sans-serif;
  font-size: 12px;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.world-palm-inspect-back:hover {
  background: rgba(0, 0, 0, 0.12);
  color: #111;
}
.world-palm-inspect-name {
  margin-bottom: 8px;
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height: 1.35;
  color: #111;
}
.world-palm-inspect-detail .world-acquire-quote {
  margin-top: 6px;
}
.world-palm-inspect-detail .world-acquire-quote blockquote {
  font-size: 26px;
  line-height: 1.34;
}
.world-palm-inspect-detail .world-acquire-quote figcaption {
  margin-top: 10px;
}
.world-palm-inspect-detail .world-acquire-quote cite {
  font-style: normal;
}
.world-palm.-inspecting .world-palm-list {
  flex-basis: 0;
  width: 0;
  padding-left: 0;
  padding-right: 0;
  border-left-width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: width 0.25s ease, flex-basis 0.25s ease, padding 0.25s ease, opacity 0.15s ease;
}
.world-palm-share {
  position: absolute;
  z-index: 1100;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #fff;
  color: #111;
  font-family: "Hyundai Sans Head", sans-serif;
}
.world-palm-share.-hidden {
  display: none;
}
.world-palm-share-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 22px;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}
.world-palm-share-heading {
  min-width: 0;
}
.world-palm-share-heading h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.1;
}
.world-palm-share-workbench {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(280px, 350px) minmax(0, 1fr);
}
.world-palm-share-controls {
  min-height: 0;
  overflow-y: auto;
  padding: 20px 20px 30px;
  background: rgba(255, 255, 255, 0.97);
  border-right: 1px solid rgba(0, 0, 0, 0.18);
}
.world-palm-share-preview {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
  background: #1a1a1a;
}
.world-palm-share-source {
  display: none;
}
.world-palm-share-canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  background: #fff;
  box-shadow: 0 16px 52px rgba(0, 0, 0, 0.35);
  transition: opacity 0.15s ease;
  -webkit-touch-callout: default;
  user-select: auto;
  -webkit-user-select: auto;
  -webkit-user-drag: auto;
}
.world-palm-share-canvas.-stale {
  opacity: 0.45;
}
.world-palm-share.-invalid .world-palm-share-canvas {
  opacity: 0.5;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
.world-palm-share.-invalid .world-palm-share-save-hint {
  display: none;
}
.world-palm-share-field[hidden] {
  display: none;
}
.world-palm-share-field + .world-palm-share-field {
  margin-top: 16px;
}
.world-palm-share-control-label {
  margin: 0 0 7px 4px;
  color: #666;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}
.world-palm-share-segmented {
  width: 100%;
  padding: 3px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 999999999px;
  background: rgba(0, 0, 0, 0.06);
}
.world-palm-share-segmented button {
  min-height: 54px;
  padding: calc(12px + var(--btn-text-offset)) 14px calc(12px - var(--btn-text-offset));
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999999999px;
  color: rgba(17, 17, 17, 0.62);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.world-palm-share-segmented button.-on {
  color: #fff;
  background: #111;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.2);
}
.world-palm-share-segmented button:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}
.world-palm-share-segmented.-format {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.world-palm-share-segmented.-compact {
  margin-top: 9px;
}
.world-palm-share-segmented.-compact button {
  min-height: 44px;
  padding: calc(9px + var(--btn-text-offset)) 10px calc(9px - var(--btn-text-offset));
  font-size: 12px;
}
.world-palm-share-quote-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.world-palm-share-quote-select, .world-palm-share-randomize {
  min-height: 44px;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 999999999px;
  background: #fff;
  color: #111;
  font-family: "Hyundai Sans Head", sans-serif;
  font-size: 12px;
}
.world-palm-share-quote-select {
  min-width: 0;
  width: 100%;
  padding: 9px 34px 9px 15px;
}
.world-palm-share-randomize {
  padding: calc(9px + var(--btn-text-offset)) 12px calc(9px - var(--btn-text-offset));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.world-palm-share-randomize:hover:not(:disabled), .world-palm-share-randomize:focus-visible:not(:disabled) {
  background: #ffff00;
  color: #111;
}
.world-palm-share-bg-shuffle {
  width: 100%;
}
.world-palm-share-position-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 9px;
}
.world-palm-share-memory-position-shuffle {
  width: 100%;
  margin-top: 9px;
}
.world-palm-share-randomize:disabled, .world-palm-share-quote-select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.world-palm-share-memory-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 3px;
}
.world-palm-share-memory-count {
  color: #444;
  font-size: 12px;
  line-height: 1.35;
}
.world-palm-share-memory-list {
  max-height: 292px;
  margin-top: 9px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: #fff;
}
.world-palm-share-memory-choice {
  width: 100%;
  min-height: 48px;
  display: block;
  padding: 12px 14px;
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.18);
  background: #fff;
  color: #111;
  font-family: "Hyundai Sans Head", sans-serif;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}
.world-palm-share-memory-choice:last-child {
  border-bottom: 0;
}
.world-palm-share-memory-choice:hover, .world-palm-share-memory-choice:focus-visible {
  background: rgba(0, 0, 0, 0.06);
  outline: 0;
}
.world-palm-share-memory-choice:focus-visible {
  box-shadow: inset 0 0 0 2px #111;
}
.world-palm-share-memory-choice.-selected {
  background: rgba(255, 255, 0, 0.45);
  color: #111;
  box-shadow: inset 4px 0 #111;
}
.world-palm-share-memory-choice.-selected:hover, .world-palm-share-memory-choice.-selected:focus-visible {
  background: rgba(255, 255, 0, 0.62);
}
.world-palm-share-memory-choice.-at-limit {
  opacity: 0.38;
  cursor: not-allowed;
}
.world-palm-share-memory-copy {
  min-width: 0;
  display: block;
}
.world-palm-share-memory-excerpt {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.world-palm-share-memory-citation {
  display: block;
  margin-top: 7px;
  overflow: hidden;
  color: #666;
  font-size: 10px;
  font-style: normal;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.world-palm-share-memory-list[data-memory-filter=selected] .world-palm-share-memory-excerpt {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}
.world-palm-share-memory-list[data-memory-filter=selected] .world-palm-share-memory-citation {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.world-palm-share-memory-empty {
  padding: 22px 14px;
  color: #666;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}
.world-palm-share-save-hint {
  display: none;
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 8px;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 10px;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
}
.world-palm-share.-has-share-sheet .world-palm-share-save-hint {
  display: none;
}
.world-palm-share-compose-note {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  text-align: center;
  pointer-events: none;
}
.world-palm-share-compose-note[hidden] {
  display: none;
}
.world-palm-share-actions {
  display: grid;
  gap: 8px;
  margin-top: 22px;
}
.world-palm-share-actions button {
  min-height: 44px;
  padding: calc(9px + var(--btn-text-offset)) 12px calc(9px - var(--btn-text-offset));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 999999999px;
  background: #fff;
  color: #111;
  font-family: "Hyundai Sans Head", sans-serif;
  font-size: 13px;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.world-palm-share-actions button:hover:not(:disabled), .world-palm-share-actions button:focus-visible:not(:disabled) {
  background: #ffff00;
  color: #111;
}
.world-palm-share-actions button.-primary {
  background: #111;
  color: #fff;
}
.world-palm-share-actions button:disabled {
  opacity: 0.45;
  cursor: wait;
}
.world-palm-share-status {
  margin-top: 10px;
  color: #666;
  font-size: 10px;
  line-height: 1.45;
}
.world-palm-share-status:empty {
  display: none;
}

@media (max-width: 640px) {
  .world-palm {
    /* Stack the reference list below the palm on small screens. The modal is a
       little shorter than the screen now, so split it in proportions rather than
       fixed viewport heights that could overflow the box. */
    flex-direction: column;
  }
  .world-palm-stage {
    flex: 1 1 55%;
    min-height: 0;
  }
  .world-palm-list {
    flex: 1 1 45%;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow-y: auto;
    border-left: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.4);
    padding: 18px 18px 22px;
  }
  .world-palm-item {
    max-width: 140px;
    max-height: 140px;
  }
  .world-palm-item.-inspected {
    transform: translate(-50%, -50%) scale(2) !important;
  }
  .world-palm-inspect-detail {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    max-height: 52dvh;
    padding: 46px 18px calc(18px + env(safe-area-inset-bottom));
    transform: translateY(16px);
    border: 0;
    box-shadow: none;
  }
  .world-palm-inspect-detail.-visible {
    transform: translateY(0);
  }
  .world-palm-inspect-back {
    top: 14px;
    left: 14px;
  }
  .world-palm-inspect-detail .world-acquire-quote blockquote {
    font-size: 19px;
  }
  .world-palm.-inspecting .world-palm-list {
    flex-basis: 0;
    width: 100%;
    height: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top-width: 0;
  }
  .world-palm-share-header {
    padding: 9px 14px;
  }
  .world-palm-share-heading h2 {
    font-size: 16px;
  }
  .world-palm-share-workbench {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .world-palm-share-preview {
    order: 0;
    flex: 0 0 min(46dvh, 430px);
    padding: 12px;
  }
  .world-palm-share:not(.-has-share-sheet) .world-palm-share-preview {
    padding-bottom: 36px;
  }
  .world-palm-share-controls {
    order: 1;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 18px 16px calc(24px + env(safe-area-inset-bottom));
    border-right: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.18);
  }
  .world-palm-share-segmented button {
    min-height: 44px;
    padding: calc(8px + var(--btn-text-offset)) 10px calc(8px - var(--btn-text-offset));
    font-size: 12px;
  }
  .world-palm-share-segmented.-compact button {
    min-height: 44px;
    padding: calc(8px + var(--btn-text-offset)) 10px calc(8px - var(--btn-text-offset));
  }
  .world-palm-share-memory-list {
    max-height: none;
    overflow: visible;
  }
  .world-palm-share-save-hint {
    display: block;
  }
  .world-palm-share-actions {
    margin-top: 12px;
  }
}
@media (pointer: coarse) {
  .world-palm-share-save-hint {
    display: block;
  }
  .world-palm-share:not(.-has-share-sheet) .world-palm-share-preview {
    padding-bottom: 36px;
  }
}
/* Visitor atlas / world-map overlay.
   A compact spatial terrain: scenes keep an even gutter and feathered borders
   (uniform on all sides — see the thumb mask rule);
   only the current scene is in colour, while the rest stay grey. */
.world-map {
  --cell-w:clamp(240px, 23vw, 330px);
  --cell-h:calc(var(--cell-w) * .725);
  background: #e8eaed;
  box-shadow: none;
  padding: 0;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  height: auto;
  max-height: calc(var(--vvh, 100dvh) - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom)) - 58px);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.world-map-empty {
  padding: 40px 12px;
  color: #666;
  font-style: italic;
}
.world-map-citations {
  margin: 18px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.18);
  font-size: 12px;
  color: #555;
}
.world-map-grid {
  display: grid;
  gap: 10px;
  position: relative;
  width: max-content;
  padding: 14px;
  box-sizing: border-box;
  isolation: isolate;
}
.world-map-host {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
  opacity: 1;
  transition: opacity 0.15s ease;
}
.world-map-host.-refreshing {
  opacity: 0;
}
.world-map-cell {
  width: var(--cell-w);
  height: var(--cell-h);
  background: transparent;
  display: flex;
  flex-direction: column;
  color: #222;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  z-index: 1;
}
.world-map-cell.-empty, .world-map-cell.-locked {
  background: transparent;
  z-index: 0;
}
.world-map {
  /* undiscovered cell: a flat "unknown" tile (feathered by the shared mask) with
     a centred question mark — no blurred scene imagery to read as glitchy */
}
.world-map-cell.-locked .world-map-cell-thumb {
  background: #dadde2;
}
.world-map-cell-q {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Hyundai Sans Head", sans-serif;
  font-weight: 400;
  font-size: 44px;
  color: #8a8d92;
}
.world-map-cell-thumb {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  /* the scene's own background fills the cell; JS sets background-image per cell */
  background: transparent center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Feather EVERY side of EVERY tile the same way — including tiles on the
     terrain's outer boundary. Never zero a side per-cell (the old -edge-t/r/b/l
     scheme): a solid side gets hard-chopped by the card's crop and reads as an
     erroneously cut-off tile. Two intersected linear gradients feather each
     straight edge independently (a radial can't: it fades toward an ellipse,
     not four flat edges). */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 17%, #000 83%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 17%, #000 83%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 17%, #000 83%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 17%, #000 83%, transparent 100%);
  mask-composite: intersect;
}
.world-map {
  /* cover-fill fallback (pages without a thumb): the frozen scene fills the cell.
     Scale covers the LARGEST cell the clamp allows (330×239 → 825·.29); smaller
     cells crop the excess via the thumb's overflow, like a cover fit. */
}
.world-map-cell-thumb iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1320px;
  height: 825px;
  transform: scale(0.29);
  transform-origin: top left;
  border: 0;
  pointer-events: none;
  background: #fff;
}
.world-map-cell-thumb img {
  max-width: 60%;
  max-height: 60%;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.world-map {
  /* touch-only "drag to explore" cue — fixed to the viewport, fades on first pan */
}
.world-map-drag-hint {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 92px + var(--vvb, 0px));
  transform: translateX(-50%);
  z-index: 9002;
  pointer-events: none;
  white-space: nowrap;
  font-family: "Hyundai Sans Head", sans-serif;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(23, 23, 23, 0.72);
  padding: 7px 15px;
  border-radius: 999999999px;
  animation: worldFadeIn 0.4s ease-out both;
  transition: opacity 0.5s ease;
}
.world-map-drag-hint.-gone {
  opacity: 0;
}
.world-map {
  /* scene title — hidden until hover, then centred over the cell */
}
.world-map-cell-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none;
  max-width: 88%;
  text-align: center;
  font-family: "Hyundai Sans Head", sans-serif;
  font-size: 13px;
  line-height: 1.3;
  color: #000;
  padding: 5px 12px;
  background: #ffff00;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.world-map-cell:hover .world-map-cell-title, .world-map-cell:focus-visible .world-map-cell-title {
  opacity: 1;
}
.world-map {
  /* found-progress under the scene name, inside the same hover chip: a quiet
     hairline that refills as the reader touches that scene's findables (the
     --map-found custom property, 0–1, is set per cell by openMap) */
}
.world-map-cell-progress {
  display: block;
  margin: 5px auto 0;
  height: 2px;
  border-radius: 999999999px;
  background: rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.world-map-cell-progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #000;
  transform-origin: left center;
  transform: scaleX(var(--map-found, 0));
}
.world-map {
  /* colour lives only on the scene you're standing in; the rest is memory, in grey */
}
.world-map-cell:not(.-current):not(.-empty):not(.-locked) {
  filter: grayscale(1);
  transition: filter 2s ease;
}
.world-map-cell:not(.-empty):not(.-locked) {
  cursor: pointer;
}
.world-map-cell:not(.-current):not(.-empty):not(.-locked):hover, .world-map-cell:not(.-current):not(.-empty):not(.-locked):focus-visible {
  filter: grayscale(0);
}
.world-map-cell:not(.-empty):not(.-locked):focus-visible {
  outline: 2px solid rgba(30, 30, 30, 0.6);
  outline-offset: -2px;
  z-index: 3;
}
.world-map-cell.-current {
  z-index: 2;
  filter: drop-shadow(0 0 9px rgba(255, 255, 255, 0.7));
}
.world-map {
  /* List variant — the hidden `oneoff` atlas has no grid coordinates, so scenes
     are shown as a plain vertical list instead of the spatial terrain. Sits in
     the same overlay chrome; drop the wide fixed cell size and let it size to
     the content. */
}
.world-map.-list {
  --cell-w:auto;
  --cell-h:auto;
  width: min(340px, 100vw - 48px);
  overflow: auto;
}
.world-map.-list .world-map-grid {
  display: block;
  width: auto;
}
.world-map {
  /* Tutorial is intentionally not a miniature of its authored 2×4 editor
     grid. The detached Welcome card is omitted at runtime, leaving exactly the
     three navigable scenes in one column. Size that column from both available
     viewport axes so its cells are as large as the modal can hold without a
     clipped fourth-row-sized gutter. */
}
.world-map.-tutorial {
  --tutorial-pad:clamp(12px, 2vmin, 20px);
  --tutorial-available-h:min(760px, calc(var(--vvh, 100dvh) - 106px));
  --tutorial-content-h:calc(var(--tutorial-available-h) - (var(--tutorial-pad) * 2));
  --cell-h:min(calc(var(--tutorial-content-h) / 3), calc((100vw - 48px - (var(--tutorial-pad) * 2)) / 1.45));
  --cell-w:calc(var(--cell-h) * 1.45);
  width: calc(var(--cell-w) + var(--tutorial-pad) * 2);
  height: auto;
  max-width: 100%;
  max-height: 100%;
  padding: var(--tutorial-pad);
  overflow: hidden;
}
.world-map.-tutorial .world-map-host, .world-map.-tutorial .world-map-grid {
  width: var(--cell-w);
}
.world-map.-tutorial .world-map-grid {
  gap: 0;
  margin: 0;
  padding: 0;
}
.world-map-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  text-decoration: none;
  color: #222;
  font-family: "Hyundai Sans Head", sans-serif;
  font-size: 16px;
  line-height: 1.3;
  cursor: pointer;
  /* hairline separators in the same tone as the citations divider */
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  transition: background 0.15s ease, color 0.15s ease;
}
.world-map-list-item:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.18);
}
.world-map-list-item:hover, .world-map-list-item:focus-visible {
  background: rgba(255, 255, 255, 0.55);
  color: #000;
}
.world-map-list-item:focus-visible {
  outline: 2px solid rgba(30, 30, 30, 0.6);
  outline-offset: -2px;
}
.world-map-list-item {
  /* the row you're standing in is the one in "colour" — echoes the grid's
     current-cell emphasis, here as weight + a leading marker */
}
.world-map-list-item.-current {
  color: #000;
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .world-map-host,
  .world-map-cell:not(.-empty):not(.-locked) {
    transition: none;
  }
}
@media (max-width: 640px) {
  .world-map {
    --cell-w:clamp(148px, 42vw, 176px);
    --cell-h:calc(var(--cell-w) * .7272727);
    padding: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }
  .world-map-host {
    flex: 0 1 auto;
    width: 100%;
    cursor: grab;
  }
  .world-map-host:active {
    cursor: grabbing;
  }
  .world-map-grid {
    gap: 8px;
    width: max-content;
    height: max-content;
    margin-inline: 0;
    padding: 12px;
    flex: 0 0 auto;
  }
  .world-map-cell {
    width: var(--cell-w);
  }
  .world-map-cell-thumb iframe {
    transform: scale(0.136);
  }
  .world-map.-tutorial {
    --tutorial-available-h:min(760px, calc(var(--vvh, 100dvh) - 106px));
    --tutorial-content-h:calc(var(--tutorial-available-h) - (var(--tutorial-pad) * 2));
    --cell-h:min(calc(var(--tutorial-content-h) / 3), calc((100vw - 48px - (var(--tutorial-pad) * 2)) / 1.45));
    --cell-w:calc(var(--cell-h) * 1.45);
    width: calc(var(--cell-w) + var(--tutorial-pad) * 2);
  }
  .world-map-tabs {
    position: relative;
    z-index: 6;
    display: flex;
    justify-content: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 8px 8px 10px;
    background: #e8eaed;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .world-map-tabs::-webkit-scrollbar {
    display: none;
  }
  .world-map-tab {
    flex: 0 0 auto;
    min-height: 44px;
    cursor: pointer;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-family: "Hyundai Sans Head", sans-serif;
    font-size: 12px;
    letter-spacing: normal;
    line-height: 1;
    text-transform: none;
    padding: calc(8px + var(--btn-text-offset)) 13px calc(8px - var(--btn-text-offset));
    border-radius: 999999999px;
    white-space: nowrap;
    color: #333;
    background: rgba(0, 0, 0, 0.06);
    transition: background 0.15s ease, color 0.15s ease;
  }
  .world-map-tab.-on {
    color: #fff;
    background: #222;
  }
}
/* Optically centred pill labels.
   Centring a line box centres the font's leading, not its letters, so the label
   reads high however it is aligned. Where the engine can trim the line box down
   to the cap and baseline edges, the box that gets centred is the letters
   themselves — exact at any number of lines, and independent of which metrics
   the engine reads. Trimming is lost on an anonymous flex item, so these pills
   drop back to block layout and centre with align-content instead; the flex
   centring above stays as the fallback. --btn-text-offset is switched off here
   because the trimmed box needs no nudge. */
@supports (text-box-trim: trim-both) {
  .world-corner-btn,
  .world-corner-btn.-bc,
  .world-overlay-close,
  .world-options-segmented button,
  .world-options-replay,
  .world-region-enter,
  .world-map-tab,
  .world-palm-list-switch button,
  .world-palm-share-launch,
  .world-palm-share-segmented button,
  .world-palm-share-randomize,
  .world-palm-share-actions button {
    --btn-text-offset: 0px;
    display: block;
    align-content: center;
    text-box: trim-both cap alphabetic;
  }
  /* the two pills sized by their line box rather than a min-height keep the
     height they had before the trim */
  .world-corner-btn.-about::after {
    --btn-text-offset: 0px;
    min-height: calc(1lh + 14px);
    align-content: center;
    text-box: trim-both cap alphabetic;
  }
  @media (min-width: 641px) {
    .world-corner-btn {
      min-height: calc(1lh + 24px);
    }
  }
}
/* Windows (LG Gram, Galaxy Book): the Map and Inventory labels read slightly
   low, so lift them 1px inside the same padding; size and position unchanged */
html.-windows .world-corner-btn.-tl,
html.-windows .world-corner-btn.-tr {
  --btn-text-offset: -1px;
}