/* Thronekeep : landing page (S22).
   Everything visual here is the game's own delivered art: the panels and the
   buttons are the mockups' nine-patches (border-image), the icons are the ones
   the client uses, the pictures are real captures. No invented widget. */

@font-face {
  font-family: "Lilita One";
  src: url("assets/lilita_one.ttf") format("truetype");
  font-display: swap;
}

:root {
  --gold: #f7c22b;
  --gold-soft: #ffe08a;
  --blue-950: #06122c;
  --blue-900: #0b1f4d;
  --blue-800: #123069;
  --ink: #eef4ff;
  --muted: #a9c0e8;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --wrap: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--blue-950);
  color: var(--ink);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .btn, .brand, .lang {
  font-family: "Lilita One", system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: .5px;
}

a { color: var(--gold-soft); }

img { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------- top bar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px clamp(12px, 4vw, 32px);
  background: rgba(6, 18, 44, .88);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid rgba(247, 194, 43, .35);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: 24px;
  min-width: 0;  /* a flex item refuses to shrink under its text without this */
}

.brand img { border-radius: 9px; }

.topbar nav {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 22px);
}

.topbar nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
}

.topbar nav a:hover { color: var(--ink); }

/* Sixteen languages, so a picker and no longer a toggle.
   ⚠ `appearance: none` is not decoration: left to itself a browser paints its
   own control, a pale grey box with black text, and the one gadget of the bar
   ends up being the one thing that does not belong to the game. The caret is
   ours for the same reason, and it changes side with the reading direction. */
.lang {
  appearance: none;
  -webkit-appearance: none;
  background: var(--blue-900)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23ffe08a' stroke-width='2' stroke-linecap='round'/></svg>")
    no-repeat right 9px center / 10px 7px;
  border: 2px solid rgba(247, 194, 43, .5);
  border-radius: 8px;
  color: var(--gold-soft);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 26px 5px 10px;
  max-width: 10em;
}

[dir="rtl"] .lang {
  background-position: left 9px center;
  padding: 4px 10px 5px 26px;
}

.lang:hover { border-color: var(--gold); color: #fff; }
.lang option { background: var(--blue-900); color: var(--ink); }

@media (max-width: 720px) {
  .topbar nav a[href^="#"] { display: none; }
}

/* On a phone the bar carries three things and the picker is the widest, so the
   name gives way to its own emblem: the title underneath says it in 52 px. The
   two-language toggle used to fit where a language NAME does not. */
@media (max-width: 560px) {
  .brand span { display: none; }
  .lang { max-width: 8em; font-size: 13px; }
}

/* ----------------------------------------------------------------- button */

.btn {
  display: inline-block;
  border-image: url("assets/btn.png") 28 fill / 28px / 0 stretch;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55);
  font-size: 20px;
  padding: 14px 28px 16px;
  transition: filter .12s ease, transform .12s ease;
}

.btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.btn:active { filter: brightness(.9); transform: translateY(1px); }

.btn-small { font-size: 16px; padding: 9px 18px 11px; }
.btn-big { font-size: clamp(22px, 3.4vw, 30px); padding: 18px 40px 21px; }

.btn-ghost {
  border-image: none;
  border: 2px solid rgba(247, 194, 43, .55);
  border-radius: 12px;
  background: rgba(11, 31, 77, .6);
  color: var(--gold-soft);
  font-size: 18px;
  padding: 14px 26px;
}

.btn-ghost:hover { background: rgba(18, 48, 105, .8); color: #fff; }

/* ------------------------------------------------------------------- hero */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(86vh, 760px);
  overflow: hidden;
  text-align: center;
  padding: 60px 20px 72px;
}

.hero-art {
  position: absolute;
  inset: 0;
  background: url("assets/hero-bg.jpg") center 42% / cover no-repeat;
}

.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(6, 18, 44, .22) 0%, rgba(6, 18, 44, .62) 52%, var(--blue-950) 100%);
}

.hero-inner {
  position: relative;
  max-width: 760px;
}

.hero-crest {
  border-radius: 26px;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .55));
  width: clamp(88px, 14vw, 128px);
  height: auto;
}

.hero h1 {
  margin: 14px 0 4px;
  font-size: clamp(52px, 12vw, 104px);
  line-height: 1;
  background: linear-gradient(#fff5cf 8%, var(--gold) 52%, #cf8b09 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .55)) drop-shadow(0 10px 22px rgba(0, 0, 0, .5));
}

.tagline {
  margin: 0 0 18px;
  font-family: "Lilita One", system-ui, sans-serif;
  font-size: clamp(19px, 3.4vw, 27px);
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .6);
}

.lede {
  margin: 0 auto 30px;
  max-width: 620px;
  color: #dbe7ff;
  font-size: 17px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
}

.note {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.note.center { text-align: center; }

/* ------------------------------------------------------------------ bands */

.band {
  padding: clamp(48px, 7vw, 88px) clamp(16px, 5vw, 40px);
  max-width: var(--wrap);
  margin: 0 auto;
}

.band.alt {
  max-width: none;
  background: linear-gradient(var(--blue-900), var(--blue-950));
  border-top: 2px solid rgba(247, 194, 43, .18);
  border-bottom: 2px solid rgba(247, 194, 43, .18);
}

.band.alt > * { max-width: var(--wrap); margin-left: auto; margin-right: auto; }

.band h2 {
  margin: 0 0 34px;
  text-align: center;
  font-size: clamp(28px, 5vw, 42px);
  color: var(--gold);
  text-shadow: 0 3px 0 rgba(0, 0, 0, .45);
}

/* ------------------------------------------------------------------ cards */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(228px, 100%), 1fr));
  gap: 20px;
}

.card {
  border-image: url("assets/plate.png") 52 fill / 52px / 0 stretch;
  padding: 26px 26px 30px;
  text-align: center;
  box-shadow: var(--shadow);
}

.card img { margin-bottom: 6px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); }

.card h3 {
  margin: 6px 0 10px;
  font-size: 21px;
  color: var(--gold-soft);
}

.card p {
  margin: 0 0 18px;
  color: #dae6ff;
  font-size: 15px;
}

.card p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ screenshots */

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 26px;
}

.shots figure { margin: 0; }

.shots img {
  display: block;
  width: 100%;
  border: 3px solid rgba(247, 194, 43, .55);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.shots figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

/* ------------------------------------------------------------------ steps */

.steps {
  counter-reset: step;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 780px;
  display: grid;
  gap: 16px;
}

.steps li {
  position: relative;
  border-image: url("assets/plate.png") 52 fill / 52px / 0 stretch;
  padding: 20px 24px 22px;
  padding-inline-start: 74px;
  color: #dae6ff;
  box-shadow: var(--shadow);
}

.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  inset-inline-start: 24px;
  top: 18px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(#ffe08a, #e0a012);
  color: #4a2c00;
  font-family: "Lilita One", system-ui, sans-serif;
  font-size: 20px;
  line-height: 34px;
  text-align: center;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .35);
}

.steps strong {
  font-family: "Lilita One", system-ui, sans-serif;
  font-weight: 400;
  color: var(--gold-soft);
  font-size: 19px;
  margin-inline-end: 4px;
}

/* ------------------------------------------------------------------ split */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}

.split-text p { color: #dae6ff; }

.split-img {
  width: 100%;
  border: 3px solid rgba(247, 194, 43, .55);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------- footer */

footer {
  background: var(--blue-950);
  border-top: 2px solid rgba(247, 194, 43, .25);
  padding: 34px clamp(16px, 5vw, 40px) 46px;
}

.foot-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  color: var(--muted);
}

.foot-inner p { margin: 0 0 8px; }

.small { font-size: 13px; color: #7f97c4; }