/* Nexorion — the page is a slice of a world: sky on top, then you dig.
   Every picture on it is the game's own art; the panels and slots are the game's own UI. */

@font-face {
  font-family: "Gothic A1";
  src: url("/fonts/GothicA1-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Gothic A1";
  src: url("/fonts/GothicA1-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
/* The font the game itself ships (Resources/UI/GameFont). */
@font-face {
  font-family: "Nexorion Display";
  src: url("/fonts/GothicA1-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --sky: #8fb8cf;        /* the game's daytime sky */
  --panel: #1c9fd7;      /* panel.png */
  --deep: #16324a;       /* the dark trough behind every bar */
  --gold: #ffd877;       /* the wordmark on the sign-in screen */
  --gold-shadow: #8a5a14;
  --ink: #ffffff;
  --ink-soft: rgba(255, 255, 255, 0.9);
  --soil: #4d3524;
  --tile: 64px;          /* 32 px art at 2x */
  --edge: max(20px, calc(50% - 500px));
}

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

html {
  background: var(--soil) url("/assets/dirt.png") 0 0 / var(--tile) repeat;
  image-rendering: pixelated;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  font: 500 1.0625rem/1.65 "Gothic A1", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}

img { image-rendering: pixelated; }

a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}

/* ---------------------------------------------------------------- surface */

.surface {
  position: relative;
  isolation: isolate;
  min-height: min(94vh, 920px);
  display: grid;
  align-items: center;
  padding: 88px var(--edge) 260px;
  background: var(--sky);
  overflow: hidden;
}

.sky { position: absolute; inset: 0; z-index: -1; }

.sun {
  position: absolute;
  top: 9%;
  right: 11%;
  width: clamp(80px, 11vw, 140px);
  height: auto;
  image-rendering: auto;
}

.cloud {
  position: absolute;
  left: -240px;
  width: 200px;
  height: auto;
  image-rendering: auto;
  animation: drift 110s linear infinite;
}
.cloud-a { top: 5%; }
/* The second cloud rides low, where the hills will cover its lower half — never through the words. */
.cloud-b { top: auto; bottom: 300px; width: 140px; animation-delay: -60s; animation-duration: 140s; }

@keyframes drift {
  to { transform: translateX(calc(100vw + 480px)); }
}

.hills {
  position: absolute;
  left: 0;
  right: 0;
  background-repeat: repeat-x;
  background-position: left bottom;
}
.hills-far  { bottom: 104px; height: 256px; background-image: url("/assets/hills3.png"); background-size: 512px 256px; }
.hills-mid  { bottom: 80px;  height: 256px; background-image: url("/assets/hills2.png"); background-size: 512px 256px; background-position: -170px bottom; }
.hills-near { bottom: 64px;  height: 128px; background-image: url("/assets/hills1.png"); background-size: 512px 128px; background-position: -60px bottom; }

.title { max-width: 720px; }

.wordmark {
  margin: 0 0 0.2em;
  font-family: "Nexorion Display", "Gothic A1", sans-serif;
  font-weight: 700;
  font-size: clamp(3.4rem, 12vw, 8.75rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--gold);
  -webkit-text-stroke: 0.07em var(--deep);
  paint-order: stroke fill;
  text-shadow: 0 0.09em 0 var(--deep);
}

.tagline {
  margin: 0 0 0.75em;
  max-width: 30ch;
  font-family: "Nexorion Display", "Gothic A1", sans-serif;
  font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  line-height: 1.3;
  color: var(--deep);
}

.lede {
  margin: 0 0 1.75em;
  max-width: 52ch;
  color: var(--deep);
  font-size: 1.0625rem;
}

.actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* button.png / button_primary.png, 9-sliced exactly as the game slices them */
.button {
  display: inline-block;
  padding: 2px 10px 0;
  border-style: solid;
  border-width: 20px 24px 28px;
  border-image: url("/assets/button.png") 20 24 28 fill / 20px 24px 28px stretch;
  color: var(--ink);
  font-family: "Nexorion Display", "Gothic A1", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  text-decoration: none;
  text-shadow: 0 2px 0 rgba(22, 50, 74, 0.45);
  image-rendering: auto;
}
.button-primary { border-image-source: url("/assets/button_primary.png"); }
.button:hover { filter: brightness(1.08); }
.button:active { transform: translateY(2px); }

.ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--tile);
  background: url("/assets/grass.png") 0 0 / var(--tile) repeat-x;
}

.prop {
  position: absolute;
  bottom: var(--tile);
  width: var(--tile);
  height: var(--tile);
}
.prop-door { left: calc(var(--tile) * 3); }
.prop-sign { left: calc(var(--tile) * 5); }
.prop-lock { right: calc(var(--tile) * 4); }

/* ----------------------------------------------------------------- layers */

/* One texture per stratum, not per section: a section restarting the tile at its own top edge
   left a seam wherever two sections of the same ground met. */
.stratum {
  background-repeat: repeat;
  background-size: var(--tile);
}
.stratum-dirt { background-image: url("/assets/dirt.png"); }
.stratum-cave { background-image: url("/assets/cave.png"); background-color: #1c150c; }
.stratum-lava { background-image: url("/assets/lavarock.png"); background-color: #2a2322; padding-bottom: 24px; }

.layer { padding: 72px 20px; }

/* panel.png, 9-sliced as the game slices it */
.panel {
  max-width: 700px;
  margin-left: calc(var(--edge) - 20px);
  margin-right: auto;
  padding: 10px 14px 12px;
  border-style: solid;
  border-width: 20px 24px;
  border-image: url("/assets/panel.png") 20 24 fill / 20px 24px stretch;
  image-rendering: auto;
}
.panel-right { margin-left: auto; margin-right: calc(var(--edge) - 20px); }
.panel-wide  { max-width: 780px; margin-inline: auto; }

.panel h2 {
  margin: 0 0 0.55em;
  font-family: "Nexorion Display", "Gothic A1", sans-serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 3.6vw, 2.2rem);
  line-height: 1.15;
  text-shadow: 0 2px 0 rgba(22, 50, 74, 0.45);
}

.panel p {
  margin: 0 0 0.9em;
  max-width: 62ch;
  color: var(--ink-soft);
}

.panel .aside {
  margin: 1.4em 0 0;
  padding-top: 0.9em;
  border-top: 2px solid rgba(22, 50, 74, 0.35);
  font-size: 0.97rem;
}

/* Items shown the way the bag shows them: each in a slot.png frame. */
.slots {
  list-style: none;
  margin: 1.4em 0 0.2em;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 12px 8px;
}

.slots li {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25;
}

.slots img {
  width: 64px;
  height: 64px;
  box-sizing: content-box;
  padding: 2px;
  border-style: solid;
  border-width: 12px 12px 17px;
  border-image: url("/assets/slot.png") 20 20 28 fill / 12px 12px 17px stretch;
}

/* The one real sequence on the page. */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: var(--tile) 1fr;
  gap: 18px;
  align-items: start;
  padding: 14px 0;
}
.steps li + li { border-top: 2px solid rgba(22, 50, 74, 0.35); }

.steps img { width: var(--tile); height: var(--tile); }

.steps h3 {
  margin: 0.1em 0 0.3em;
  font-family: "Nexorion Display", "Gothic A1", sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.2;
}
.steps h3::before {
  content: counter(step) ". ";
  color: var(--gold);
}
.steps p { margin: 0; }

/* ---------------------------------------------------------------- bedrock */

.bedrock {
  padding: 36px var(--edge) 44px;
  /* the bedrock shows through a dark veil, so the one line on it can be read */
  background:
    linear-gradient(rgba(24, 20, 32, 0.74), rgba(24, 20, 32, 0.74)),
    #2d2a33 url("/assets/bedrock.png") 0 0 / var(--tile) repeat;
}
.bedrock p {
  margin: 0;
  max-width: 60ch;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

/* ---------------------------------------------------------------- smaller */

@media (max-width: 720px) {
  .surface { padding-top: 64px; padding-bottom: 230px; }
  .panel, .panel-right { margin-inline: 0; }
  .layer { padding: 48px 12px; }
  .prop-sign { display: none; }
  .prop-door { left: var(--tile); }
  .prop-lock { right: var(--tile); }
  .slots { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cloud { animation: none; }
  .cloud-a { transform: translateX(34vw); }
  .cloud-b { transform: translateX(62vw); }
}