:root {
  --ink: #3b2a17;
  --gold: #e8c77a;
  --gold-d: #a8823a;
  --parch: #f1e2bf;
  --parch-d: #d9c08b;
  --font: "Palatino Linotype", "Book Antiqua", Palatino, "URW Palladio L", "P052", Georgia, "Times New Roman", serif;
  --zoom-ms: 1200ms;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d1414; font-family: var(--font); color: var(--ink); user-select: none; }

#viewport { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(ellipse at center, #1a2626 0%, #070b0b 100%); }
#stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
#stage.animate { transition: transform var(--zoom-ms) cubic-bezier(.66, 0, .28, 1); }
#stage img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
#mapBlur { filter: blur(2.5px) saturate(.5) brightness(.5); opacity: 0; transition: opacity 900ms ease; pointer-events: none; }
body.zoomed #mapBlur { opacity: 1; }
#overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }

/* hotspots */
.hs { cursor: pointer; fill: rgba(255, 226, 150, 0); stroke: rgba(255, 226, 150, 0); stroke-width: 3; vector-effect: non-scaling-stroke; transition: fill .25s, stroke .25s; }
.hs.sea { stroke-dasharray: 8 6; }
.hs:hover, .hs.hover { fill: rgba(255, 226, 150, .16); stroke: rgba(255, 226, 150, .95); filter: url(#glow); }
.hs.sea:hover, .hs.sea.hover { fill: rgba(140, 220, 230, .14); stroke: rgba(170, 230, 240, .9); }
body.zoomed #hotspots { pointer-events: none; }
body.zoomed #hotspots .hs { fill: rgba(0,0,0,0) !important; stroke: rgba(0,0,0,0) !important; filter: none; }
#focusOutline { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-dasharray: 10 7; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .8s ease .5s; pointer-events: none; }
body.zoomed #focusOutline { opacity: .9; }

/* markers (cities etc.) */
.marker { cursor: pointer; opacity: 0; transition: opacity .6s ease .7s; }
body.zoomed .marker { opacity: 1; }
.marker .pulse { fill: none; stroke: var(--gold); stroke-width: 3; animation: pulse 1.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.marker .pin { fill: #8b1f14; stroke: var(--gold); stroke-width: 3; }
.marker .dot { fill: var(--gold); }
.marker text { font-family: var(--font); font-size: 22px; font-weight: bold; fill: #fff4d6; paint-order: stroke; stroke: #2a1a0c; stroke-width: 5px; text-anchor: middle; }
.marker:hover .pin { fill: #c0392b; }
@keyframes pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }

#vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 160px 40px rgba(0,0,0,.65); opacity: 0; transition: opacity .9s; }
body.zoomed #vignette { opacity: 1; }

/* parchment panels */
.parchment, .cartouche, #backBtn, #info, #tooltip, #crumbs {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(120,80,30,.25), transparent 55%),
    linear-gradient(135deg, var(--parch) 0%, var(--parch-d) 100%);
  border: 2px solid var(--gold-d);
  box-shadow: 0 0 0 3px rgba(40,25,10,.55), 0 8px 24px rgba(0,0,0,.55), inset 0 0 22px rgba(120,80,30,.35);
  color: var(--ink);
}
#banner { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 10; pointer-events: none; transition: transform .6s ease, opacity .6s; }
body:not(.zoomed) #banner { opacity: 0; transform: translate(-50%, -20px); }
.cartouche { padding: 6px 42px 8px; border-radius: 6px; text-align: center; position: relative; }
.cartouche::before, .cartouche::after { content: "❦"; position: absolute; top: 50%; transform: translateY(-50%); color: var(--gold-d); font-size: 22px; }
.cartouche::before { left: 12px; } .cartouche::after { right: 12px; transform: translateY(-50%) scaleX(-1); }
#lvlType { font-size: 12px; letter-spacing: .25em; text-transform: uppercase; color: #7a5a2a; }
#lvlName { margin: 0; font-size: 30px; font-variant: small-caps; letter-spacing: .04em; }
#banner.flash .cartouche { animation: pop .6s ease; }
@keyframes pop { 0% { transform: scale(.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

#backBtn { position: fixed; top: 18px; left: 18px; z-index: 11; font-family: var(--font); font-size: 18px; font-weight: bold; padding: 10px 18px 10px 14px; border-radius: 6px; cursor: pointer; transition: transform .15s, filter .15s; }
#backBtn:hover { transform: translateY(-1px); filter: brightness(1.08); }
#backBtn .arrow { color: #8b1f14; }

#crumbs { position: fixed; bottom: 16px; left: 18px; z-index: 10; padding: 6px 14px; border-radius: 4px; font-size: 14px; }
#crumbs a { color: #6b2b12; cursor: pointer; text-decoration: none; }
#crumbs a:hover { text-decoration: underline; }
#crumbs .sep { margin: 0 8px; color: var(--gold-d); }

#info { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); width: min(300px, 30vw); z-index: 10; padding: 14px 18px; border-radius: 6px; animation: slidein .7s ease .5s both; }
#info h2 { margin: 0 0 6px; font-variant: small-caps; font-size: 22px; border-bottom: 1px solid var(--gold-d); padding-bottom: 4px; }
#info p { margin: 6px 0; font-size: 15px; line-height: 1.4; }
#infoHint { font-style: italic; color: #6b4a1f; }
@keyframes slidein { from { opacity: 0; transform: translate(30px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }

#hint { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 9; color: #f3e3bd; font-size: 15px; text-shadow: 0 1px 3px #000, 0 0 8px #000; background: rgba(10,15,15,.55); padding: 6px 16px; border-radius: 20px; transition: opacity .5s; pointer-events: none; }
body.zoomed #hint { opacity: 0; }

#tooltip { position: fixed; z-index: 20; pointer-events: none; padding: 5px 12px 6px; border-radius: 4px; transform: translate(14px, 14px); display: flex; flex-direction: column; }
#ttType { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #7a5a2a; }
#ttName { font-size: 18px; font-variant: small-caps; }

#proto { position: fixed; top: 10px; right: 14px; z-index: 9; font-size: 11px; letter-spacing: .3em; color: rgba(243,227,189,.55); }
[hidden] { display: none !important; }
body.panel-left #info { right: auto; left: 18px; animation-name: slidein-l; }
@keyframes slidein-l { from { opacity: 0; transform: translate(-30px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }