/* RIFT CRAWL landing page. Colors come from client/ui.ts and the panels in public/index.html.
   The pixel font is built from the game's own 5x7 glyphs (client/gfx/font.ts). It stays crisp at multiples of 8px. */

@font-face {
  font-family: "Rift Crawl Pixel";
  src: url("assets/riftcrawl-pixel.woff2") format("woff2");
  font-display: swap;
}

:root {
  --bg: #0c0810;
  --panel: #1c1420;
  --stone: #3c3438;
  --stone-light: #5c5450;
  --gold: #c8a048;
  --gold-light: #f8d878;
  --gold-dark: #785820;
  --text: #d8d0c0;
  --dim: #a8a098;
  --logo-gold: #f8b800;
  --logo-shadow: #2c0620;
  --pixel: "Rift Crawl Pixel", ui-monospace, Menlo, Consolas, monospace;
  --mono: ui-monospace, Menlo, Consolas, monospace;
  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--mono);
  overflow-wrap: break-word;
}

img { display: block; max-width: 100%; height: auto; image-rendering: pixelated; }

h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }

h2, h3, .tagline, .play, .stats b, .climb li, .rarities li {
  font-family: var(--pixel);
  font-weight: normal;
  -webkit-font-smoothing: none;
  font-smooth: never;
}

.wrap { width: 100%; max-width: 1024px; margin-inline: auto; padding-inline: 16px; }

/* Masthead */

.masthead { padding-block: 48px 24px; text-align: center; background: url("assets/stars.png"); }
.masthead img { margin-inline: auto; width: 488px; }
.tagline { margin-top: 24px; font-size: 24px; line-height: 32px; color: var(--gold-light); }
.lore { margin-top: 8px; }
/* Keeps the stars from running through the words. */
.tagline, .lore { width: fit-content; margin-inline: auto; padding-inline: 8px; background: var(--bg); }

/* The one play link. It sits under the masthead and sticks to the top on the way down. */

.playbar {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg);
  border-block: 2px solid var(--gold-dark);
}
.playbar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 24px;
  padding-block: 10px;
}
.playbar p { font-size: 14px; line-height: 1.3; color: var(--text); }

.play {
  flex: none;
  display: block;
  padding: 12px 20px;
  font-size: 24px;
  line-height: 24px;
  white-space: nowrap;
  text-decoration: none;
  color: var(--logo-shadow);
  background: var(--logo-gold);
  border: 2px solid #000;
  box-shadow: inset 0 2px 0 #fce0a8, inset 0 -2px 0 #a06020;
}
a.play:hover { background: var(--gold-light); }
a.play:active { box-shadow: inset 0 2px 0 #a06020; }
a.play:focus-visible { outline: 2px solid #fcfcfc; outline-offset: 2px; }
/* Not a link yet, so it shouldn't look like a button. */
.play.soon { color: var(--gold-light); background: none; border-color: var(--gold-dark); box-shadow: none; }

/* Screenshots, framed like a panel in the game */

.shot img {
  width: 100%;
  background: #000;
  border: 2px solid var(--gold);
  outline: 2px solid var(--gold-dark);
  outline-offset: 2px;
}
/* 964px is 960px of image plus its border, so desktop shows it pixel for pixel. */
.lead { max-width: 964px; margin: 32px auto 0; }
figcaption { margin-top: 12px; font-size: 14px; color: var(--dim); text-align: center; }

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 32px;
  text-align: center;
  font-size: 14px;
}
.stats b { display: block; font-size: 40px; line-height: 40px; color: var(--logo-gold); }

/* Sections */

section { margin-top: 72px; }
h2 { font-size: 32px; line-height: 40px; color: var(--gold-light); }
h3 { font-size: 16px; line-height: 24px; color: var(--gold-light); }
.intro { max-width: 72ch; margin-top: 8px; }

/* Classes */

.classes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin-top: 24px;
}
.classes li {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: var(--panel);
  border: 2px solid var(--stone);
  border-top-color: var(--stone-light);
}
.classes p { font-size: 14px; line-height: 1.45; }
.classes .role { margin-bottom: 8px; color: var(--dim); }

/* Sheet: 2 walk frames across, 6 classes down, shown at 2x. */
.sprite {
  flex: none;
  width: 128px;
  height: 96px;
  margin-left: -20px;
  background: url("assets/classes.png") 0 0 / 256px 576px no-repeat;
  image-rendering: pixelated;
  animation: walk 0.7s steps(1) infinite;
}
.sprite.reaver { background-position-y: 0; }
.sprite.spellweaver { background-position-y: -96px; }
.sprite.gunner { background-position-y: -192px; }
.sprite.cleric { background-position-y: -288px; }
.sprite.ironclad { background-position-y: -384px; }
.sprite.hexer { background-position-y: -480px; }
@keyframes walk {
  0% { background-position-x: 0; }
  50% { background-position-x: -128px; }
}

/* Realms */

.realms {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 16px;
  margin-top: 24px;
}
.realms img { width: 100%; background: #000; border: 2px solid var(--stone); }
.realms h3 { margin-top: 8px; }
.realms p { font-size: 14px; line-height: 1.45; }
.realms .meta { margin-bottom: 4px; color: var(--dim); }

/* Loot */

.rarities { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.rarities li {
  padding: 6px 12px;
  font-size: 16px;
  line-height: 16px;
  background: var(--panel);
  border: 2px solid currentColor;
}
.common { color: #fcfcfc; }
.magic { color: #6888fc; }
.rare { color: #f8d878; }
.legendary { color: #f87858; }

.climb {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 24px;
  padding: 12px 4px;
  background: var(--panel);
  border: 2px solid var(--stone);
  border-top-color: var(--stone-light);
}
.climb li { font-size: 16px; line-height: 24px; text-align: center; color: var(--gold-light); }
/* Sheet: 7 tiers across, shown at 2x. */
.tier {
  display: block;
  width: 128px;
  height: 96px;
  margin-inline: auto;
  background: url("assets/climb.png") 0 0 / 896px 96px no-repeat;
  image-rendering: pixelated;
}
.t1 { background-position-x: -128px; }
.t2 { background-position-x: -256px; }
.t3 { background-position-x: -384px; }
.t4 { background-position-x: -512px; }
.t5 { background-position-x: -640px; }
.t6 { background-position-x: -768px; }

/* Places */

.places { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 24px; }
.places h3 { margin: 16px 0 4px; }

/* Party */

.points { display: grid; gap: 12px; max-width: 72ch; margin-top: 16px; }
.points li { padding-left: 16px; border-left: 4px solid var(--gold-dark); }
.points b { font-weight: normal; color: var(--gold-light); }

footer { margin-block: 72px 48px; font-size: 14px; color: var(--dim); }

/* Narrower screens */

@media (max-width: 900px) {
  .realms { grid-template-columns: repeat(2, 1fr); }
  .climb { grid-template-columns: repeat(4, 1fr); row-gap: 12px; }
  .tier { width: 64px; height: 48px; background-size: 448px 48px; }
  .t1 { background-position-x: -64px; }
  .t2 { background-position-x: -128px; }
  .t3 { background-position-x: -192px; }
  .t4 { background-position-x: -256px; }
  .t5 { background-position-x: -320px; }
  .t6 { background-position-x: -384px; }
}

@media (max-width: 640px) {
  .masthead { padding-block: 32px 16px; }
  .tagline { font-size: 16px; line-height: 24px; margin-top: 16px; }
  .play { padding: 10px 12px; font-size: 16px; line-height: 16px; }
  .playbar-inner { padding-block: 8px; gap: 12px; }
  .playbar p { font-size: 12px; }
  .stats b { font-size: 32px; line-height: 32px; }
  .stats { font-size: 12px; }
  h2 { font-size: 24px; line-height: 32px; }
  section { margin-top: 56px; }
  .classes { grid-template-columns: 1fr; }
  .sprite { margin-left: -28px; margin-right: -8px; }
  .realms { gap: 20px 12px; }
  .places { grid-template-columns: 1fr; gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .sprite { animation: none; }
}