/* Slay the Spire 2 views for the replay player. Everything here is scoped under .s2 so other games'
   stages are untouched, and every colour resolves to the player's own tokens (or the room tokens
   below, which follow the same light/dark pattern), so the page keeps one look in both themes. */
:root {
  --s2-monster:#7A6F86; --s2-elite:#B8382D; --s2-boss:#7B45B0; --s2-event:#2F6FA8; --s2-ancient:#1C8C7C;
  --s2-shop:#A07A0F; --s2-rest:#C2591B; --s2-treasure:#B48A12;
  --s2-hp:#C23B31; --s2-block:#2F6FA8; --s2-gold:#8C6A07; --s2-gold-bg:#F6EBCB;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --s2-monster:#9A8FA8; --s2-elite:#E0564C; --s2-boss:#B98AE0; --s2-event:#78AEE0; --s2-ancient:#5FD0BF;
    --s2-shop:#E3C15A; --s2-rest:#EF7D32; --s2-treasure:#F2C14E;
    --s2-hp:#F07A6F; --s2-block:#78AEE0; --s2-gold:#F2C14E; --s2-gold-bg:#3A2F12;
  }
}
:root[data-theme="dark"] {
  --s2-monster:#9A8FA8; --s2-elite:#E0564C; --s2-boss:#B98AE0; --s2-event:#78AEE0; --s2-ancient:#5FD0BF;
  --s2-shop:#E3C15A; --s2-rest:#EF7D32; --s2-treasure:#F2C14E;
  --s2-hp:#F07A6F; --s2-block:#78AEE0; --s2-gold:#F2C14E; --s2-gold-bg:#3A2F12;
}

.s2 { display:flex; flex-direction:column; gap:14px; min-width:0; }
.s2 img { max-width:100%; }
.s2 .muted { color:var(--muted); }
.s2 .num { font-variant-numeric:tabular-nums; }
.s2-group { display:flex; flex-direction:column; gap:7px; min-width:0; }
.s2-gl { font-family:var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
.s2-row { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
.s2-note { font-size:13px; color:var(--muted); border-left:3px solid var(--rule); padding:6px 10px; background:var(--sunken); border-radius:0 3px 3px 0; }
.s2-note.warn { border-left-color:var(--warn); background:var(--warn-bg); color:var(--ink); }
.s2-btn { font:inherit; font-size:13px; padding:5px 10px; border:1px solid var(--border); background:var(--surface); color:var(--ink); border-radius:2px; cursor:pointer; }
.s2-btn:hover { background:var(--sunken); }
.s2-res { font-family:var(--mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; padding:2px 7px; border-radius:2px; white-space:nowrap; }
.s2-res.win { color:var(--ok); background:var(--ok-bg); }
.s2-res.loss { color:var(--alert); background:var(--alert-bg); }
.s2-res.abandoned { color:var(--off); background:var(--off-bg); }

/* ---- the climb: HP after each floor, and the floor strip that jumps to a floor */
.s2-climb { padding:12px 14px 10px; display:flex; flex-direction:column; gap:6px; }
.s2-climb .lbl { display:flex; justify-content:space-between; gap:8px; font-family:var(--mono); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); }
.s2-chart { width:100%; height:80px; display:block; }
.s2-chart .hp { fill:none; stroke:var(--s2-hp); stroke-width:2.5; stroke-linejoin:round; }
.s2-chart .hpfill { fill:var(--s2-hp); opacity:.14; }
.s2-chart .max { fill:none; stroke:var(--rule); stroke-width:1.5; stroke-dasharray:4 3; }
.s2-chart .act { stroke:var(--rule); stroke-dasharray:3 4; }
.s2-chart .cur { stroke:var(--accent); stroke-width:2; }
/* One equal column per floor of a whole climb (--floors, set by sts2.js), so a floor's icon sits under
   its point on the chart above and is the same size whether the run lasted 7 floors or 48. */
.s2-path { display:grid; grid-template-columns:repeat(var(--floors, 48), minmax(0, 1fr)); gap:2px; }
.s2-node { min-width:0; width:100%; aspect-ratio:1; max-height:26px; border:0; padding:0; background:transparent; cursor:pointer; border-radius:3px; display:grid; place-items:center; }
.s2-node img { width:100%; height:100%; object-fit:contain; }
.s2-node .pip { width:58%; aspect-ratio:1; border-radius:50%; background:var(--c, var(--s2-monster)); }
.s2-node:hover { background:var(--sunken); }
.s2-node[aria-current="true"] { background:var(--sunken); box-shadow:inset 0 0 0 2px var(--accent); }
.s2-node.act-start { border-left:2px solid var(--rule); border-radius:0 3px 3px 0; }   /* a rule, not a margin: a margin would push the cell off its chart column */
.s2-legend { display:flex; flex-wrap:wrap; gap:4px 12px; font-size:11.5px; color:var(--muted); }
.s2-legend i { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:4px; vertical-align:0; background:var(--c); }

/* ---- the relics held at this step, like the game's top bar */
.s2-relics { display:flex; flex-wrap:wrap; gap:3px; padding:4px; border-radius:3px; background:var(--sunken); border:1px solid var(--border); align-self:flex-start; max-width:100%; }
.s2-relics .rl { width:32px; height:32px; display:grid; place-items:center; border-radius:3px; }
.s2-relics .rl img { width:30px; height:30px; object-fit:contain; }
.s2-relics .rl.new { background:var(--s2-gold-bg); box-shadow:inset 0 0 0 1px var(--s2-gold); }
.s2-ph { width:26px; height:26px; border-radius:50%; background:var(--surface); border:1px solid var(--border); display:grid; place-items:center;
         font-family:var(--mono); font-size:9.5px; color:var(--muted); overflow:hidden; }

/* ---- collapsible tools: the act map and the deck */
.s2-tools { display:flex; flex-direction:column; gap:6px; }
.s2-tool { border:1px solid var(--border); border-radius:3px; background:var(--surface); min-width:0; }
.s2-tool > summary { list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:8px; padding:7px 11px; font-size:13.5px; font-weight:600; }
.s2-tool > summary::-webkit-details-marker { display:none; }
.s2-tool > summary::after { content:"›"; margin-left:auto; color:var(--muted); transition:transform .15s; }
.s2-tool[open] > summary::after { transform:rotate(90deg); }
.s2-tool > summary:hover { background:var(--sunken); }
.s2-tool > summary small { font-weight:400; font-size:12px; color:var(--muted); }
.s2-tool .s2-deck { padding:6px 11px 12px; }
.s2-mapscroll { overflow-x:auto; padding:0 10px 10px; }
svg.s2-map { display:block; width:100%; min-width:600px; height:auto; background:var(--sunken); border-radius:3px; border:1px solid var(--border); }
svg.s2-map .edge { stroke:var(--rule); stroke-width:2; stroke-dasharray:2 5; stroke-linecap:round; }
svg.s2-map .edge.on { stroke:var(--accent); stroke-width:3.5; stroke-dasharray:none; }
svg.s2-map .edge.flight { stroke:var(--accent); stroke-width:2.5; stroke-dasharray:6 5; }
svg.s2-map .pt { opacity:.45; }
svg.s2-map .pt.seen { opacity:1; }
svg.s2-map .pt .ring { fill:none; stroke:var(--accent); stroke-width:2.5; }
svg.s2-map .pt .dot { fill:var(--surface); stroke:var(--c, var(--rule)); stroke-width:2; }
svg.s2-map .pt .glyph { fill:var(--c, var(--ink)); font-family:var(--mono); font-size:11px; font-weight:500; }
.s2-mapnote { font-size:12px; color:var(--muted); padding:0 11px 9px; }

/* ---- room heading */
.s2-room { display:flex; gap:12px; align-items:center; }
.s2-room img { width:48px; height:48px; object-fit:contain; }
.s2-room .badge { width:40px; height:40px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; color:#fff; font-family:var(--display); font-weight:700; font-size:16px; background:var(--c, var(--s2-monster)); }
.s2-room .t { font-family:var(--display); font-size:19px; font-weight:600; line-height:1.2; }
.s2-room .s { color:var(--muted); font-size:13.5px; }

/* ---- cards: the framed art when there is art, a plain tile when there isn't */
.s2-card { position:relative; width:var(--w, 112px); flex:0 0 auto; margin:0; }
.s2-card > img { display:block; width:100%; height:auto; }
.s2-card.dim { opacity:.55; }
.s2-card.picked > img { filter:drop-shadow(0 0 6px var(--accent)); }
.s2-card.mock { aspect-ratio:0.72; border-radius:6px; border:1px solid var(--rule); background:var(--surface); overflow:hidden; display:flex; flex-direction:column; justify-content:center; }
.s2-card.mock.picked { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.s2-card.mock > img { aspect-ratio:1.3; object-fit:cover; }
.s2-card.mock .nm { padding:6px; font-family:var(--display); font-size:13.5px; font-weight:600; text-align:center; line-height:1.2; overflow-wrap:anywhere; }
.s2-card.mock .en { padding:0 6px 6px; font-size:11px; color:var(--muted); text-align:center; }
.s2-card .cost { position:absolute; left:4px; top:4px; min-width:20px; height:20px; border-radius:10px; padding:0 5px; display:grid; place-items:center;
                 font-family:var(--mono); font-size:11px; font-weight:500; background:var(--s2-gold-bg); color:var(--s2-gold); border:1px solid var(--s2-gold); }
.s2-card .ribbon { position:absolute; left:50%; bottom:-7px; transform:translateX(-50%); font-family:var(--mono); font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase;
                   background:var(--accent); color:var(--surface); padding:1px 7px; border-radius:2px; white-space:nowrap; }
.s2-card .ribbon.tag { background:var(--surface); color:var(--s2-gold); border:1px solid var(--s2-gold); }
.s2-card .count { position:absolute; right:-5px; top:-5px; min-width:22px; height:22px; border-radius:11px; background:var(--ink); color:var(--surface);
                  font-family:var(--mono); font-size:11px; display:grid; place-items:center; padding:0 5px; }
.s2-card .grow { position:absolute; left:50%; top:62%; transform:translateX(-50%); padding:1px 7px; border-radius:2px; font-family:var(--mono); font-size:12px; color:#fff; }
.s2-card .grow.dmg { background:var(--s2-elite); }
.s2-card .grow.blk { background:var(--s2-block); }
.s2-cap { font-size:11.5px; color:var(--muted); text-align:center; margin-top:3px; max-width:var(--w, 112px); }
.s2-arrow { align-self:center; font-size:20px; color:var(--accent); }
.s2-deckgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:14px 10px; }
.s2-deckgrid .s2-card { --w:100%; }
.s2-deckgrid .s2-cap { max-width:none; }

.s2-chips { display:flex; flex-wrap:wrap; gap:6px; }
.s2-chip { display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 4px; border-radius:2px; background:var(--sunken); border:1px solid var(--border); font-size:13.5px; }
.s2-chip img { width:26px; height:26px; object-fit:contain; }
.s2-chip.text { padding-left:10px; }
.s2-chip.picked { border-color:var(--accent); }
.s2-chip.dim { opacity:.6; }
.s2-chip .price { font-family:var(--mono); font-size:11.5px; color:var(--s2-gold); }
.s2-chip .bought { font-family:var(--mono); font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase; background:var(--accent); color:var(--surface); padding:0 5px; border-radius:2px; }

/* ---- votes: the generic tally, plus the vote number, price and the agent's pick */
.s2 .vote .no { font-family:var(--mono); color:var(--muted); margin-right:6px; }
.s2 .vote.won .no { color:var(--accent-ink); }
.s2 .vote.off .lbl { color:var(--muted); text-decoration:line-through; }
.s2 .vote .sub { color:var(--muted); font-size:12.5px; }
.s2 .vote .price { color:var(--s2-gold); font-family:var(--mono); font-size:12px; }
.s2 .vote .agent { color:var(--accent-ink); font-family:var(--mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; }
.s2-by { font-size:13px; color:var(--muted); }
.s2-by b { color:var(--ink); font-weight:600; }

/* ---- fight */
.s2-fight { display:flex; flex-direction:column; gap:12px; }
.s2-turnbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.s2-dots { display:flex; flex-wrap:wrap; gap:3px; align-items:center; min-width:0; }
.s2-dots button { width:11px; height:11px; border-radius:50%; border:0; padding:0; background:var(--rule); cursor:pointer; }
.s2-dots button.end { border-radius:2px; }
.s2-dots button.final { transform:rotate(45deg); border-radius:2px; background:var(--ok); }
.s2-dots button.final.lost { background:var(--alert); }
.s2-dots button[aria-current="true"] { background:var(--accent); box-shadow:0 0 0 3px var(--sunken), 0 0 0 4px var(--accent); }
.s2-dots .gap { width:7px; }
.s2-action { font-family:var(--display); font-size:18px; font-weight:600; padding:10px 13px; border-radius:3px; background:var(--sunken); border-left:3px solid var(--accent); }
.s2-action small { display:block; font-family:var(--body); font-size:12.5px; font-weight:400; color:var(--muted); margin-top:2px; }
.s2-action .outcome { display:inline-block; margin-left:10px; vertical-align:middle; font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase;
                      padding:2px 8px; border-radius:2px; color:var(--ok); background:var(--ok-bg); }
.s2-action.lost { border-left-color:var(--alert); }
.s2-action.lost .outcome { color:var(--alert); background:var(--alert-bg); }
.s2-arena { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.5fr); gap:14px; padding:13px; border-radius:3px; background:var(--sunken); border:1px solid var(--border); }
@media (max-width:680px) { .s2-arena { grid-template-columns:minmax(0, 1fr); } }
.s2-side { display:flex; flex-direction:column; gap:7px; min-width:0; }
.s2-side .lbl { font-family:var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
.s2-me { display:flex; gap:10px; align-items:center; }
.s2-me img.pt { width:54px; height:80px; object-fit:cover; border-radius:3px; border:1px solid var(--border); }
.s2-orb { width:40px; height:40px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:18px; color:#2a1503;
          background:radial-gradient(circle at 35% 30%, #ffe08a, #f6a623 55%, #b8650f); }
.s2-hpline { display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 auto; width:100%; }
.s2-hpbar { height:9px; border-radius:3px; background:var(--surface); border:1px solid var(--border); overflow:hidden; position:relative; }
.s2-hpbar i { position:absolute; inset:0 auto 0 0; background:var(--s2-hp); }
.s2-hpbar.blocked { box-shadow:0 0 0 2px var(--s2-block); }
.s2-hptext { display:flex; justify-content:space-between; gap:8px; font-family:var(--mono); font-size:11.5px; font-variant-numeric:tabular-nums; }
.s2-hptext .blk { color:var(--s2-block); }
.s2-pw { display:flex; flex-wrap:wrap; gap:3px; }
.s2-pw span { display:inline-flex; align-items:center; gap:3px; font-size:11px; font-family:var(--mono); padding:1px 6px 1px 3px; border-radius:2px; background:var(--surface); border:1px solid var(--border); }
.s2-pw span.debuff { color:var(--alert); }
.s2-pw img { width:18px; height:18px; object-fit:contain; }
.s2-piles { font-family:var(--mono); font-size:11.5px; color:var(--muted); }
.s2-ally { display:flex; gap:8px; align-items:center; padding:5px 8px; border-radius:3px; border:1px solid var(--border); background:var(--surface); }
.s2-ally > img { width:34px; height:34px; object-fit:contain; flex:0 0 auto; }
.s2-ally .body { display:flex; flex-direction:column; gap:3px; flex:1 1 auto; min-width:0; }
.s2-ally .nm { font-weight:600; font-size:13.5px; }
.s2-ally.fallen { opacity:.55; }
.s2-ally .tag { margin-left:auto; font-family:var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
.s2-foes { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:flex-end; }
.s2-foe { display:flex; flex-direction:column; gap:5px; align-items:center; flex:1 1 104px; min-width:0; max-width:210px; }
.s2-foe img.art { height:104px; width:100%; object-fit:contain; }
.s2-foe .nofoe { height:64px; width:64px; display:grid; place-items:center; font-family:var(--display); font-size:28px; color:var(--muted);
                 border-radius:50% 50% 8px 8px; background:var(--surface); border:1px dashed var(--rule); }
.s2-foe .nm { font-weight:600; font-size:14px; text-align:center; }
.s2-foe.dead { opacity:.45; }
.s2-intent { font-size:12px; color:var(--muted); text-align:center; }
.s2-intent b { color:var(--ink); font-weight:600; }
.s2-intents { display:flex; gap:3px; justify-content:center; align-items:flex-end; min-height:26px; flex-wrap:wrap; }
.s2-intents .it { position:relative; display:inline-flex; align-items:flex-end; }
.s2-intents .it img { width:40px; height:40px; object-fit:contain; }
.s2-intents .it img + b { position:absolute; left:50%; bottom:-2px; transform:translateX(-50%); font-family:var(--display); font-size:16px; font-weight:700; color:#fff;
                          white-space:nowrap; -webkit-text-stroke:3px #241a1a; paint-order:stroke fill; }
.s2-intents .it-t { font-family:var(--mono); font-size:11px; padding:2px 6px; border-radius:2px; background:var(--surface); border:1px solid var(--border); white-space:nowrap; }
.s2-intents .it-t.atk { color:var(--alert); border-color:var(--alert); }
.s2-hand { display:flex; justify-content:center; padding:14px 2px 4px; flex-wrap:wrap; gap:6px 0; }
.s2-hand .s2-card { --w:100px; margin:0 -2px; transform:rotate(var(--rot, 0deg)) translateY(var(--dy, 0px)); }
.s2-hand .s2-card.mock { margin:0 2px; }
.s2-hand .s2-card.played { --dy:-12px; z-index:2; }
.s2-hand .s2-card.played.mock { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); }
.s2-hand .s2-card.played > img { filter:drop-shadow(0 0 8px var(--accent)); }
@media (max-width:640px) { .s2-hand .s2-card { --w:78px; } }

/* ---- start and end */
.s2-hero { display:flex; gap:14px; align-items:center; }
.s2-hero img.pt { width:76px; height:112px; object-fit:cover; border-radius:3px; border:1px solid var(--border); }
.s2-endline { font-family:var(--display); font-size:clamp(20px, 3.4vw, 26px); font-weight:700; line-height:1.2; }
.s2-endline.win { color:var(--ok); }
.s2-endline.loss { color:var(--alert); }
.s2-relicbar { display:flex; flex-wrap:wrap; gap:4px; padding:6px; border-radius:3px; background:var(--sunken); border:1px solid var(--border); }
.s2-relicbar .rb { width:40px; height:40px; display:grid; place-items:center; }
.s2-relicbar img { width:38px; height:38px; object-fit:contain; }
.s2-relicbar .s2-ph { width:auto; min-width:36px; height:22px; border-radius:2px; padding:0 4px; }
.s2-facts { display:flex; flex-wrap:wrap; gap:4px 18px; font-size:13.5px; color:var(--muted); }
.s2-facts b { color:var(--ink); font-weight:600; }

/* ---- run list additions */
.runrow .s2-pt { width:18px; height:26px; object-fit:cover; border-radius:2px; border:1px solid var(--border); vertical-align:middle; margin-right:7px; }

/* ---- the game's text: colour tags and the energy / star icons, on the player's tokens so both themes read */
.s2-tt-gold { color:var(--s2-gold); font-weight:600; }
.s2-tt-blue { color:var(--s2-block); font-weight:600; }
.s2-tt-green { color:var(--ok); font-weight:600; }
.s2-tt-red { color:var(--alert); font-weight:600; }
.s2-tt-purple { color:var(--s2-boss); }
.s2-tt-orange { color:var(--s2-rest); }
.s2-ico-energy { display:inline-block; width:13px; height:13px; border-radius:50%; vertical-align:-2px; margin:0 1px;
                 background:radial-gradient(circle at 35% 30%, #ffe08a, #f6a623 55%, #b8650f); }
.s2-ico-star { display:inline-block; color:var(--s2-gold); }
.s2-ico-star::before { content:"★"; }

/* ---- tooltips (only once text.json has loaded; before that the native title is the tooltip) */
[data-tip] { cursor:help; touch-action:manipulation; }  /* no double-tap zoom eating the second tap that closes a tip */
[data-tip]:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.s2-tip { position:fixed; z-index:50; display:none; width:min(300px, calc(100vw - 16px)); pointer-events:none;
          background:var(--surface); color:var(--ink); border:1px solid var(--rule); border-radius:3px;
          box-shadow:0 8px 24px rgba(0,0,0,.22); font-size:13.5px; line-height:1.45; }
.s2-tip-head { display:flex; gap:9px; align-items:center; padding:9px 11px 7px; border-bottom:1px solid var(--border); }
.s2-tip-head img { width:34px; height:34px; object-fit:contain; }
.s2-tip-name { font-family:var(--display); font-size:16px; font-weight:700; line-height:1.15; }
.s2-tip-sub { font-family:var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
.s2-tip-sub.debuff { color:var(--alert); }
.s2-tip-body { padding:8px 11px 10px; }

/* ---- badges on the end screen */
.s2-badges { display:flex; flex-direction:column; gap:8px; }
.s2-badge { display:flex; gap:10px; align-items:flex-start; }
.s2-badge .medal { flex:0 0 auto; width:16px; height:16px; margin-top:3px; border-radius:50%; background:var(--rule); border:2px solid var(--border); }
.s2-badge.bronze .medal { background:#B0723C; border-color:#7E4E25; }
.s2-badge.silver .medal { background:#B9C2C8; border-color:#7F8A91; }
.s2-badge.gold .medal { background:#E2B53B; border-color:#9C7A16; }
.s2-badge .nm { font-weight:600; font-size:14px; }
.s2-badge .tier { font-family:var(--mono); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); font-weight:400; }
.s2-badge .desc { font-size:13px; color:var(--muted); }

/* ------------------------------------------------------------------ the night scene
   While a Slay the Spire 2 run is open the page takes the game's own night: the main menu's storm
   sky over the city, on the prototype's palette. One committed look in both system themes, the way
   the stream graphics commit to the game's look, because a storm sky on a pale page reads as a
   mistake. The page's tokens are retuned on <body>, so every panel follows without its own rules.
   The sky and city are the publisher's art: they come from the installed art (<build>/ui/), never
   from the repo, and without them the scene is the same palette with a painted-in glow instead. */
body.s2-scene {
  color-scheme: dark;
  --bg:#15131c; --surface:#201c2b; --sunken:#110f17; --border:#352f44; --rule:#4a4160;
  --ink:#f1ebf4; --muted:#ab9fb8; --accent:#f2c14e; --accent-ink:#ffd978;
  --ok:#8ad49a; --ok-bg:rgba(138,212,154,.13); --warn:#f2c14e; --warn-bg:rgba(242,193,78,.14);
  --off:#7f7490; --off-bg:#272236; --alert:#ee7268; --alert-bg:rgba(238,114,104,.14);
  --s2-monster:#9A8FA8; --s2-elite:#E0564C; --s2-boss:#B98AE0; --s2-event:#78AEE0; --s2-ancient:#5FD0BF;
  --s2-shop:#E3C15A; --s2-rest:#EF7D32; --s2-treasure:#F2C14E;
  --s2-hp:#F07A6F; --s2-block:#78AEE0; --s2-gold:#F2C14E; --s2-gold-bg:#3A2F12;
  background:var(--bg);
}
/* The band behind the top of the page, as layers of the page's own background rather than a
   pseudo-element: a negative-z-index layer hid the page heading, and background layers cannot sit
   above anything. Top to bottom: the fade into the page colour at the band's foot, the city
   standing on that foot, a left-to-right shade so the heading stays readable, then the sky. Each
   layer is one band tall and does not repeat, so below the band only the page colour shows. It
   scrolls away with the heading, as the prototype's hero does. */
body.s2-scene {
  --s2-band:560px;
  background:
    linear-gradient(transparent 0, transparent calc(var(--s2-band) * .55), var(--bg) var(--s2-band)) 0 0 / 100% var(--s2-band) no-repeat,
    var(--s2-city, none) 62% calc(var(--s2-band) - min(860px, 92vw) * .29) / min(860px, 92vw) auto no-repeat,
    linear-gradient(90deg, rgba(21,19,28,.9) 0%, rgba(21,19,28,.55) 42%, rgba(21,19,28,.08) 78%) 0 0 / 100% var(--s2-band) no-repeat,
    var(--s2-sky, radial-gradient(60% 70% at 72% 28%, rgba(239,125,50,.38), transparent 70%)) 62% 0 / auto var(--s2-band) no-repeat,
    linear-gradient(#191623, #191623) 0 0 / 100% var(--s2-band) no-repeat,
    var(--bg);
}
body.s2-scene .wrap > header h1 { color:#fff6e6; text-shadow:0 2px 0 rgba(0,0,0,.35), 0 0 32px rgba(239,125,50,.25); }
body.s2-scene .wrap > header .eyebrow { color:#ffd978; }
body.s2-scene .wrap > header .hint { color:#e6dcea; }
/* Panels sit over the sky at the top of the page, so they get a touch of body rather than being flat. */
body.s2-scene .panel { background:linear-gradient(180deg, #272236, #201c2b); }