html, body { margin: 0; height: 100%; background: #000; overflow: hidden; color: #fff; overscroll-behavior: none; touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.idle { cursor: none; }

#veil { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #000; transition: opacity 2.4s ease; pointer-events: none; z-index: 5; text-align: center; }
#veil.gone { opacity: 0; }
#veil-title { font-size: clamp(26px, 5vw, 64px); letter-spacing: 0.5em; margin-right: -0.5em; text-transform: uppercase; font-weight: 400; opacity: 0.92; }
#veil-sub { margin-top: 1.6em; padding: 0 24px; font-size: 13px; letter-spacing: 0.35em; text-transform: uppercase; opacity: 0.45; animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: 0.15; } }

#title { position: fixed; left: calc(clamp(20px, 4vw, 56px) + env(safe-area-inset-left, 0px)); right: 24px; bottom: calc(clamp(24px, 6vh, 64px) + env(safe-area-inset-bottom, 0px)); opacity: 0; transform: translateY(8px); transition: opacity 2s ease, transform 2s ease; pointer-events: none; text-shadow: 0 1px 18px rgba(0,0,0,0.55), 0 0 2px rgba(0,0,0,0.5); z-index: 3; }
#title.show { opacity: 1; transform: none; }
#title-name { font-size: clamp(22px, 3.2vw, 44px); letter-spacing: 0.08em; font-style: italic; }
#title-after { margin-top: 0.35em; font-size: clamp(13px, 1.4vw, 18px); letter-spacing: 0.06em; font-style: italic; opacity: 0.85; }
#title-after:empty { display: none; }
#title-line { margin-top: 0.45em; max-width: 44ch; font: italic 400 clamp(15px, 1.5vw, 19px)/1.35 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; letter-spacing: 0.01em; opacity: 0.92; }
#title-line:empty { display: none; }
#title-meta { margin-top: 0.5em; font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase; opacity: 0.7; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }

#hud { position: fixed; right: calc(clamp(12px, 3vw, 40px) + env(safe-area-inset-right, 0px)); bottom: calc(clamp(16px, 4vh, 40px) + env(safe-area-inset-bottom, 0px)); display: flex; gap: 14px; align-items: center; padding: 10px 16px; border-radius: 999px; background: rgba(10, 12, 18, 0.42); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border: 1px solid rgba(255,255,255,0.14); font: 11px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0; pointer-events: none; transition: opacity 0.6s ease; z-index: 4; }
body.active #hud { opacity: 1; pointer-events: auto; }
#hud label, #panel label.slide { display: flex; align-items: center; gap: 8px; opacity: 0.85; white-space: nowrap; }
#hud button { all: unset; cursor: pointer; padding: 6px 7px; border-radius: 8px; opacity: 0.85; display: flex; align-items: center; justify-content: center; }
#hud button:hover, #hud button:focus-visible { opacity: 1; background: rgba(255,255,255,0.12); }
#hud #b-gentle.on { opacity: 1; background: rgba(150,215,255,0.26); }
#toast.tap { pointer-events: auto; cursor: pointer; }
.i { width: 17px; height: 17px; display: block; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* two-state buttons carry both pictures: .a normally, .b when the button is .on */
button .i.b, button.on .i.a { display: none; }
button.on .i.b { display: block; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 84px; height: 2px; background: rgba(255,255,255,0.35); border-radius: 2px; outline: none; margin: 0; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; cursor: pointer; }

#debug { position: fixed; left: 8px; top: 8px; font: 11px/1.4 ui-monospace, Menlo, monospace; color: #cfe; background: rgba(0,0,0,0.5); padding: 6px 8px; border-radius: 6px; white-space: pre; display: none; z-index: 6; pointer-events: none; }

#panel { position: fixed; right: calc(clamp(12px, 3vw, 40px) + env(safe-area-inset-right, 0px)); bottom: calc(clamp(16px, 4vh, 40px) + env(safe-area-inset-bottom, 0px) + 58px); width: min(340px, calc(100vw - 24px)); max-height: calc(100% - 120px); overflow-y: auto; box-sizing: border-box; display: grid; gap: 10px; padding: 16px 18px; border-radius: 18px; background: rgba(10, 12, 18, 0.55); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border: 1px solid rgba(255,255,255,0.14); font: 11px/1.2 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; z-index: 4; transition: opacity 0.4s ease; }
#panel[hidden] { display: none; }
body.idle #panel { opacity: 0; pointer-events: none; }
#panel label { display: flex; align-items: center; justify-content: space-between; gap: 12px; opacity: 0.9; }
#panel label.slide input { flex: 1; }
#panel select { font: inherit; letter-spacing: 0.06em; text-transform: none; color: #fff; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; padding: 5px 8px; min-width: 160px; }
#panel select option { color: #111; }
#panel .row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
#panel .check { justify-content: flex-start; gap: 8px; cursor: pointer; }
#panel .note { margin-top: -6px; text-align: right; font-size: 10px; letter-spacing: 0.08em; text-transform: none; opacity: 0.55; min-height: 1.2em; }
#panel button { all: unset; cursor: pointer; padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.18); opacity: 0.9; }
#panel button:hover, #panel button:focus-visible { background: rgba(255,255,255,0.12); opacity: 1; }
#kinds { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 240px; }
#kinds button { padding: 4px 8px; font-size: 10px; letter-spacing: 0.1em; opacity: 0.45; }
#kinds button.on { opacity: 1; background: rgba(255,255,255,0.16); }
#kinds button.calm { flex-basis: 100%; border-style: dashed; }
#kinds button.calm.on { border-style: solid; background: rgba(150,215,255,0.26); }
body.notitles #title { display: none; }
#toast { position: fixed; left: 50%; bottom: 18vh; transform: translateX(-50%); max-width: calc(100vw - 48px); box-sizing: border-box; text-align: center; padding: 9px 16px; border-radius: 999px; background: rgba(10,12,18,0.6); font: 11px/1.4 ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; z-index: 6; }
#toast.show { opacity: 1; }

/* touch screens: controls a finger can hit; 16px form text so the page does not zoom when a menu opens */
@media (pointer: coarse) {
  #hud { gap: 6px; padding: 6px 10px; }
  #hud button { padding: 11px; }
  .i { width: 20px; height: 20px; }
  input[type=range] { height: 3px; }
  input[type=range]::-webkit-slider-thumb { width: 22px; height: 22px; }
  input[type=range]::-moz-range-thumb { width: 22px; height: 22px; }
  #panel { gap: 12px; font-size: 12px; }
  #panel select { font-size: 16px; padding: 8px 10px; }
  #panel button { padding: 9px 12px; }
  #kinds button { padding: 8px 10px; font-size: 11px; }
  #panel .check input { width: 20px; height: 20px; }
}
/* narrow windows (a phone held upright): the bar spans the screen and the two sliders live in the options panel */
@media (max-width: 700px) {
  #hud { left: calc(12px + env(safe-area-inset-left, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); justify-content: space-around; }
  #panel { left: calc(12px + env(safe-area-inset-left, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); width: auto; bottom: calc(clamp(16px, 4vh, 40px) + env(safe-area-inset-bottom, 0px) + 64px); }
  #panel select { min-width: 0; flex: 0 1 190px; }
  #title { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  #kinds { max-width: none; }
}
/* short windows (a phone held sideways): the panel goes two columns wide so it fits the height */
@media (max-height: 480px) {
  #panel { width: min(620px, calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); left: auto; grid-template-columns: 1fr 1fr; column-gap: 22px; max-height: calc(100% - 92px); bottom: calc(clamp(16px, 4vh, 40px) + env(safe-area-inset-bottom, 0px) + 64px); }
  #panel .row { grid-column: 1 / -1; }
  #panel select { min-width: 0; flex: 0 1 150px; }
  #panel select#s-order { flex-basis: 190px; }
  #panel .note { text-align: left; margin-top: 0; align-self: center; }
  #title { bottom: calc(clamp(16px, 4vh, 40px) + env(safe-area-inset-bottom, 0px) + 64px); }
}
@media (prefers-reduced-motion: reduce) { #veil-sub { animation: none; } }

/* the hidden index of worlds (src/ui/atlas.js) */
body.atlas-open { cursor: auto !important; }
#atlas { position: fixed; inset: 0; z-index: 8; display: flex; flex-direction: column; background: rgba(6, 8, 14, 0.9); backdrop-filter: blur(22px) saturate(1.1); -webkit-backdrop-filter: blur(22px) saturate(1.1); font: 13px/1.3 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color: #fff; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); }
#atlas[hidden] { display: none; }
.atlas-head { display: flex; align-items: center; gap: 12px; padding: 18px clamp(14px, 4vw, 48px) 14px; border-bottom: 1px solid rgba(255,255,255,0.1); flex-wrap: wrap; }
.atlas-titles { margin-right: auto; }
.atlas-head h2 { margin: 0; font: italic 400 clamp(22px, 3vw, 34px)/1.1 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; letter-spacing: 0.04em; }
.atlas-count { margin-top: 5px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; }
.atlas-head input, .atlas-head select { font: inherit; font-size: 16px; color: #fff; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); border-radius: 10px; padding: 8px 12px; min-width: 0; outline: none; }
.atlas-head input { width: min(240px, 44vw); }
.atlas-head input::placeholder { color: rgba(255,255,255,0.5); }
.atlas-head input:focus-visible, .atlas-head select:focus-visible { border-color: rgba(255,255,255,0.5); }
.atlas-head select option { color: #111; }
.atlas-x { all: unset; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; text-align: center; font-size: 26px; line-height: 38px; opacity: 0.8; }
.atlas-x:hover, .atlas-x:focus-visible { opacity: 1; background: rgba(255,255,255,0.12); }
.atlas-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 4px clamp(14px, 4vw, 48px) 24px; }
.atlas-h { margin: 34px 0 14px; padding-bottom: 9px; border-bottom: 1px solid rgba(255,255,255,0.14); font: italic 400 clamp(22px, 2.6vw, 28px)/1.15 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; letter-spacing: 0.03em; }
.atlas-h-n { font: 500 13px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; }
.atlas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 44%), 1fr)); gap: 14px; }
.atlas-card { display: block; color: inherit; text-decoration: none; border-radius: 12px; outline: none; }
.atlas-pic { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.12); transition: transform 0.25s ease, border-color 0.25s ease; }
.atlas-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.atlas-card:hover .atlas-pic, .atlas-card:focus-visible .atlas-pic { transform: scale(1.03); border-color: rgba(255,255,255,0.6); }
.atlas-card.here .atlas-pic { border-color: #ffd98a; }
.atlas-new, .atlas-here { position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 999px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; background: rgba(10,12,18,0.7); }
.atlas-new { color: #9ff0c0; }
.atlas-here { color: #ffd98a; left: auto; right: 8px; }
.atlas-name { margin-top: 8px; font: italic 16px/1.2 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; letter-spacing: 0.03em; }
.atlas-kind { margin-top: 4px; font-size: 12px; line-height: 1.35; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.74; }
.atlas-line { margin-top: 5px; font: italic 13px/1.35 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; opacity: 0.8; }
.atlas-none { opacity: 0.6; padding: 30px 0; }
.atlas-foot { margin: 0; padding: 10px clamp(14px, 4vw, 48px) calc(12px + env(safe-area-inset-bottom, 0px)); font-size: 11px; letter-spacing: 0.06em; opacity: 0.5; border-top: 1px solid rgba(255,255,255,0.08); }
@media (prefers-reduced-motion: reduce) { .atlas-pic { transition: none; } }

.atlas-report { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }

/* the gallery's marks: a heart on each card (a button laid over the picture's corner, beside the link, so that pressing it does not start the world) and a tick on the worlds seen */
.atlas-cell { position: relative; }
.atlas-over { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 16 / 9; pointer-events: none; }
.atlas-heart { all: unset; position: absolute; right: 6px; bottom: 6px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: auto; background: rgba(10,12,18,0.5); opacity: 0.6; transition: opacity 0.2s ease, background 0.2s ease; }
.atlas-heart .i { width: 16px; height: 16px; }
.atlas-heart:hover, .atlas-heart:focus-visible { opacity: 1; background: rgba(10,12,18,0.82); }
.atlas-heart.on { opacity: 1; background: rgba(10,12,18,0.7); }
.atlas-heart.on .i { fill: currentColor; }
.atlas-seen { position: absolute; left: 7px; bottom: 7px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(10,12,18,0.62); opacity: 0.9; }
.atlas-seen .i { width: 12px; height: 12px; stroke-width: 2; }
.atlas-favs:empty { display: none; }
/* the journeys' shelf at the head of the list: wide cards, each a strip of four pictures over its title and line */
.atlas-journeys { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 18px; }
.atlas-journey { display: block; color: inherit; text-decoration: none; border-radius: 12px; outline: none; }
.atlas-strip { position: relative; display: flex; gap: 2px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.12); transition: transform 0.25s ease, border-color 0.25s ease; }
.atlas-strip-pic { position: relative; flex: 1 1 0; aspect-ratio: 4 / 5; min-width: 0; }
.atlas-strip-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.atlas-journey:hover .atlas-strip, .atlas-journey:focus-visible .atlas-strip { transform: scale(1.015); border-color: rgba(255,255,255,0.6); }
.atlas-journey.here .atlas-strip { border-color: #ffd98a; }
.atlas-journey-name { margin-top: 10px; font: italic 21px/1.2 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; letter-spacing: 0.03em; }
.atlas-journey-line { margin-top: 5px; font-size: 14px; line-height: 1.4; opacity: 0.86; max-width: 56ch; }
@media (prefers-reduced-motion: reduce) { .atlas-strip { transition: none; } }
.atlas-about { all: unset; cursor: pointer; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.18); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.atlas-about:hover, .atlas-about:focus-visible { opacity: 1; background: rgba(255,255,255,0.12); }
@media (pointer: coarse) { .atlas-heart { width: 38px; height: 38px; right: 3px; bottom: 3px; opacity: 0.75; } .atlas-heart .i { width: 19px; height: 19px; } }
@media (max-width: 560px) { .atlas-head select { max-width: 46vw; } .atlas-head .atlas-show { max-width: 64vw; } }

/* the share menu: a small panel over the bar (src/main.js, "sharing") */
#share { position: fixed; right: calc(clamp(12px, 3vw, 40px) + env(safe-area-inset-right, 0px)); bottom: calc(clamp(16px, 4vh, 40px) + env(safe-area-inset-bottom, 0px) + 58px); display: grid; gap: 2px; padding: 8px; border-radius: 16px; background: rgba(10, 12, 18, 0.55); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border: 1px solid rgba(255,255,255,0.14); font: 11px/1.2 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; z-index: 4; transition: opacity 0.4s ease; }
#share[hidden] { display: none; }
body.idle #share { opacity: 0; pointer-events: none; }
#share button { all: unset; cursor: pointer; padding: 9px 12px; border-radius: 9px; opacity: 0.9; white-space: nowrap; }
#share button:hover, #share button:focus-visible { background: rgba(255,255,255,0.12); opacity: 1; }
#panel .row[hidden] { display: none; }
#panel .row.checks { flex-wrap: wrap; row-gap: 10px; }
#panel .row.foot { justify-content: flex-end; }
@media (pointer: coarse) { #share { font-size: 12px; } #share button { padding: 13px 14px; } }
@media (max-width: 700px), (max-height: 480px) { #share { bottom: calc(clamp(16px, 4vh, 40px) + env(safe-area-inset-bottom, 0px) + 64px); } }
@media (max-width: 700px) {
  #share { right: calc(12px + env(safe-area-inset-right, 0px)); }
  /* the bar's buttons share its width evenly, so that the heart and the share button fit a narrow phone with the rest */
  #hud button { flex: 1 1 0; min-width: 0; padding-left: 0; padding-right: 0; }
}
@media (max-width: 430px) {
  #hud { left: calc(6px + env(safe-area-inset-left, 0px)); right: calc(6px + env(safe-area-inset-right, 0px)); gap: 0; padding-left: 4px; padding-right: 4px; }
  .atlas-head { gap: 8px; } .atlas-about { padding: 8px 9px; }   /* the filter, About and the close button stay on one line */
}

/* the About (src/ui/share.js): a card over everything */
#about { position: fixed; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: calc(16px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px)); background: rgba(4, 6, 10, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: auto; }
#about[hidden] { display: none; }
.about-card { position: relative; width: min(560px, 100%); max-height: 100%; overflow-y: auto; box-sizing: border-box; padding: 26px 30px 20px; border-radius: 18px; background: rgba(12, 14, 22, 0.94); border: 1px solid rgba(255,255,255,0.14); font-size: 16px; line-height: 1.55; }
.about-card h2 { margin: 0 0 14px; font-weight: 400; font-style: italic; font-size: clamp(26px, 4vw, 34px); line-height: 1.1; letter-spacing: 0.06em; }
.about-card p { margin: 0 0 12px; opacity: 0.88; }
.about-x { all: unset; cursor: pointer; position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; border-radius: 50%; text-align: center; font: 26px/38px ui-sans-serif, system-ui, sans-serif; opacity: 0.8; }
.about-x:hover, .about-x:focus-visible { opacity: 1; background: rgba(255,255,255,0.12); }
.about-film { all: unset; cursor: pointer; display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 2px 0 16px; border-radius: 12px; overflow: hidden; background: #000; }
.about-film img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.85; }
.about-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(10,12,18,0.6); border: 1px solid rgba(255,255,255,0.55); box-sizing: border-box; }
.about-play::after { content: ''; position: absolute; left: 25px; top: 19px; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent #fff; }
.about-film:hover .about-play, .about-film:focus-visible .about-play { background: rgba(10,12,18,0.85); }
.about-video { display: block; width: 100%; aspect-ratio: 16 / 9; margin: 2px 0 16px; border-radius: 12px; background: #000; }
@media (max-height: 480px) { .about-card { padding: 18px 24px 12px; font-size: 14px; } .about-card h2 { margin-bottom: 8px; } }