@font-face {
  font-family: "FNS Fusion Pixel 12";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/fusion-pixel-12px-proportional-latin.woff2") format("woff2");
}

:root {
  --fns-font-body: "FNS Fusion Pixel 12", ui-monospace, monospace;
  --fns-font-display: "Tiny5", ui-monospace, monospace;
  --fns-body-letter-spacing: 0.02em;
  --fns-body-line-height: 1.75;
  --fns-bg: #1a1f1a;
  --fns-heading: #dce4ec;
  --fns-heading-soft: #9ca4a8;
  --fns-text: #b8aea0;
  --fns-text-muted: #7a8a94;
  --fns-link: #7a9bb5;
  --fns-link-hover: #d4b896;
  --fns-accent: #c49050;
  --fns-focus: #7a9bb5;
  --fns-shadow: rgba(0, 0, 0, 0.35);
  --fns-pixel-border: #b88445;
  --fns-pixel-fill: rgb(74 53 34 / 80%);
  --fns-pixel-frame-w: 1px;
  --fns-pixel-step: 3px;
  --fns-pixel-corner: calc(var(--fns-pixel-step) * 2);
  --fns-pixel-clip: polygon(
    0 var(--fns-pixel-corner),
    var(--fns-pixel-step) var(--fns-pixel-corner),
    var(--fns-pixel-step) var(--fns-pixel-step),
    var(--fns-pixel-corner) var(--fns-pixel-step),
    var(--fns-pixel-corner) 0,
    calc(100% - var(--fns-pixel-corner)) 0,
    calc(100% - var(--fns-pixel-corner)) var(--fns-pixel-step),
    calc(100% - var(--fns-pixel-step)) var(--fns-pixel-step),
    calc(100% - var(--fns-pixel-step)) var(--fns-pixel-corner),
    100% var(--fns-pixel-corner),
    100% calc(100% - var(--fns-pixel-corner)),
    calc(100% - var(--fns-pixel-step)) calc(100% - var(--fns-pixel-corner)),
    calc(100% - var(--fns-pixel-step)) calc(100% - var(--fns-pixel-step)),
    calc(100% - var(--fns-pixel-corner)) calc(100% - var(--fns-pixel-step)),
    calc(100% - var(--fns-pixel-corner)) 100%,
    var(--fns-pixel-corner) 100%,
    var(--fns-pixel-corner) calc(100% - var(--fns-pixel-step)),
    var(--fns-pixel-step) calc(100% - var(--fns-pixel-step)),
    var(--fns-pixel-step) calc(100% - var(--fns-pixel-corner)),
    0 calc(100% - var(--fns-pixel-corner))
  );
  --fns-lang-separator: rgba(122, 138, 148, 0.55);
  --fns-lang-active: #c49050;
  --fns-wordmark-main: #f4c870;
  --fns-wordmark-muted: color-mix(in srgb, var(--fns-wordmark-main) 52%, var(--fns-heading-soft) 48%);
  --fns-bg-sky-tile: 512px;
  --fns-bg-sky-drift: 120s;
  --fns-panel-width: 39rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--fns-font-body);
  background-color: var(--fns-bg);
  background-image: var(--fns-bg-sky-image, url("/assets/backgrounds/sky_01.webp"));
  background-repeat: repeat;
  background-size: calc(var(--fns-bg-sky-tile) * 2);
  background-position: var(--fns-bg-sky-pos-x, 0px) var(--fns-bg-sky-pos-y, 0px);
  color: var(--fns-text);
  color-scheme: dark;
}

a {
  color: inherit;
}

main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(var(--fns-panel-width), calc(100% - 2rem));
  margin: 0 auto;
  padding: 1rem 0;
}

.fns-pixel-frame {
  display: inline-block;
  width: 100%;
  max-width: 100%;
  border: var(--fns-pixel-frame-w) solid var(--fns-pixel-border);
  background-color: var(--fns-pixel-fill);
  clip-path: var(--fns-pixel-clip);
  -webkit-clip-path: var(--fns-pixel-clip);
  filter: drop-shadow(0 2px 10px var(--fns-shadow));
}

.fns-pixel-frame__inner {
  position: relative;
  z-index: 1;
}

.fns-pixel-frame--hero .fns-pixel-frame__inner {
  padding: 1.35rem 1.2rem 1.5rem;
  text-align: left;
}

.fns-lang {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  width: 100%;
  margin: 0;
  padding: 1rem 1rem 0;
  box-sizing: border-box;
}

.fns-lang__short {
  display: none;
}

.fns-lang__full {
  display: inline;
}

.fns-lang a {
  padding: 0.15rem 0;
  color: var(--fns-heading);
  font-family: var(--fns-font-display);
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity 0.15s ease;
}

.fns-lang-sep {
  color: var(--fns-lang-separator);
  font-family: var(--fns-font-display);
  font-size: 1rem;
  user-select: none;
}

.fns-lang a:focus-visible,
.fns-adventure__choices a:focus-visible,
.fns-landing__language-card:focus-visible {
  outline: 2px solid var(--fns-focus);
  outline-offset: 3px;
}

.fns-lang a[aria-current="page"] {
  opacity: 1;
  color: var(--fns-lang-active);
}

.fns-lang a:not([aria-current="page"]) {
  opacity: 0.42;
}

.fns-lang a:not([aria-current="page"]):hover {
  opacity: 0.75;
}

.fns-wordmark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin: 0 0 1.35rem;
  font-family: var(--fns-font-display);
  line-height: 1;
}

.fns-wordmark__muted {
  margin: 0;
  color: var(--fns-wordmark-muted);
  font-size: clamp(1rem, 3.2vw, 1.35rem);
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: lowercase;
}

.fns-wordmark__muted:first-child,
.fns-wordmark__main + .fns-wordmark__muted,
.fns-wordmark__main {
  align-self: center;
}

.fns-wordmark__muted + .fns-wordmark__main {
  margin-top: -0.22em;
}

.fns-wordmark__main + .fns-wordmark__muted {
  margin-top: -0.2em;
}

.fns-wordmark__main {
  margin: 0;
  color: var(--fns-wordmark-main);
  font-family: var(--fns-font-display);
  font-size: clamp(2.125rem, 7.5vw, 3rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.05;
  text-wrap: balance;
}

p {
  margin: 0;
  line-height: 1.6;
}

.fns-adventure {
  width: 100%;
  max-width: none;
}

.fns-adventure p {
  margin-bottom: 0.9rem;
  color: var(--fns-text);
  font-family: var(--fns-font-body);
  font-size: clamp(1rem, 2.2vw, 1.08rem);
  letter-spacing: var(--fns-body-letter-spacing);
  line-height: var(--fns-body-line-height);
  text-wrap: pretty;
}

.fns-dialogue {
  padding: 0.35rem 0.55rem;
  border-left: 2px solid;
  background: color-mix(in srgb, var(--fns-bg) 74%, transparent);
}

.fns-dialogue--visitor {
  border-left-color: color-mix(in srgb, var(--fns-link) 70%, var(--fns-heading) 30%);
  color: color-mix(in srgb, var(--fns-text) 84%, var(--fns-heading) 16%);
}

.fns-dialogue--studio {
  border-left-color: color-mix(in srgb, var(--fns-accent) 74%, var(--fns-wordmark-main) 26%);
  color: color-mix(in srgb, var(--fns-text) 78%, var(--fns-wordmark-main) 22%);
}

.fns-dialogue__speaker {
  font-weight: 700;
  color: var(--fns-heading);
}

.fns-adventure__question {
  margin-top: 0.35rem;
  color: var(--fns-heading);
}

.fns-adventure__choices {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fns-adventure__choices li {
  margin-bottom: 0.7rem;
}

.fns-adventure__choices li::before {
  content: "* ";
  color: var(--fns-wordmark-main);
}

.fns-adventure__choices a {
  color: var(--fns-link);
  font-family: var(--fns-font-body);
  font-size: clamp(1rem, 2.2vw, 1.08rem);
  letter-spacing: var(--fns-body-letter-spacing);
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--fns-link) 65%, transparent);
}

.fns-adventure__choices a:visited {
  color: var(--fns-link);
  border-bottom-color: color-mix(in srgb, var(--fns-link) 65%, transparent);
}

.fns-adventure__choices a:hover,
.fns-adventure__choices a:focus-visible {
  color: var(--fns-link-hover);
  border-bottom-color: var(--fns-link-hover);
}

.fns-adventure__choices a:active,
.fns-landing__language-card:active {
  color: var(--fns-accent);
}

.fns-copyright {
  margin-top: 1rem;
  color: var(--fns-text-muted);
  font-family: var(--fns-font-display);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-align: center;
}

.fns-landing .fns-pixel-frame__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.fns-landing--compact {
  width: min(24rem, calc(100% - 2rem));
}

.fns-landing--compact .fns-pixel-frame__inner {
  padding: 1.25rem 1.1rem 1.35rem;
}

.fns-landing--compact .fns-landing__languages {
  margin-top: 0;
}

.fns-landing--compact .fns-landing__language-card {
  justify-content: center;
  min-height: 4rem;
}

.fns-landing__eyebrow {
  margin-bottom: 0.9rem;
  color: var(--fns-heading-soft);
  font-family: var(--fns-font-display);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fns-landing__title {
  margin: 0 0 1rem;
  color: var(--fns-wordmark-main);
  font-family: var(--fns-font-display);
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 400;
  line-height: 1.05;
}

.fns-landing__lead {
  max-width: 38ch;
  margin-bottom: 0.75rem;
  color: var(--fns-text);
  font-family: var(--fns-font-body);
  font-size: clamp(1rem, 2.3vw, 1.08rem);
  letter-spacing: var(--fns-body-letter-spacing);
  line-height: var(--fns-body-line-height);
  text-wrap: pretty;
}

.fns-landing__languages {
  display: grid;
  gap: 0.75rem;
  width: 100%;
  margin-top: 1rem;
}

.fns-landing__language-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--fns-pixel-border) 60%, transparent);
  background: rgb(26 31 26 / 22%);
  color: var(--fns-heading);
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease,
    background-color 0.15s ease;
}

.fns-landing__language-card:hover,
.fns-landing__language-card:focus-visible {
  border-color: var(--fns-link-hover);
  background: rgb(26 31 26 / 32%);
  color: var(--fns-link-hover);
  transform: translateY(-1px);
}

.fns-landing__language-name {
  font-family: var(--fns-font-display);
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fns-landing__language-copy {
  color: var(--fns-text);
  font-family: var(--fns-font-body);
  font-size: 0.98rem;
  letter-spacing: var(--fns-body-letter-spacing);
  line-height: 1.6;
}

@media (min-width: 36rem) {
  .fns-landing__languages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 40rem) {
  .fns-lang {
    padding: 0.75rem 0.75rem 0;
  }

  .fns-lang__short {
    display: inline;
  }

  .fns-lang__full {
    display: none;
  }

  main {
    width: min(var(--fns-panel-width), calc(100% - 1rem));
    padding: 0.75rem 0 1rem;
  }

  .fns-landing--compact {
    width: min(24rem, calc(100% - 1rem));
  }

  .fns-pixel-frame--hero .fns-pixel-frame__inner {
    padding: 1.15rem 1.1rem 1.25rem;
  }
}