/* The Study Rival room: the Threshold. Everything here is scoped under the
   room's own html[data-room], so no other room's sheet can meet it.

   js/rooms/study-rival.js lays the hall out and writes, on the stage:
     --hx --hy --hw --hh   where the painted hall sits, in px
     --k                   its scale against the 1920 by 1072 master
     --seam-x              the gate's seam, in px from the left
     --above --below       the dark above and below the hall on a tall window
   and on the hall, the light of your fire (the fire itself is drawn on a
   canvas by the js):
     --glow                the light a leap throws on the wall
     --ember               the embers left in the bowl when it is low
   Everything inside the hall is placed in percentages of the master, as the
   game traced it in regions.json.

   The materials are the game's own (temple.css): bronze is raised and
   catches the light on its top edge, words are cut into it, and the one
   light in this hall is the gate, dead ahead and a little above, so every
   shadow falls straight down. */

html[data-room='study-rival'] .stage { background: var(--ground); }

/* ---------------------------------------------------------------- the hall */

html[data-room='study-rival'] .th-hall {
  position: absolute;
  z-index: 1;
  left: var(--hx, 0);
  top: var(--hy, 0);
  width: var(--hw, 100%);
  height: var(--hh, 100%);
}
/* a tall window shows the hall as a band; its ceiling goes into the dark
   rather than stopping at an edge, and its floor carries on below it (the
   near floor, further down) */
html[data-room='study-rival'] .stage[data-frame='band'] .th-hall {
  -webkit-mask: linear-gradient(to bottom, transparent, #000 9%);
  mask: linear-gradient(to bottom, transparent, #000 9%);
}

html[data-room='study-rival'] .th-plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: fill;
  pointer-events: none;
}

/* the cold copy the js lays over your brazier as your fire goes down */
html[data-room='study-rival'] .th-cold {
  position: absolute;
  display: block;
  pointer-events: none;
}

/* ---------------------------------------------------------------- your fire */

/* what is left in the bowl when the flame is nearly out */
html[data-room='study-rival'] .th-ember {
  position: absolute;
  left: 26.3%;
  top: 57.4%;
  width: 6.4%;
  height: 3.6%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 150, 70, 0.9), rgba(196, 60, 20, 0.4) 55%, transparent);
  mix-blend-mode: screen;
  filter: blur(calc(var(--k, 1) * 5px));
  opacity: var(--ember, 0);
}

/* the light your fire throws on the wall when it leaps */
html[data-room='study-rival'] .th-glow {
  position: absolute;
  left: 20.5%;
  top: 27%;
  width: 19%;
  height: 40%;
  pointer-events: none;
  background:
    radial-gradient(40% 44% at 50% 64%, rgba(255, 104, 40, 0.5), transparent 72%),
    radial-gradient(64% 62% at 50% 58%, rgba(214, 64, 24, 0.32), transparent 76%);
  mix-blend-mode: screen;
  filter: blur(calc(var(--k, 1) * 18px));
  opacity: var(--glow, 0);
}

/* the cut-out is only fetched once the room is up and seen (the js sets
   is-kindled a moment after arrival), so it is no part of the first view */
html[data-room='study-rival'] .is-kindled .th-fire {
  background:
    url(/art/rooms/study-rival/threshold-flame-v1.webp) no-repeat 50% 100% / 100% 100%,
    radial-gradient(26% 40% at 50% 72%, rgba(255, 250, 226, 1), rgba(255, 204, 110, 0.7) 50%, transparent 100%),
    radial-gradient(40% 30% at 50% 94%, rgba(255, 214, 140, 0.8), transparent 100%);
}
html[data-room='study-rival'] .th-fire {
  /* the cut-out's rectangle never shows */
  -webkit-mask: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent), linear-gradient(to bottom, transparent, #000 10%);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent), linear-gradient(to bottom, transparent, #000 10%);
  mask-composite: intersect;
  filter: blur(calc(var(--k, 1) * 0.5px));
}

/* ------------------------------------------------------- the rival's fire */

/* As the game has it (rooms.css, the found state of the Threshold): the
   plate's own fire, mirrored so it is not a traceable copy, growing up out
   of the bowl from its base. The cut-out's holes are filled with a hot core
   and its edges feathered; its glow is laid under it and added as light. */
html[data-room='study-rival'] .th-theirs {
  position: absolute;
  pointer-events: none;
  overflow: visible;
}
html[data-room='study-rival'] .th-fire {
  position: absolute;
  left: 50%;
  bottom: -1%;
  width: 36%;
  height: 78%;
  transform: translateX(-50%) scaleX(-1) scaleY(0.18);
  transform-origin: 50% 100%;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.22, 1, 0.3, 1);
}
html[data-room='study-rival'] .th-wash {
  position: absolute;
  left: 50%;
  bottom: -26%;
  width: 460%;
  height: 260%;
  transform: translateX(-50%);
  background:
    radial-gradient(12% 18% at 50% 76%, rgba(255, 200, 120, 0.55), transparent 100%),
    radial-gradient(40% 44% at 50% 64%, rgba(255, 104, 40, 0.5), transparent 72%),
    radial-gradient(64% 62% at 50% 58%, rgba(214, 64, 24, 0.32), transparent 76%);
  mix-blend-mode: screen;
  filter: blur(calc(var(--k, 1) * 18px));
  opacity: 0;
  transition: opacity 0.9s ease;
}
html[data-room='study-rival'] .is-found .th-fire {
  opacity: 1;
  transform: translateX(-50%) scaleX(-1) scaleY(1);
}
html[data-room='study-rival'] .is-found .th-wash { opacity: 1; }
/* The fire moving: the game's flicker when everything may move, and a slow
   breath of its light otherwise. Both wait until the fire has grown and its
   light come up, because an animation on a property takes it from the
   transition at once, and the growing would never be seen. */
html[data-motion='full'][data-room='study-rival'] .is-found .th-fire { animation: th-flicker 2.4s ease-in-out 0.7s infinite; }
html[data-room='study-rival'] .is-found .th-wash { animation: th-breathe 5.2s ease-in-out 0.9s infinite alternate; }
/* Every keyframe restates the mirror and the centring, because transform is
   one property (the game's own note). */
@keyframes th-flicker {
  0%, 100% { transform: translateX(-50%) scaleX(-1)    scaleY(1); }
  23%      { transform: translateX(-50%) scaleX(-0.94) scaleY(1.06); }
  46%      { transform: translateX(-51%) scaleX(-1.05) scaleY(0.95); }
  71%      { transform: translateX(-49%) scaleX(-0.97) scaleY(1.03); }
}
@keyframes th-breathe { from { opacity: 1; } to { opacity: 0.8; } }
/* a system that asked for less motion sees it catch whole, in a fade */
html[data-motion='calm'][data-room='study-rival'] .th-fire {
  transform: translateX(-50%) scaleX(-1) scaleY(1);
  transition: opacity 0.6s ease;
}

/* ------------------------------------------------------------ the seam */

/* The gate's crack blazing when the rival is found: a white core down the
   seam and its bloom, and the floor under it catching the same light. */
html[data-room='study-rival'] .th-blaze {
  position: absolute;
  left: 46.8%;
  width: 7%;
  top: 29%;
  height: 36%;
  pointer-events: none;
  background:
    linear-gradient(to right, transparent 46%, rgba(238, 246, 255, 0.95) 50%, transparent 54%),
    radial-gradient(50% 50% at 50% 50%, rgba(190, 220, 255, 0.5), transparent 72%);
  mix-blend-mode: screen;
  filter: blur(calc(var(--k, 1) * 3px));
  opacity: 0;
  transition: opacity 0.9s ease;
}
html[data-room='study-rival'] .th-blaze--floor {
  left: 44.3%;
  width: 12%;
  top: 62%;
  height: 38%;
  background:
    radial-gradient(40% 60% at 50% 18%, rgba(200, 225, 255, 0.4), transparent 75%),
    linear-gradient(to right, transparent 45%, rgba(220, 236, 255, 0.3) 50%, transparent 55%);
  filter: blur(calc(var(--k, 1) * 7px));
}
html[data-room='study-rival'] .is-found .th-blaze { opacity: 1; }
html[data-motion='full'][data-room='study-rival'] .is-found .th-blaze { animation: th-pulse 3.6s ease-in-out 0.9s infinite alternate; }
@keyframes th-pulse { from { opacity: 1; } to { opacity: 0.78; } }

/* ------------------------------------------------------------ the gate */

/* The door out is the gate itself. Its seam brightens under the hand or the
   keyboard; shut, that is all it does. */
html[data-room='study-rival'] .th-hall .door-out {
  position: absolute;
  z-index: 2;
  left: 37.5%;
  top: 32.5%;
  right: auto;
  bottom: auto;
  width: 25%;
  height: 30%;
  aspect-ratio: auto;
  border-radius: 2px;
  background: none;
  box-shadow: none;
  filter: none;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
html[data-room='study-rival'] .th-hall a.door-out { cursor: pointer; }
html[data-room='study-rival'] .th-hall .door-out::before {
  content: '';
  position: absolute;
  /* the seam, at x 0.503 of the hall, runs from above the gate to the floor */
  left: 51.2%;
  top: -5%;
  height: 113%;
  width: 22%;
  transform: translateX(-50%);
  background:
    linear-gradient(to right, transparent 45%, rgba(236, 246, 255, 0.9) 50%, transparent 55%),
    radial-gradient(50% 50% at 50% 50%, rgba(190, 220, 255, 0.42), transparent 72%);
  mix-blend-mode: screen;
  filter: blur(calc(var(--k, 1) * 2px));
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
html[data-room='study-rival'] .th-hall .door-out:hover::before,
html[data-room='study-rival'] .th-hall .door-out:focus-visible::before { opacity: 0.75; }
html[data-room='study-rival'] .th-hall .door-out:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }
/* when the gate is a door, its words hang under it on the near floor */
html[data-room='study-rival'] .th-hall a.door-out .door-out__label {
  top: 104%;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--face);
  font-style: normal;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  padding: 0.2em 0.9em 0.35em;
  background: radial-gradient(closest-side, oklch(8% 0.01 250 / 0.85), transparent);
}

/* -------------------------------------------------------- your brazier */

/* At rest, your own brazier is the way to go again: the altar and the fire
   on it, answering to the hand. */
html[data-room='study-rival'] .th-brazier {
  position: absolute;
  z-index: 2;
  left: 11%;
  top: 40%;
  width: 25%;
  height: 48%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  visibility: hidden;
  -webkit-tap-highlight-color: transparent;
}
html[data-room='study-rival'] .is-resting .th-brazier { visibility: visible; }
html[data-room='study-rival'] .th-brazier:focus-visible { outline: 2px solid var(--ring); outline-offset: -6px; }
/* the embers in the bowl breathe while it waits for a hand */
html[data-room='study-rival'] .th-brazier::after {
  content: '';
  position: absolute;
  left: 61%;
  top: 34%;
  width: 26%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 170, 80, 0.75), rgba(214, 70, 24, 0.3) 60%, transparent);
  mix-blend-mode: screen;
  filter: blur(calc(var(--k, 1) * 6px));
  opacity: 0;
  pointer-events: none;
}
html[data-room='study-rival'] .is-resting .th-brazier::after { animation: th-invite 3.8s ease-in-out infinite alternate; }
@keyframes th-invite { from { opacity: 0.1; } to { opacity: 0.7; } }

/* ------------------------------------------------ the blade of light */

/* On a tall window the hall is a band, and the seam's light carries on
   through the dark above it (the slit in the ceiling) and below it (its
   reflection on the wet floor, running down to the stones). */
html[data-room='study-rival'] .th-shaft {
  position: absolute;
  z-index: 2;
  left: var(--seam-x, 50%);
  width: calc(var(--hw, 1000px) * 0.03);
  transform: translateX(-50%);
  pointer-events: none;
  display: none;
  mix-blend-mode: screen;
  -webkit-mask: linear-gradient(to right, transparent, #000 44%, #000 56%, transparent);
  mask: linear-gradient(to right, transparent, #000 44%, #000 56%, transparent);
}
html[data-room='study-rival'] .stage[data-frame='band'] .th-shaft { display: block; }
html[data-room='study-rival'] .th-shaft--up {
  top: 0;
  height: calc(var(--above, 0px) + var(--hh, 0px) * 0.05);
  background: linear-gradient(to top, rgba(220, 236, 255, 0.55), rgba(220, 236, 255, 0.14) 55%, transparent);
}
html[data-room='study-rival'] .th-shaft--down {
  top: calc(var(--hy, 0px) + var(--hh, 0px) * 0.9);
  height: calc(var(--below, 0px) + var(--hh, 0px) * 0.1);
  background: linear-gradient(to bottom, rgba(220, 236, 255, 0.3), rgba(220, 236, 255, 0.08) 60%, transparent);
}

/* ---------------------------------------------- the stele and the stones */

/* One place on the near floor: a stone stele with the question cut into it,
   standing behind four flagstones let into the floor, each with an answer
   cut into its face. The stones lie in the floor's own perspective and are
   always there; the stele comes up out of the floor for a run and goes back
   into it after. Both are the hall's cold stone, and the letters are cut and
   gilded, so they take the light of your fire: bright while it burns, dull
   as it sinks (--fire, written by the js, is its height). */
html[data-room='study-rival'] .th-altar {
  position: absolute;
  z-index: 3;
  left: var(--seam-x, 50%);
  bottom: calc(max(12px, 2.4cqh) + env(safe-area-inset-bottom));
  width: min(calc(100cqw - 2 * var(--edge-w) - 20px), 760px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  --warm: calc(0.04 + 0.12 * min(var(--fire, 1), 1.6));
}

/* the floor line the stele stands on: nothing of it shows below it */
html[data-room='study-rival'] .th-stele {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: -2px;
  clip-path: inset(-200px -200px 0 -200px);
}

/* The stone the words are cut in. Its top edge takes the gate's cold light,
   its left side a little of your fire, and a line is cut just inside its
   edge, the way the hall's own panels are. */
html[data-room='study-rival'] .th-plaque,
html[data-room='study-rival'] .th-tablet {
  font-family: var(--face);
  font-variant: small-caps;
  color: #c7ab70;
  /* cut and gilded: the upper wall of each stroke in shadow, the gilt in the
     cut catching the fire */
  text-shadow:
    0 -1px 0 rgba(0, 0, 0, 0.85),
    0 1px 0 rgba(214, 228, 250, 0.1),
    0 0 12px rgba(255, 160, 80, var(--warm));
}

html[data-room='study-rival'] .th-plaque {
  position: relative;
  min-width: min(100%, 300px);
  max-width: min(94%, 600px);
  padding: clamp(14px, 2.2cqh, 22px) clamp(24px, 3.2cqw, 40px) clamp(16px, 2.4cqh, 24px);
  text-align: center;
  background:
    linear-gradient(180deg, rgba(206, 222, 246, 0.13), transparent 26%),
    linear-gradient(90deg, rgba(255, 138, 58, var(--warm)), transparent 42%),
    linear-gradient(180deg, #2c333c 0%, #1e242c 55%, #151a20 100%);
  box-shadow:
    inset 0 1px 0 rgba(214, 228, 250, 0.28),
    inset 1px 0 0 rgba(255, 170, 100, 0.08),
    inset 0 0 26px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(3, 4, 6, 0.7);
  /* the top corners knocked off, as a mason would */
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%, 0 8px);
}
/* the stone's grain */
html[data-room='study-rival'] .th-plaque::before,
html[data-room='study-rival'] .th-tablet::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMDAnIGhlaWdodD0nMjAwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjM1JyBudW1PY3RhdmVzPSc1JyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzIwMCcgaGVpZ2h0PScyMDAnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");
  background-size: 200px 200px;
}
/* the line cut round the face */
html[data-room='study-rival'] .th-plaque::after {
  content: '';
  position: absolute;
  inset: 7px;
  pointer-events: none;
  border: 1px solid rgba(0, 0, 0, 0.55);
  box-shadow: 0 1px 0 rgba(214, 228, 250, 0.08), inset 0 1px 0 rgba(214, 228, 250, 0.06);
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%, 0 5px);
}

html[data-room='study-rival'] .th-q {
  position: relative;
  margin: 0;
  line-height: 1.12;
  letter-spacing: 0.035em;
}
html[data-room='study-rival'] .th-q__lead {
  display: block;
  margin-bottom: 0.32em;
  font-size: clamp(14px, min(1.3cqw, 2.3cqh), 19px);
  letter-spacing: 0.12em;
  color: #a48d62;
}
html[data-room='study-rival'] .th-q[data-lead='no'] .th-q__lead { display: none; }
html[data-room='study-rival'] .th-q__body {
  display: block;
  white-space: pre-wrap;
  font-size: clamp(24px, min(2.6cqw, 4.6cqh), 38px);
}
html[data-room='study-rival'] .th-q[data-long='yes'] .th-q__body {
  font-size: clamp(18px, min(1.75cqw, 3.3cqh), 26px);
  max-width: 24em;
  text-wrap: balance;
}

/* The flagstones: four in a course across the aisle, lying in the floor, so
   the far edge of each is narrower than the near one. No slab behind them:
   the gaps between them are the floor's own dark. */
html[data-room='study-rival'] .th-tablets {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.3cqw, 16px);
  width: 100%;
  padding: 0 2%;
  transform: perspective(820px) rotateX(36deg);
  transform-origin: 50% 100%;
}
/* the stones' shadow and the wet floor's shine at their feet */
html[data-room='study-rival'] .th-tablets::after {
  content: '';
  position: absolute;
  left: -4%;
  right: -4%;
  top: -12%;
  bottom: -18%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(2, 4, 7, 0.55), transparent 78%);
}

html[data-room='study-rival'] .th-tablet {
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  border: 0;
  border-radius: 3px;
  min-height: 84px;
  padding: 10px 8px 12px;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: clamp(22px, min(2.1cqw, 4cqh), 32px);
  line-height: 1.08;
  letter-spacing: 0.03em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background:
    radial-gradient(120% 100% at 12% 0%, rgba(255, 146, 66, var(--warm)), transparent 62%),
    linear-gradient(180deg, rgba(206, 222, 246, 0.09), transparent 38%),
    linear-gradient(180deg, rgba(42, 50, 60, 0.86), rgba(22, 27, 34, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(214, 228, 250, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    inset 0 0 18px rgba(0, 0, 0, 0.35),
    0 0 0 2px rgba(4, 6, 9, 0.6);
}
html[data-room='study-rival'] .th-tablet > span { position: relative; }
html[data-room='study-rival'] .th-tablet[data-long='yes'] { font-size: clamp(15px, min(1.35cqw, 2.8cqh), 20px); }
/* the light that spills from a stone when its letters take fire */
html[data-room='study-rival'] .th-tablet::after {
  content: '';
  position: absolute;
  inset: -40% -25%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 150, 60, 0.42), rgba(214, 70, 24, 0.14) 55%, transparent);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.35s ease;
}
/* under the hand the gilt warms, the way metal does next to a fire */
html[data-room='study-rival'] .th-tablet:hover:not([aria-disabled]) {
  color: #e0c68c;
  text-shadow:
    0 -1px 0 rgba(0, 0, 0, 0.85),
    0 1px 0 rgba(214, 228, 250, 0.1),
    0 0 14px rgba(255, 170, 90, 0.4);
}
html[data-room='study-rival'] .th-tablet:active:not([aria-disabled]) { color: #f0d9a0; }
html[data-room='study-rival'] .th-tablet:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }
html[data-room='study-rival'] .th-tablet[aria-disabled] { cursor: default; }
/* right: the cut letters fill with fire, and it spills onto the floor */
html[data-room='study-rival'] .th-tablet.is-right {
  color: #fff0c8;
  text-shadow:
    0 0 4px rgba(255, 220, 150, 0.95),
    0 0 12px rgba(255, 160, 70, 0.9),
    0 0 26px rgba(255, 100, 30, 0.7);
}
html[data-room='study-rival'] .th-tablet.is-right::after { opacity: 1; }
/* wrong: the gilt goes to ash and the stone goes cold */
html[data-room='study-rival'] .th-tablet.is-wrong {
  color: #474d54;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.85), 0 1px 0 rgba(214, 228, 250, 0.06);
  filter: brightness(0.7);
}
/* and the one it was holds a little of the light */
html[data-room='study-rival'] .th-tablet.is-truth {
  color: #e6cf98;
  text-shadow:
    0 -1px 0 rgba(0, 0, 0, 0.85),
    0 0 10px rgba(255, 176, 90, 0.5);
}
html[data-room='study-rival'] .th-tablet.is-truth::after { opacity: 0.35; }

/* Up out of the floor for a run, back into it after. A system that asked
   for less motion sees it come up a little and fade in; a still room shows
   it where it stands. The stones stay in the floor; only their letters are
   cut for a question and worn away after it. */
html[data-room='study-rival'] .th-plaque {
  transform: translateY(calc(100% + 40px));
  opacity: 0;
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease;
}
html[data-room='study-rival'] .th-tablets { opacity: 0.5; transition: opacity 0.6s ease; }
/* where the whole hall is in view, its own painted floor is there between
   runs, and the stones are only laid into it for a question */
html[data-room='study-rival'] .stage:not([data-frame='band']):not(.is-asking) .th-tablets { opacity: 0; }
html[data-room='study-rival'] .th-tablet > span { opacity: 0; transition: opacity 0.4s ease; }
html[data-room='study-rival'] .th-tablet { transition: color 0.25s ease, text-shadow 0.25s ease, filter 0.25s ease; }
html[data-room='study-rival'] .is-asking .th-plaque {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
html[data-room='study-rival'] .is-asking .th-tablets { opacity: 1; pointer-events: auto; }
html[data-room='study-rival'] .is-asking .th-tablet > span { opacity: 1; }
html[data-motion='calm'][data-room='study-rival'] .th-plaque {
  transform: translateY(10px);
  transition-duration: 0.35s, 0.35s;
}
html[data-motion='calm'][data-room='study-rival'] .is-asking .th-plaque { transform: none; }

/* the next question of a run is cut into the same stones */
html[data-room='study-rival'] .th-plaque.is-recut .th-q,
html[data-room='study-rival'] .th-plaque.is-recut ~ .th-tablets .th-tablet > span,
html[data-room='study-rival'] .th-stele:has(.is-recut) + .th-tablets .th-tablet > span { animation: th-recut 0.45s ease both; }
@keyframes th-recut {
  from { opacity: 0; filter: blur(2px); }
  to   { opacity: 1; filter: none; }
}

/* a still room: nothing slides, fades or glides; it is simply there */
html[data-motion='still'][data-room='study-rival'] .th-plaque,
html[data-motion='still'][data-room='study-rival'] .th-tablets,
html[data-motion='still'][data-room='study-rival'] .th-tablet,
html[data-motion='still'][data-room='study-rival'] .th-tablet > span,
html[data-motion='still'][data-room='study-rival'] .th-tablet::after,
html[data-motion='still'][data-room='study-rival'] .th-fire,
html[data-motion='still'][data-room='study-rival'] .th-wash,
html[data-motion='still'][data-room='study-rival'] .th-blaze,
html[data-motion='still'][data-room='study-rival'] .door-out::before { transition: none; }
html[data-motion='still'][data-room='study-rival'] .th-plaque.is-recut .th-q,
html[data-motion='still'][data-room='study-rival'] .th-stele:has(.is-recut) + .th-tablets .th-tablet > span { animation: none; }
html[data-motion='still'][data-room='study-rival'] .th-fire { transform: translateX(-50%) scaleX(-1) scaleY(1); }

/* ------------------------------------------------------- the near floor */

/* On a tall window the hall is a band, and the floor comes on toward the
   reader below it: the wet stone gives back the hall above it, darker and
   softer the nearer it comes, so the band has no edge and the stones lie on
   something. It is the painting's own first frame, turned over just above
   the dark the painter left along its foot (its last 6.5 %), so the mirror
   line falls on lit floor. */
html[data-room='study-rival'] .th-near {
  position: absolute;
  z-index: 1;
  left: var(--hx, 0);
  top: calc(var(--hy, 0px) + var(--hh, 0px) * 0.935);
  width: var(--hw, 100%);
  height: var(--hh, 50%);
  display: none;
  overflow: hidden;
  pointer-events: none;
}
html[data-room='study-rival'] .stage[data-frame='band'] .th-near { display: block; }
html[data-room='study-rival'] .th-near::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -6.5%;
  height: 100%;
  background: var(--poster) 0 0 / 100% 100% no-repeat;
  transform: scaleY(-1);
  filter: blur(1px) brightness(0.86) saturate(0.9);
}
html[data-room='study-rival'] .th-near::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(9% 26% at 70% 34%, rgba(255, 130, 50, 0), transparent),
    linear-gradient(to bottom, rgba(11, 13, 18, 0) 0%, rgba(11, 13, 18, 0.3) 10%, rgba(11, 13, 18, 0.62) 26%, rgba(11, 13, 18, 0.86) 46%, var(--ground) 72%);
}
/* once the rival's fire has caught, the water under it holds its light too */
html[data-room='study-rival'] .is-found .th-near::after {
  background:
    radial-gradient(9% 26% at 70.3% 30%, rgba(255, 130, 50, 0.32), transparent),
    linear-gradient(to bottom, rgba(11, 13, 18, 0) 0%, rgba(11, 13, 18, 0.3) 10%, rgba(11, 13, 18, 0.62) 26%, rgba(11, 13, 18, 0.86) 46%, var(--ground) 72%);
}

/* ---------------------------------------------------------------- phones */

/* four stones in two courses on a narrow stage, each a thumb's height */
@container stage (max-width: 600px) {
  html[data-room='study-rival'] .th-altar { width: calc(100cqw - 2 * var(--edge-w) - 16px); }
  html[data-room='study-rival'] .th-tablets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 12px;
    padding: 0 3%;
    margin-top: -14px;
    transform: perspective(700px) rotateX(26deg);
  }
  html[data-room='study-rival'] .th-tablet { min-height: 88px; font-size: 26px; }
  html[data-room='study-rival'] .th-tablet[data-long='yes'] { font-size: 18px; }
  html[data-room='study-rival'] .th-plaque { min-width: 0; max-width: 96%; width: 96%; padding: 14px 20px 16px; }
  html[data-room='study-rival'] .th-q__lead { font-size: 15px; }
  html[data-room='study-rival'] .th-q__body { font-size: 30px; }
  html[data-room='study-rival'] .th-q[data-long='yes'] .th-q__body { font-size: 21px; }
  /* on a band, your brazier reaches in from under the way back to the
     street: what answers the hand is the part of it clear of that edge */
  html[data-room='study-rival'] .stage[data-frame='band'] .th-brazier {
    left: max(11%, calc(var(--edge-w) + 16px - var(--hx, 0px)));
    width: auto;
    right: calc(64% - 36px);
    border-radius: 36%;
  }
}
/* a short landscape screen keeps it low and small, clear of the braziers */
@container stage (max-height: 480px) {
  html[data-room='study-rival'] .th-altar { width: min(60cqw, 540px); bottom: calc(8px + env(safe-area-inset-bottom)); }
  html[data-room='study-rival'] .th-plaque { padding: 8px 18px 10px; min-width: 0; }
  html[data-room='study-rival'] .th-tablets { gap: 8px; transform: perspective(600px) rotateX(30deg); }
  html[data-room='study-rival'] .th-tablet { min-height: 52px; padding: 6px 8px 8px; }
}