/* Gauntlane: Night Forest, the colours of theme "c" in the game (ui/src/themes.css, ui/src/theme.ts). */
@font-face {
  font-family: Cinzel;
  src: url("/fonts/Cinzel-wght.ttf") format("truetype");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --canvas: #04090c;
  --bg: #050c0f;
  --text: #dff5f8;
  --muted: #9dbdc4;
  --accent: #ffd27a;
  --mine: #6fd6ff;
  --display: Cinzel, "Iowan Old Style", Georgia, serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--canvas); color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: var(--canvas); font: 400 1.0625rem/1.6 var(--body); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--display); line-height: 1.15; margin: 0; }
p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--mine); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.6rem 1.4rem;
  font: 700 0.95rem/1.2 var(--display); letter-spacing: 0.04em; color: var(--text); text-decoration: none;
  background: linear-gradient(180deg, rgba(40, 90, 110, 0.55), rgba(15, 40, 52, 0.7));
  border: 1px solid rgba(140, 235, 255, 0.4); border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(200, 250, 255, 0.15), 0 0 10px rgba(80, 200, 255, 0.15);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.btn:hover { border-color: rgba(170, 245, 255, 0.85); box-shadow: inset 0 1px 0 rgba(200, 250, 255, 0.2), 0 0 20px rgba(110, 225, 255, 0.35); }
.btn-primary { color: #f0fdff; background: linear-gradient(180deg, #2f7fa8 0%, #1c6c96 30%, #124e76 100%); border-color: rgba(170, 245, 255, 0.85); }

/* ------------------------------------------------------------------- hero */
.hero {
  position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: min(52svh, 30rem); padding: 3rem 1.25rem 2rem; text-align: center; overflow: clip;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("/img/forest.92ae0783.jpg") center / cover no-repeat; opacity: 0.6;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(4, 9, 12, 0.45), rgba(4, 9, 12, 0.5) 55%, var(--canvas));
}
.app-icon { width: 92px; height: 92px; border-radius: 21px; box-shadow: 0 0 0 1px rgba(255, 210, 122, 0.45), 0 8px 28px rgba(0, 0, 0, 0.6); }
h1 {
  margin-top: 1.1rem; font-size: clamp(2.5rem, 13vw, 6.5rem); font-weight: 800; letter-spacing: 0.035em; text-transform: uppercase;
  color: var(--accent); text-shadow: 0 2px 0 rgba(90, 55, 10, 0.75), 0 4px 22px rgba(0, 0, 0, 0.85);
}
.tagline { margin-top: 0.75rem; text-wrap: balance; font-size: clamp(1.15rem, 4.6vw, 1.6rem); line-height: 1.35; font-weight: 500; text-shadow: 0 1px 8px #000; }

/* --------------------------------------------------------------- features */
/* A feature is three things in a row: the title, the shot, the blurb. Narrow, they stack in that order at full width.
   From 48rem the shot takes one column and the title and blurb sit together in the other, left and right in turn
   (.feature-flip). The screenshot is clipped in tools/capture.mjs; .shot::after only softens its edges into the
   section's colour, gently, because the shots run to their last row of cards. */
.feature { --fade: var(--canvas); position: relative; display: grid; grid-template-columns: 100%; background: var(--fade); }
.feature h2 { padding: 2.25rem 1.25rem 1rem; }
.shot { position: relative; overflow: clip; }
.shot img { width: 100%; }
.feature-run .shot img { filter: brightness(1.14); }
.shot::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, var(--fade) 0%, transparent 2.5%), linear-gradient(180deg, var(--fade) 0%, transparent 2.5%);
}
h2 { font-size: clamp(1.75rem, 8.2vw, 3.25rem); font-weight: 800; color: var(--accent); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7); text-wrap: balance; }
.blurb { padding: 1.25rem 1.25rem 3rem; max-width: 36rem; font-size: 1.0625rem; line-height: 1.6; color: var(--text); text-wrap: pretty; }

/* Every other section: lifted off the page, in the deep teal of the game's hero portraits. */
.feature-band {
  --fade: #0f3f4c; z-index: 1;
  border-block: 1px solid rgba(255, 210, 122, 0.55);
  box-shadow: 0 -22px 44px rgba(0, 0, 0, 0.6), 0 22px 44px rgba(0, 0, 0, 0.6);
}

/* ------------------------------------------------------------- fair play */
/* A pause before the finish: no picture, just the words between two gold rules. */
.fair { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; padding: 4.5rem 1.25rem 3rem; text-align: center; background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(255, 210, 122, 0.07), transparent); }
.fair::before, .fair::after { content: ""; width: 6rem; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.fair::before { margin-bottom: 1rem; }
.fair::after { margin-top: 1rem; }
.fair h2 { font-size: clamp(2.1rem, 10vw, 3.25rem); letter-spacing: 0.03em; }
.fair p { max-width: 40rem; font-size: 1.125rem; line-height: 1.65; text-wrap: balance; }

/* ------------------------------------------------------------ coming soon */
.soon {
  position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; padding: 5rem 1.25rem calc(1.75rem + env(safe-area-inset-bottom));
  text-align: center; overflow: clip;
}
.soon::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("/img/forest.92ae0783.jpg") center bottom / cover no-repeat; opacity: 0.45;
  mask-image: linear-gradient(0deg, #000 40%, transparent);
  -webkit-mask-image: linear-gradient(0deg, #000 40%, transparent);
}
.soon-title {
  font: 800 clamp(3.5rem, 17.5vw, 11rem)/0.98 var(--display); letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--accent); text-shadow: 0 3px 0 rgba(90, 55, 10, 0.75), 0 6px 32px rgba(0, 0, 0, 0.85);
}
.soon-title span { display: block; }
/* The body face: Cinzel has no lowercase, so it would set "iOS" as "IOS". */
.soon-where { margin-top: 0.9rem; font-size: clamp(1.3rem, 5vw, 1.9rem); line-height: 1.2; font-weight: 500; color: var(--text); text-shadow: 0 1px 8px #000; }
.socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2rem; }
.socials .btn { min-height: 56px; padding: 0.7rem 2.25rem; font-size: 1.15rem; }
.legal { margin-top: 3.5rem; font-size: 0.9rem; color: var(--muted); text-shadow: 0 1px 6px #000; }

/* -------------------------------------------------------------------- 404 */
.lost { min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: 0.9rem; padding: 2rem 1.25rem; text-align: center; }
.lost .app-icon { margin-bottom: 0.4rem; }
.lost h1 { margin: 0; font-size: clamp(1.9rem, 9vw, 3.25rem); text-transform: none; letter-spacing: 0.01em; }

/* ---------------------------------------------------------------- larger */
@media (min-width: 48rem) {
  .hero { min-height: min(68svh, 38rem); }
  .app-icon { width: 112px; height: 112px; border-radius: 25px; }
  /* The shot spans every row; the title and blurb share the middle rows, so the pair sits centred beside it. */
  .feature { grid-template-columns: min(50vw, 46rem) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; }
  .feature:not(.feature-band) { background: radial-gradient(ellipse 25% 62% at 75% 50%, rgba(60, 220, 200, 0.075), transparent), var(--fade); }
  .shot { grid-column: 1; grid-row: 1 / -1; }
  .shot::after { background: linear-gradient(0deg, var(--fade) 0%, transparent 4%), linear-gradient(180deg, var(--fade) 0%, transparent 3%), linear-gradient(90deg, transparent 94%, var(--fade) 100%); }
  .feature h2, .blurb { grid-column: 2; justify-self: center; width: min(100%, 40rem); max-width: none; padding-inline: clamp(1.5rem, 3vw, 2.5rem); }
  .feature h2 { grid-row: 2; padding-block: 2rem 0; }
  .blurb { grid-row: 3; padding-block: 0.9rem 2rem; font-size: clamp(1.0625rem, 1.5vw, 1.2rem); }
  h2 { font-size: clamp(2rem, 3.7vw, 3.25rem); }
  .feature-flip { grid-template-columns: minmax(0, 1fr) min(50vw, 46rem); }
  .feature-flip .shot { grid-column: 2; }
  .feature-flip h2, .feature-flip .blurb { grid-column: 1; }
  .feature-flip .shot::after { background: linear-gradient(0deg, var(--fade) 0%, transparent 4%), linear-gradient(180deg, var(--fade) 0%, transparent 3%), linear-gradient(270deg, transparent 94%, var(--fade) 100%); }
  .fair { padding: 7rem 2rem 5rem; }
  .fair h2 { font-size: clamp(2rem, 3.7vw, 3.25rem); }
  .fair p { max-width: 44rem; font-size: clamp(1.125rem, 1.5vw, 1.3rem); }
  .soon { padding-top: 7rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}