/* Cinzel — Trajan-like display (AoE title feel) */
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Cinzel-Latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Cinzel-LatinExt-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/Cinzel-Latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/Cinzel-LatinExt-600.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/Cinzel-Latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/Cinzel-LatinExt-700.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/SourceSerif4-Latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/SourceSerif4-LatinExt-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/SourceSerif4-Latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/SourceSerif4-LatinExt-600.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;
  --wood: #2a1a10;
  --wood-deep: #160e08;
  --wood-edge: #5a3a22;
  --plank: #3d2818;
  --parchment: #e6d4a8;
  --parchment-deep: #cbb888;
  --ink: #1c120a;
  --ink-soft: #3a2a1c;
  --gold: #e0b44a;
  --gold-deep: #b8892a;
  --gold-bright: #f0d078;
  --crimson: #8a1f1c;
  --mist: #d8c9a4;
  --muted: #a8926c;
  --focus: #e0b44a;
  --font-display: "Cinzel", "Palatino Linotype", Palatino, serif;
  --font-body: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  font-family: var(--font-body);
  background: var(--wood-deep);
  color: var(--parchment);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  background: var(--wood-deep);
  color: var(--parchment);
}

/* Full-bleed FE menu atmosphere */
.stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--wood-deep);
}

.stage-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  transform: scale(1.04);
  animation: stage-drift 28s var(--ease) infinite alternate;
  filter: saturate(1.05) contrast(1.04);
}

.stage-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg,
      rgba(12, 7, 4, .88) 0%,
      rgba(18, 10, 6, .72) 32%,
      rgba(22, 12, 8, .45) 58%,
      rgba(14, 8, 5, .55) 100%),
    radial-gradient(70% 55% at 70% 35%, transparent 0%, rgba(8, 4, 2, .35) 100%);
  animation: veil-breathe 16s var(--ease) infinite alternate;
}

.stage-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.65'/%3E%3C/svg%3E");
}

@keyframes stage-drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.08) translate3d(-1.2%, -0.6%, 0); }
}

@keyframes veil-breathe {
  from { opacity: .92; }
  to { opacity: 1; }
}

@keyframes hero-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes gold-pulse {
  from { text-shadow: 0 0 12px rgba(224, 180, 74, .15), 0 2px 0 rgba(0,0,0,.55); }
  to { text-shadow: 0 0 22px rgba(240, 208, 120, .35), 0 2px 0 rgba(0,0,0,.55); }
}

main {
  width: min(960px, 100%);
  margin: 0 auto;
  padding: clamp(40px, 9vh, 88px) clamp(18px, 4vw, 36px) 56px;
  position: relative;
  z-index: 2;
}

.hero {
  min-height: min(82vh, 820px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 34rem;
  padding-bottom: 40px;
  animation: hero-in .85s var(--ease) both;
}

.brand {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.6rem, 12vw, 7.4rem);
  line-height: .9;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-shadow:
    0 2px 0 rgba(0, 0, 0, .65),
    0 0 28px rgba(224, 180, 74, .25);
  animation: hero-in .85s var(--ease) .04s both, gold-pulse 7s var(--ease) infinite alternate;
}

.product {
  margin: .7rem 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .7);
  animation: hero-in .85s var(--ease) .1s both;
}

.hero h1 {
  margin: 1.4rem 0 0;
  max-width: 16ch;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.55rem, 3.6vw, 2.35rem);
  line-height: 1.2;
  letter-spacing: .02em;
  color: var(--parchment);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
  animation: hero-in .85s var(--ease) .16s both;
}

.lede {
  margin: 1rem 0 0;
  max-width: 32ch;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  line-height: 1.5;
  color: var(--mist);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
  animation: hero-in .85s var(--ease) .22s both;
}

.cta {
  margin-top: 1.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  animation: hero-in .85s var(--ease) .28s both;
}

.aside {
  margin: 1.2rem 0 0;
  max-width: 40ch;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--muted);
  animation: hero-in .85s var(--ease) .34s both;
}

/* Wooden plank buttons — AoE menu feel */
.button,
button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border: 2px solid var(--gold-deep);
  border-radius: 2px;
  padding: .95rem 1.4rem;
  font: 600 1rem/1.2 var(--font-display);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: transform .2s var(--ease), filter .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}

.button.primary,
form button[type="submit"] {
  background:
    linear-gradient(180deg, #5a3a22 0%, var(--plank) 42%, #24160c 100%);
  color: var(--gold-bright);
  box-shadow:
    inset 0 1px 0 rgba(240, 208, 120, .28),
    inset 0 -2px 0 rgba(0, 0, 0, .45),
    0 10px 28px rgba(0, 0, 0, .4);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .65);
}

.button.primary:hover,
form button[type="submit"]:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(240, 208, 120, .4),
    0 0 0 1px var(--gold),
    0 14px 32px rgba(0, 0, 0, .45);
}

button.secondary {
  background: transparent;
  color: var(--parchment);
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
  padding: .65rem 1rem;
  font-size: .85rem;
  letter-spacing: .04em;
}

button.secondary:hover {
  background: color-mix(in srgb, var(--wood) 55%, transparent);
  border-color: var(--gold);
}

/* Sync — parchment panel over map art (interaction container) */
.sync {
  margin-top: 12px;
}

.sync-frame {
  position: relative;
  overflow: hidden;
  border: 3px solid var(--wood-edge);
  border-radius: 2px;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent),
    0 18px 40px rgba(0, 0, 0, .45);
  background: var(--wood);
}

.sync-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .22;
  filter: sepia(.35) saturate(.7);
  pointer-events: none;
}

.sync details {
  position: relative;
  z-index: 1;
  border: 0;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--parchment) 92%, white) 0%,
      var(--parchment) 55%,
      var(--parchment-deep) 100%);
  color: var(--ink);
  padding: 1.1rem 1.25rem 1.35rem;
  margin: 10px;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  box-shadow: inset 0 0 40px rgba(90, 60, 20, .12);
}

.sync summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink);
  padding: .2rem 0;
}

.sync summary::-webkit-details-marker { display: none; }

.sync summary span {
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-left: .35rem;
  opacity: .75;
}

.sync summary::after {
  content: "+";
  float: right;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--gold-deep);
}

.sync details[open] summary::after { content: "–"; }

.sync section {
  margin-top: 1.15rem;
  max-width: 420px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.sync h2,
.sync h3 {
  margin: 0 0 .9rem;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--ink);
}

.sync h2 { font-size: 1.2rem; }
.sync h3 { margin-top: 1.6rem; font-size: 1.05rem; }

label {
  display: block;
  margin: 1rem 0 .4rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink-soft);
}

input {
  width: 100%;
  padding: .85rem .95rem;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 2px;
  background: color-mix(in srgb, var(--parchment) 70%, white);
  color: var(--ink);
  font: 600 1rem var(--font-body);
}

input:focus {
  border-color: var(--gold-deep);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 35%, transparent);
}

.sync .button.primary,
.sync form button[type="submit"] {
  margin-top: .85rem;
}

.hint {
  margin-top: 1rem;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

footer {
  margin: 2.5rem 0 1rem;
  padding-top: 1.4rem;
  border-top: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  font-size: .92rem;
  line-height: 1.6;
  color: var(--muted);
  display: grid;
  gap: 1rem;
  max-width: 42rem;
}

.footer-brands {
  width: min(220px, 55vw);
  height: auto;
  opacity: .92;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .45));
}

code {
  display: block;
  padding: 1rem;
  margin: .85rem 0;
  background: color-mix(in srgb, var(--ink) 8%, var(--parchment));
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 2px;
  overflow-wrap: anywhere;
  user-select: all;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: .92rem;
  color: var(--ink);
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.row h2 { margin: 0; }
.row button { margin-top: 0; }

.save {
  border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  padding: .95rem 0;
  color: var(--ink);
}

.save small {
  display: block;
  color: var(--ink-soft);
  margin: .25rem 0 .5rem;
}

.save button { margin-right: .5rem; }

#notice {
  min-height: 1.5rem;
  margin-top: 1.1rem;
  line-height: 1.5;
  color: var(--gold-bright);
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

output {
  display: block;
  overflow-wrap: anywhere;
  margin-top: .85rem;
  font-size: .92rem;
  color: var(--ink-soft);
}

[hidden] { display: none !important; }

button:disabled {
  opacity: .6;
  cursor: wait;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .hero {
    min-height: auto;
    padding-top: 8px;
    padding-bottom: 32px;
  }

  .brand {
    font-size: clamp(2.9rem, 17vw, 4.4rem);
  }

  .cta .button {
    width: 100%;
  }

  .sync details {
    margin: 8px;
    padding: 1rem;
  }

  .sync summary::after {
    float: none;
    margin-left: .5rem;
  }

  .stage-art {
    object-position: 55% 18%;
  }

  .stage-veil {
    background:
      linear-gradient(180deg,
        rgba(10, 6, 3, .78) 0%,
        rgba(14, 8, 5, .7) 45%,
        rgba(12, 7, 4, .82) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}