/* Stained Glass: scene styles, prefix sg- */
.sg-cap { fill: var(--faint); font: 700 15px var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.sg-tag { position: absolute; font: 700 12px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--dim); white-space: nowrap; pointer-events: none; }
.sg-tag.sg-mid { transform: translateX(-50%); } .sg-tag.sg-gold { color: var(--gold); }
.sg-figbox { position: relative; }

/* photographs: one rule for the landscape panel and the square roundel */
.hero.sg-wide img { width: auto; max-width: 100%; max-height: 246px; border-radius: 10px; }

/* the panel, built up and lit across five beats */
.sg-panelbox { display: grid; place-items: center; width: 100%; }
.sg-panel { --sg-lead: #0a0a0d; width: min(100%, 190px); height: auto; display: block; border-radius: 10px; }
.sg-panel .sg-pc { fill: #141a2c; stroke: var(--sg-lead); stroke-width: 3.2; stroke-linejoin: round; transition: fill .35s; }
.sg-panel .sg-hit { fill: transparent; }
.sg-panel .sg-walllit { fill: #6f6a5c; opacity: 0; }
.sg-panel .sg-scrim { fill: #b9b3a4; opacity: 0; }
.sg-glass { transition: filter .25s; }
/* the cutline: the glazier's drawing, before any glass is in it */
.sg-cut .sg-wall { fill: #cfc8b4; }
.sg-cut .sg-pc { fill: none; stroke: rgba(30,26,20,.55); stroke-width: 1.2; stroke-dasharray: 4 3; }
.sg-cut .sg-cap { fill: #514a3d; stroke: #cfc8b4; stroke-width: 3; paint-order: stroke; }
.sg-cut .sg-t.sg-done .sg-pc { stroke: var(--sg-lead); stroke-width: 3.2; stroke-dasharray: none; }
.sg-t .sg-cap { transition: opacity .3s; }
.sg-t.sg-done .sg-cap { opacity: 0; }

/* fired paint: opaque, so it can only take light away */
.sg-paint { opacity: 0; transition: opacity .8s; pointer-events: none; }
.sg-painted .sg-paint { opacity: 1; }
.sg-wash { fill: rgba(18,12,6,.4); }
.sg-line { fill: none; stroke: #120d08; stroke-width: 2.2; stroke-linecap: round; }
.sg-scr { fill: none; stroke: #ffe9a8; stroke-width: 4.5; stroke-linecap: round; opacity: 0; transition: opacity .4s; }
.sg-scr.on { opacity: 1; filter: drop-shadow(0 0 4px rgba(255,233,168,.8)); }
.sg-smudge { fill: none; stroke: #120d08; stroke-width: 5; stroke-linecap: round; opacity: 0; transition: opacity .4s; }
.sg-smudge.on { opacity: .9; }

/* the pot, and the three jars */
.sg-melt { display: grid; place-items: center; gap: 10px; width: 100%; }
.sg-pot { width: min(100%, 288px); height: auto; display: block; }
.sg-crucible { fill: #4a443b; stroke: #241f1a; stroke-width: 2; }
.sg-heat { fill: var(--gold); opacity: .16; }
.sg-flames path { fill: var(--gold); opacity: .4; }
.sg-melt-pool { filter: drop-shadow(0 -2px 7px rgba(255,205,130,.45)); }
.sg-melt-pool { fill: #cfd6e2; transition: fill .4s; }
.sg-melt-cap { fill: var(--dim); font: 600 13px var(--mono); }
.sg-pinch { fill: #cfd6e2; opacity: 0; }
.sg-pinch.drop { animation: sgDrop .3s ease-in both; }
@keyframes sgDrop { from { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(26px); } }
.sg-melt-rim { fill: none; stroke: #241f1a; stroke-width: 2; }
.sg-swatches { display: flex; gap: 8px; }
.sg-swatches i { width: 34px; height: 22px; border-radius: 5px; background: var(--raised); border: 1px solid var(--line); transition: background .3s; }
.sg-jars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.btn.sg-jar { flex-direction: column; gap: 5px; min-height: 60px; font-size: 12px; letter-spacing: .04em; padding: 8px 4px; }
.btn.sg-jar i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }
.btn.sg-jar.lit { box-shadow: 0 5px 0 #0c1020, 0 0 0 2px var(--violet-bright); }

/* the red sheet on a light box, and the flashed section under it */
.sg-redbox { display: grid; place-items: center; gap: 12px; width: 100%; }
.sg-red { width: min(100%, 200px); height: auto; display: block; }
.sg-lightbox { fill: #fdf3d8; }
.sg-sheet { fill: #e23e3a; transition: fill .25s; }
.sg-pieces { width: min(100%, 320px); margin: 20px auto 0; }
.sg-piecesvg { width: 100%; height: auto; display: block; }
.sg-piece { cursor: pointer; transition: opacity .3s; }
.sg-piece .sg-hit { fill: transparent; }
.sg-piece.off { opacity: .45; pointer-events: none; }
.sg-piece.right .sg-hit { stroke: var(--mint); stroke-width: 2; }
.sg-piece.wrong .sg-hit { stroke: var(--red); stroke-width: 2; }
.sg-glow { filter: drop-shadow(0 0 6px rgba(255,120,100,.35)); }
.sg-crack { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.sg-redbox .gauge { width: min(100%, 250px); }

/* the chipped edge, the ground star */
.sg-chip, .sg-star { width: min(100%, 280px); height: auto; display: block; margin: 0 auto; }
.sg-slab { stroke: #241f1a; stroke-width: 1; }
.sg-chipedge { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.4; stroke-linejoin: round; }
.sg-sec { transition: opacity .4s; }
.sg-sec.off { opacity: 0; }
.sg-starbox { width: min(100%, 280px); margin: 0 auto; }
.sg-flip { transform: scaleX(-1); }
.sg-panel { transition: opacity .6s; }
.sg-panel.sg-night { opacity: .12; }
.sg-seccap { fill: var(--dim); font: 700 12px var(--sans); letter-spacing: .04em; text-transform: uppercase; }

@media (max-height: 700px) {
  .sg-chip, .sg-star, .sg-starbox { width: min(100%, 230px); }
  .hero.sg-wide img { max-height: 196px; }
  .sg-panel { width: min(100%, 168px); }
  .sg-pot { width: min(100%, 250px); }
  .sg-red { width: min(100%, 180px); }
}
.sg-chip .sg-seccap { font-size: 15px; }