/* FAR ECHO - the game's home page. A yard on the homeworld on top, then bands of colour with their things in rounded
   frames. Colours, faces and roundings come from the tokens in index.html. The game's pictures stay on whole pixels;
   what holds them is rounded like the icon. A picture's frame has no rim: rounded corners, a faint line inside it and a
   soft shadow; buttons and marks are flat rounded faces with no lines round them. No gloss, no glow, no glass. */

/* (the Latin part of each face as woff2, made by marketing/tools/make_web_fonts.py from the game's own fonts/ - 61 KB where the four TTF were 672) */
@font-face { font-family: "Lora"; src: url("assets/fonts/Lora-Variable.woff2?v=16a") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("assets/fonts/Poppins-Regular.woff2?v=16a") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("assets/fonts/Poppins-Medium.woff2?v=16a") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("assets/fonts/Poppins-Bold.woff2?v=16a") format("woff2"); font-weight: 700; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--night); color: var(--moon); font: 400 1rem/1.6 var(--body); overflow-x: hidden; }
img, video, canvas { max-width: 100%; display: block; }
.px, canvas { image-rendering: crisp-edges; image-rendering: pixelated; }
p, h2, h3, figure, ul { margin: 0; }
p:empty { display: none; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.band-paper :focus-visible { outline-color: var(--night-3); }   /* (cyan does not show on paper) */
/* for a reader on the keyboard: the first Tab offers the way past the bar */
.skip { position: fixed; left: 12px; top: -80px; z-index: 40; padding: 12px 18px; border-radius: var(--r-chip); background: var(--gold); color: var(--ink); font: 600 .9rem/1 var(--body); text-decoration: none; }
.skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }
.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: clamp(16px, 5vw, 64px); }
.wrap-wide { max-width: 1320px; }
.center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.muted { color: var(--lilac); }

/* ---------------------------------------------------------------- the bar on top */
.bar { position: fixed; left: 0; right: 0; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) clamp(16px, 3vw, 32px) 10px; transition: background-color .25s, box-shadow .25s; }
.bar.solid, .bar.open { background: rgba(19, 20, 51, .88); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 -1px 0 var(--hair), 0 12px 30px -14px rgba(5, 4, 15, .8); }
.bar-brand { display: flex; align-items: center; flex: none; }
.brand-word { width: 225px; height: 40px; }
.brand-icon { display: none; width: 32px; height: 32px; }
.bar-nav { display: flex; gap: 4px; margin-left: 20px; }
.bar-nav a { color: var(--moon); text-decoration: none; font: 500 .86rem/1 var(--body); padding: 10px 14px; border-radius: var(--r-chip); text-shadow: 1px 1px 0 var(--ink);
  transition: background-color .15s, color .15s; }
.bar-nav a:hover { background: rgba(182, 177, 230, .16); }
.bar-nav a.on { color: var(--gold); }
.bar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.bar-menu { display: none; }
.chip { font: 500 .8rem/1 var(--body); letter-spacing: .06em; color: var(--moon); background: var(--night-3); border: 0; border-radius: var(--r-chip);
  padding: 10px 14px; cursor: pointer; white-space: nowrap; transition: background-color .12s; }
.chip:hover { background: var(--night-4); }
.chip:active { transform: translateY(1px); }

/* ---------------------------------------------------------------- buttons */
/* a button is a flat rounded face: no rim, no lines */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; cursor: pointer; border: 0; border-radius: var(--r-btn);
  font: 600 1rem/1.2 var(--body); color: var(--moon); background: var(--night-3); text-decoration: none;
  box-shadow: 0 14px 20px -14px var(--drop, rgba(5, 4, 15, .8)); transition: background-color .12s, transform .1s; }
.btn:hover { background: var(--night-4); }
.btn:active { transform: translateY(1px); }
.btn-gold { color: var(--ink); background: var(--gold); }
.btn-gold:hover { background: #fbc956; }
.btn-small { padding: 9px 18px; font-size: .88rem; border-radius: var(--r-chip); }
.btn[aria-disabled="true"] { cursor: default; transform: none; color: var(--soon, var(--lilac)); background: rgba(127, 120, 170, .16); background: color-mix(in srgb, currentColor 14%, transparent); box-shadow: none; }
.cta-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; }

/* ---------------------------------------------------------------- the first screen: the yard, the logo in its sky */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 540px; max-height: 1200px; overflow: hidden;
  background: #1f4993 url("assets/land/day.png?v=22r") center bottom / cover no-repeat; image-rendering: pixelated; }
#land { position: absolute; left: 0; bottom: 0; max-width: none; }
.hero-copy { position: absolute; left: 0; right: 0; top: clamp(76px, 12vh, 140px); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding-inline: 16px; text-align: center; }
.hero-copy > * { opacity: 0; transform: translateY(14px); animation: rise .9s cubic-bezier(.2, .7, .2, 1) forwards; }
.hero-copy > :nth-child(2) { animation-delay: .2s; }
.hero-copy > :nth-child(3) { animation-delay: .4s; }
@keyframes rise { to { opacity: 1; transform: none; } }
/* the word is drawn on the game's pixels (225 x 40, stacked 124 x 78): shown two, three or four times as large, never in between */
.hero-copy picture { display: block; line-height: 0; }
.hero-logo { width: 450px; height: auto; }
@media (min-width: 1441px), (min-width: 760px) and (min-height: 801px) { .hero-logo { width: 675px; } }
@media (min-width: 2161px) { .hero-logo { width: 900px; } }
@media (max-width: 520px) { .hero-logo { width: 248px; } }
.hero .cta-row { margin-top: 10px; }

/* ---------------------------------------------------------------- bands of colour, each with a ragged upper edge */
.band { position: relative; padding-block: clamp(64px, 9vw, 116px); background-color: var(--bg); color: var(--fg); }
.band::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: 24px; pointer-events: none; z-index: 3;
  background: var(--edge, none) repeat-x left bottom / var(--edge-size, auto 24px); image-rendering: crisp-edges; image-rendering: pixelated; }
.band-paper { --bg: var(--paper); --fg: var(--ink-soft); --head: var(--night-3); --accent: #9a6414; --soon: #6b6080; --drop: rgba(58, 50, 70, .5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Cpath fill='%23e9dec0' d='M4 4h2v2H4zM20 20h2v2h-2z'/%3E%3C/svg%3E"); }
.band-meadow { --bg: var(--meadow); --fg: #dcebd8; --head: var(--moon); --accent: var(--leaf); --drop: rgba(5, 18, 12, .8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' shape-rendering='crispEdges'%3E%3Cpath fill='%23245443' d='M6 10h2v2H6zM8 12h2v2H8zM10 10h2v2h-2zM30 34h2v2h-2zM32 36h2v2h-2zM34 34h2v2h-2z'/%3E%3C/svg%3E"); }
.band-night { --bg: var(--night); --fg: #d8d5ee; --head: var(--moon); --accent: var(--cyan); --drop: rgba(3, 2, 12, .9);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' shape-rendering='crispEdges'%3E%3Cpath fill='%23232155' d='M12 10h2v6h-2zM10 12h6v2h-6zM44 38h2v2h-2zM26 52h2v2h-2zM56 8h2v2h-2z'/%3E%3C/svg%3E"); }
.band-space { --bg: var(--space); --fg: #d8d5ee; --head: var(--moon); --accent: var(--cyan); --drop: #000; }
.band-dusk { --bg: var(--night-3); --fg: #e4e1f6; --head: var(--moon); --accent: var(--gold); --drop: rgba(5, 4, 15, .7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' shape-rendering='crispEdges'%3E%3Cpath fill='%23363278' d='M12 10h2v6h-2zM10 12h6v2h-6zM44 38h2v2h-2zM26 52h2v2h-2zM56 8h2v2h-2z'/%3E%3C/svg%3E"); }

.head { display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(32px, 5vw, 56px); }
.head.center { align-items: center; }
.head::after { content: ""; width: 150px; height: 8px; margin-top: 8px; background:
  linear-gradient(90deg, transparent, var(--accent)) left center / 60px 2px no-repeat,
  radial-gradient(circle, var(--accent) 3px, transparent 3.6px) center / 8px 8px no-repeat,
  linear-gradient(90deg, var(--accent), transparent) right center / 60px 2px no-repeat; }
.head:not(.center)::after { width: 90px; background: linear-gradient(90deg, var(--accent), transparent) left center / 90px 2px no-repeat; }
h2 { font: 600 clamp(1.9rem, 1.2rem + 3vw, 3.4rem)/1.1 var(--display); color: var(--head); text-wrap: balance; max-width: 22ch; }
.lead { font-size: clamp(1.02rem, .98rem + .35vw, 1.2rem); max-width: 54ch; text-wrap: pretty; }

/* a thing in its frame: rounded, no rim, a faint line inside it, a soft shadow under it */
.frame { position: relative; margin: 12px; border-radius: var(--r-frame); overflow: hidden; isolation: isolate;
  background: var(--inside, var(--ink));
  box-shadow: 0 0 0 1px rgba(20, 10, 22, .55), 0 30px 54px -26px var(--drop, rgba(5, 4, 15, .7)), 0 12px 22px -14px var(--drop, rgba(5, 4, 15, .7)); }
.frame::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }

/* ---------------------------------------------------------------- the game: one line, the trailer, where to get it */
.trailer { width: min(100% - 24px, 980px); }
.trailer video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--space); }
.facts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: clamp(28px, 4vw, 44px); }
.facts li { font: 500 .84rem/1.2 var(--body); padding: 8px 14px; color: var(--ink-soft); background: var(--paper-2); border-radius: var(--r-chip); }
.facts + .cta-row { margin-top: 28px; }

/* ---------------------------------------------------------------- what you do: four clips */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 5vw, 56px) clamp(24px, 4vw, 48px); }
.card { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.card .frame { margin-bottom: 20px; }
.card video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.card h3 { font: 600 clamp(1.3rem, 1.1rem + .9vw, 1.8rem)/1.15 var(--display); color: var(--moon); padding-inline: 12px; }
.card p { padding-inline: 12px; max-width: 44ch; }

/* ---------------------------------------------------------------- the journey, in a window of its own */
.voyage { width: min(100% - 24px, (100vh - 200px) * 16 / 9); margin-inline: auto; scroll-margin-top: 64px; }
.voy-screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--space); container-type: inline-size; }
#scene { position: absolute; left: 0; top: 0; max-width: none; }
.voy-cap { position: absolute; left: 4%; bottom: 7%; z-index: 2; display: flex; flex-direction: column; gap: 10px; max-width: min(60%, 600px); pointer-events: none;
  opacity: 0; transition: opacity .25s; color: var(--moon); }
.voy-cap.in { opacity: 1; }
.cap-kicker { font: 500 .76rem/1 var(--body); text-transform: uppercase; letter-spacing: .22em; color: var(--cyan); text-shadow: 1px 1px 0 var(--ink); }
/* a world's name: the game's own pixel lettering as a picture, a whole number of screen pixels to each of its own (--m, set by the script) */
.world { margin: 0; line-height: 0; }
.world img { display: block; height: calc(14px * var(--m, 3)); width: auto; image-rendering: pixelated; transform: translateY(6px); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.voy-cap.in .world img { transform: none; }
.line { font-size: clamp(.92rem, 1.9cqw, 1.2rem); max-width: 32ch; text-shadow: 2px 2px 0 var(--ink); }
.boss { font-size: .92rem; text-shadow: 1px 1px 0 var(--ink); }
.boss span { text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; color: var(--lilac); margin-right: 8px; }
.boss b { color: var(--moon); font-weight: 500; }
.done { font: 600 clamp(1.1rem, 2.4cqw, 1.7rem)/1.2 var(--display); color: var(--gold); text-shadow: 2px 2px 0 var(--ink); }
.voy-start { position: absolute; left: 50%; top: 46%; z-index: 3; transform: translate(-50%, -50%); font-size: 1.12rem; padding: 18px 34px; white-space: nowrap; }
.voy-start:active { transform: translate(-50%, calc(-50% + 1px)); }
.voy-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px 14px; background: linear-gradient(#1a1b45, var(--night)); border-top: 1px solid var(--hair); }
.voy-dots { flex: 1; min-width: 0; max-width: 560px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(var(--night-4), var(--night-4)) center / 100% 2px no-repeat; }
.voy-dots button { position: relative; flex: none; width: 14px; height: 14px; padding: 0; border: 2px solid var(--night-4); border-radius: 50%; background: var(--night-2); cursor: pointer;
  transition: border-color .15s, background-color .15s, box-shadow .15s; }
.voy-dots button::after { content: attr(data-name); position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); white-space: nowrap; pointer-events: none; padding: 8px 11px;
  font: 500 .7rem/1 var(--body); text-transform: uppercase; letter-spacing: .16em; color: var(--moon); background: var(--night-3); border-radius: 8px; opacity: 0; transition: opacity .15s; }
.voy-dots button:hover::after, .voy-dots button:focus-visible::after { opacity: 1; }
.voy-dots button::before { content: ""; position: absolute; inset: -13px; }   /* (a finger needs more than fourteen pixels) */
.voy-dots button:hover { border-color: var(--moon); }
.voy-dots button.got { border-color: var(--cyan); background: var(--blue); }
.voy-dots button.on { border-color: var(--moon); background: var(--moon); box-shadow: 0 0 0 4px rgba(244, 240, 216, .2); }

/* ---------------------------------------------------------------- the solar system and the numbers */
.mapwin { width: min(100% - 24px, (100vh - 150px) * 12 / 7); margin: 4px auto 12px; --inside: #020313; }
.mapwin img { width: 100%; height: auto; aspect-ratio: 12 / 7; object-fit: cover; }
.mapwin.in img { animation: zoomin .34s cubic-bezier(.2, .7, .2, 1); }
.mapwin.out img { animation: zoomout .34s cubic-bezier(.2, .7, .2, 1); }
@keyframes zoomin { from { transform: scale(.82); opacity: .35; } }
@keyframes zoomout { from { transform: scale(1.22); opacity: .35; } }
.mapzoom { position: absolute; right: 18px; top: 18px; z-index: 2; display: flex; align-items: center; gap: 10px; }
.mapzoom .chip { width: 34px; height: 34px; padding: 0; font-size: 1.05rem; line-height: 1; text-align: center; }
.mapzoom .chip:disabled { color: var(--night-4); cursor: default; background: var(--night-2); }
.mapdots { display: flex; align-items: center; gap: 6px; }
.mapdots i { width: 7px; height: 7px; border-radius: 50%; background: var(--night-4); cursor: pointer; transition: background-color .15s, box-shadow .15s; }
.mapdots i.on { background: var(--gold); box-shadow: 0 0 0 3px rgba(242, 184, 60, .25); }
.mapdots i { position: relative; }
.mapdots i::before { content: ""; position: absolute; inset: -9px -4px; }

/* ---------------------------------------------------------------- pictures: one large, the others in a row under it */
.viewer { width: min(100% - 24px, 1040px); margin: 12px auto; touch-action: pan-y; }
.viewer img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.va { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; padding: 0; transform: translateY(-50%); cursor: pointer; border-radius: var(--r-btn);
  background: var(--night-3); border: 0; box-shadow: 0 10px 16px -10px rgba(5, 4, 15, .9); transition: background-color .12s; }
.va:hover { background: var(--night-4); }
.va::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-left: 2.5px solid var(--moon); border-bottom: 2.5px solid var(--moon); border-radius: 1px;
  transform: translate(-30%, -50%) rotate(45deg); }
.va-next::before { transform: translate(-70%, -50%) rotate(-135deg); }
.va-prev { left: 18px; }
.va-next { right: 18px; }
.shot-cap { margin-top: 30px; min-height: 1.5em; text-align: center; font: 600 1.1rem/1.3 var(--display); color: var(--head); }
.thumbs { display: flex; justify-content: center; gap: 12px; margin-top: 20px; }
.thumbs button { padding: 0; flex: 1 1 0; min-width: 0; max-width: 104px; border: 0; border-radius: 9px; overflow: hidden; background: var(--ink); cursor: pointer; opacity: .78;
  box-shadow: 0 0 0 1px rgba(20, 10, 22, .5), 0 8px 14px -10px var(--drop); transition: opacity .15s, box-shadow .15s, transform .18s var(--ease); }
.thumbs button:hover { opacity: 1; transform: translateY(-2px); }
.thumbs img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.thumbs button.on { opacity: 1; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent), 0 10px 16px -10px var(--drop); }

/* ---------------------------------------------------------------- questions */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.faq .head { margin: 0; }
.faq-list { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.faq details { background: rgba(29, 28, 74, .78); border: 1px solid var(--hair); border-radius: var(--r-box);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 16px 28px -20px rgba(3, 2, 12, 1); transition: border-color .2s, background-color .2s; }
.faq details:hover { border-color: var(--hair-hi); }
.faq details[open] { background: var(--night-2); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 17px 20px; border-radius: var(--r-box); cursor: pointer; list-style: none; font: 600 1.1rem/1.3 var(--display); color: var(--moon); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background:
  linear-gradient(var(--cyan), var(--cyan)) center / 14px 2px no-repeat, linear-gradient(var(--cyan), var(--cyan)) center / 2px 14px no-repeat; }
.faq details[open] summary::after { background: linear-gradient(var(--cyan), var(--cyan)) center / 14px 2px no-repeat; }
.faq details p { padding: 0 20px 20px; max-width: 58ch; }

/* ---------------------------------------------------------------- the last call, the foot */
.band-dusk .center { gap: 18px; }
.emblem { margin-bottom: 14px; }   /* the logo's own moon without its dark line: its slab, its craters */
.emblem img { display: block; width: 152px; height: 168px; max-width: none; }
.band-dusk .cta-row { margin-top: 10px; }
.foot { position: relative; background: var(--ink); color: var(--lilac); padding-block: 28px; font-size: .9rem; }
.foot b { color: var(--moon); }
.foot-legal a { color: var(--lilac); text-decoration: none; }
.foot-legal a:hover { color: var(--gold); }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }

/* without the script: nothing waits to be shown, and what only the script can draw stays away */
html:not(.js) #reise, html:not(.js) .mapzoom, html:not(.js) .tabs, html:not(.js) .tell, html:not(.js) .party-figs, html:not(.js) .va, html:not(.js) .bar-menu { display: none; }

/* ---------------------------------------------------------------- narrow screens */
@media (max-width: 900px) {
  .bar-menu { display: block; }
  .bar-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; margin: 0; flex-direction: column; gap: 0; padding: 6px clamp(16px, 3vw, 32px) 14px;
    background: var(--night); border-radius: 0 0 var(--r-frame) var(--r-frame); box-shadow: inset 0 -1px 0 var(--hair), 0 18px 30px -14px rgba(5, 4, 15, .9); }
  .bar.open .bar-nav { display: flex; }
  .bar.open { background: var(--night); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .bar-nav a { padding: 14px 4px; font-size: 1rem; border-radius: 0; border-top: 1px solid var(--hair); }
  .bar-nav a:hover { background: none; }
}
@media (max-width: 760px) {
  .cards, .faq { grid-template-columns: minmax(0, 1fr); }
  .thumbs { flex-wrap: wrap; gap: 10px; }
  .thumbs button { flex: none; width: calc(20% - 8px); max-width: none; }
  .voyage { width: auto; margin-inline: 8px; }
  .voy-bar { flex-wrap: wrap; justify-content: space-between; row-gap: 14px; padding-bottom: 14px; }
  .voy-dots { order: 3; flex: none; width: 100%; max-width: none; padding-inline: 6px; }
  .voy-screen { aspect-ratio: 3 / 4; }
  .voy-cap { left: 5%; right: 5%; bottom: 5%; max-width: none; }
  .mapwin { width: auto; margin-inline: 8px; }
  .mapwin img { aspect-ratio: 1 / 1; }
  .mapzoom { right: 8px; top: 8px; gap: 8px; }
  .bar-cta { display: none; }
  .frame { margin: 12px 8px; }
}
@media (max-width: 480px) {
  .brand-word { display: none; }
  .brand-icon { display: block; }
  .btn { padding: 13px 20px; }
  .voy-bar { gap: 8px; padding: 8px; }
  .voy-bar .chip { padding: 9px 8px; letter-spacing: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .chip, .va, .tabs button, .thumbs button, .voy-cap, .world .l { transition: none; }
  .hero-copy > * { animation: none; }
  .hero-copy > * { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- the game's figures, and where they stand */
.fig { display: block; image-rendering: crisp-edges; image-rendering: pixelated; }
.party { margin-top: clamp(40px, 6vw, 64px); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px clamp(24px, 4vw, 48px); }
.party-figs { display: flex; align-items: flex-end; gap: 4px; max-width: 100%; }
.party-figs .fig { flex: 0 1 auto; min-width: 0; height: auto !important; }
.party-text { display: flex; flex-direction: column; gap: 6px; max-width: 40ch; }
.party h3 { font: 600 clamp(1.3rem, 1.1rem + .9vw, 1.8rem)/1.15 var(--display); color: var(--moon); }

.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -12px 0 18px; }
.tabs button { font: 600 .78rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--moon); background: var(--night-2); border: 0;
  border-radius: var(--r-chip); padding: 11px 16px; cursor: pointer; transition: background-color .12s, color .12s; }
.tabs button:hover { background: var(--night-3); }

.news { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 44px) clamp(16px, 2.6vw, 32px); }
.news article { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.news .frame { margin-bottom: 20px; }
.news img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.news .when { font: 500 .72rem/1 var(--body); text-transform: uppercase; letter-spacing: .16em; color: var(--leaf); padding-inline: 12px; }
.news h3 { font: 600 clamp(1.2rem, 1.05rem + .7vw, 1.6rem)/1.15 var(--display); color: var(--moon); padding-inline: 12px; }
.news article > p:last-child { padding-inline: 12px; }

@media (max-width: 760px) {
  .news { grid-template-columns: minmax(0, 1fr); }
  .tabs button { padding: 10px 12px; letter-spacing: .06em; }
}
@media (prefers-reduced-motion: reduce) {
  .party-figs .fig, .mapwin img { animation: none; }
}

/* ---- the worlds, 2026-10-08: the map and the chosen world side by side in one view; worlds picked by their discs ---- */
.sysgrid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.sysgrid .mapwin { width: auto; margin: 0; }
.sysgrid .mapwin img { aspect-ratio: 10 / 9; height: 100%; }
.tabs { align-items: flex-end; gap: 6px 10px; margin: 0 0 16px; }
.tabs button { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 8px 10px 9px; background: none; border-radius: var(--r-box); letter-spacing: .08em; font-size: .7rem; }
.tabs button i { display: block; width: 60px; height: 60px; background-size: auto 100%; background-position: 0 0; background-repeat: no-repeat; image-rendering: pixelated; }
.tabs button:hover { background: var(--night-2); }
.mapzoom { gap: 12px; padding: 6px 8px 6px 14px; background: rgba(8, 8, 28, .78); border-radius: var(--r-box); }
.mapzoom-l { font: 600 .68rem/1 var(--body); text-transform: uppercase; letter-spacing: .18em; color: var(--lilac); }
.mapzoom .chip { width: 40px; height: 40px; font-size: 1.3rem; }
.mapdots { gap: 8px; }
.mapdots i { width: 10px; height: 10px; }
@media (max-width: 980px) {
  .sysgrid { grid-template-columns: minmax(0, 1fr); }
  .sysgrid .mapwin img { aspect-ratio: 1 / 1; height: auto; }
  .tabs button i { width: 44px; height: 44px; }
  .mapzoom-l { display: none; }
}
/* second pass: the map a square that shows the whole world (it was cut at the right) */
.sysgrid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: start; }
.sysgrid .mapwin img { aspect-ratio: 1 / 1; height: auto; }
.sysgrid { align-items: stretch; }
.sysgrid .mapwin { align-self: start; }
.tabs-more { align-self: center; margin: 0 0 0 10px; max-width: 16ch; font: 500 .74rem/1.35 var(--body); color: var(--lilac); text-align: left; }
.foot-x { color: var(--moon); font-weight: 600; text-decoration: none; }
.foot-x:hover { color: var(--gold); }
.bar-ico { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--moon); background: var(--night-3); transition: background-color .12s, color .12s; }
.bar-ico svg { width: 18px; height: 18px; fill: currentColor; }
.bar-ico:hover, .bar-ico:focus-visible { background: var(--night-4); color: #fff; }
.bar-ico::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); right: 0; padding: 7px 10px; border-radius: var(--r-chip); background: var(--night-3); color: var(--moon);
  font: 500 .78rem/1 var(--body); letter-spacing: .04em; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateY(-3px); transition: opacity .12s, transform .12s; }
.bar-ico:hover::after, .bar-ico:focus-visible::after { opacity: 1; transform: none; }
@media (hover: none) { .bar-ico::after { display: none; } }
.tabs button i { background-size: 180% 180%; background-position: -24px -24px; }   /* (a world's picture has room round it for its ring, its aurora: the disc itself fills the tile) */
@media (max-width: 980px) { .tabs button i { background-position: -17.6px -17.6px; } }

/* ---- the lettering's O is the broken moon, and it turns (2026-10-08): the wide lettering is drawn without it
   (logo_word.png) and the moon laid over its place; the stacked lettering of narrow screens keeps its still moon ---- */
.hero-logo-wrap { position: relative; display: inline-block; margin: 0; font: inherit; line-height: 0; }
.hero-moon { display: none; }
@media (min-width: 521px) {
  .hero-logo { content: url(assets/logo_word.png?v=13a); }
  /* (it turned flat, like a wheel: "dreht sich links nach rechts aber nicht 3D" - now it is the game's moon as a
     ball, 96 pictures of one turn, laid where the O stands; site.js shows them one after another) */
  .hero-moon { display: block; position: absolute; left: 83.111%; top: 0; width: 17.778%; aspect-ratio: 1; pointer-events: none;
    background: url(assets/voyage/moon_turn.webp?v=13a) 0 0 / 1600% 600% no-repeat; image-rendering: pixelated; }
}

/* the cards' clips are moving pictures, not players: nothing of them answers the pointer */
.card video { pointer-events: none; }

/* ---- the worlds on a narrow screen (2026-10-08, "am Handy ist dieser Teil kaputt"): the later rules above set the
   map and the card side by side again at every width; under 980 px they stand one under the other ---- */
@media (max-width: 980px) {
  .sysgrid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sysgrid .mapwin { align-self: stretch; }
}
@media (max-width: 520px) {
  .mapzoom .chip { width: 34px; height: 34px; }
}

/* ---- the worlds without a card (2026-10-12: "mir gefällt diese Cards und dieses designte Design einfach generell nicht"; of three sketches "A oder C" - A;
   "Ich will Maren oder NPC nicht sehen"): the round world stands free in the middle - no frame, its edge fading into the dark - and under it the zoom, its
   name in the game's own lettering, the one line there is about it, and "Fly there" as a word.
   The map's pictures hold the chosen world at x = 660 of their 1200 (the map's own panels were beside it when they were taken), so the square shown of them
   is the one round that point (measured: 662 to 666, so 63 %) - it was the middle one, and the world sat to the right in its circle ("passt nicht zum Kreis"); the circle is whole out to
   90 % of its radius: the world's rings and its N and S reach 88 %. ---- */
.sysgrid { grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: start; gap: 4px; }
.sysgrid .mapwin { position: relative; align-self: start; width: min(100%, 640px); }
.sysgrid .mapwin img { object-position: 63% 50%;
  -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, #000 90%, transparent 100%); mask-image: radial-gradient(circle closest-side at 50% 50%, #000 90%, transparent 100%); }
.sysgrid .mapzoom { position: static; justify-content: center; margin: 0 auto; padding: 0; background: none; gap: 10px; }
.sysgrid .mapzoom .chip { width: 34px; height: 34px; font-size: 1.15rem; background: none; color: var(--lilac); }
.sysgrid .mapzoom .chip:hover { background: var(--night-2); color: var(--moon); }
.sysgrid .mapzoom .chip:disabled { background: none; color: var(--night-4); }
.tell { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; margin-top: 18px; text-align: center; }
.tell-name { margin: 0; min-height: 56px; line-height: 0; }
.tell-name img { display: block; image-rendering: pixelated; }
.tell-line { margin: 0; max-width: 46ch; font-size: clamp(1rem, .96rem + .3vw, 1.15rem); line-height: 1.5; color: var(--moon); }
.go { margin: 2px 0 0; padding: 6px 2px; background: none; border: 0; font: 700 .95rem/1 var(--body); color: var(--gold); cursor: pointer; }
.go::after { content: "\2192"; display: inline-block; margin-left: 10px; transition: transform .15s var(--ease); }
.go:hover { color: var(--gold-hi); }
.go:hover::after { transform: translateX(4px); }
@media (max-width: 980px) { .tell { margin-inline: 12px; } }
@media (prefers-reduced-motion: reduce) { .go::after { transition: none; } }