/* ==========================================================================
   Adventure in Hender's Castle — site styles
   Sections in document order: base, hero, about (#features), gallery
   (#gallery), closing CTA, footer, keyframes, responsive.
   ========================================================================== */

:root {
  --night: #060a1d;
  --deep: #0b1233;
  --gold: #ffc819;
  --gold-soft: #ffe27a;
  --ink: #1a1508;
  --parchment: #f2e9d4;
  --text: #e8e4d8;
  --text-bright: #dde2f5;
  --text-muted: #b8c0dd;
  --text-dim: #a9b3d8;
  --text-faint: #7c86ad;
  --serif: 'Averia Serif Libre', serif;
  --sans: 'Alegreya Sans', sans-serif;
  --glow-shadow: 0 2px 12px rgba(6, 10, 29, .8);
}

/* --- base ---------------------------------------------------------------- */

html, body {
  margin: 0;
  padding: 0;
  background: var(--night);
}

body {
  font-family: var(--sans);
  color: var(--text);
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-soft); }

::selection { background: var(--gold); color: #0a1130; }

h2 {
  font-family: var(--serif);
  font-size: 38px;
  line-height: 1.15;
  color: var(--parchment);
  text-wrap: pretty;
}

.page {
  background: var(--night);
  min-width: 320px;
}

/* Eyebrow label above a section heading. */
.eyebrow {
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

/* Primary "Wishlist on Steam" button; .cta--pulse is toggled by the ctaPulse prop. */
.cta {
  display: inline-block;
  position: relative;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 19px;
  padding: 16px 34px;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .5);
  transition: all .15s ease;
}

.cta:hover {
  background: var(--gold-soft);
  color: var(--ink);
  transform: translateY(-2px);
}

.cta--pulse { animation: ctaPulse 2.6s ease-in-out infinite; }

/* Full-bleed layer for drifting embers; one per atmospheric section. */
.embers {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Individual ember. Position, size, colour and timing come from makeEmbers(). */
.ember {
  position: absolute;
  bottom: -8px;
  border-radius: 50%;
  opacity: 0;
}

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

.hero {
  position: relative;
  overflow: hidden;
  min-height: 78vh;
  display: flex;
  align-items: center;
  padding: 56px 24px 0;
  background: radial-gradient(ellipse 120% 80% at 50% -10%,
    #1c2e6e 0%, #12204f 35%, #0a1233 65%, var(--night) 100%);
}

/* Language selector, overlaid on the hero's top corner. First in the DOM so it
   comes early in the tab order; z-index lifts it over the video and scrims.
   The chevron is an inline data: URI so the control stays self-contained. */
.lang-select {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 2;
  appearance: none;
  padding: 7px 32px 7px 14px;
  border: 1px solid rgba(255, 200, 25, .28);
  border-radius: 999px;
  background-color: rgba(6, 10, 29, .55);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffc819' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  backdrop-filter: blur(6px);
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}

.lang-select:hover {
  border-color: rgba(255, 200, 25, .55);
  color: var(--gold-soft);
}

.lang-select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Windows and Linux draw the open dropdown using the select's own colours, and
   a translucent background leaves the list unreadable there. macOS ignores it. */
.lang-select option {
  background: var(--deep);
  color: var(--text);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Two scrims over the hero video: sideways for text contrast, downward to
   blend into the next section. */
.hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-scrim--side {
  background: linear-gradient(90deg,
    rgba(6, 10, 29, .72) 0%, rgba(6, 10, 29, .42) 45%, rgba(6, 10, 29, .15) 100%);
}

.hero-scrim--bottom {
  background: linear-gradient(180deg,
    rgba(6, 10, 29, .45) 0%, transparent 22%, transparent 58%, rgba(6, 10, 29, 1) 100%);
}

/* Fallback backdrop when no hero video is set. */
.starfield {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: twinkle 5s ease-in-out infinite;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff 60%, transparent),
    radial-gradient(1px 1px at 28% 12%, #dfe8ff 60%, transparent),
    radial-gradient(2px 2px at 44% 30%, #fff 60%, transparent),
    radial-gradient(1px 1px at 62% 8%, #dfe8ff 60%, transparent),
    radial-gradient(1.5px 1.5px at 78% 24%, #fff 60%, transparent),
    radial-gradient(1px 1px at 90% 14%, #dfe8ff 60%, transparent),
    radial-gradient(1px 1px at 8% 48%, #b9c8ff 60%, transparent),
    radial-gradient(1.5px 1.5px at 93% 42%, #fff 60%, transparent),
    radial-gradient(1px 1px at 70% 40%, #b9c8ff 60%, transparent),
    radial-gradient(1px 1px at 35% 52%, #dfe8ff 60%, transparent);
}

.wisp {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.wisp--red {
  top: 12%;
  right: 6%;
  width: 420px;
  height: 240px;
  background: radial-gradient(closest-side, rgba(255, 46, 63, .38), transparent 70%);
  filter: blur(30px);
  animation: wispA 11s ease-in-out infinite;
}

.wisp--ember {
  top: 34%;
  right: 22%;
  width: 300px;
  height: 160px;
  background: radial-gradient(closest-side, rgba(255, 80, 60, .28), transparent 70%);
  filter: blur(26px);
  animation: wispB 14s ease-in-out infinite;
}

.wisp--blue {
  bottom: 18%;
  left: 8%;
  width: 340px;
  height: 180px;
  background: radial-gradient(closest-side, rgba(120, 150, 255, .16), transparent 70%);
  filter: blur(34px);
  animation: wispB 17s ease-in-out infinite;
}

/* Editor-only hint marking where the menu video goes. */
.dropzone {
  position: absolute;
  bottom: 18px;
  right: 22px;
  font-family: monospace;
  font-size: 12px;
  color: #5c6790;
  border: 1px dashed #3a4470;
  border-radius: 4px;
  padding: 5px 10px;
}

.hero-content {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.hero-logo {
  width: min(430px, 72vw);
  height: auto;
  filter: drop-shadow(0 6px 30px rgba(0, 0, 0, .6));
  animation: bob 6s ease-in-out infinite;
}

.hero-tagline {
  max-width: 520px;
  margin: 0;
  font-size: 21px;
  line-height: 1.5;
  color: var(--text-bright);
  text-shadow: var(--glow-shadow);
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 8px;
}

.hero-release {
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-shadow: var(--glow-shadow);
}

/* --- about the game ----------------------------------------------------- */

#features {
  padding: 40px 32px;
  background: linear-gradient(180deg,
    var(--night) 0%, var(--deep) 26%, var(--deep) 80%, var(--night) 100%);
}

#features h2 { margin: 0 0 18px; }

#features p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 26px;
  text-wrap: pretty;
}

#features ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-bright);
}

#features li {
  display: flex;
  gap: 12px;
}

#features li::before {
  content: "\2726";
  color: var(--gold);
}

.about-grid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
}

.trailer {
  position: relative;
  top: -8em;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 200, 25, .35);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}

.trailer iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- gallery ------------------------------------------------------------ */

#gallery {
  max-width: 1160px;
  margin: 0 auto;
  padding: 96px 32px;
}

#gallery h2 {
  font-size: 40px;
  text-align: center;
  margin: 0 0 48px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.gallery-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .08);
  cursor: zoom-in;
}

.gallery-grid img:hover {
  border-color: rgba(255, 200, 25, .6);
  transform: scale(1.015);
}

/* --- lightbox ----------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 90px;
  background: rgba(4, 7, 20, .92);
  cursor: zoom-out;
}

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .8);
  cursor: default;
}

.lightbox button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(10, 17, 48, .8);
  line-height: 1;
  cursor: pointer;
}

/* Previous / next arrows. */
.lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 200, 25, .5);
  color: var(--gold);
  font-size: 24px;
}

.lightbox-nav:hover {
  background: var(--gold);
  color: var(--ink);
}

.lightbox-prev { left: 22px; }
.lightbox-next { right: 22px; }

.lightbox-close {
  top: 22px;
  right: 22px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .25);
  color: var(--text);
  font-size: 18px;
}

.lightbox-close:hover { background: rgba(255, 255, 255, .15); }

.lightbox-counter {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: .14em;
  color: var(--text-dim);
}

/* --- closing call to action --------------------------------------------- */

.closing {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 110px 32px;
  background: radial-gradient(ellipse 90% 100% at 50% 115%,
    #8a3a10 0%, #4a1a08 40%, #1a0d10 70%, var(--night) 100%);
}

/* Two offset glows read as one flickering fire below the fold. */
.flame {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.flame--wide {
  background: radial-gradient(ellipse 70% 80% at 50% 118%,
    rgba(255, 150, 40, .6) 0%, rgba(220, 80, 20, .3) 45%, transparent 75%);
  animation: flameGlow 3.2s ease-in-out infinite;
}

.flame--offset {
  background: radial-gradient(ellipse 55% 60% at 38% 120%,
    rgba(255, 110, 30, .45) 0%, transparent 70%);
  animation: flameGlow 4.4s ease-in-out infinite 1.3s;
}

.closing h2 {
  position: relative;
  margin: 0 0 14px;
}

.closing p {
  position: relative;
  font-size: 19px;
  color: var(--text-muted);
  margin: 0 0 32px;
}

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

footer {
  border-top: 1px solid rgba(255, 200, 25, .14);
  padding: 44px 32px 56px;
}

.footer-inner {
  max-width: 1080px;
  margin: 0 auto;
}

.studio {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--parchment);
  margin-bottom: 6px;
}

.copyright {
  font-size: 14px;
  color: var(--text-faint);
}

/* --- keyframes ---------------------------------------------------------- */

@keyframes wispA {
  0%   { transform: translate(0, 0) scale(1); opacity: .5; }
  50%  { transform: translate(60px, -40px) scale(1.25); opacity: .8; }
  100% { transform: translate(0, 0) scale(1); opacity: .5; }
}

@keyframes wispB {
  0%   { transform: translate(0, 0) scale(1.1); opacity: .35; }
  50%  { transform: translate(-70px, 30px) scale(.9); opacity: .6; }
  100% { transform: translate(0, 0) scale(1.1); opacity: .35; }
}

@keyframes twinkle {
  0%, 100% { opacity: .9; }
  50%      { opacity: .35; }
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

@keyframes emberRise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  8%   { opacity: 1; }
  55%  { transform: translateY(-45vh) translateX(14px); }
  100% { transform: translateY(-88vh) translateX(-10px); opacity: 0; }
}

@keyframes flameGlow {
  0%, 100% { opacity: .35; filter: hue-rotate(0deg) saturate(1); }
  25%      { opacity: .8;  filter: hue-rotate(22deg) saturate(1.25); }
  50%      { opacity: .5;  filter: hue-rotate(8deg) saturate(1.05); }
  75%      { opacity: .75; filter: hue-rotate(30deg) saturate(1.35); }
}

@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 200, 25, .45), 0 4px 24px rgba(0, 0, 0, .5); }
  50%      { box-shadow: 0 0 0 12px rgba(255, 200, 25, 0), 0 4px 24px rgba(0, 0, 0, .5); }
}

/* ==========================================================================
   Responsive — additive only. Every rule below sits inside a media query, so
   the desktop layout above is untouched.
   900px: the two-column layouts collapse.  620px: phone type and spacing.
   ========================================================================== */

@media (max-width: 900px) {

  /* The hero is centred in 78vh of space, so a short column leaves a dead
     band above the next section. Let the content set the height instead and
     tighten both sides of the seam. svh keeps mobile browser toolbars from
     inflating it. */
  .hero {
    min-height: 60vh;
    min-height: 60svh;
    padding: 40px 20px 28px;
  }

  #features { padding: 24px 20px 40px; }

  /* One column, trailer first. `top` must reset — the desktop -8em lift would
     drag the trailer up into the hero once it is the leading element. */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .trailer {
    top: 0;
    order: -1;
  }

  #gallery { padding: 56px 20px; }

  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* A gallery image already fills the content width here, so the lightbox has
     nothing larger to show. Refusing pointer events stops the tap from
     reaching its onClick, which switches the lightbox off without touching
     the logic script. */
  .gallery-grid img {
    cursor: default;
    pointer-events: none;
  }

  .closing { padding: 72px 20px; }

  footer { padding: 32px 20px 40px; }
}

@media (max-width: 620px) {

  .hero { padding: 32px 18px 24px; }

  .lang-select {
    top: 12px;
    right: 14px;
    padding: 6px 28px 6px 11px;
    font-size: 12px;
    background-position: right 10px center;
  }

  .hero-tagline { font-size: 19px; }

  .hero-release {
    font-size: 14px;
    letter-spacing: .1em;
  }

  .cta {
    font-size: 18px;
    padding: 15px 26px;
  }

  h2 { font-size: 30px; }

  #features { padding: 20px 18px 32px; }

  #features p {
    font-size: 17px;
    margin: 0 0 20px;
  }

  #features ul { font-size: 16px; }

  #gallery { padding: 44px 18px; }

  #gallery h2 {
    font-size: 32px;
    margin: 0 0 28px;
  }

  .closing { padding: 64px 18px; }

  .closing p { font-size: 17px; }

  footer { padding: 28px 18px 36px; }

  /* Taps cannot open the lightbox at this width (see above), so these only
     matter when a desktop window is narrowed while it is already open. The
     arrows move down beside the counter instead of sitting over the picture,
     which returns the 90px of side padding they needed to the image. */
  .lightbox { padding: 48px 12px 96px; }

  .lightbox-nav {
    top: auto;
    bottom: 20px;
    transform: none;
  }

  .lightbox-prev { left: calc(50% - 96px); }

  .lightbox-next {
    left: auto;
    right: calc(50% - 96px);
  }

  .lightbox-counter { bottom: 38px; }
}

/* Touch devices have no pointer to leave, so a tapped element keeps its hover
   state until something else is tapped. Desktop is unaffected. */
@media (hover: none) {
  .cta:hover {
    background: var(--gold);
    transform: none;
  }

  .gallery-grid img:hover {
    border-color: rgba(255, 255, 255, .08);
    transform: none;
  }
}

/* Honour an explicit OS-level request for less motion. */
@media (prefers-reduced-motion: reduce) {
  .cta--pulse,
  .hero-logo,
  .starfield,
  .wisp,
  .flame,
  .ember {
    animation: none;
  }

  .ember { opacity: .55; }
}