/* Torchreave product page: the game's hearth-oil look. Cold blue-grey everywhere; amber is the only
   warm light and marks the one action. Fonts: Cinzel and Alegreya, SIL Open Font License 1.1 (fonts/OFL-*.txt). */
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("fonts/cinzel-latin.woff2") format("woff2"); }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("fonts/alegreya-latin.woff2") format("woff2"); }

:root {
  --night: #0c0d0f; --soot: #1a1c1e; --stone: #2d2f30; --slate: #455056; --ash: #7a8080;
  --fog: #8fa0a7; --fog-pale: #b7cad1;
  --bone: #ece4d4; --bone-dim: #b8b0a2;
  --amber: #d69c5c; --amber-hi: #f3c582;
  --title: "Cinzel", "Trajan Pro", Palatino, Georgia, serif;
  --text: "Alegreya", "Iowan Old Style", Palatino, Georgia, serif;
  --gut: clamp(18px, 5vw, 48px);
}

* { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--bone); font: 18px/1.5 var(--text);
  background: radial-gradient(ellipse at 50% 0, rgba(143, 160, 167, .08), transparent 70%), var(--night);
}
img { display: block; max-width: 100%; }
h1, h2 { font-family: var(--title); font-weight: 700; margin: 0; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.hero__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.hero::after {   /* the painting fades into the night below, so the title sits on dark */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(12, 13, 15, .35) 0, transparent 22%, transparent 42%, rgba(12, 13, 15, .82) 72%, var(--night) 100%),
    radial-gradient(ellipse at 50% 45%, transparent 50%, rgba(0, 0, 0, .55) 100%);
}
.hero__body {
  position: relative; z-index: 1; width: 100%; text-align: center;
  padding: 0 var(--gut) calc(40px + env(safe-area-inset-bottom));
}
.torch {
  display: block; width: 52px; height: 52px; margin: 0 auto 4px; background: var(--amber);
  -webkit-mask: url("ui/torch.webp") center / contain no-repeat; mask: url("ui/torch.webp") center / contain no-repeat;
  filter: drop-shadow(0 0 10px rgba(243, 197, 130, .7));
}
.logo {
  font-size: clamp(42px, 12.5vw, 112px); font-weight: 800; letter-spacing: .04em; line-height: 1;
  color: var(--bone);
  text-shadow: 0 0 28px rgba(214, 156, 92, .28), 0 2px 0 rgba(0, 0, 0, .6), 0 6px 24px rgba(0, 0, 0, .8);
}
.tagline {
  margin: 10px 0 26px; font: 600 clamp(14px, 3.6vw, 19px)/1.2 var(--title); letter-spacing: .2em; text-transform: uppercase; color: var(--fog-pale);
}
.hero__note { margin: 14px 0 0; font-size: 15px; color: var(--bone-dim); }

/* The one action: the game's painted amber plate. */
.play {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 60px; padding: 0 40px; min-width: min(300px, 100%);
  color: #23170e; font: 700 18px/1 var(--title); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  background: linear-gradient(rgba(255, 230, 180, .25), rgba(120, 60, 10, .25)), url("ui/umber.webp") center / 200px, var(--amber);
  background-blend-mode: normal, soft-light, normal;
  -webkit-mask: url("ui/plate.webp") center / 100% 100% no-repeat; mask: url("ui/plate.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 18px rgba(214, 156, 92, .45));
  transition: filter .12s, transform .08s;
}
.play:hover { filter: brightness(1.1) drop-shadow(0 0 22px rgba(243, 197, 130, .6)); }
.play:active { transform: translateY(1px) scale(.98); filter: brightness(.88); }
.play:focus-visible { outline: none; filter: brightness(1.2) drop-shadow(0 0 0 #fff) drop-shadow(0 0 14px var(--amber-hi)); }
.play__icon {
  width: 22px; height: 22px; background: currentColor;
  -webkit-mask: url("ui/torch.webp") center / contain no-repeat; mask: url("ui/torch.webp") center / contain no-repeat;
}

/* ---------- pitch ---------- */
.pitch { max-width: 40rem; margin: 0 auto; padding: 36px var(--gut) 8px; text-align: center; font-size: clamp(18px, 2.2vw, 21px); color: var(--bone); }
.pitch p { margin: 0 0 14px; }
.pitch p:first-child { font-style: italic; color: var(--fog-pale); }
.stroke {
  height: 8px; width: min(320px, 70%); margin: 30px auto 0; border: 0; background: var(--ash); opacity: .6;
  -webkit-mask: url("ui/stroke.webp") center / 100% 100% no-repeat; mask: url("ui/stroke.webp") center / 100% 100% no-repeat;
}

/* ---------- screenshots: phone screens in painted frames ---------- */
.shots {
  display: flex; gap: 18px; justify-content: center; padding: 40px var(--gut) 24px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.shots::-webkit-scrollbar { display: none; }
.shots figure {
  flex: none; margin: 0; width: clamp(200px, 22vw, 290px); scroll-snap-align: center;
  border: 6px solid transparent; border-image: url("ui/frame-ash.webp") 16 / 6px / 0 round;
  background: var(--soot); box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
}
.shots figure:nth-child(2) { border-image-source: url("ui/frame-amber.webp"); }
.shots img { width: 100%; height: auto; }

/* ---------- features ---------- */
.features {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(24px, 4vw, 56px);
  max-width: 1080px; margin: 0 auto; padding: 40px var(--gut);
}
.feat h2 { font-size: clamp(21px, 2.4vw, 26px); letter-spacing: .04em; margin: 16px 0 6px; color: var(--bone); }
.feat p { margin: 0; color: var(--bone-dim); font-size: 18px; }
.feat__art {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border: 6px solid transparent; border-image: url("ui/frame-ash.webp") 16 / 6px / 0 round;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .55);
}
.feat__art.is-square { object-position: 50% 35%; }
.feat__art.is-low { object-position: 50% 78%; }

/* ---------- foes: a row of cards ---------- */
.foes { padding: 32px 0 48px; text-align: center; }
.foes__title { font-size: clamp(20px, 2.6vw, 28px); letter-spacing: .06em; color: var(--fog-pale); padding: 0 var(--gut); }
.foes__row {
  display: flex; gap: 14px; justify-content: center; padding: 22px var(--gut) 6px;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
}
.foes__row::-webkit-scrollbar { display: none; }
.card {
  position: relative; flex: none; margin: 0; width: clamp(128px, 14vw, 168px); aspect-ratio: 5 / 7; overflow: hidden; scroll-snap-align: center;
  border: 5px solid transparent; border-image: url("ui/frame-ash.webp") 16 / 5px / 0 round; background: var(--soot);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .6);
}
.card.is-boss { border-image-source: url("ui/frame-amber.webp"); }
.card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.card figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 6px 9px;
  font: 700 13px/1.1 var(--title); letter-spacing: .06em; text-transform: uppercase; color: var(--bone);
  background: linear-gradient(transparent, rgba(12, 13, 15, .92) 60%);
}

/* ---------- finale ---------- */
.finale { position: relative; min-height: 70svh; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.finale__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.finale::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(var(--night) 0, transparent 30%, transparent 55%, rgba(12, 13, 15, .85) 85%, var(--night) 100%);
}
.finale__line {
  position: relative; z-index: 2; margin: 0; padding: 0 var(--gut) 48px; text-align: center;
  font: 700 clamp(20px, 3vw, 32px)/1.25 var(--title); letter-spacing: .05em; color: var(--bone);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .9);
}

.foot { padding: 20px var(--gut) calc(24px + env(safe-area-inset-bottom)); text-align: center; font-size: 14px; color: var(--ash); }

/* ---------- phone portrait ---------- */
@media (max-width: 640px) {
  .hero__art { object-position: 50% 30%; }
  .shots { justify-content: flex-start; padding-left: 15vw; padding-right: 15vw; }
  .shots figure { width: 70vw; }
  .features { grid-template-columns: 1fr; gap: 34px; }
  .foes__row { justify-content: flex-start; }
  .card { width: 40vw; }
}

/* ---------- short landscape screens (phone on its side) ---------- */
@media (orientation: landscape) and (max-height: 520px) {
  .hero { justify-content: flex-end; }
  .hero::after { background: linear-gradient(to right, transparent 35%, rgba(12, 13, 15, .78) 62%), linear-gradient(to bottom, transparent 55%, var(--night) 100%); }
  .hero__body { width: auto; text-align: right; padding-bottom: calc(22px + env(safe-area-inset-bottom)); padding-right: max(var(--gut), env(safe-area-inset-right)); }
  .torch { margin: 0 0 2px auto; width: 36px; height: 36px; }
  .logo { font-size: clamp(38px, 6.4vw, 64px); }
  .tagline { margin: 6px 0 16px; }
  .play { min-height: 52px; }
  .hero__note { font-size: 14px; margin-top: 10px; }
  .finale { min-height: 100svh; }
}

@media (min-width: 1024px) and (min-height: 700px) {
  .play { min-height: 66px; padding: 0 52px; font-size: 20px; }
}