/* Smol Empire site: the game's own look. Near-black ground, light lettering, condensed Barlow capitals
   like the HUD, and the HUD's colours kept for what they mean in the game (money green, fuel orange,
   power blue, red for what needs doing). The pictures are real frames from the game. */

@font-face { font-family: "Barlow"; src: url("/fonts/Barlow-Medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/fonts/Barlow-SemiBold.woff") format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/fonts/BarlowCondensed-SemiBold.woff") format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/fonts/BarlowCondensed-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }

:root {
  --ground: #0b0d0c;
  --raised: #131614;
  --glass: rgba(12, 14, 13, 0.82);
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.26);
  --text: #ecebe4;
  --muted: #a6a79d;
  --money: #80cd60;
  --fuel: #e89848;
  --power: #6ea6ff;
  --alert: #ff6b54;
  --head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Barlow", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--ground); scrollbar-color: #3a3e3a var(--ground); scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--text); font: 500 17px/1.6 var(--body); -webkit-font-smoothing: antialiased;
       font-variant-numeric: tabular-nums; }
::selection { background: rgba(110, 166, 255, 0.35); color: #fff; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ground); }
::-webkit-scrollbar-thumb { background: #3a3e3a; border: 2px solid var(--ground); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--power); outline-offset: 3px; }
h1, h2 { font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; line-height: 0.98;
         text-wrap: balance; margin: 0; }
h2 { font-size: clamp(34px, 5vw, 58px); }
p { margin: 0; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 10; background: var(--text); color: var(--ground); padding: 8px 12px; }
.skip:focus { left: 8px; }

/* ---------------------------------------------------------------- header */
.top { position: absolute; z-index: 5; inset: 0 0 auto 0; display: flex; align-items: center; justify-content: space-between;
       gap: 16px; padding: 18px var(--gutter); }
.mark { font: 700 24px/1 var(--head); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--text); }
.mark span { color: var(--text); }
.mark { color: var(--muted); }
.mark.small { font-size: 18px; }
.top nav { display: flex; gap: clamp(14px, 3vw, 32px); }
.top nav a { font: 600 15px/1 var(--head); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--text);
             padding: 8px 0; border-bottom: 1px solid transparent; transition: border-color 0.2s var(--ease); }
.top nav a:hover { border-bottom-color: var(--text); }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; min-height: min(100svh, 900px); display: grid; align-items: end; overflow: hidden; }
.hero-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
             animation: settle 2.4s var(--ease) both; }
/* The bottom of the picture darkens so the lettering on it stays readable. */
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
               background: linear-gradient(180deg, rgba(11, 13, 12, 0.55) 0%, rgba(11, 13, 12, 0) 22%, rgba(11, 13, 12, 0) 42%,
                           rgba(11, 13, 12, 0.88) 78%, var(--ground) 100%); }
.hero-text { position: relative; z-index: 1; padding: 0 var(--gutter) clamp(40px, 8vh, 88px); max-width: 860px; }
.hero h1 { font-size: clamp(54px, 9vw, 112px); }
.lede { margin-top: 20px; max-width: 58ch; font-size: clamp(17px, 1.6vw, 20px); color: var(--text); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.fine { margin-top: 16px; font-size: 14px; color: var(--muted); }

@keyframes settle { from { transform: scale(1.06); filter: saturate(0.6) blur(2px); } to { transform: none; filter: none; } }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 1px solid transparent;
       font: 700 17px/1 var(--head); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; cursor: pointer;
       transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.15s var(--ease); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.primary { background: var(--text); color: var(--ground); }
.btn.primary:hover:not(:disabled) { background: #fff; color: var(--ground); }
.btn.quiet { background: var(--glass); color: var(--text); border-color: var(--line-strong); backdrop-filter: blur(8px); }
.btn.quiet:hover { border-color: var(--text); }
.btn.big { min-height: 56px; padding: 0 30px; font-size: 19px; }
.btn:disabled { cursor: default; background: #2a2d2a; color: var(--muted); }

/* ---------------------------------------------------------------- legend */
.legend-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 96px);
                  padding: clamp(72px, 12vh, 140px) var(--gutter); max-width: 1320px; margin: 0 auto; }
.legend-intro p { margin-top: 20px; max-width: 52ch; color: var(--muted); }
.legend { margin: 0; border-top: 1px solid var(--line); }
.legend > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.legend dt { display: flex; align-items: center; gap: 12px; font: 700 18px/1.2 var(--head); letter-spacing: 0.1em; text-transform: uppercase; }
.legend dd { margin: 0; color: var(--muted); }
.key { display: inline-block; width: 18px; height: 12px; flex: none; }
.key.money { background: var(--money); }
.key.fuel { background: repeating-linear-gradient(45deg, var(--fuel) 0 3px, transparent 3px 5px); outline: 1px solid var(--fuel); outline-offset: -1px; }
.key.power { border: 2px solid var(--power); }
.key.alert { background: var(--alert); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* ---------------------------------------------------------------- pictures */
.wide { margin: 0 auto; padding: 0 var(--gutter); max-width: 1480px; }
.wide img { width: 100%; border: 1px solid var(--line); }
.wide figcaption { margin-top: 12px; max-width: 70ch; font-size: 15px; color: var(--muted); }

/* ---------------------------------------------------------------- forces */
.split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 96px); align-items: start;
         padding: clamp(72px, 12vh, 140px) var(--gutter); max-width: 1320px; margin: 0 auto; }
.split p { margin-top: 20px; max-width: 60ch; color: var(--muted); }
.split h2 + p { margin-top: 24px; }
.facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.facts li { display: flex; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.facts b { min-width: 4.5ch; font: 700 40px/1 var(--head); color: var(--text); }

/* ---------------------------------------------------------------- buy */
.buy { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 96px); align-items: start;
       margin: clamp(72px, 12vh, 140px) auto 0; padding: clamp(40px, 6vw, 72px) var(--gutter); max-width: 1320px;
       background: var(--raised); border: 1px solid var(--line); }
.price { display: flex; flex-direction: column; gap: 6px; margin-top: 20px; }
.price [data-price] { font: 700 clamp(44px, 6vw, 72px)/1 var(--head); letter-spacing: 0.02em; }
.price-note { color: var(--muted); }
.gets { margin: 24px 0 28px; padding: 0; list-style: none; }
.gets li { position: relative; padding: 8px 0 8px 26px; }
.gets li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 12px; height: 2px; background: var(--money); }
.status { min-height: 1.6em; margin-top: 12px; color: var(--muted); }
.status.error { color: var(--alert); }
.reqs { margin: 0; border-top: 1px solid var(--line); }
.reqs > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.reqs dt { font: 600 15px/1.5 var(--head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.reqs dd { margin: 0; }

/* ---------------------------------------------------------------- footer */
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 40px var(--gutter);
        margin-top: clamp(72px, 12vh, 140px); border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }

/* ---------------------------------------------------------------- simple pages (thanks, download) */
.page { max-width: 720px; margin: 0 auto; padding: 120px var(--gutter) 80px; }
.page h1 { font-size: clamp(44px, 7vw, 76px); }
.page p { margin-top: 18px; color: var(--muted); }
.keybox { margin-top: 24px; padding: 16px 18px; border: 1px solid var(--line-strong); background: var(--raised);
          font: 600 17px/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; word-break: break-all; color: var(--text); }
.field { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.field label { flex-basis: 100%; font: 600 15px/1 var(--head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.field input { flex: 1 1 320px; min-height: 48px; padding: 0 14px; background: var(--raised); color: var(--text);
               border: 1px solid var(--line-strong); font: 500 16px/1 ui-monospace, Consolas, monospace; caret-color: var(--power); }
.field input::placeholder { color: #7d7e76; }
.field input:focus-visible { outline: none; border-color: var(--power); }
.page .btn { margin-top: 24px; }

@media (max-width: 860px) {
  .legend-section, .split, .buy { grid-template-columns: minmax(0, 1fr); }
  .legend > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .top nav a:not(:last-child) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-shot { animation: none; }
  html { scroll-behavior: auto; }
}