/* starcorptycoon.com — the game's own look: deep navy, teal, Michroma logo, Chakra Petch display, IBM Plex text. */
@font-face { font-family: 'Michroma'; font-weight: 400; font-display: swap; src: url(../fonts/michroma-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-weight: 500; font-display: swap; src: url(../fonts/chakra-petch-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-weight: 600; font-display: swap; src: url(../fonts/chakra-petch-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-weight: 700; font-display: swap; src: url(../fonts/chakra-petch-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); }

:root {
  color-scheme: dark;
  --bg0: #070b15; --bg1: #0b111e; --bg2: #0f1626; --card: #111a2b; --card-hi: #16213a;
  --line: #1e2a42; --line2: #2a3957; --line3: #3b4e73;
  --text: #e8eef8; --text2: #c9d4ea; --muted: #93a3bf; --dim: #5d6f92;
  --teal: #2cc9b5; --teal-hi: #7fe3d5; --teal-ink: #06231f; --amber: #f2b544; --red: #f08a8a; --cream: #f3ecdd;
  --f-logo: 'Michroma', 'Chakra Petch', sans-serif;
  --f-display: 'Chakra Petch', 'Segoe UI', sans-serif;
  --f-body: 'IBM Plex Sans', 'Segoe UI', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg0); color: var(--text); font: 400 17px/1.6 var(--f-body); overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--teal-hi); text-decoration: none; }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--teal-hi); outline-offset: 3px; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.cap { font-family: var(--f-display); font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--teal-hi); }
.h1, .h2, .h3 { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; line-height: 1.1; margin: 0; }
.h2 { font-size: clamp(28px, 4vw, 44px); }
.h3 { font-size: clamp(19px, 2.2vw, 24px); letter-spacing: .1em; }
.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--text2); max-width: 680px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }

/* the game's cut-corner button */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border: 0; background: transparent; cursor: pointer;
  font: 600 15px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--text); isolation: isolate; }
.btn::before { content: ''; position: absolute; inset: 0; z-index: -2; background: #5e6d88; clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); transition: background .15s; }
.btn::after { content: ''; position: absolute; inset: 2px; z-index: -1; background: rgba(8, 12, 22, .9); clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px); }
.btn:hover { color: #fff; }
.btn:hover::before { background: var(--teal); }
.btn.primary { color: var(--teal-ink); }
.btn.primary::before { background: var(--teal); }
.btn.primary::after { background: var(--teal); }
.btn.primary:hover::after { background: var(--teal-hi); }
.btn .sub { font-family: var(--f-body); font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 13px; opacity: .8; }
.btn[disabled] { opacity: .5; cursor: default; }

/* nav */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background .2s, border-color .2s; border-bottom: 1px solid transparent; }
.nav.solid { background: rgba(7, 11, 21, .92); backdrop-filter: blur(10px); border-color: var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 24px; height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--cream); }
.brand img { width: 40px; height: 40px; }
.brand span { font-family: var(--f-logo); font-size: 17px; letter-spacing: .06em; line-height: 1; }
.brand small { display: block; font-size: 9px; letter-spacing: .55em; margin-top: 5px; color: var(--muted); }
/* [v0.9.3.5] Mark 18-10: the game's wordmark (marketing/logo) in the nav and footer, as in the game and on the socials */
.brand img.brand-logo { width: auto; height: 44px; }
.nav ul { display: flex; gap: 26px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.nav ul a { font: 600 13px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--text2); }
.nav ul a:hover { color: var(--teal-hi); }
.nav .btn { min-height: 42px; padding: 0 18px; font-size: 13px; }
.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line2); border-radius: 6px; background: transparent; color: var(--text); cursor: pointer; }
/* [v0.9.1] language switcher: a small menu next to the demo button; stays visible on phones (next to the menu button) */
.lang-switch { position: relative; flex: none; }
.lang-switch summary { display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 6px; cursor: pointer; list-style: none;
  font: 600 13px/1 var(--f-display); letter-spacing: .12em; color: var(--text2); user-select: none; }
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary:hover, .lang-switch[open] summary { color: var(--teal-hi); border-color: var(--teal); }
.lang-switch svg { flex: none; }
.lang-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 176px; padding: 6px; background: var(--bg1); border: 1px solid var(--line2); border-radius: 8px; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
.lang-menu a { display: block; padding: 10px 12px; border-radius: 5px; font: 500 15px/1.2 var(--f-body); color: var(--text2); }
.lang-menu a:hover { background: var(--card-hi); color: var(--text); }
.lang-menu a[aria-current] { color: var(--teal-hi); }
.lang-menu a[aria-current]::after { content: ' ✓'; }
/* longer labels in the other languages: a little tighter; and whenever the links do not fit on one line (any language,
   any width, with or without the Discord link), site.js sets .compact and the nav folds into the menu button */
.nav ul a, .nav .btn { white-space: nowrap; }
html:not([lang="en"]) .nav ul { gap: 22px; }
html:not([lang="en"]) .nav ul a { letter-spacing: .12em; }
.nav.compact .lang-switch { margin-left: auto; }
.nav.compact .lang-switch ~ .nav-toggle { margin-left: 0; }
.nav.compact ul { display: none; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px var(--gutter) 16px; background: rgba(7, 11, 21, .97); border-bottom: 1px solid var(--line); }
.nav.compact ul.open { display: flex; }
.nav.compact ul a { display: block; padding: 14px 0; }
.nav.compact .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 400px) {
  .nav .wrap { gap: 10px; }
  .lang-switch summary { gap: 5px; padding: 0 8px; }
}
@media (max-width: 960px) {
  .lang-switch { margin-left: auto; }
  .nav .lang-switch ~ .nav-toggle { margin-left: 0; }
  .nav ul { display: none; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px var(--gutter) 16px; background: rgba(7, 11, 21, .97); border-bottom: 1px solid var(--line); }
  .nav ul.open { display: flex; }
  .nav ul a { display: block; padding: 14px 0; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav .wrap > .btn { display: none; }
}

/* hero */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding: 120px 0 80px; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; z-index: -2; transform: scale(1.04); animation: drift 30s ease-in-out infinite alternate; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 40%, rgba(7, 11, 21, .25), rgba(7, 11, 21, .7) 70%), linear-gradient(to bottom, rgba(7, 11, 21, .4), rgba(7, 11, 21, 0) 30%, rgba(7, 11, 21, 0) 60%, var(--bg0)); }
@keyframes drift { to { transform: scale(1.1) translateY(-1.5%); } }
@media (prefers-reduced-motion: reduce) { .hero > img { animation: none; } html { scroll-behavior: auto; } }
.hero .emblem { width: clamp(84px, 11vw, 132px); margin: 0 auto 18px; filter: drop-shadow(0 0 30px rgba(44, 201, 181, .35)); }
.logo-word { font-family: var(--f-logo); font-size: clamp(40px, 8vw, 92px); letter-spacing: .04em; line-height: 1; color: var(--cream); margin: 0; font-weight: 400; text-shadow: 0 4px 40px rgba(0, 0, 0, .6); }
.logo-sub { font-family: var(--f-logo); font-size: clamp(14px, 2vw, 22px); letter-spacing: .62em; padding-left: .62em; color: var(--cream); margin-top: 14px; }
/* [v0.9.3.5] the hero shows the wordmark (replaces emblem + set type; the old classes stay for cached pages) */
.logo-mark { margin: 0 auto; line-height: 0; }
.logo-mark img { display: block; width: clamp(280px, 56vw, 760px); height: auto; margin: 0 auto; filter: drop-shadow(0 6px 30px rgba(0, 0, 0, .6)); }
.hero .tagline { margin: 30px auto 0; font: 600 clamp(17px, 2.2vw, 24px)/1.35 var(--f-display); letter-spacing: .06em; color: #fff; max-width: 760px; text-shadow: 0 2px 20px rgba(0, 0, 0, .8); }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 36px; }
.hero .platforms { margin-top: 18px; font: 500 13px/1.5 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--text2); text-shadow: 0 1px 10px #000; }
.scroll-hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: 22px; height: 36px; border: 2px solid rgba(232, 238, 248, .45); border-radius: 12px; }
.scroll-hint::after { content: ''; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--teal-hi); animation: hint 1.6s ease-in-out infinite; }
@keyframes hint { 50% { transform: translateY(10px); opacity: .3; } }

/* sections */
section { position: relative; }
.band { padding: clamp(72px, 10vw, 130px) 0; }
.band.alt { background: linear-gradient(to bottom, var(--bg0), var(--bg1) 20%, var(--bg1) 80%, var(--bg0)); }
.section-head { text-align: center; margin-bottom: clamp(36px, 6vw, 64px); }
.section-head .lead { margin: 18px auto 0; }
.rule { width: 72px; height: 3px; background: var(--teal); margin: 18px auto 0; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }

.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--line); border: 1px solid var(--line); }
.pillar { background: var(--bg1); padding: 28px 24px; }
.pillar .num { font: 400 13px var(--f-mono); color: var(--teal); }
.pillar h3 { font: 700 18px/1.2 var(--f-display); letter-spacing: .12em; text-transform: uppercase; margin: 10px 0 8px; }
.pillar p { margin: 0; color: var(--muted); font-size: 15px; }
@media (max-width: 900px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pillars { grid-template-columns: 1fr; } }
/* [0.9.4.3] the story: five endings in a row, under the setup */
.story-endings-h { margin: clamp(72px, 9vw, 110px) 0 18px; }
.pillars.endings { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .pillars.endings { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .pillars.endings { grid-template-columns: 1fr; } }

.feature { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.feature + .feature { margin-top: clamp(72px, 10vw, 120px); }
.feature.flip .media { order: 2; }
.feature .media { position: relative; }
.feature .media .art { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 82% 50%; clip-path: polygon(28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 28px); }
.feature .media .shot { position: absolute; width: 52%; right: -4%; bottom: -12%; border: 1px solid var(--line3); box-shadow: 0 20px 50px rgba(0, 0, 0, .65); border-radius: 4px; cursor: zoom-in; }
.feature.flip .media .shot { right: auto; left: -4%; }
.feature h3 { margin: 12px 0 16px; }
.feature p { color: var(--text2); margin: 0 0 14px; }
.feature ul { list-style: none; padding: 0; margin: 18px 0 0; }
.feature li { position: relative; padding-left: 22px; margin-top: 8px; color: var(--text2); }
.feature li::before { content: ''; position: absolute; left: 0; top: .62em; width: 9px; height: 9px; background: var(--teal); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
@media (max-width: 860px) {
  .feature, .feature.flip { grid-template-columns: 1fr; }
  .feature.flip .media { order: 0; }
  .feature .media { margin-bottom: 40px; }
  .feature .media .shot, .feature.flip .media .shot { right: 4%; left: auto; bottom: -30px; width: 48%; }
}

/* news ticker, as in the game */
.ticker { display: flex; align-items: center; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg1); height: 48px; }
.ticker .flag { position: relative; z-index: 1; box-shadow: 0 0 0 14px var(--bg1); flex: none; padding: 0 14px; height: 26px; display: flex; align-items: center; margin: 0 14px; background: var(--amber); color: var(--bg0); font: 700 12px var(--f-display); letter-spacing: .14em; }
.ticker .run { display: flex; gap: 48px; white-space: nowrap; animation: marquee 70s linear infinite; font-size: 15px; color: var(--text2); }
.ticker .run span::before { content: '◆'; color: var(--teal); margin-right: 10px; font-size: 11px; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker .run { animation: none; } }

/* sponsors */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { background: var(--card); border: 1px solid var(--line); overflow: hidden; clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
.card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 75% 50%; }
.card .body { padding: 18px 20px 22px; }
.card h4 { margin: 0 0 6px; font: 700 17px var(--f-display); letter-spacing: .1em; text-transform: uppercase; }
.card p { margin: 0; color: var(--muted); font-size: 15px; }
.card blockquote { margin: 12px 0 0; padding-left: 12px; border-left: 2px solid var(--amber); color: var(--text2); font-size: 14px; font-style: italic; }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }

/* rivals */
.cans { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; align-items: end; }
.can { text-align: center; }
.can img { width: 100%; max-width: 150px; margin: 0 auto; transition: transform .25s; }
.can:hover img { transform: translateY(-8px); }
.can b { display: block; margin-top: 8px; font: 700 14px var(--f-display); letter-spacing: .14em; text-transform: uppercase; }
.can span { display: block; font-size: 12px; color: var(--muted); }
.can.you b { color: var(--teal-hi); }
@media (max-width: 860px) { .cans { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 28px; } }
@media (max-width: 420px) { .can b { font-size: 11px; letter-spacing: .02em; } .can span { font-size: 10px; } }

/* gallery */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gallery button { padding: 0; border: 1px solid var(--line2); background: none; cursor: zoom-in; overflow: hidden; border-radius: 4px; }
.gallery img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .3s; }
.gallery button:hover img { transform: scale(1.04); }
.gallery button:first-child { grid-column: span 2; grid-row: span 2; }
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr 1fr; } }
/* [v0.8.2] expansion packs, coming soon */
.packs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.packs button { position: relative; padding: 0; border: 1px solid var(--line2); background: none; cursor: zoom-in; overflow: hidden; border-radius: 6px; color: inherit; text-align: left; }
.packs img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .3s; }
.packs button:hover img { transform: scale(1.03); }
.packs .soon { position: absolute; right: 12px; top: 12px; padding: 3px 10px; border-radius: 4px; background: #f2b544; color: #120c02; font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.packs b { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 12px; background: linear-gradient(to top, rgba(5,8,15,.92), transparent); font-size: 15px; letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 760px) { .packs { grid-template-columns: 1fr; } }
.lightbox { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(4, 7, 14, .94); }
.lightbox.open { display: flex; }
.lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: min(1600px, 100%); }
.lightbox img { max-width: 100%; max-height: 90vh; border: 1px solid var(--line3); }
.lightbox button { position: absolute; top: 14px; right: 18px; width: 48px; height: 48px; border: 1px solid var(--line2); border-radius: 6px; background: var(--bg1); color: var(--text); font-size: 26px; cursor: pointer; }
/* [0.9.4.4] the gallery carousel: arrows at the sides, title + one line + counter under the screenshot */
.lightbox.set img { max-height: calc(90vh - 96px); }
.lightbox figcaption { display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; width: 100%; max-width: 1100px; text-align: left; }
.lightbox figcaption[hidden] { display: none; }
.lightbox .lb-title { font: 700 18px var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.lightbox .lb-desc { grid-column: 1; color: var(--text2); font-size: 16px; line-height: 1.45; }
.lightbox .lb-count { grid-column: 2; grid-row: 1; align-self: center; color: var(--text3, var(--text2)); font-size: 14px; letter-spacing: .12em; }
.lightbox .lb-nav { top: 50%; right: auto; width: 52px; height: 72px; margin-top: -36px; font-size: 38px; line-height: 1; background: rgba(10, 16, 28, .82); }
.lightbox .lb-prev { left: 18px; }
.lightbox .lb-next { right: 18px; left: auto; }
.lightbox .lb-nav:hover, .lightbox .lb-close:hover { border-color: var(--teal); color: var(--teal-hi); }
@media (max-width: 760px) { .lightbox .lb-nav { top: auto; bottom: 18px; margin-top: 0; width: 48px; height: 48px; font-size: 30px; } .lightbox.set img { max-height: calc(90vh - 170px); } }

/* demo vs full + buy */
.editions { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.edition { position: relative; padding: clamp(24px, 4vw, 40px); background: var(--card); border: 1px solid var(--line2); clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px); }
.edition.full { background: linear-gradient(160deg, rgba(44, 201, 181, .14), rgba(17, 26, 43, 1) 55%); border-color: var(--teal); }
.edition .price { font: 700 clamp(36px, 5vw, 52px)/1 var(--f-display); margin: 14px 0 4px; letter-spacing: .02em; }
.edition .price small { font-size: 16px; font-weight: 500; color: var(--muted); letter-spacing: .04em; }
.edition ul { list-style: none; padding: 0; margin: 22px 0 26px; }
.edition li { padding: 9px 0 9px 28px; border-top: 1px solid var(--line); position: relative; color: var(--text2); }
.edition li::before { content: '✓'; position: absolute; left: 2px; color: var(--teal); font-weight: 700; }
.edition li.no::before { content: '–'; color: var(--dim); }
.dl-list { display: grid; gap: 10px; }
.dl-list .btn { width: 100%; justify-content: space-between; }
@media (max-width: 860px) { .editions { grid-template-columns: 1fr; } }

form.buy { display: grid; gap: 14px; }
form.buy label { display: grid; gap: 6px; font-size: 14px; color: var(--text2); }
form.buy input[type=email] { height: 50px; padding: 0 14px; border: 1px solid var(--line3); border-radius: 6px; background: var(--bg0); color: var(--text); font: 400 16px var(--f-body); }
form.buy input[type=email]:focus { border-color: var(--teal); outline: none; }
.seg { display: inline-flex; border: 1px solid var(--line3); border-radius: 6px; overflow: hidden; width: max-content; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { display: block; padding: 10px 18px; cursor: pointer; font: 600 14px var(--f-display); letter-spacing: .1em; color: var(--text2); }
.seg input:checked + label { background: var(--teal); color: var(--teal-ink); }
.seg input:focus-visible + label { outline: 2px solid var(--teal-hi); outline-offset: -2px; }
.check { display: flex !important; grid-template-columns: none !important; gap: 10px !important; align-items: flex-start; line-height: 1.45; }
.check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--teal); flex: none; }
.form-msg { font-size: 14px; color: var(--amber); min-height: 1em; }
.pay-note { font-size: 13px; color: var(--muted); }

/* faq */
.faq { max-width: 860px; margin: 0 auto; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font: 600 18px/1.35 var(--f-display); letter-spacing: .04em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 6px; top: 16px; font: 400 26px var(--f-display); color: var(--teal); }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin: 0 0 20px; color: var(--text2); }

/* community */
.community { text-align: center; padding: clamp(64px, 9vw, 110px) 0; background: linear-gradient(rgba(7, 11, 21, .75), rgba(7, 11, 21, .9)), url(../img/planet-habitable.jpg) center 60% / cover; }

/* footer */
footer { border-top: 1px solid var(--line); padding: 48px 0 40px; background: var(--bg1); font-size: 14px; color: var(--muted); }
footer .cols { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; }
footer h5 { margin: 0 0 12px; font: 600 12px var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--text2); }
footer p { margin: 0 0 8px; }
footer .fine { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--dim); }
@media (max-width: 760px) { footer .cols { grid-template-columns: 1fr; } }
footer .langs-line { margin-top: 14px; }
footer .langs-line a, footer .langs-line span { white-space: nowrap; }
/* [v0.9.3.5] the game's channels (SCT_SOCIALS): footer row and the home community block */
footer .follow { margin-top: 28px; }
.socials { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.socials.center { justify-content: center; }
.socials .chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--line2, #2a3957); border-radius: 22px; font: 600 13px var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--text2); text-decoration: none; }
.socials .chip:hover, .socials .chip:focus-visible { border-color: var(--teal); color: var(--teal); }
.follow-line { margin: 28px 0 12px; color: var(--muted); }
footer .langs-line span { color: var(--text2); }

/* [v0.9.1] "this site is also in ...": a small card on the English pages when the browser prefers another site language */
.lang-banner { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; align-items: center; gap: 14px; max-width: min(460px, calc(100vw - 24px));
  padding: 14px 14px 14px 18px; background: var(--card); border: 1px solid var(--teal); border-radius: 8px; box-shadow: 0 18px 48px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease; }
.lang-banner.in { opacity: 1; transform: none; }
.lang-banner p { margin: 0; font-size: 15px; line-height: 1.4; color: var(--text); }
.lang-banner .btn { flex: none; min-height: 40px; padding: 0 16px; font-size: 12px; letter-spacing: .12em; }
.lang-banner .x { flex: none; width: 32px; height: 32px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.lang-banner .x:hover { color: var(--text); background: var(--card-hi); }
@media (max-width: 560px) {
  .lang-banner { left: 12px; right: 12px; bottom: 12px; max-width: none; flex-wrap: wrap; gap: 10px 12px; }
  .lang-banner p { flex: 1 1 calc(100% - 50px); }
  .lang-banner .x { order: 2; }
  .lang-banner .btn { order: 3; flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .lang-banner { transition: none; } }
.lang-note { margin: 0 0 28px; }

/* plain pages (terms, privacy, thanks, download) */
.page { padding: 140px 0 90px; min-height: 80vh; }
.page .doc { max-width: 820px; }
.page h1 { font: 700 clamp(28px, 4vw, 40px)/1.15 var(--f-display); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 24px; }
.page h2 { font: 700 20px var(--f-display); letter-spacing: .1em; text-transform: uppercase; margin: 36px 0 10px; }
.page p, .page li { color: var(--text2); }
.panel { padding: 28px; background: var(--card); border: 1px solid var(--line2); border-radius: 8px; }
.panel + .panel { margin-top: 18px; }
.note { padding: 14px 16px; border-left: 3px solid var(--amber); background: rgba(242, 181, 68, .07); color: var(--text2); font-size: 15px; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
@media (max-width: 600px) { .hero > img { object-position: 22% 40%; } }

/* [v0.9.3.5] Early Access: the badge in the hero and the roadmap section */
.ea-badge { display: inline-flex; align-items: center; min-height: 44px; margin: 6px 0 2px; padding: 0 18px; border: 1px solid #f2b544; border-radius: 22px; color: #f2b544; font: 700 13px var(--f-display); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; background: rgba(242,181,68,.08); }
.ea-badge:hover, .ea-badge:focus-visible { background: rgba(242,181,68,.18); }
.roadmap { list-style: none; margin: 0 auto 32px; padding: 0; max-width: 820px; display: grid; gap: 0; counter-reset: none; }
.roadmap li { display: grid; grid-template-columns: minmax(120px, 190px) 1fr; gap: 18px; padding: 16px 4px; border-top: 1px solid var(--line2, #2a3957); }
.roadmap li:last-child { border-bottom: 1px solid var(--line2, #2a3957); }
.roadmap b { font: 700 13px var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--text2); padding-top: 3px; }
.roadmap li.now b { color: var(--teal); }
.roadmap span { color: var(--text2); }
.roadmap li.now span { color: var(--text); }
@media (max-width: 640px) { .roadmap li { grid-template-columns: 1fr; gap: 4px; } }
.center { text-align: center; }

/* [post-0.9.3.5] the trailer band: hidden until the mp4 is on the server */
.band[hidden] { display: none !important; }
.trailer-video { display: block; width: 100%; max-width: 1100px; aspect-ratio: 16 / 9; margin: 0 auto; border-radius: 10px; background: #000; border: 1px solid rgba(232, 238, 248, .12); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }

/* [v0.9.4] leaderboards beta */
.lb-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 16px; }
.lb-panel { padding: 8px 0; }
.lb-scroll { overflow-x: auto; }
table.lb { width: 100%; border-collapse: collapse; font-size: 15px; }
table.lb th, table.lb td { padding: 8px 16px; text-align: left; border-bottom: 1px solid var(--line2); white-space: nowrap; }
table.lb th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
table.lb .r { text-align: right; }
table.lb tbody tr:first-child td { color: var(--text); font-weight: 600; }

/* [v0.9.4] Early Access price note (Mark 19-10): the coming 1.0 price, never a struck-through "was" price */
.ea-price { color: var(--text2); margin: 6px 0 0; }
.edition .ea-price { margin: 4px 0 12px; }