/* Beyond The Gate download page: the game's forged theme (ui/ornate.gd) on the web.
   Kit pieces are cut from godot/assets/ui/ui_kit.png by tools/build_web.py (2x art). */
@font-face { font-family: "Jacquarda"; src: url("fonts/JacquardaBastarda9-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Pixelify"; src: url("fonts/PixelifySans.ttf") format("truetype"); font-display: swap; }

:root {
  --iron: #41362e;
  --iron-hi: #836d59;
  --gold: #efc25c;
  --gold-dk: #7a4c16;
  --parch: #ead9b0;
  --ink: #0c0907;
  --fill: #16110e;
  --well: #0b0807;
  --crimson: #8e2b25;
}

* { box-sizing: border-box; }
html { background: var(--well); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--parch);
  font: 18px/1.5 "Pixelify", system-ui, sans-serif;
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(239, 194, 92, 0.13), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 40%, transparent 40%, rgba(0, 0, 0, 0.75)),
    var(--well);
  image-rendering: pixelated;
  -webkit-font-smoothing: antialiased;
}

main { max-width: 1040px; margin: 0 auto; padding: 56px 16px 40px; }

/* Title block */
.hero { text-align: center; }
.eyebrow {
  margin: 0 0 6px;
  font-size: 15px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--iron-hi);
}
h1 {
  margin: 0;
  font: normal 90px/1 "Jacquarda", serif;  /* the blackletter is crisp at multiples of 9 px */
  color: var(--gold);
  text-shadow: 0 4px 0 var(--gold-dk), 0 8px 0 var(--ink), 0 0 40px rgba(239, 194, 92, 0.25);
}
.rule { display: flex; align-items: center; gap: 12px; width: min(420px, 80%); margin: 22px auto 18px; }
.rule span { flex: 1; height: 2px; background: linear-gradient(90deg, transparent, var(--gold-dk) 30%, var(--gold) 50%, var(--gold-dk) 70%, transparent); }
.rule img { width: 21px; height: 21px; }
.tagline { max-width: 640px; margin: 0 auto 30px; color: rgba(234, 217, 176, 0.85); }

/* The gold button: the kit's btn_gold nine-patch */
.btn-gold {
  display: inline-block;
  padding: 0 22px 2px;
  font: normal 36px/1 "Jacquarda", serif;
  color: var(--ink);
  text-decoration: none;
  border: 20px solid transparent;
  border-image: url("img/kit-btn-gold.png") 10 fill / 20px stretch;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.55));
  transition: transform 80ms ease-out;
}
.btn-gold:hover, .btn-gold:focus-visible { border-image-source: url("img/kit-btn-gold-hover.png"); outline: none; }
.btn-gold:active { transform: translateY(2px); filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.55)); }
/* The second download: the kit's iron button, same height as the gold one */
.downloads { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; }
.btn-iron {
  display: inline-block;
  padding: 0 14px 2px;
  font: normal 36px/1 "Jacquarda", serif;
  color: var(--gold);
  text-decoration: none;
  border: 20px solid transparent;
  border-image: url("img/kit-btn.png") 10 fill / 20px stretch;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.55));
  transition: transform 80ms ease-out;
}
.btn-iron:hover, .btn-iron:focus-visible { border-image-source: url("img/kit-btn-hover.png"); outline: none; }
.btn-iron:active { transform: translateY(2px); filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.55)); }
.howto h3 { margin: 14px 0 4px; font: normal 27px/1.1 "Jacquarda", serif; color: var(--gold); text-shadow: 0 2px 0 var(--ink); }
.meta { margin: 14px 0 0; font-size: 15px; color: var(--iron-hi); }

/* Framed panels: the kit's iron panel with gold corner brackets */
.frame {
  border: 24px solid transparent;
  border-image: url("img/kit-panel.png") 24 fill / 24px stretch;
  image-rendering: pixelated;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.6));
}
.shot { margin: 48px 0 0; padding: 0; }
.shot img { display: block; width: 100%; height: auto; image-rendering: auto; border: 2px solid var(--ink); }

.plaques { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 34px 0; }
.plaque {
  padding: 4px 6px 8px;
  border: 12px solid transparent;
  border-image: url("img/kit-plaque.png") 12 fill / 12px stretch;
  image-rendering: pixelated;
}
h2 {
  margin: 0 0 8px;
  font: normal 36px/1.1 "Jacquarda", serif;
  color: var(--gold);
  text-shadow: 0 2px 0 var(--ink);
}
.plaque p { margin: 0; font-size: 16px; color: rgba(234, 217, 176, 0.82); }

.howto { padding: 4px 10px 6px; }
.howto ol { margin: 0; padding-left: 22px; }
.howto li { margin: 4px 0; }
.howto li::marker { color: var(--gold); }
.howto b { color: var(--gold); font-weight: 600; }

footer { margin-top: 30px; text-align: center; font-size: 14px; color: var(--iron-hi); }

@media (max-width: 760px) {
  main { padding-top: 36px; }
  h1 { font-size: 54px; }
  .btn-gold, .btn-iron { font-size: 27px; padding: 0 8px 2px; white-space: nowrap; }
  .plaques { grid-template-columns: 1fr; }
  .shot { margin-top: 32px; }
  .frame { border-width: 16px; border-image-width: 16px; }
}
@media (max-width: 440px) {
  h1 { font-size: 36px; text-shadow: 0 3px 0 var(--gold-dk), 0 6px 0 var(--ink); }
  .eyebrow { font-size: 12px; letter-spacing: 0.2em; }
  .tagline { font-size: 16px; }
  .btn-gold, .btn-iron { font-size: 22px; border-width: 14px; border-image-width: 14px; }
}