/* ==========================================================================
   Battle Runes of Metalaria - the browser demo page.

   Loaded after index.css, which supplies the tokens, the nav, the footer and
   the buttons. Everything here is the stage: an itch.io iframe sized to the
   upload's 1280x740 player, plus the notes underneath.
   ========================================================================== */

/* The nav on this page is a page link rather than a scroll anchor, so it needs
   the state that index.css only ever gives the hovered one. */
.nav__link--current {
  color: var(--gold);
}

.nav__link--current::after {
  background: var(--gold);
  transform: scaleX(1);
}

.demo__head {
  margin-bottom: 34px;
}

/* ---------- The stage ---------------------------------------------------- */

/* itch.io's embed-upload player is 1280x740 (the game plus their footer).
   Keep that ratio so the iframe does not crop or letterbox as the shell
   narrows. */
.stage {
  aspect-ratio: 1280 / 740;
  background: #000;
  overflow: hidden;
  position: relative;
}

.stage__frame {
  border: 0;
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.stage__warn {
  align-items: flex-start;
  background: rgba(255, 90, 31, 0.09);
  border: 1px solid rgba(255, 90, 31, 0.32);
  color: var(--text);
  display: flex;
  font-size: 0.88rem;
  gap: 11px;
  line-height: 1.55;
  margin-top: 18px;
  padding: 13px 15px;
}

.stage__warn svg {
  color: var(--ember);
  flex: none;
  height: 19px;
  margin-top: 1px;
  width: 19px;
}

/* Desktop-only warning. Hidden on a real pointing device; shown on a phone
   or tablet where the build is likely to run out of memory. */
.stage__warn--mobile {
  display: none;
}

@media (max-width: 1023px) and (pointer: coarse) {
  .stage__warn--mobile {
    display: flex;
  }
}

/* ---------- Under the stage ---------------------------------------------- */

.stagebar {
  margin-top: 14px;
}

.stagebar a {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stagebar a:hover {
  color: var(--gold);
}

/* ---------- Notes -------------------------------------------------------- */

.demonotes {
  display: grid;
  gap: 18px;
  margin-top: 56px;
}

@media (min-width: 700px) {
  .demonotes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  .demonotes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.demonote {
  padding: 26px 24px 28px;
}

.demonote__icon {
  align-items: center;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  color: var(--accent);
  display: flex;
  height: 52px;
  justify-content: center;
  margin-bottom: 16px;
  width: 52px;
}

.demonote__icon svg {
  height: 26px;
  width: 26px;
}

.demonote h2 {
  font-size: 20px;
  margin-bottom: 10px;
}

.demonote p {
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.66;
}

.demonote a {
  color: var(--gold);
  text-decoration: underline;
}

/* ---------- Closing call ------------------------------------------------- */

.demo__cta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  justify-content: space-between;
  margin-top: 56px;
  padding: 34px 30px;
}

.demo__cta .lede {
  margin-bottom: 0;
}