@charset "utf-8";
/* The Last Dragon: slate, soot and steel, with the undead dragons' blue fire as the one saturated accent and worn bronze for the order's filigree. */
:root{
  --bg:#e3e5e7; --panel:#f1f2f3; --sunk:#d3d7da; --fg:#1a1d20; --muted:#5d646b; --line:#c4c9ce;
  --pit:#2a62b8; --pit-soft:#d9e4f4; --mercury:#6a7178; --amber:#8f6a2c;
  --screen:"Courier Prime","Courier New",Courier,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#14171a; --panel:#1c2024; --sunk:#262b30; --fg:#e4e7ea; --muted:#9aa2aa; --line:#343a40;
  --pit:#5fa2ff; --pit-soft:#16263d; --mercury:#aab1b8; --amber:#c79a52; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#14171a; --panel:#1c2024; --sunk:#262b30; --fg:#e4e7ea; --muted:#9aa2aa; --line:#343a40;
  --pit:#5fa2ff; --pit-soft:#16263d; --mercury:#aab1b8; --amber:#c79a52; color-scheme:dark}

/* brand mark: an ash-black dragon eye burning with blue fire */
.orb{border-radius:50%;
  background:
    radial-gradient(ellipse 14% 46% at 50% 50%,#05070a 0 70%,transparent 74%),
    radial-gradient(circle at 50% 50%,#bfe0ff 0%,#5fa2ff 26%,#1f4f9a 48%,#1a1d20 70%,#0b0d0f 100%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--pit) 55%,transparent),0 0 18px color-mix(in srgb,var(--pit) 40%,transparent)}
.orb::after{display:none}

/* shared path row for script and bible */
.sp-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-block:4px 18px}
.sp-top code{font-family:var(--mono);font-size:12px;color:var(--muted);overflow-wrap:anywhere;min-width:0}

/* screenplay page: US-letter proportions, industry indents */
.screenplay{background:var(--panel);border:1px solid var(--line);border-radius:6px;max-width:760px;margin-inline:auto;
  padding-block:48px 64px;padding-inline:clamp(18px,7%,72px);font-family:var(--screen);font-size:15px;line-height:1.5;color:var(--fg)}
.screenplay p{margin:0 0 1em;max-width:none}
.sp-section{font-family:var(--screen);font-size:15px;font-weight:700;text-align:center;text-decoration:underline;text-transform:uppercase;letter-spacing:.04em;margin:2.2em 0 1.4em;color:var(--pit)}
.sp-section:first-child{margin-top:0}
.sp-scene{font-weight:700;text-transform:uppercase;margin-top:1.8em!important}
.sp-action{max-width:62ch}
.sp-dlg{margin:0 0 1em}
.sp-dlg p{margin:0}
.sp-char{padding-left:37%;text-transform:uppercase}
.sp-paren{padding-left:28%;padding-right:22%}
.sp-line{padding-left:18%;padding-right:16%}
.sp-dag{color:var(--pit);font-weight:700}
.sp-trans{text-align:right;text-transform:uppercase}
.sp-trans.c{text-align:center;font-weight:700}
@media (max-width:560px){
  .screenplay{font-size:13.5px}
  .sp-char{padding-left:30%}.sp-paren{padding-left:18%;padding-right:8%}.sp-line{padding-left:8%;padding-right:4%}
}

/* bible and synopsis */
.md{max-width:760px;margin-inline:auto;display:grid;gap:0}
.md h2{font-family:var(--display);font-size:clamp(22px,3vw,28px);line-height:1.15;margin:1.6em 0 .5em;text-wrap:balance}
.md h3{font-family:var(--display);font-size:20px;margin:1.4em 0 .4em}
.md h4{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--pit);margin:1.2em 0 .3em}
.md p,.md li{max-width:68ch}
.md p{margin:0 0 .8em}
.md ul,.md ol{margin:0 0 .9em;padding-left:1.3em;display:grid;gap:.3em}
.md blockquote{margin:.4em 0 1em;padding:.6em 1em;border-left:3px solid var(--pit);background:var(--panel);font-size:1.08em}
.md hr{border:0;border-top:1px solid var(--line);margin:1.6em 0;width:100%}
.md code{font-family:var(--mono);font-size:.86em;background:var(--sunk);padding:.08em .35em;border-radius:3px;overflow-wrap:anywhere}
.md-table{overflow-x:auto;margin:0 0 1em}
.md table{border-collapse:collapse;font-size:15px;min-width:100%}
.md th,.md td{border-bottom:1px solid var(--line);padding:.45em .7em;text-align:left;vertical-align:top}
.md th{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* dropdowns: open under their own button; app.js nudges them back inside the screen edges */
@media (min-width:761px){
  .menu .menu-panel,.menu:first-child .menu-panel{position:absolute;top:calc(100% + 14px);left:0;right:auto;transform:none}
}
}

/* wide plates: locations show the whole widescreen frame full width, text below; props never crop */
body[data-page^="loc-"] .plate{grid-template-columns:1fr}
body[data-page^="loc-"] .plate .poster{position:static;height:auto;min-height:0;aspect-ratio:auto}
body[data-page^="loc-"] .plate .poster img{position:static;inset:auto;width:100%;height:auto;object-fit:contain}
body[data-page^="prop-"] .plate .poster{background:var(--sunk)}
body[data-page^="prop-"] .plate .poster img{object-fit:contain;object-position:50% 50%}
