/* Google Fonts typefaces are self-hosted under the SIL Open Font License for offline play. */
@font-face { font-family: 'MedievalSharp'; src: url('../assets/fonts/medievalsharp-latin-400-normal.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Crimson Text'; src: url('../assets/fonts/crimson-text-latin-400-normal.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Crimson Text'; src: url('../assets/fonts/crimson-text-latin-400-italic.woff2') format('woff2'); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Crimson Text'; src: url('../assets/fonts/crimson-text-latin-600-normal.woff2') format('woff2'); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: 'Crimson Text'; src: url('../assets/fonts/crimson-text-latin-700-normal.woff2') format('woff2'); font-style: normal; font-weight: 700; font-display: swap; }

:root {
  color-scheme: dark;
  --ink: #1a0a00;
  --wood: #8b4513;
  --gold: #d4a843;
  --leather: #2c1810;
  --parchment: #f5e6c8;
  --ivory: #fff4d9;
  --gold-light: #f1d384;
  --ash: #b9a990;
  --line: rgba(212, 168, 67, .3);
  --shadow: 0 24px 70px rgba(6, 3, 2, .57);
  --space-1: .375rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --font-body: 'Crimson Text', Georgia, serif;
  --font-display: 'MedievalSharp', Georgia, serif;
  --ease: cubic-bezier(.18, .72, .25, 1);
  --fast: 180ms;
  --medium: 400ms;
  font-family: var(--font-body);
  font-size: 16px;
}

:root[data-text-scale='large'] { font-size: 18px; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--ink); color: var(--parchment); font-size: 1.0625rem; line-height: 1.45; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
img, svg, canvas { max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3 { margin-top: 0; }
[hidden] { display: none !important; }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }

.skip-link { position: fixed; top: .75rem; left: 1rem; z-index: 100; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; background: var(--parchment); color: var(--ink); text-decoration: none; font-weight: 700; }
.skip-link:focus { width: auto; height: auto; padding: .65rem 1rem; clip-path: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.eyebrow { font-family: var(--font-body); font-size: .68rem; font-weight: 700; letter-spacing: .22em; line-height: 1.4; text-transform: uppercase; }
.parchment-texture { background-color: var(--parchment); background-image: radial-gradient(ellipse at 12% 8%, rgba(255, 255, 255, .7), transparent 62%), repeating-linear-gradient(35deg, transparent 0 12px, rgba(112, 68, 29, .024) 13px 14px), radial-gradient(ellipse at 87% 90%, rgba(137, 75, 31, .16), transparent 65%); }

/* The original illustration is a backdrop, never the sole carrier of information. */
.title-page { min-height: 100svh; isolation: isolate; overflow-x: hidden; }
.title-art { position: fixed; z-index: -1; inset: 0; background: #20160e url('../assets/images/backgrounds/aeldrath-dusk.jpg') center center / cover no-repeat; }
.title-art::before, .title-art::after { content: ''; position: absolute; inset: 0; }
.title-art::before { background: linear-gradient(90deg, rgba(12, 7, 5, .97) 0%, rgba(16, 9, 6, .91) 24%, rgba(17, 10, 7, .65) 47%, rgba(12, 7, 4, .08) 79%), linear-gradient(0deg, rgba(15, 8, 5, .91), transparent 23%, transparent 68%, rgba(12, 8, 6, .45)); }
.title-art::after { background: radial-gradient(ellipse at 56% 43%, transparent 19%, rgba(6, 4, 3, .44) 100%); }
.title-shell { min-height: 100svh; padding-inline: clamp(1.25rem, 5.4vw, 6.2rem); display: flex; flex-direction: column; }
.site-header, .title-footer { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.site-header { min-height: 6.1rem; border-bottom: 1px solid rgba(245, 230, 200, .13); }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--gold-light); text-decoration: none; font-family: var(--font-display); font-size: .99rem; letter-spacing: .11em; line-height: 1; white-space: nowrap; }
.brand img { width: 2.5rem; height: auto; filter: drop-shadow(0 0 12px rgba(212, 168, 67, .23)); }
.brand-small { font-size: .67em; opacity: .85; }
.header-motto { color: #d2bea0; font-size: .67rem; font-weight: 700; letter-spacing: .18em; white-space: nowrap; }
.header-motto span { color: var(--gold); padding-left: 1.2rem; }
.title-content { width: min(100%, 41rem); padding-block: clamp(3rem, 6vh, 6rem) clamp(2rem, 4vh, 4rem); flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.title-eyebrow { display: flex; align-items: center; gap: .9rem; color: var(--gold-light); font-size: .71rem; font-weight: 700; letter-spacing: .2em; line-height: 1.4; }
.eyebrow-line { flex: 0 0 1.65rem; border-top: 1px solid currentColor; }
.title-crest { margin: 1.9rem 0 .85rem; width: 3.7rem; opacity: .97; filter: drop-shadow(0 0 17px rgba(206, 148, 58, .25)); }
.title-crest img { display: block; width: 100%; height: auto; }
.game-logo { font-family: var(--font-display); font-weight: 400; letter-spacing: -.035em; line-height: .99; text-shadow: 0 2px 4px rgba(0, 0, 0, .38), 0 0 35px rgba(212, 168, 67, .12); }
.logo-upper, .logo-lower { display: block; }
.logo-upper { font-size: clamp(3.2rem, 5vw, 5.2rem); color: var(--parchment); }
.logo-lower { font-size: clamp(4.05rem, 6.5vw, 7rem); color: var(--gold-light); }
.ornament { display: flex; align-items: center; gap: .85rem; width: min(21rem, 80%); margin: 1.05rem 0 .9rem; color: var(--gold); }
.ornament span:first-child, .ornament span:last-child { flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }
.ornament span:last-child { transform: rotate(180deg); }
.ornament-star { font-size: 1.4rem; line-height: 1; }
.title-subtitle { max-width: 31rem; margin-bottom: 0; color: #e1d2b8; font-size: clamp(1.15rem, 1.5vw, 1.37rem); font-style: italic; line-height: 1.46; }
.title-menu { width: min(100%, 27rem); margin-top: 2.1rem; }
.title-menu .btn + .btn { margin-top: .65rem; }
.save-hint { min-height: 1.25em; margin: .65rem 0 .55rem; color: #cfbd9d; font-size: .84rem; text-align: center; }
.title-menu-secondary { display: flex; align-items: center; justify-content: center; gap: 1.4rem; color: var(--gold); }
.epilepsy-warning { max-width: 31rem; margin: .45rem 0 0; color: #e1d2b8; font-size: .76rem; line-height: 1.28; }
.epilepsy-warning strong { color: var(--gold-light); }
.preview-note { margin-top: clamp(2rem, 5vh, 4.5rem); padding: .22rem 0 .22rem 1rem; border-left: 1px solid var(--gold); }
.preview-kicker { color: var(--gold-light); font-size: .66rem; font-weight: 700; letter-spacing: .18em; }
.preview-kicker span { padding-inline: .4rem; }
.preview-note p { margin: .24rem 0 0; color: #d6c8b0; font-size: .96rem; }
.title-footer { min-height: 4.2rem; padding-block: 1rem; border-top: 1px solid rgba(245, 230, 200, .13); color: #d2c3a9; font-size: .78rem; }
.footer-version { color: var(--gold-light); font-size: .67rem; letter-spacing: .14em; white-space: nowrap; }
.footer-version span { padding-inline: .4rem; }
.noscript-banner { position: fixed; z-index: 150; bottom: 0; inset-inline: 0; padding: 1rem; text-align: center; background: var(--parchment); color: var(--ink); }

@media (max-width: 850px) {
  .header-motto { display: none; }
  .title-art { background-position: 59% center; }
  .title-art::before { background: linear-gradient(90deg, rgba(13, 7, 5, .94), rgba(13, 7, 5, .64) 65%, rgba(13, 7, 5, .3)), linear-gradient(0deg, rgba(12, 7, 5, .87), transparent 40%); }
}
@media (max-width: 550px) {
  .site-header { min-height: 4.9rem; }
  .brand { font-size: .85rem; }
  .brand img { width: 2rem; }
  .title-art { background-position: 63% center; }
  .title-art::before { background: rgba(12, 7, 5, .73); }
  .title-content { padding-block: 2.5rem 2rem; }
  .title-crest { margin-top: 1.4rem; }
  .logo-upper { font-size: clamp(3.15rem, 13vw, 4.1rem); }
  .logo-lower { font-size: clamp(3.45rem, 14.5vw, 5rem); }
  .title-menu { margin-top: 1.5rem; }
  .preview-note { margin-top: 2.3rem; }
  .title-footer { align-items: flex-start; flex-direction: column; gap: .55rem; }
}