/* ==========================================================================
   DUEL STONE — duel-stone.com
   --------------------------------------------------------------------------
   The palette and the display face are not chosen for the web; they are lifted
   out of the game so the two cannot drift:

     --ember  scripts/ui/wordmark.gd      EMBER  Color(1.0, 0.45, 0.13)
     --gold   scripts/ui/title_screen.gd  GOLD   Color("f4c542")
     --bone   scripts/ui/title_screen.gd  TXT    Color("eef1f6")
     fire/water/earth  scripts/ui/hud.gd  ELEM_COLOR
     Cinzel   assets/fonts/Cinzel.ttf — the actual wordmark face (OFL)

   Gold obeys the same discipline it does in-game: it marks the thing you press,
   and nothing else. Ember is for emphasis and heat; stone greys carry structure.
   ========================================================================== */

/* --------------------------------------------------------------- typefaces */
/* Self-hosted, subset in tools/build-fonts.py. No font CDN: the privacy policy
   promises no third-party requests, and that has to be true of this page too. */
@font-face {
  font-family: "Cinzel";
  src: url("../fonts/cinzel-var.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("../fonts/alegreya-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("../fonts/alegreya-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* ------------------------------------------------------------------ tokens */
:root {
  --ground: #07070a;
  --pitch: #0b0d12;
  --slab: #101319;
  --slab-lit: #171b23;
  --edge: rgba(255, 255, 255, 0.075);
  --edge-strong: rgba(255, 255, 255, 0.14);
  --shadow: rgba(0, 0, 0, 0.6);

  --bone: #eef1f6;
  --body: #c2c8d3;
  --dim: #878e9c;

  --ember: #ff7321;
  --ember-deep: #c2410c;
  --gold: #f4c542;

  --fire: #e8843c;
  --water: #3c8fe8;
  --earth: #5fae54;

  --display: "Cinzel", "Times New Roman", serif;
  --text: "Alegreya Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --shell: 70rem;
  --measure: 36rem;
  --band: clamp(3.5rem, 9vw, 6.5rem);
  --hair: 1px;
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--body);
  font-family: var(--text);
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.1875rem);
  line-height: 1.62;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--ember); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: #ff9350; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------- primitives */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 99;
  background: var(--gold);
  color: #14100a;
  padding: 0.7rem 1.1rem;
  font-weight: 700;
  border-radius: 0 0 3px 0;
}
.skip:focus { left: 0; }

/* An eyebrow that says what kind of thing follows, set the way the game sets a
   carved label: inscriptional caps, wide tracking, lit by one ember diamond —
   the diamond is the bundle's own carve (bundle_shape.gd carves a diamond). */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.9rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--dim);
}
.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  background: var(--ember);
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(255, 115, 33, 0.75);
}

.title {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.02em;
  color: var(--bone);
  margin: 0 0 0.85rem;
  font-size: clamp(1.65rem, 1.2rem + 2.1vw, 2.5rem);
  text-wrap: balance;
}

.lede {
  margin: 0 0 1.4rem;
  max-width: var(--measure);
  color: var(--body);
}

.fineprint {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--dim);
}

/* A slab: a panel of stone catching light on its top edge and sitting in its
   own shadow. Used instead of floating cards so the page reads as carved. */
.slab {
  position: relative;
  background: linear-gradient(180deg, var(--slab-lit), var(--slab) 62%);
  border: var(--hair) solid var(--edge);
  border-bottom-color: rgba(0, 0, 0, 0.8);
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.045) inset, 0 12px 28px -18px var(--shadow);
}

/* ------------------------------------------------------------------ header */
.topbar {
  position: relative;
  z-index: 3;
  border-bottom: var(--hair) solid rgba(255, 255, 255, 0.05);
  background: rgba(7, 7, 10, 0.82);
  backdrop-filter: blur(6px);
}
.topbar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.6rem;
}
.topbar__mark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.24em;
  color: var(--bone);
  text-decoration: none;
}
.topbar__mark:hover { color: var(--bone); }
.topbar__mark img { width: 22px; height: 22px; border-radius: 5px; }

.topbar__nav {
  display: flex;
  gap: clamp(0.9rem, 3vw, 1.6rem);
  font-size: 0.94rem;
}
.topbar__nav a {
  color: var(--dim);
  text-decoration: none;
}
.topbar__nav a:hover,
.topbar__nav a[aria-current="page"] { color: var(--bone); }

/* -------------------------------------------------------------------- hero */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 9vw, 5.5rem) clamp(3rem, 8vw, 5rem);
}

/* The one place with motion: embers drifting up out of the base of the mark,
   the same direction the in-game wordmark heats. Three blurred blooms, no
   canvas, no particles library, no per-frame JavaScript. */
.hero__heat {
  position: absolute;
  inset: -20% -10% -30%;
  pointer-events: none;
  background:
    radial-gradient(38vw 30vw at 22% 92%, rgba(255, 115, 33, 0.20), transparent 68%),
    radial-gradient(30vw 24vw at 78% 78%, rgba(194, 65, 12, 0.16), transparent 70%),
    radial-gradient(52vw 40vw at 50% 118%, rgba(255, 140, 60, 0.13), transparent 72%);
  animation: heat 19s ease-in-out infinite alternate;
}
@keyframes heat {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
  to   { transform: translate3d(0, -3.5%, 0) scale(1.07); opacity: 1; }
}

.hero__in {
  position: relative;
  display: grid;
  gap: clamp(2.25rem, 6vw, 3.5rem);
}

/* THE SIGNATURE ------------------------------------------------------------
   The headline is not typeset over the brand, it is made of it: the letterforms
   are filled with the arena's own stone texture and heated toward ember at the
   base, then rimmed in ember — the same three passes as the in-game shader
   (scripts/ui/wordmark.gd + assets/shaders/wordmark.gdshader). */
.wordmark {
  position: relative;
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3.4rem, 19vw, 8.5rem);
  line-height: 0.94;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--bone);
}
.wordmark span { display: block; }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .wordmark span {
    color: transparent;
    background-image:
      linear-gradient(180deg, rgba(255, 115, 33, 0) 36%, rgba(255, 115, 33, 0.92) 97%),
      url("../img/stone-tile.webp");
    background-size: auto, 46% auto;
    background-blend-mode: screen, normal;
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.85)) drop-shadow(0 0 26px rgba(255, 115, 33, 0.22));
  }
  /* The second word carries more heat — the mark reads as heating downward,
     which is how the game sets it. */
  .wordmark span + span {
    background-image:
      linear-gradient(180deg, rgba(255, 115, 33, 0.18) 14%, rgba(255, 100, 20, 1) 96%),
      url("../img/stone-tile.webp");
  }
}

.hero__hook {
  margin: 1.4rem 0 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.15rem, 0.95rem + 1vw, 1.5rem);
  letter-spacing: 0.12em;
  color: var(--bone);
}

.hero__blurb {
  margin: 1rem 0 0;
  max-width: 30rem;
}

/* The element trio, stated once. Fire, water and earth are the three pools the
   cubes charge — the pips are the legend for every accent used further down. */
.trio {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}
.trio li { display: flex; align-items: center; gap: 0.45rem; }
.trio i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 9px currentColor;
}
.trio .is-fire { color: var(--fire); }
.trio .is-water { color: var(--water); }
.trio .is-earth { color: var(--earth); }

/* ------------------------------------------------------------ store notice */
/* Deliberately NOT a lookalike of Google's badge. Google Play's brand
   guidelines allow only their own unmodified badge asset, so until the game is
   published this is plain type on stone. Swap in the official badge at launch —
   see README, "Store badge". */
.store {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2rem;
  padding: 0.9rem 1.15rem;
  max-width: 24rem;
  text-align: left;
}
.store__glyph {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 8px;
  border: var(--hair) solid var(--edge-strong);
}
.store__now {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.35;
  letter-spacing: 0.09em;
  color: var(--gold);
  text-transform: uppercase;
}
.store__then {
  display: block;
  font-size: 0.86rem;
  color: var(--dim);
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------ phone framing */
/* Portrait stills in a stone bezel rather than a glossy device mockup: the
   game is 720x1280 and pretending otherwise would crop the thing being shown. */
.phone {
  position: relative;
  margin: 0;
  padding: 6px;
  background: linear-gradient(160deg, #2b2e37, #101116 70%);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.9),
    0 26px 50px -30px rgba(0, 0, 0, 0.95),
    0 1px 0 rgba(255, 255, 255, 0.1) inset;
}
.phone img {
  width: 100%;
  border-radius: 9px;
  background: var(--pitch);
}
.phone figcaption {
  margin-top: 0.7rem;
  font-size: 0.84rem;
  color: var(--dim);
  text-align: center;
}

.hero__shot { max-width: 17.5rem; justify-self: center; }

@media (min-width: 56rem) {
  .hero__in {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
  }
  .hero__shot { max-width: 20rem; justify-self: end; }
}

/* ----------------------------------------------------------------- section */
.band { padding-block: var(--band); }
.band--edged { border-top: var(--hair) solid rgba(255, 255, 255, 0.055); }

.band__head { max-width: var(--measure); margin-bottom: clamp(2rem, 5vw, 3rem); }

/* ---------------------------------------------------------------- features */
.features {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 62rem) {
  .features { grid-template-columns: repeat(3, 1fr); gap: 2.25rem; }
}

.feature { display: grid; gap: 1.4rem; align-content: start; }
.feature__shot { max-width: 15rem; }
.feature__title {
  margin: 0 0 0.6rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.03em;
  color: var(--bone);
}
.feature__body { margin: 0; font-size: 0.99rem; }

/* A hairline in the element's colour, so the trio introduced in the hero keeps
   meaning something as you scroll. */
.feature__rule {
  width: 3.2rem;
  height: 2px;
  margin-bottom: 1.05rem;
  border-radius: 2px;
}
.feature--fire .feature__rule { background: var(--fire); box-shadow: 0 0 12px rgba(232, 132, 60, 0.6); }
.feature--water .feature__rule { background: var(--water); box-shadow: 0 0 12px rgba(60, 143, 232, 0.6); }
.feature--earth .feature__rule { background: var(--earth); box-shadow: 0 0 12px rgba(95, 174, 84, 0.6); }

@media (min-width: 40rem) and (max-width: 61.99rem) {
  .feature { grid-template-columns: 15rem minmax(0, 1fr); align-items: center; }
}

/* -------------------------------------------------------------------- gallery */
/* Scrolls sideways on a phone, grids out on a desktop. The scroll container is
   the only thing that scrolls horizontally — the page body never does. */
.gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 62vw;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: #2a2d36 transparent;
}
.gallery > * { scroll-snap-align: center; }

@media (min-width: 48rem) {
  .gallery {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    gap: 1.25rem;
  }
}

/* --------------------------------------------------------------- the pledge */
/* The differentiator, so it gets the plainest treatment on the page: no card,
   no icon set, no gradient. Three claims and the reason they are checkable. */
.pledge { border-left: 2px solid var(--ember); padding-left: clamp(1.1rem, 4vw, 2rem); }
.pledge__list {
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.9rem;
}
.pledge__list li {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.35rem);
  letter-spacing: 0.03em;
  color: var(--bone);
}
.pledge__list span { display: block; font-family: var(--text); font-weight: 400; font-size: 0.95rem; letter-spacing: 0; color: var(--dim); }

/* ------------------------------------------------------------------ footer */
.foot {
  border-top: var(--hair) solid rgba(255, 255, 255, 0.055);
  padding-block: 2.75rem 3.25rem;
  font-size: 0.92rem;
  color: var(--dim);
}
.foot__in { display: grid; gap: 1.5rem; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; }
.foot__nav a { color: var(--body); text-decoration: none; }
.foot__nav a:hover { color: var(--bone); text-decoration: underline; }
.foot__legal { margin: 0; }

@media (min-width: 44rem) {
  .foot__in { grid-template-columns: 1fr auto; align-items: center; }
  .foot__legal { text-align: right; }
}

/* ------------------------------------------------------------------- prose */
/* Long-form pages: privacy and credits. */
.prose { max-width: 44rem; }
.prose__h2 {
  margin: 2.75rem 0 0.85rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  letter-spacing: 0.02em;
  color: var(--bone);
}
.prose__h3 {
  margin: 2rem 0 0.6rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: 0.04em;
  color: var(--bone);
}
.prose p { margin: 0 0 1.05rem; }
.prose ul { margin: 0 0 1.2rem; padding-left: 1.15rem; }
.prose li { margin-bottom: 0.5rem; }
.prose li::marker { color: var(--ember); }

.stamp {
  display: inline-block;
  margin-bottom: 2rem;
  padding: 0.55rem 0.9rem;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--body);
}
.stamp b { color: var(--bone); font-weight: 700; }

/* Credits: one row per asset, grouped by licence. */
.credit-group { margin-bottom: 2.5rem; }
.credit-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.1rem; }
.credit-list li {
  display: grid;
  gap: 0.15rem;
  padding: 0.8rem 0;
  border-bottom: var(--hair) solid rgba(255, 255, 255, 0.05);
  margin: 0;
}
.credit-list b { color: var(--bone); font-weight: 700; }
.credit-list small { color: var(--dim); font-size: 0.87rem; }
.licence {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.05rem 0.45rem;
  border: var(--hair) solid var(--edge-strong);
  border-radius: 2px;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
  vertical-align: 0.12em;
}

/* --------------------------------------------------------------------- 404 */
.lost {
  min-height: 72vh;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 1.1rem;
  padding-block: 4rem;
}
.lost__mark { width: 88px; height: 88px; margin-inline: auto; opacity: 0.9; }
.lost__code {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3rem, 14vw, 5rem);
  letter-spacing: 0.1em;
  color: var(--bone);
}
.lost__line { margin: 0; color: var(--body); }

/* ------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__heat { animation: none; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}