/* Dungeon! v1.4.1 — an illustrated threshold to the adventure. */
body { margin: 0; }
body.cover-active { overflow: hidden; }
.cover-page { position: fixed; inset: 0; z-index: 10; overflow: auto; isolation: isolate; background: #080f12; color: #eee6d5; overscroll-behavior: contain; }
.cover-art, .cover-shade, .cover-frame { position: absolute; pointer-events: none; }
.cover-art { inset: 0; z-index: -3; background: #080f12 url('../assets/dungeon-art.webp') center center / cover no-repeat; }
.cover-shade { inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(5,10,12,.91), rgba(5,10,12,.72) 26%, rgba(5,10,12,.2) 57%, rgba(5,10,12,.03) 100%), linear-gradient(0deg, #070c0ef5, transparent 35%, transparent 80%, #070c0e85); }
.cover-frame { inset: 19px; z-index: -1; border: 1px solid #d5b17530; }
.cover-frame::before, .cover-frame::after { content: ''; position: absolute; width: 32px; height: 32px; border-color: #c3a167; border-style: solid; }
.cover-frame::before { left: -1px; top: -1px; border-width: 1px 0 0 1px; }
.cover-frame::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
.cover-shell { width: min(1680px, 100%); min-height: 100%; min-height: 100svh; margin: 0 auto; padding: 46px clamp(38px, 6.4vw, 122px) 44px; display: flex; flex-direction: column; }
.cover-topline { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.cover-brand { display: flex; align-items: center; gap: 12px; color: #e6d5b5; font: 600 15px/1.1 var(--body); letter-spacing: .23em; }
.cover-brand small { display: block; margin-top: 8px; font-size: 8px; letter-spacing: .22em; color: #b29e80; }
.cover-sigil { width: 34px; height: 41px; fill: none; stroke: #c5a365; stroke-width: 1.15; }
.cover-portal { color: #d6c8b2; text-decoration: none; font-size: 12px; letter-spacing: .03em; padding: 10px 0 10px 10px; }
.cover-portal span { margin-left: 9px; color: #d6b06d; }
.cover-main { flex: 1; display: flex; align-items: center; position: relative; padding: 50px 0 58px; }
.cover-copy { width: min(640px, 58%); padding-bottom: 4px; }
.cover-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 19px; color: #c1a978; letter-spacing: .24em; font-size: 10px; font-weight: 600; }
.cover-eyebrow span { display: block; width: 24px; height: 1px; background: #a9894f; }
.cover-heading { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.cover-heading h1 { margin: 0; font: 500 clamp(54px, 6.2vw, 100px)/1.02 Georgia, 'Times New Roman', serif; letter-spacing: .025em; color: #e4c485; text-shadow: 0 3px 24px #0006; }
.cover-heading h1 span { color: #cda268; }
.cover-version { color: #b8a98e; font: 10px var(--mono); letter-spacing: .02em; white-space: nowrap; }
.cover-rule { display: flex; align-items: center; gap: 10px; width: 115px; margin: 22px 0 23px; color: #bb9556; }
.cover-rule i { height: 1px; background: #bf9e5d80; flex: 1; }
.cover-rule b { font-size: 7px; font-weight: 400; }
.cover-tagline { margin: 0 0 16px; font: 400 clamp(25px, 2.6vw, 37px)/1.25 var(--display); color: #f0e6d3; letter-spacing: -.015em; }
.cover-description { margin: 0; font-size: 14px; line-height: 1.8; color: #bcb8ab; }
.cover-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.cover-button { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 54px; border-radius: 2px; padding: 15px 22px; border: 1px solid #b79251; font: 600 12px/1.2 var(--body); text-transform: uppercase; letter-spacing: .12em; cursor: pointer; transition: background .18s, border-color .18s, transform .18s; }
.cover-button > span:last-child { font-size: 20px; font-weight: 400; line-height: .8; }
.cover-primary { min-width: 258px; color: #211b12; background: linear-gradient(110deg, #e8ca8b, #bc9453); box-shadow: inset 0 1px #f6e4b577, 0 7px 24px #0005; }
.cover-primary:hover { background: linear-gradient(110deg, #f6dda3, #d0ac6c); transform: translateY(-1px); }
.cover-secondary { min-width: 170px; color: #dfc592; background: #0a1117bb; border-color: #bd9d6266; }
.cover-secondary:hover { background: #17201deb; border-color: #d7bb81; }
.cover-save { font-size: 11px; margin: 12px 0 0; color: #c2b59d; line-height: 1.6; }
.cover-links { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 22px; color: #7c7567; }
.cover-links button, .cover-links a { appearance: none; border: 0; background: none; padding: 6px 0; text-decoration: none; color: #c7c0ad; font: 12px var(--body); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.cover-links svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.cover-links button:hover, .cover-links a:hover, .cover-portal:hover { color: #f0d29b; }
.cover-page :focus-visible, .setup-back:focus-visible { outline: 2px solid #f5d48e; outline-offset: 6px; }
.cover-art-caption { position: absolute; right: 0; bottom: 52px; margin: 0; max-width: 260px; text-align: right; font: italic 13px/1.6 var(--display); color: #c5bba7; text-shadow: 0 2px 10px #000; }
.cover-art-caption span { display: block; font: 600 9px var(--body); letter-spacing: .24em; color: #d3b277; margin-bottom: 7px; }
.cover-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 23px; border-top: 1px solid #d5b17535; }
.cover-stats { display: flex; gap: clamp(24px, 3.7vw, 62px); }
.cover-stats > div { display: flex; align-items: center; gap: 13px; }
.cover-stats strong { font: 400 32px/1 Georgia, serif; color: #c7a46b; }
.cover-stats span { font-size: 9px; line-height: 1.65; letter-spacing: .12em; text-transform: uppercase; color: #b1ad9f; }
.cover-edition { text-align: right; }
.cover-solo { color: #d2bb8c; font-size: 9px; letter-spacing: .2em; }
.cover-edition p { font-size: 11px; margin: 5px 0 3px; color: #b7b4a9; }
.cover-edition small { font-size: 10px; color: #92968d; }
.setup-card { width: min(640px, 100%); background: linear-gradient(145deg, #1a2225, #13191c); border-color: #ac884f70; border-top: 2px solid #c6a66b; box-shadow: 0 30px 90px #000c; padding: 22px 25px; }
.setup-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; font-size: 9px; letter-spacing: .16em; color: #b5a17c; }
.setup-back { border: 0; padding: 6px 0 6px 12px; background: none; color: #d0c6b2; cursor: pointer; font: 12px var(--body); letter-spacing: 0; }
.setup-back span { margin-left: 8px; font-size: 19px; }
.setup-card h3 { color: #e2c185; }
.setup-card .actions { padding-top: 12px; border-top: 1px solid #bd9d6233; }
.setup-card .primary { background: #d4b274; border-color: #d4b274; }
.cover-active .modal { background: #03080bb8; backdrop-filter: blur(7px); }
@media (min-width: 1800px) { .cover-copy { width: 700px; } }
@media (max-width: 1050px) {
  .cover-shell { padding: 35px 46px; }
  .cover-heading h1 { font-size: clamp(47px, 7.5vw, 78px); }
  .cover-copy { width: 64%; }
  .cover-art { background-position: 60% center; }
  .cover-art-caption { display: none; }
  .cover-stats { gap: 28px; }
  .cover-stats strong { font-size: 28px; }
  .cover-stats span { font-size: 8px; }
}
@media (max-width: 700px) {
  .cover-shell { padding: max(28px, env(safe-area-inset-top)) 28px max(28px, env(safe-area-inset-bottom)); }
  .cover-frame { inset: 10px; }
  .cover-art { position: fixed; background-position: 84% center; }
  .cover-shade { position: fixed; background: linear-gradient(0deg, #050b0ff8, #050b0fcc 27%, #050b0f88 64%, #050b0f3d), linear-gradient(90deg,#050b0f77,transparent); }
  .cover-brand { font-size: 12px; gap: 8px; }
  .cover-brand small { font-size: 7px; }
  .cover-sigil { width: 27px; height: 33px; }
  .cover-portal { font-size: 10px; }
  .cover-main { padding: 62px 0 32px; align-items: end; }
  .cover-copy { width: 100%; padding: 0; }
  .cover-eyebrow { font-size: 8px; letter-spacing: .16em; gap: 8px; margin-bottom: 14px; }
  .cover-heading { gap: 8px; }
  .cover-heading h1 { font-size: clamp(43px, 10.7vw, 72px); }
  .cover-version { font-size: 9px; }
  .cover-rule { margin: 17px 0 19px; width: 92px; }
  .cover-tagline { font-size: 29px; }
  .cover-description { font-size: 12px; line-height: 1.7; }
  .cover-actions { margin-top: 24px; gap: 10px; }
  .cover-button { min-height: 50px; padding: 14px 17px; font-size: 10px; }
  .cover-primary { min-width: 0; flex: 1 1 190px; }
  .cover-secondary { min-width: 0; flex: 1 1 125px; }
  .cover-links { margin-top: 14px; gap: 12px; }
  .cover-links a, .cover-links button { font-size: 11px; }
  .cover-bottom { flex-direction: column; align-items: stretch; gap: 20px; padding-top: 21px; }
  .cover-stats { justify-content: space-between; gap: 12px; }
  .cover-stats > div { gap: 8px; }
  .cover-stats strong { font-size: 27px; }
  .cover-stats span { font-size: 7px; }
  .cover-edition { text-align: left; display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 5px; }
  .cover-edition p { margin: 0; font-size: 9px; }
  .cover-edition small { display: none; }
  .cover-solo { font-size: 8px; }
  .setup-card { padding: 18px; }
}
@media (min-width: 701px) and (max-height: 760px) {
  .cover-shell { padding-top: 28px; padding-bottom: 28px; }
  .cover-main { padding: 30px 0; }
  .cover-heading h1 { font-size: clamp(50px, 5.2vw, 78px); }
  .cover-eyebrow { margin-bottom: 12px; }
  .cover-rule { margin: 14px 0; }
  .cover-tagline { font-size: 29px; margin-bottom: 12px; }
  .cover-actions { margin-top: 22px; }
  .cover-bottom { padding-top: 18px; }
  .cover-links { margin-top: 13px; }
}
@media (prefers-reduced-motion: reduce) { .cover-page * { transition: none !important; } }