/* flanaess.com — dark fantasy theme
   Fonts: Cinzel + EB Garamond (Google Fonts, SIL OFL — open licensed).
   No proprietary/WotC assets. All ornament is CSS/SVG. */

:root {
  --ink:      #0e0b07;   /* deep near-black backdrop        */
  --ink-2:    #17120c;   /* panel base                      */
  --parch:    #e7d9b5;   /* parchment text                  */
  --parch-dim:#b6a883;   /* muted parchment                 */
  --gold:     #c9a45c;   /* primary accent                  */
  --gold-lo:  #8a6f3a;   /* darker gold for borders         */
  --ember:    #b5562a;   /* warm ember accent               */
  --shadow:   rgba(0,0,0,.6);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background:
    radial-gradient(120% 90% at 50% 0%, #241a10 0%, var(--ink-2) 38%, var(--ink) 100%);
  color: var(--parch);
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.6;
  text-align: center;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* ---- Landing ---- */

.wrap {
  flex: 1;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 56px 24px 40px;
}

.title {
  font-family: "Cinzel", "Trajan Pro", Georgia, serif;
  font-weight: 700;
  letter-spacing: .14em;
  font-size: clamp(2.6rem, 8vw, 5.2rem);
  color: var(--gold);
  text-shadow:
    0 1px 0 #6b5224,
    0 0 18px rgba(201,164,92,.25),
    0 4px 22px var(--shadow);
  line-height: 1.05;
}

.subtitle {
  font-style: italic;
  color: var(--parch-dim);
  letter-spacing: .04em;
  margin-top: .4rem;
  font-size: 1.1rem;
}

/* decorative rule with a centered diamond */
.rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 22px auto 30px;
  max-width: 460px;
  color: var(--gold-lo);
}
.rule::before, .rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-lo), transparent);
}
.rule span { font-size: 1.1rem; color: var(--gold); }

/* map thumbnail framed like an aged plate */
.map-frame {
  display: inline-block;
  padding: 12px;
  background:
    linear-gradient(160deg, #2a2014, #16110a);
  border: 1px solid var(--gold-lo);
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(201,164,92,.18) inset,
    0 18px 50px var(--shadow);
  max-width: 100%;
}
.map-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 920px;
  border: 1px solid #000;
  filter: saturate(.96) contrast(1.02);
}

.btn {
  display: inline-block;
  margin-top: 30px;
  padding: 13px 34px;
  font-family: "Cinzel", Georgia, serif;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .95rem;
  color: var(--ink);
  background: linear-gradient(180deg, #e0bd72, var(--gold) 55%, #a9853f);
  border: 1px solid #6b5224;
  border-radius: 3px;
  text-decoration: none;
  box-shadow: 0 6px 18px var(--shadow), 0 0 0 1px rgba(0,0,0,.3) inset;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.07);
             box-shadow: 0 10px 24px var(--shadow); }
.btn:active { transform: translateY(0); }

/* lore / flavor paragraph under a region title */
.lore {
  max-width: 620px;
  margin: 4px auto 0;
  color: var(--parch-dim);
  font-size: 1.06rem;
  line-height: 1.7;
}
.lore em { color: var(--parch); font-style: italic; }

/* realm nav — the connective tissue shared across the sites */
.realm-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 30px auto 0;
  font-family: "Cinzel", Georgia, serif;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.realm-nav a { color: var(--parch-dim); text-decoration: none; }
.realm-nav a:hover { color: var(--gold); }
.realm-nav .here { color: var(--gold); cursor: default; }
.realm-nav .sep { color: var(--gold-lo); }

footer {
  color: #6f6549;
  font-size: .85rem;
  letter-spacing: .03em;
  padding: 26px 16px 30px;
}
footer a { color: var(--parch-dim); text-decoration: none; }
footer a:hover { color: var(--gold); }

/* ---- Full-size viewer ---- */

body.viewer {
  display: block;
  background: #0a0807;
  text-align: left;
}
.viewer-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 20px;
  background: linear-gradient(180deg, rgba(20,15,9,.96), rgba(20,15,9,.78));
  border-bottom: 1px solid var(--gold-lo);
  backdrop-filter: blur(4px);
  z-index: 10;
}
.viewer-bar .brand {
  font-family: "Cinzel", serif;
  letter-spacing: .14em;
  color: var(--gold);
  font-size: 1rem;
}
.viewer-bar .back {
  color: var(--parch-dim);
  text-decoration: none;
  font-family: "Cinzel", serif;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1px solid var(--gold-lo);
  border-radius: 3px;
}
.viewer-bar .back:hover { color: var(--gold); border-color: var(--gold); }
.viewer-bar .hint { color: #6f6549; font-size: .82rem; margin-left: auto; }

.stage {
  position: fixed;
  inset: 52px 0 0 0;
  overflow: auto;
  background:
    repeating-linear-gradient(45deg, #0c0a08 0 14px, #0a0807 14px 28px);
  cursor: grab;
}
.stage.dragging { cursor: grabbing; }
.stage img {
  display: block;
  /* width set by JS for zoom; start near-fit */
  user-select: none;
  -webkit-user-drag: none;
}