/* Background photos. Each scene id has <id>.webp (2400px) and <id>-sm.webp (1280px); narrow or low density screens get the small one.
   Absolute /art paths so every stylesheet resolves them the same way. No parallax, no blur. */
:root {
  --scene-keep: url("/art/keep-sm.webp"); --scene-forest: url("/art/forest-sm.webp");
  --scene-stars: url("/art/stars-sm.webp"); --scene-lair: url("/art/lair-sm.webp"); --scene-ink: url("/art/ink-sm.webp");
  --scene-mountains: url("/art/mountains-sm.webp");
}
@media (min-width: 1281px) and (min-resolution: 1.5dppx), (min-width: 1700px) {
  :root {
    --scene-keep: url("/art/keep.webp"); --scene-forest: url("/art/forest.webp");
    --scene-stars: url("/art/stars.webp"); --scene-lair: url("/art/lair.webp"); --scene-ink: url("/art/ink.webp");
    --scene-mountains: url("/art/mountains.webp");
  }
}
.app[data-scene="keep"] .app-art, .art-layer[data-scene="keep"], .tpl[data-scene="keep"] { background-image: var(--scene-keep); }
.app[data-scene="forest"] .app-art, .art-layer[data-scene="forest"], .tpl[data-scene="forest"] { background-image: var(--scene-forest); }
.app[data-scene="stars"] .app-art, .art-layer[data-scene="stars"], .tpl[data-scene="stars"] { background-image: var(--scene-stars); }
.app[data-scene="lair"] .app-art, .art-layer[data-scene="lair"], .tpl[data-scene="lair"] { background-image: var(--scene-lair); }
.app[data-scene="ink"] .app-art, .art-layer[data-scene="ink"], .tpl[data-scene="ink"] { background-image: var(--scene-ink); }
.app[data-scene="mountains"] .app-art, .art-layer[data-scene="mountains"], .tpl[data-scene="mountains"] { background-image: var(--scene-mountains); }

/* Readability scrim over the photo: light on light themes, dark on dark ones (the theme sets --vignette).
   The lair photo is saturated blue and red, so it gets a grey tint layer to read ominous. The carta marina is dimmed. */
.app-art::after { content: ""; position: absolute; inset: 0; background: var(--vignette); }
.app.has-backdrop .app-art::after { background: none; }
.app[data-scene="lair"] .app-art::after { background: linear-gradient(rgba(34, 34, 40, 0.38), rgba(34, 34, 40, 0.38)), var(--vignette); }
.art-layer[data-scene="lair"]::after { content: ""; position: absolute; inset: 0; background: rgba(34, 34, 40, 0.38); }

/* Template tiles use their scene photo as the tile background */
.tpl[data-scene] { background-size: cover; background-position: center; }
.tpl[data-scene]::before { content: ""; position: absolute; inset: 0; background: var(--vignette); pointer-events: none; }
.tpl[data-scene] > * { position: relative; }
.tpl[data-scene] > .go { position: absolute; }
.credit-link { color: var(--ink-2); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.credit-link:hover { color: var(--ink-0); }