/*
  The seal test: the stage it is taken on, the questions, and the reveal at the end.
  Page rules only. The windows, the keys and the sprites are the Hall's (hall.css, gump.css), and the
  crests, the seals' marks and the saints' emblems are the kit's (components.css).

  Order: the banner and the inscriber, the way in, what the inscriber says, how far along you are, the
  questions (a slider, a list, tiles, the needle, the ink blot), the card, the reveal, narrow screens,
  calm.
*/

/* ------------------------------------------------------------------ the banner and the inscriber */

.scene-stall::before { background-image: url("../ui/img/scene-stall.svg"); }
.banner-stall { min-height: 14rem; }

/* The scene is one picture, three screen pixels to a pixel, in the middle of the banner. The
   inscriber and the press sit on it in the same box, at the places the scene leaves for them. */
.stall { position: absolute; left: 50%; bottom: 0; width: 1200px; height: 216px; margin-left: -600px; pointer-events: none; }
.stall-inscriber, .stall-press { position: absolute; bottom: 66px; background-repeat: no-repeat; image-rendering: pixelated; }
.stall-inscriber { left: 564px; width: 72px; height: 102px; background-image: url("../ui/img/inscriber.svg"); background-size: 432px 102px; }
.stall-press { left: 816px; width: 84px; height: 120px; background-image: url("../ui/img/press.svg"); background-size: 168px 120px; }
.stall-press[data-pose="down"] { background-position: -84px 0; }

/* Six frames side by side: idle, blink, write, write, nod, look up. */
.stall-inscriber[data-pose="idle"] { animation: inscriber-idle 5.2s steps(1) infinite; }
.stall-inscriber[data-pose="write"] { animation: inscriber-write .55s steps(1) infinite; }
.stall-inscriber[data-pose="nod"] { background-position: -288px 0; }
.stall-inscriber[data-pose="up"] { background-position: -360px 0; }
@keyframes inscriber-idle {
  0%, 90% { background-position: 0 0; }
  90.1%, 95% { background-position: -72px 0; }
  95.1%, 100% { background-position: 0 0; }
}
@keyframes inscriber-write {
  0%, 49.9% { background-position: -144px 0; }
  50%, 100% { background-position: -216px 0; }
}

/* ------------------------------------------------------------------ the way in */

.seal-page { padding-top: 2rem; padding-bottom: 1rem; }
.seal-gump { max-width: 58rem; margin-inline: auto; }
.seal-intro { display: grid; justify-items: center; gap: 1rem; padding: 2.2rem 0 2rem; }
.gump .key-big { min-height: 5rem; padding: .6rem 3.4rem .8rem; font-size: 34px; letter-spacing: .12em; text-transform: uppercase; }
.seal-note { margin: 1rem 0 0; font: 400 16px/1.5 var(--pixel); color: var(--ink-dim); }
.seal-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1.5rem; }
.seal-foot button { font: 400 16px/1.4 var(--pixel); padding-block: .25rem; }
.seal-foot button::before { content: none; }
.seal-count { color: var(--heat-4); }

/* ------------------------------------------------------------------ what the inscriber says */

.say { display: flex; align-items: flex-start; gap: 1rem; min-height: 4.6rem; margin: 0 0 1.2rem; }
.say-face {
  flex: none;
  width: 54px;
  height: 54px;
  background: radial-gradient(circle at 50% 70%, #6b4a22, #2a1c0e 70%), #2a1c0e;
  box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--well-lo), inset -2px -2px 0 2px var(--well-hi);
  position: relative;
  overflow: hidden;
}
.say-face::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../ui/img/inscriber.svg") -9px -6px / 432px 102px no-repeat;
  image-rendering: pixelated;
}
.say-text { margin: 0; padding-top: .15rem; font: 400 18px/1.5 var(--pixel); color: var(--ink); min-height: 3rem; }
.say-text.typing::after { content: "\2588"; margin-left: .25em; color: var(--heat-3); animation: seal-caret 1s steps(1) infinite; }
@keyframes seal-caret { 50% { opacity: 0; } }

/* ------------------------------------------------------------------ how far along you are */

.progress { display: flex; flex-wrap: wrap; gap: 3px; margin: 0 0 1.2rem; padding: 0; }
.progress i { display: block; width: 6px; height: 10px; background: #2a241b; }
.progress i.on { background: var(--heat-3); }
.progress i.here { background: var(--heat-5); animation: seal-caret 1s steps(1) infinite; }
.progress i.cut { margin-right: 9px; }

/* ------------------------------------------------------------------ the questions */

.q { animation: seal-in .26s var(--ease-out) both; }
@keyframes seal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.q-prompt { margin: 0 0 1.1rem; font: 400 20px/1.4 var(--pixel); color: var(--brass-hi); text-shadow: 2px 2px 0 #000; }
.q-hint { margin: .8rem 0 0; font: 400 16px/1.4 var(--pixel); color: var(--ink-faint); }

/* A list of answers, each a plate with its number. */
.opts { display: grid; grid-auto-rows: 1fr; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.opts > li { display: flex; }
.opt {
  --s: 2px;
  display: flex;
  align-items: center;
  gap: .9rem;
  width: 100%;
  padding: .85rem 1rem .9rem;
  text-align: left;
  font: 400 1rem/1.5 var(--read);
  color: var(--ink);
  background: linear-gradient(#26221b 0 50%, #1f1b15 50% 100%);
  border: 0;
  clip-path: var(--step);
  box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--well-hi), inset -2px -2px 0 2px var(--well-lo);
  cursor: pointer;
}
.opt-key { flex: none; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; font: 400 16px/1 var(--pixel); color: var(--heat-4); background: #0c0b0a; box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--well-lo), inset -2px -2px 0 2px var(--well-hi); }
.opt:hover, .opt:focus-visible { outline: 0; color: var(--heat-ink); background: linear-gradient(var(--heat-4) 0 50%, var(--heat-3) 50% 100%); box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--heat-5), inset -2px -2px 0 2px #b0561a; }
.opt:hover .opt-key, .opt:focus-visible .opt-key { color: var(--heat-4); }
.opt.chosen { color: var(--heat-5); background: linear-gradient(#b9531a 0 50%, #9b4314 50% 100%); box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px #ffb067, inset -2px -2px 0 2px #5e220a; }

/* A slider: two descriptions with five notches between them, the big ones at the ends. */
.slide { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1.2rem; padding: 1rem 0 .6rem; }
.slide-side { margin: 0; font: 400 1.125rem/1.5 var(--read); color: var(--ink); }
.slide-left { text-align: right; }
.slide-track { position: relative; display: flex; align-items: center; gap: .9rem; padding: .3rem .4rem; }
.slide-track::before { content: ""; position: absolute; left: .4rem; right: .4rem; top: 50%; height: 4px; margin-top: -2px; background: #0c0b0a; box-shadow: 0 0 0 2px #000, inset 0 -2px 0 var(--well-hi); }
.notch { position: relative; display: block; flex: none; padding: 0; background: #2b261d; border: 0; cursor: pointer; box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--bev-hi), inset -2px -2px 0 2px var(--bev-lo); }
.notch:nth-child(1), .notch:nth-child(5) { width: 38px; height: 38px; }
.notch:nth-child(2), .notch:nth-child(4) { width: 28px; height: 28px; }
.notch:nth-child(3) { width: 20px; height: 20px; }
.notch:hover, .notch:focus-visible { outline: 0; background: var(--heat-3); box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--heat-5), inset -2px -2px 0 2px #b0561a; }
.notch.chosen { background: var(--heat-2); box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px #ffb067, inset -2px -2px 0 2px #5e220a, 0 0 14px #ff741a88; }

/* Tiles: one answer each, in a grid. */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.tiles[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tiles > li { display: flex; }
.tile {
  --s: 2px;
  display: grid;
  flex: 1 1 auto;
  width: 100%;
  align-content: center;
  justify-items: center;
  gap: .5rem;
  min-height: 6rem;
  padding: .8rem .9rem;
  text-align: center;
  font: 400 1rem/1.45 var(--read);
  color: var(--ink);
  background: linear-gradient(#26221b 0 50%, #1f1b15 50% 100%);
  border: 0;
  clip-path: var(--step);
  box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--well-hi), inset -2px -2px 0 2px var(--well-lo);
  cursor: pointer;
  transition: transform .12s var(--ease-out);
}
.tile:hover, .tile:focus-visible { outline: 0; color: var(--heat-ink); background: linear-gradient(var(--heat-4) 0 50%, var(--heat-3) 50% 100%); box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--heat-5), inset -2px -2px 0 2px #b0561a; transform: translateY(-3px); }
.tile.chosen { color: var(--heat-5); background: linear-gradient(#b9531a 0 50%, #9b4314 50% 100%); box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px #ffb067, inset -2px -2px 0 2px #5e220a; }
.tile-swatch .swatch { display: block; width: 52px; height: 52px; background: var(--c); box-shadow: inset 0 0 0 2px #000, inset 4px 4px 0 #ffffff33, inset -4px -4px 0 #00000055; }
.tile-swatch { font: 400 16px/1.2 var(--pixel); }

/* A candle, made of squares: wax, a wick and a flame. */
.tile-candle { min-height: 10rem; font: 400 16px/1.2 var(--pixel); }
.candle { position: relative; display: block; width: 20px; height: 52px; margin-top: 18px; background: var(--c); box-shadow: inset 0 0 0 2px #000, inset 4px 0 0 #ffffff38, inset -4px 0 0 #00000066; }
.candle::before { content: ""; position: absolute; left: 8px; top: -6px; width: 4px; height: 6px; background: #000; }
.candle::after {
  content: "";
  position: absolute;
  left: 4px;
  top: -24px;
  width: 12px;
  height: 18px;
  background: linear-gradient(var(--heat-5) 0 30%, var(--heat-3) 30% 60%, var(--heat-2) 60%);
  clip-path: polygon(50% 0, 75% 30%, 100% 62%, 85% 90%, 50% 100%, 15% 90%, 0 62%, 25% 30%);
  filter: drop-shadow(0 0 6px #ff9a2e);
  animation: seal-flame .5s steps(1) infinite;
}
@keyframes seal-flame { 0% { transform: scaleY(1); } 33% { transform: scaleY(.88) translateY(1px); } 66% { transform: scaleY(1.06); } }

/* A tarot card: a numeral, and the name at the foot, in a frame. */
.tiles-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; gap: 1rem; max-width: 40rem; margin-inline: auto; }
.tile-card { aspect-ratio: 5 / 7; min-height: 0; align-content: space-between; padding: .8rem .5rem .9rem; background: linear-gradient(#2a2238 0 50%, #1c1628 50% 100%); box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--brass-mid), inset -2px -2px 0 2px var(--brass-lo), inset 0 0 0 8px #181220, inset 0 0 0 10px #6f5a37; }
.tile-card .card-num { font: 400 18px/1 var(--pixel); letter-spacing: .1em; color: var(--brass); }
.tile-card .card-big { font: 400 44px/1 var(--pixel); color: var(--brass-hi); text-shadow: 3px 3px 0 #000; }
.tile-card .card-name { font: 400 16px/1.25 var(--pixel); letter-spacing: .04em; color: var(--ink); }
.tile-card:hover, .tile-card:focus-visible { background: linear-gradient(#3a2f4d 0 50%, #2a2238 50% 100%); color: var(--ink); box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--heat-4), inset -2px -2px 0 2px var(--heat-1), inset 0 0 0 8px #241a30, inset 0 0 0 10px #b9531a, 0 0 18px #ff741a44; }
.tile-card:hover .card-name, .tile-card:focus-visible .card-name { color: var(--heat-5); }
.tile-card.chosen { background: linear-gradient(#4b3a63 0 50%, #392c4d 50% 100%); box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--heat-4), inset -2px -2px 0 2px var(--heat-1), inset 0 0 0 8px #2a1f3a, inset 0 0 0 10px var(--heat-3), 0 0 22px #ff741a66; }

/* The ink blot, drawn on a canvas and shown with its squares. */
.blot-wrap { display: grid; justify-items: center; margin: 0 0 1.2rem; }
.blot { width: 288px; height: 288px; max-width: 100%; aspect-ratio: 1; image-rendering: pixelated; background: #d8ceb4; box-shadow: inset 0 0 0 2px #000, 0 0 0 2px #000, 0 0 0 4px var(--brass-lo), 6px 6px 0 4px #000; }

/* The needle: an arm on the desk, and a line of ink that is drawn along it for as long as the button
   is held. The needle taps while the ink goes on. */
.needle { --ink: 0px; display: grid; justify-items: center; gap: 1.1rem; padding: .4rem 0; }
.needle-stage { position: relative; width: 340px; max-width: 100%; height: 150px; overflow: hidden; background: #14110d; box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--well-lo), inset -2px -2px 0 2px var(--well-hi); }
.arm { --s: 6px; position: absolute; left: 14px; right: 14px; bottom: 16px; height: 66px; background: linear-gradient(#e6c0a0 0 14%, #cf9f7c 14% 68%, #a97d5c 68%); clip-path: var(--step); box-shadow: inset 0 0 0 2px #000; }
.arm::before { content: ""; position: absolute; right: 18px; top: 14px; width: 4px; height: 26px; background: #b88a68; box-shadow: -14px 6px 0 #b88a68, -28px 10px 0 #b88a68; opacity: .55; }
.arm-ink { position: absolute; left: 18px; top: 26px; width: var(--ink); height: 6px; background: #26356e; box-shadow: 0 0 0 2px #121a3a; }
.needle-pin { position: absolute; left: calc(14px + 18px + var(--ink) - 3px); top: 4px; width: 6px; height: 66px; background: linear-gradient(90deg, #f4f8f6 0 33%, #cfd7d4 33% 66%, #797773 66%); }
.needle-pin::after { content: ""; position: absolute; left: 0; bottom: -10px; width: 6px; height: 10px; background: #cfd7d4; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.needle-pin::before { content: ""; position: absolute; left: -5px; top: -6px; width: 16px; height: 10px; background: var(--brass); box-shadow: inset 0 0 0 2px #000; }
.needle.held .needle-pin { animation: needle-tap .22s steps(2) infinite; }
@keyframes needle-tap { from { transform: translateY(0); } to { transform: translateY(12px); } }
.needle-say { margin: 0; min-height: 1.6rem; font: 400 18px/1.4 var(--pixel); color: var(--heat-4); }

/* ------------------------------------------------------------------ between the parts */

.part { display: grid; justify-items: center; gap: .8rem; padding: 1.4rem 0 1.2rem; text-align: center; animation: seal-in .4s var(--ease-out) both; }
.part-num { margin: 0; font: 400 16px/1 var(--pixel); letter-spacing: .35em; text-transform: uppercase; color: var(--brass-mid); }
.part-name { margin: 0; font: 400 40px/1.05 var(--pixel); color: var(--heat-4); text-shadow: 3px 3px 0 #000; }
.part-rule { width: 160px; height: 6px; background: repeating-linear-gradient(90deg, var(--heat-3) 0 6px, transparent 6px 12px); }

/* ------------------------------------------------------------------ the card */

.seal-card { display: grid; gap: 1.5rem; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; text-align: center; }
.trio-item { display: grid; align-content: start; justify-items: center; gap: .35rem; }
.trio-pic { display: grid; place-items: end center; min-height: 176px; margin-bottom: .4rem; }
.trio-kind { margin: 0; font: 400 16px/1 var(--pixel); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.trio-name { margin: 0; font: 400 30px/1.05 var(--pixel); color: var(--heat-4); text-shadow: 3px 3px 0 #000; }
.trio-line { margin: 0; font: 400 .9375rem/1.4 var(--read); color: var(--ink-dim); }
.seal-chart { max-width: 30rem; width: 100%; margin: 0 auto; }
.seal-reading { max-width: 46rem; margin: 0 auto; }
.seal-reading p { margin: 0 0 1.1em; font: 400 1.0625rem/1.8 var(--read); }
.seal-reading p:last-child { margin-bottom: 0; }
.seal-done .keys { justify-content: center; }
.seal-done .seal-note { text-align: center; }

/* ------------------------------------------------------------------ the reveal */

.reveal { position: fixed; inset: 0; z-index: 90; overflow-y: auto; background: radial-gradient(ellipse at 50% 38%, #24170d 0, #0a0806 62%, #050403 100%); animation: seal-fade .5s ease both; }
@keyframes seal-fade { from { opacity: 0; } to { opacity: 1; } }
.reveal::after { content: ""; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, transparent 0 2px, #00000030 2px 4px); }
.reveal-stage { position: relative; display: grid; align-content: center; justify-items: center; gap: 1.3rem; width: min(980px, 100%); min-height: 100vh; margin-inline: auto; padding: 4.5rem 1rem 3.5rem; }
.reveal-skip { position: fixed; right: 1.2rem; top: 1rem; z-index: 2; }
.rv { display: grid; justify-items: center; gap: 1.2rem; width: 100%; animation: seal-in .45s var(--ease-out) both; }
.rv.out { animation: seal-out .4s ease both; }
@keyframes seal-out { to { opacity: 0; transform: scale(.96); } }
.rv-title { margin: 0; min-height: 1.6rem; font: 400 22px/1.4 var(--pixel); letter-spacing: .18em; text-transform: uppercase; color: var(--brass); text-align: center; text-shadow: 2px 2px 0 #000; }
.rv-title.typing::after { content: "\2588"; margin-left: .2em; color: var(--heat-3); animation: seal-caret 1s steps(1) infinite; }

/* the four lines of how you go about things */
.bars { display: grid; gap: 1rem; width: min(40rem, 100%); }
.bar-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 5.5rem; align-items: center; gap: .8rem; font: 400 18px/1.2 var(--pixel); color: var(--ink-dim); }
.bar-row > span:first-child { text-align: right; }
.bar-track { position: relative; height: 22px; background: #0c0b0a; box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--well-lo), inset -2px -2px 0 2px var(--well-hi); }
.bar-mid { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 4px; margin-left: -2px; background: var(--brass-lo); }
.bar-fill { position: absolute; top: 5px; bottom: 5px; width: 0; background: linear-gradient(var(--heat-5) 0 30%, var(--heat-3) 30% 65%, var(--heat-2) 65%); transition: width .9s steps(16); }
.bar-row[data-side="left"] .bar-fill { right: 50%; }
.bar-row[data-side="right"] .bar-fill { left: 50%; }
.bar-row.won .bar-fill { width: var(--w); }
.bar-row.won > span.lean { color: var(--heat-4); text-shadow: 0 0 10px #ff741a88; }
.bar-say { grid-column: 1 / -1; margin: -.3rem 0 0; min-height: 1.3em; font: 400 .9375rem/1.4 var(--read); color: var(--ink-faint); text-align: center; opacity: 0; transition: opacity .3s; }
.bar-row.won .bar-say { opacity: 1; }

/* the three lines of the seal, cut one at a time from the bottom, and the press that cuts them */
.plate-row { display: flex; align-items: flex-end; justify-content: center; gap: 2.4rem; }
.rv-press { flex: none; width: 112px; height: 160px; background: url("../ui/img/press.svg") 0 0 / 224px 160px no-repeat; image-rendering: pixelated; }
.rv-press[data-pose="down"] { background-position: -112px 0; }
.plate { display: grid; gap: 14px; width: 230px; padding: 24px 26px; background: #14110d; box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px var(--bev-hi), inset -2px -2px 0 2px var(--bev-lo), 0 0 0 2px #000, 8px 8px 0 2px #000; }
.plate-line { display: flex; justify-content: space-between; height: 26px; }
.plate-line i { display: block; flex: none; background: linear-gradient(var(--brass-hi) 0 33%, var(--brass) 33% 66%, var(--brass-lo) 66%); transform: scaleX(0); transition: transform .35s steps(8); }
.plate-line i.whole { width: 100%; }
.plate-line i.half { width: 42%; }
.plate-line i.half:first-child { transform-origin: right center; }
.plate-line i.half:last-child { transform-origin: left center; }
.plate-line.cut i { transform: scaleX(1); }
.plate-line.cut { filter: drop-shadow(0 0 10px #ffa93d88); }
.rv-name { margin: 0; font: 400 44px/1 var(--pixel); color: var(--heat-4); text-shadow: 4px 4px 0 #000, 0 0 24px #ff741a66; text-align: center; }
.rv-sub { margin: 0; font: 400 18px/1.4 var(--pixel); color: var(--ink-dim); text-align: center; }

/* the nine Houses on a wheel, each as far out as it came */
.wheel { width: min(520px, 100%); height: auto; overflow: visible; }
.wheel .spoke { stroke: var(--brass-lo); stroke-width: 2; stroke-dasharray: 4 4; }
.wheel .ring { fill: none; stroke: #2a241b; stroke-width: 2; stroke-dasharray: 2 6; }
.wheel .arm { stroke: var(--heat-3); stroke-width: 6; transition: x2 1.2s steps(18), y2 1.2s steps(18); }
.wheel .crest-g { transition: transform 1.2s steps(18), opacity .6s; }
.wheel.decided .crest-g:not(.winner) { opacity: .12; }
.wheel.decided .arm, .wheel.decided .spoke { opacity: .12; transition: opacity .6s; }
.wheel .winner-g { transition: transform 1s steps(14); }

/* the eight saints as candles, each burning as high as it came */
.candles { display: flex; align-items: flex-end; justify-content: center; gap: clamp(.5rem, 2.4vw, 1.8rem); width: 100%; min-height: 300px; }
.rcandle { display: grid; justify-items: center; align-content: end; gap: .6rem; }
.rcandle-body { position: relative; width: 30px; height: 120px; background: linear-gradient(90deg, #f2ede0 0 25%, #d8d2c2 25% 75%, #aaa493 75%); box-shadow: inset 0 0 0 2px #000; }
.rcandle-body::before { content: ""; position: absolute; left: 13px; top: -9px; width: 4px; height: 9px; background: #000; }
.rflame { position: absolute; left: 50%; bottom: calc(100% + 6px); width: 20px; height: 34px; margin-left: -10px; transform-origin: 50% 100%; transform: scale(var(--k, .3)); background: linear-gradient(var(--heat-5) 0 30%, var(--heat-3) 30% 60%, var(--heat-2) 60%); clip-path: polygon(50% 0, 75% 30%, 100% 62%, 85% 90%, 50% 100%, 15% 90%, 0 62%, 25% 30%); filter: drop-shadow(0 0 8px #ff9a2e); transition: transform 1s steps(10); animation: seal-flame .5s steps(1) infinite; }
.rcandle.out .rflame { transform: scale(0); transition: transform .5s steps(5); }
.rcandle.out { opacity: .35; transition: opacity .6s; }
.rcandle-name { margin: 0; font: 400 16px/1.2 var(--pixel); color: var(--ink-dim); text-align: center; min-width: 4.5rem; }
.rcandle.win .rcandle-name { color: var(--heat-4); }
.halo { display: grid; place-items: center; width: 190px; height: 190px; background: radial-gradient(circle, #ffb06755 0, #ff741a22 45%, transparent 70%); animation: seal-in .6s var(--ease-out) both; }

/* the card, arriving a piece at a time */
.reveal .seal-card { width: 100%; }
.reveal .trio-item.pre, .reveal [data-part].pre { opacity: 0; transform: translateY(14px); }
.reveal .trio-item, .reveal [data-part] { transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.reveal .seal-reading p.typing::after { content: "\2588"; margin-left: .2em; color: var(--heat-3); animation: seal-caret 1s steps(1) infinite; }
.reveal-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 1rem; margin: 1rem 0 0; }
.flash-white { position: fixed; inset: 0; z-index: 95; background: #fff6e0; pointer-events: none; animation: seal-flash .5s ease-out both; }
@keyframes seal-flash { from { opacity: .85; } to { opacity: 0; } }
html[data-fx="grand"] .reveal-stage.shake { animation: seal-shake .35s steps(2); }
@keyframes seal-shake { 0% { transform: translate(0, 0); } 25% { transform: translate(-6px, 3px); } 50% { transform: translate(5px, -4px); } 75% { transform: translate(-3px, -2px); } 100% { transform: none; } }

/* ------------------------------------------------------------------ narrow screens */

@media (max-width: 760px) {
  .slide { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .slide-left, .slide-side { text-align: center; }
  .slide-track { justify-content: center; }
  .trio { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .bar-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bar-row .bar-track { grid-column: 1 / -1; grid-row: 2; }
  .bar-row > span:first-child { text-align: left; }
  .bar-row > span:nth-child(3) { text-align: right; }
  .part-name { font-size: 30px; }
  .rv-name { font-size: 32px; }
  .tiles, .tiles[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 20rem; }
}

/* ------------------------------------------------------------------ calm */

html[data-fx="calm"] .stall-inscriber, html[data-fx="calm"] .rflame, html[data-fx="calm"] .candle::after,
html[data-fx="calm"] .needle.held .needle-pin, html[data-fx="calm"] .progress i.here { animation: none; }
html[data-fx="calm"] .q, html[data-fx="calm"] .part, html[data-fx="calm"] .rv, html[data-fx="calm"] .reveal,
html[data-fx="calm"] .halo { animation: none; }
html[data-fx="calm"] .tile, html[data-fx="calm"] .bar-fill, html[data-fx="calm"] .plate-line i,
html[data-fx="calm"] .wheel .arm, html[data-fx="calm"] .wheel .crest-g, html[data-fx="calm"] .rflame,
html[data-fx="calm"] .reveal .trio-item, html[data-fx="calm"] .reveal [data-part] { transition: none; }