/* Stream engine stage. Round modules bring their own sheet under css/stream/. */
#play.stream-stage { scroll-margin-top: 68px; }

/* text-align: the stage is also embedded in a topic page's centred .topic-featured. */
.game-root[data-stream] {
  position: relative; display: block; padding: 0; overflow: hidden; text-align: left;
  background: linear-gradient(160deg, #eaf5f0 0%, #e6ecfa 55%, #f1e9f8 100%);
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.rs-stage, .rs-play { position: absolute; inset: 0; }

.rs-hud {
  position: absolute; top: 14px; left: 18px; right: 18px; z-index: 2;
  display: flex; flex-direction: column; gap: 2px; pointer-events: none; text-align: left;
}
.rs-namerow { display: flex; align-items: baseline; gap: 10px; }
.rs-name { font-weight: 700; color: #3c4a5a; }
.rs-level { font-size: .85rem; color: #6a7684; }
.rs-hint { font-size: .85rem; color: #6a7684; }
.rs-hud[hidden], .rs-panel[hidden] { display: none; }

.rs-tools { position: absolute; top: 12px; right: 14px; z-index: 4; display: flex; gap: 8px; }
.rs-end, .rs-hist-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border: 1px solid var(--c-border); border-radius: 999px;
  background: rgba(255, 255, 255, .7); color: var(--c-text-soft);
  font: inherit; font-size: .85rem; cursor: pointer;
}
.rs-end:hover, .rs-hist-btn:hover, .rs-hist-btn[aria-expanded="true"] { border-color: var(--c-primary); color: var(--c-text); }
.rs-hist-btn .rs-icon { width: 16px; height: 16px; }
.rs-end[hidden], .rs-hist-btn[hidden] { display: none; }

.rs-history {
  position: absolute; top: 52px; right: 14px; z-index: 5;
  display: flex; flex-direction: column; gap: 2px; width: min(320px, calc(100% - 28px));
  max-height: calc(100% - 70px); overflow-y: auto; overscroll-behavior: contain; padding: 8px;
  background: #fff; border: 1px solid var(--c-border); border-radius: 14px; box-shadow: var(--shadow);
}
.rs-history[hidden] { display: none; }
.rs-history-title { margin: 2px 8px 6px; font-size: .8rem; color: var(--c-text-soft); }
.rs-history-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px;
  border: 0; border-radius: 10px; background: none; color: var(--c-text);
  font: inherit; text-align: left; cursor: pointer;
}
.rs-history-row:hover:not(:disabled) { background: #f3f0ff; }
.rs-history-row:disabled { cursor: default; opacity: .6; }
.rs-history-text { display: flex; flex-direction: column; min-width: 0; }
.rs-history-name { font-weight: 600; }
.rs-history-sub { font-size: .8rem; color: var(--c-text-soft); }
.rs-gicon {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, hsl(var(--hue) 90% 90%), hsl(var(--hue) 68% 64%));
  box-shadow: 0 0 12px 2px hsl(var(--hue) 80% 72% / .5);
}

.rs-panel {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 20px; text-align: center; overflow-y: auto;
  background: rgba(236, 242, 239, .58);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  animation: rs-in .35s ease-out;
}
/* Centred with auto margins rather than justify-content: a panel taller than the stage scrolls
   from its top instead of losing it. */
.rs-panel > * { flex: none; }
.rs-panel > :first-child { margin-top: auto; }
.rs-panel > :last-child { margin-bottom: auto; }
.rs-sheet {
  display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(440px, 100%);
  padding: 26px 18px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 20px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .6), rgba(232, 242, 236, .46));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 12px 32px rgba(15, 30, 20, .22);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
}
.rs-title { margin: 0; font-size: 1.6rem; font-weight: 700; color: #2f3b4a; }
.rs-ask { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #4a5766; }
.rs-ask p { margin: 0; }
.rs-moods { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.rs-mood {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border: 1px solid var(--c-border); border-radius: 999px; background: #fff; color: var(--c-text);
  font: inherit; cursor: pointer;
}
.rs-mood:hover { border-color: var(--c-primary); }
.rs-mood.on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.rs-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rs-note { min-height: 1.3em; margin: 0; font-size: .9rem; color: var(--c-text-soft); }
.rs-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.rs-choices .btn { display: inline-flex; align-items: center; gap: 8px; }
.rs-choices .rs-icon { width: 18px; height: 18px; stroke-width: 2.2; }

.rs-badge {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 7px 18px 7px 13px; border-radius: 999px;
  background: linear-gradient(180deg, #ecf9f1, #d5f0df); border: 1.5px solid #8fd3a9;
  box-shadow: 0 4px 12px rgba(46, 140, 87, .18);
  color: #237a4a; font-size: 1.12rem; font-weight: 800;
  animation: rs-badge-in .55s cubic-bezier(.2, .9, .3, 1.35) .15s both;
}
.rs-badge::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .8), transparent);
  transform: skewX(-18deg); animation: rs-badge-shine .9s ease-in-out .8s both;
}
.rs-badge .rs-icon { width: 24px; height: 24px; stroke-width: 2.2; }

/* The lap card covers the whole stage instead of floating a sheet on it. */
.rs-lap.rs-panel {
  gap: 22px; padding: 28px 24px;
  background: linear-gradient(160deg, rgba(234, 245, 240, .94) 0%, rgba(230, 236, 250, .94) 55%, rgba(241, 233, 248, .94) 100%);
}
.rs-lap-title { margin: 0; font-size: 1.9rem; font-weight: 800; line-height: 1.2; color: #2f3b4a; text-align: center; text-wrap: balance; }
/* 68px at the least: twelve stay on one row on a 900px stage, four to a row on a phone. auto-fit
   collapses the empty tracks, so the slots widen to fill the row on a wider stage. */
.rs-lap-dots {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); row-gap: 14px;
  width: 100%; max-width: 960px; margin: 0; padding: 0; list-style: none;
}
.rs-lap-dot {
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0;
  animation: rs-lap-light .5s cubic-bezier(.2, .9, .3, 1.35) both;
}
.rs-lap-dot svg { width: 42px; height: 42px; overflow: visible; }
/* max-width: a name of two words wraps before it reaches the next one; one long word still runs over. */
.rs-lap-dot span { max-width: calc(100% - 8px); color: #4a5766; font-size: .66rem; font-weight: 600; line-height: 1.2; text-align: center; }
.rs-lap-dot:nth-child(1) { animation-delay: .35s; }
.rs-lap-dot:nth-child(2) { animation-delay: .44s; }
.rs-lap-dot:nth-child(3) { animation-delay: .53s; }
.rs-lap-dot:nth-child(4) { animation-delay: .62s; }
.rs-lap-dot:nth-child(5) { animation-delay: .71s; }
.rs-lap-dot:nth-child(6) { animation-delay: .8s; }
.rs-lap-dot:nth-child(7) { animation-delay: .89s; }
.rs-lap-dot:nth-child(8) { animation-delay: .98s; }
.rs-lap-dot:nth-child(9) { animation-delay: 1.07s; }
.rs-lap-dot:nth-child(10) { animation-delay: 1.16s; }
.rs-lap-dot:nth-child(11) { animation-delay: 1.25s; }
.rs-lap-dot:nth-child(12) { animation-delay: 1.34s; }
.rs-lap-dot:nth-child(n+13) { animation-delay: 1.43s; }

.rs-lap-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 270px)); justify-content: center; gap: 14px; width: 100%; }
.rs-lap-door {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 16px;
  border: 1.5px solid rgba(108, 92, 231, .22); border-radius: 18px; background: rgba(255, 255, 255, .86);
  box-shadow: 0 6px 18px rgba(40, 50, 90, .1);
  color: var(--c-text); font: inherit; line-height: 1.4; text-align: center; text-decoration: none; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.rs-lap-door:hover { transform: translateY(-3px); border-color: var(--c-primary); box-shadow: 0 10px 24px rgba(40, 50, 90, .16); }
.rs-lap-door .rs-icon { flex: none; width: 30px; height: 30px; color: var(--c-primary); stroke-width: 2; }
.rs-lap-door-text { display: flex; flex-direction: column; gap: 3px; }
.rs-lap-door strong { font-size: 1.05rem; line-height: 1.3; text-wrap: balance; }
.rs-lap-door-text > span { color: var(--c-text-soft); font-size: .82rem; }

/* The welcome and the first-game picker. Both are sized off the stage (container units and
   queries), never off the window: the stage can be a wide strip or a tall phone column. */
.rs-intro.rs-panel {
  container-type: size; gap: 18px; padding: 20px;
  background: linear-gradient(160deg, rgba(234, 245, 240, .94) 0%, rgba(230, 236, 250, .94) 55%, rgba(241, 233, 248, .94) 100%);
}
/* Two lines' room from the start, so a shorter line never moves the game screen under the hand. */
.rs-intro-say {
  margin: 0; width: min(680px, 100%); min-height: 2.8em;
  color: #2f3b4a; font-size: 1.25rem; font-weight: 700; line-height: 1.4; text-align: center; text-wrap: balance;
}
.rs-intro-say.is-new { animation: rs-in .45s ease-out; }

/* The game screen: one size and shape on every stage, never grown to fill it. */
.rs-mini { position: relative; width: min(300px, 80cqw); aspect-ratio: 16 / 10; transition: filter .5s ease, opacity .5s ease; }
.rs-mini-screen {
  position: absolute; inset: 0; overflow: hidden; border-radius: 12px; background: #dfe7e3;
  box-shadow: 0 14px 34px rgba(30, 45, 60, .22), 0 0 0 1px rgba(255, 255, 255, .6);
  transition: opacity .4s ease;
}
.rs-mini.is-again { animation: rs-mini-again .55s ease-out; }
.rs-mini.is-ended { opacity: .7; filter: grayscale(.85) brightness(.92); }
.rs-mini-frame {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  translate: 100% 0; transition: translate .7s cubic-bezier(.45, 0, .25, 1);
}
.rs-mini-frame.is-on { translate: 0 0; }
.rs-mini-frame.is-past { translate: -100% 0; }

/* The first scene: no game yet, only a line-up of blank cards running across the panel. --cw is the
   card width stream.js sets; --at is the card in front. */
.rs-mini.is-queue .rs-mini-screen { opacity: 0; }
.rs-mini-queue {
  position: absolute; top: 0; bottom: 0; left: 50%; width: min(640px, 100cqw); translate: -50% 0;
  display: flex; align-items: center; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  opacity: 0; transition: opacity .4s ease;
}
.rs-mini.is-queue .rs-mini-queue { opacity: 1; }
.rs-qrow {
  --gap: 18px; display: flex; gap: var(--gap); padding-left: calc(50% - var(--cw) / 2);
  translate: calc(var(--at, 0) * (var(--cw) + var(--gap)) * -1) 0; transition: translate .7s cubic-bezier(.45, 0, .25, 1);
}
.rs-qcard {
  position: relative; overflow: hidden; flex: none; width: var(--cw); aspect-ratio: 16 / 10; border-radius: 12px;
  background: radial-gradient(circle at 30% 25%, hsl(var(--hue) 85% 93%), hsl(var(--hue) 55% 74%));
  box-shadow: 0 10px 26px rgba(30, 45, 60, .16), inset 0 0 0 1px rgba(255, 255, 255, .6);
  scale: .8; opacity: .5; transition: scale .7s cubic-bezier(.45, 0, .25, 1), opacity .7s ease;
}
.rs-qcard.is-on { scale: 1; opacity: 1; }
.rs-qcard::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -45%; width: 35%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg);
}
.rs-qcard.is-on::after { animation: rs-badge-shine 1s ease-in-out .35s both; }

/* A round's end over the game screen, as the stage's own settlement looks. */
.rs-mini-settle {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 12px;
  background: rgba(236, 242, 239, .58); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .3s ease;
}
.rs-mini-settle.is-on { opacity: 1; }
.rs-mini-settle .rs-choices { gap: 8px; scale: .92; transition: scale .35s cubic-bezier(.2, .9, .3, 1.35); }
.rs-mini-settle .btn { padding: 7px 14px; font-size: .85rem; }
.rs-mini-settle.is-on .rs-choices { scale: 1; }
.rs-intro-btn { pointer-events: none; transition: transform .12s ease, filter .12s ease; }
.rs-intro-btn.is-pressed, .rs-end.is-pressed { transform: scale(.93); filter: brightness(1.08); }
.rs-end.rs-end-demo {
  border-color: #5cc98d; color: var(--c-text); transition: transform .12s ease, filter .12s ease;
  animation: rs-end-glow 1.4s ease-in-out infinite;
}

.rs-hand {
  position: absolute; left: 0; top: 0; z-index: 6; width: 44px; aspect-ratio: 32 / 34; pointer-events: none; opacity: 0;
  translate: calc(var(--x, 0px) - 34.4%) calc(var(--y, 0px) - 5.9%);
  transition: translate .8s cubic-bezier(.45, 0, .25, 1), opacity .3s ease;
}
.rs-hand.is-on { opacity: 1; }
.rs-hand.is-still { transition: none; }
.rs-hand svg {
  position: relative; z-index: 2; display: block; width: 100%; height: 100%;
  transform-origin: 34.4% 5.9%; filter: drop-shadow(0 3px 4px rgba(60, 36, 12, .35));
}
.rs-hand.is-pressing svg { animation: rs-hand-press .45s ease-out; }
.rs-hand-tap {
  position: absolute; z-index: 1; left: 34.4%; top: 5.9%; width: 46px; aspect-ratio: 1; box-sizing: border-box;
  border-radius: 50%; border: 3px solid #5cc98d; background: rgba(92, 201, 141, .14); box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
  translate: -50% -50%; scale: 0; opacity: 0;
}
.rs-hand.is-pressing .rs-hand-tap { animation: rs-hand-tap .6s ease-out; }

/* The picker: four small copies of the stage, in a row (two by two on a tall stage). Each runs its
   game in an iframe laid out at the stage's size (--sw, --sh) and scaled by --k to the tile, which
   stream.js sets. --head is the height of the two lines above the tiles, --name the room for the
   name under each. */
/* Only transform and opacity move here, which the compositor runs off the main thread: the four
   games running in the tiles share the page's main thread. Two classes: the topic page's
   `.topic-featured h2` would otherwise set the size and margin. ⚠️ No margin-top here: this
   is as specific as `.rs-panel > :first-child`, later in the file, and would take away the
   auto margin that centres the picker in the stage. */
.rs-pick .rs-pick-title { margin-bottom: 0; color: var(--c-primary); font-size: 1.6rem; font-weight: 800; line-height: 1.25; text-align: center; }
.rs-pick-title span { display: inline-block; animation: rs-word-in .55s cubic-bezier(.2, .7, .2, 1) backwards; }
.rs-pick-title span:nth-child(2) { animation-delay: .07s; }
.rs-pick-title span:nth-child(3) { animation-delay: .14s; }
.rs-pick-title span:nth-child(4) { animation-delay: .21s; }
.rs-pick-title span:nth-child(n+5) { animation-delay: .28s; }
.rs-pick-rest { margin: -10px 0 0; color: #4a5766; text-align: center; }
.rs-tiles {
  --gap: 16px; --head: 112px; --name: 34px; --foot: 0px;
  display: grid; grid-template-columns: repeat(4, auto); justify-content: center; gap: var(--gap); margin-top: 12px;
}
.rs-pick.has-guide .rs-tiles { --foot: 240px; }
.rs-pick-item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: min(240px, (100cqw - 3 * var(--gap)) / 4, (100cqh - var(--head) - var(--name) - var(--foot)) * var(--a));
  transition: transform .22s ease-out;
}
.rs-pick-item:hover, .rs-pick-item:has(.rs-tile-pick:focus-visible) { z-index: 2; transform: scale(1.05); }
.rs-pick-name { max-width: 100%; color: #4a5766; font-size: .9rem; font-weight: 600; line-height: 1.25; text-align: center; text-wrap: balance; transition: color .22s ease-out; }
.rs-pick-item:hover .rs-pick-name { color: var(--c-primary); }
.rs-tile {
  position: relative; overflow: hidden; width: 100%;
  aspect-ratio: var(--a); border-radius: 12px;
  background: hsl(var(--hue) 45% 86%); box-shadow: 0 8px 22px rgba(30, 45, 60, .18), 0 0 0 1px rgba(255, 255, 255, .6);
  transition: transform .22s ease-out, box-shadow .22s ease-out;
  animation: rs-badge-in .45s cubic-bezier(.2, .9, .3, 1.35) backwards, rs-tile-wave .6s ease-in-out 1s;
}
.rs-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rs-tile-live {
  position: absolute; left: 0; top: 0; width: var(--sw); height: var(--sh); border: 0;
  transform: scale(var(--k)); transform-origin: 0 0; pointer-events: none; opacity: 0; transition: opacity .3s ease;
}
.rs-tile.is-live .rs-tile-live { opacity: 1; }
.rs-tile-pick { position: absolute; inset: 0; z-index: 1; padding: 0; border: 0; background: none; cursor: pointer; }
.rs-tile-pick:focus-visible { outline: none; }
.rs-pick-item:hover .rs-tile, .rs-pick-item:has(.rs-tile-pick:focus-visible) .rs-tile {
  box-shadow: 0 14px 30px rgba(30, 45, 60, .24), 0 0 0 3px var(--c-primary);
}
/* Once they are in, the four lift one after another, left to right, once: all four alike, so the
   wave says they can be picked without pointing at any one of them. `translate` is its own
   property, apart from the hover's `transform`. */
.rs-pick-item:nth-child(2) .rs-tile { animation-delay: .07s, 1.12s; }
.rs-pick-item:nth-child(3) .rs-tile { animation-delay: .14s, 1.24s; }
.rs-pick-item:nth-child(4) .rs-tile { animation-delay: .21s, 1.36s; }

/* The guide under the tiles: a small screen and, beside it, the line of the scene playing. stream.js
   moves every part with Web Animations (opacity, scale and translate only); these are the parts at
   rest. All placing inside the screen is in percentages of it, which the hand's keyframes match:
   Continue's centre at 27.5% 50%, Next game's at 72.5% 50%, End game's at 81% 13%. */
/* A grey area with a tab naming it, so it reads as a walk-through playing on its own and not as
   one of the picks. Tab and area share one translucent grey and must not overlap: where they did,
   the grey would show twice as dark. */
.rs-guide { display: flex; flex-direction: column; align-items: flex-start; margin-top: 62px; }
.rs-guide-tab {
  margin-left: 16px; padding: 5px 14px 4px; border-radius: 10px 10px 0 0; background: rgba(60, 70, 85, .07);
  color: #4a5766; font-size: .8rem; font-weight: 700; line-height: 1.2; letter-spacing: .02em;
}
.rs-guide-body {
  display: flex; align-items: center; justify-content: center; gap: 16px; padding: 12px 20px;
  border-radius: 16px; background: rgba(60, 70, 85, .07);
}
.rs-guide-mini { position: relative; flex: none; width: 168px; aspect-ratio: 16 / 10; container-type: inline-size; }
.rs-guide-queue {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.rs-guide-card {
  position: absolute; left: 22%; top: 22%; width: 56%; height: 56%; border-radius: 8px;
  background: radial-gradient(circle at 30% 25%, hsl(var(--hue) 85% 93%), hsl(var(--hue) 55% 74%));
  box-shadow: 0 6px 14px rgba(30, 45, 60, .16), inset 0 0 0 1px rgba(255, 255, 255, .6);
}
.rs-guide-screen {
  position: absolute; inset: 0; overflow: hidden; border-radius: 10px; background: #dfe7e3; opacity: 0;
  box-shadow: 0 8px 20px rgba(30, 45, 60, .2), 0 0 0 1px rgba(255, 255, 255, .6);
}
.rs-guide-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.rs-guide-frame + .rs-guide-frame { translate: 100% 0; }
.rs-guide-dim { position: absolute; inset: 0; background: rgb(84, 94, 104); opacity: 0; }
.rs-guide-settle { position: absolute; inset: 0; background: rgba(236, 242, 239, .72); opacity: 0; }
.rs-guide-btn {
  position: absolute; top: 39%; width: 40%; height: 22%; display: grid; place-items: center; border-radius: 999px;
  background: var(--c-primary); color: #fff; font-size: 6.2cqw; font-weight: 700; line-height: 1; white-space: nowrap;
}
.rs-guide-btn.is-keep { left: 7.5%; }
.rs-guide-btn.is-next { left: 52.5%; }
.rs-guide-end {
  position: absolute; top: 5%; left: 65%; width: 32%; height: 16%; display: grid; place-items: center; border-radius: 999px;
  border: 1px solid #5cc98d; background: rgba(255, 255, 255, .92); color: var(--c-text); font-size: 5.4cqw; line-height: 1; white-space: nowrap; opacity: 0;
}
.rs-guide-handbox { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.rs-guide-hand { position: absolute; left: 0; top: 0; width: 15%; aspect-ratio: 32 / 34; opacity: 0; }
.rs-guide-hand svg {
  position: relative; z-index: 2; display: block; width: 100%; height: 100%;
  transform-origin: 34.4% 5.9%; filter: drop-shadow(0 2px 3px rgba(60, 36, 12, .35));
}
.rs-guide-hand .rs-hand-tap { width: 120%; border-width: 2px; }
.rs-guide-says { display: grid; width: min(320px, 100cqw - 168px - 16px - 40px); text-align: left; }
.rs-guide-say { grid-area: 1 / 1; align-self: center; margin: 0; color: #2f3b4a; font-size: .95rem; font-weight: 600; line-height: 1.35; text-wrap: balance; opacity: 0; }

@container (max-aspect-ratio: 1 / 1) {
  .rs-intro-say { font-size: 1.05rem; }
  .rs-tiles { --gap: 12px; --head: 177px; --name: 44px; grid-template-columns: repeat(2, auto); }
  .rs-pick-item { width: min(200px, (100cqw - var(--gap)) / 2, ((100cqh - var(--head) - var(--gap)) / 2 - var(--name)) * var(--a)); }
  .rs-pick-name { font-size: .8rem; }
  /* With the guide under them, two rows of tiles leave each one too small on a phone: one row of
     four. */
  .rs-pick.has-guide .rs-tiles { --foot: 132px; grid-template-columns: repeat(4, auto); }
  .rs-pick.has-guide .rs-pick-item { width: min(200px, (100cqw - 3 * var(--gap)) / 4, (100cqh - var(--head) - var(--name) - var(--foot)) * var(--a)); }
  .rs-guide { margin-top: 0; }
  .rs-guide-tab { margin-left: 12px; padding: 4px 12px 3px; font-size: .72rem; }
  .rs-guide-body { gap: 10px; padding: 8px 10px; border-radius: 12px; }
  .rs-guide-mini { width: 112px; }
  .rs-guide-says { width: min(220px, 100cqw - 112px - 10px - 20px); }
  .rs-guide-say { font-size: .75rem; line-height: 1.3; }
}
@container (max-height: 420px) {
  .rs-intro.rs-panel { gap: 10px; }
  .rs-intro-say { min-height: 1.4em; font-size: 1rem; }
  .rs-mini { width: min(220px, 80cqw); }
  .rs-pick .rs-pick-title { font-size: 1.25rem; }
  .rs-pick-rest { display: none; }
  .rs-tiles { --head: 62px; --name: 28px; }
  .rs-pick.has-guide .rs-tiles { --foot: 0px; }
  .rs-pick-name { font-size: .78rem; }
  .rs-guide { display: none; }
}

/* The cover over a new player's stage until it starts: drifting light and sparkles, nothing to read.
   Only transform and opacity move. The sparks' rise and their fade share one duration and delay,
   so each one is invisible at the moment its rise starts over. */
.rs-cover {
  position: absolute; inset: 0; z-index: 3; overflow: hidden;
  display: block; width: 100%; margin: 0; padding: 0; border: 0;
  background: linear-gradient(160deg, rgba(234, 245, 240, .94) 0%, rgba(230, 236, 250, .94) 55%, rgba(241, 233, 248, .94) 100%);
  cursor: pointer; transition: opacity .4s ease;
}
.rs-cover.is-gone { opacity: 0; pointer-events: none; }
.rs-cover:focus-visible { outline: none; }
.rs-cover-glow {
  position: absolute; width: 70%; min-width: 320px; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, hsl(var(--hue) 85% 76% / .62), hsl(var(--hue) 85% 76% / 0) 65%);
  will-change: transform;
}
.rs-cover-glow:nth-child(1) { left: -18%; top: -40%; animation: rs-glow-a 19s ease-in-out infinite alternate; }
.rs-cover-glow:nth-child(2) { left: 45%; top: -30%; animation: rs-glow-b 23s ease-in-out infinite alternate; }
.rs-cover-glow:nth-child(3) { left: 12%; top: 20%; animation: rs-glow-c 27s ease-in-out infinite alternate; }
.rs-cover-spark {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); pointer-events: none;
  animation: rs-spark-rise var(--t) linear var(--d) infinite;
}
.rs-cover-spark svg {
  display: block; width: 100%; height: 100%; fill: hsl(var(--hue) 75% 70%); opacity: 0;
  filter: drop-shadow(0 0 6px hsl(var(--hue) 85% 72% / .9));
  animation: rs-spark-glow var(--t) ease-in-out var(--d) infinite;
}

@keyframes rs-glow-a { from { transform: translate(0, 0); } to { transform: translate(38%, 22%); } }
@keyframes rs-glow-b { from { transform: translate(0, 0); } to { transform: translate(-32%, 26%); } }
@keyframes rs-glow-c { from { transform: translate(0, 0); } to { transform: translate(28%, -24%); } }
@keyframes rs-spark-rise { from { transform: translateY(14px); } to { transform: translateY(-30px); } }
@keyframes rs-spark-glow { 0%, 100% { opacity: 0; transform: scale(.55) rotate(0deg); } 50% { opacity: .95; transform: scale(1) rotate(45deg); } }

/* A game's live preview page (app/views/stream-preview.php): its stage and nothing else. */
body:has(> main [data-stream-preview]) { overflow: hidden; }
body:has(> main [data-stream-preview]) > :not(main) { display: none; }
.game-root[data-stream-preview] {
  position: fixed; inset: 0; width: auto; height: auto; max-width: none; margin: 0;
  border: 0; border-radius: 0; box-shadow: none;
}

.rs-wait { width: 14px; height: 14px; border-radius: 50%; background: var(--c-primary); animation: rs-breathe 1.4s ease-in-out infinite; }

.rs-card-up {
  width: 1em; height: 1em; vertical-align: -.15em;
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}

@keyframes rs-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes rs-breathe { 0%, 100% { transform: scale(.6); opacity: .5; } 50% { transform: scale(1); opacity: 1; } }
@keyframes rs-badge-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes rs-badge-shine { from { left: -40%; } to { left: 120%; } }
@keyframes rs-lap-light { from { opacity: .15; transform: scale(.55); filter: grayscale(1); } to { opacity: 1; transform: none; filter: none; } }
@keyframes rs-mini-again { 0%, 100% { scale: 1; } 40% { scale: 1.035; } }
@keyframes rs-word-in { from { opacity: 0; transform: translateY(70%); } to { opacity: 1; transform: none; } }
@keyframes rs-end-glow { 0%, 100% { box-shadow: 0 0 0 2px rgba(92, 201, 141, .25); } 50% { box-shadow: 0 0 0 6px rgba(92, 201, 141, .4); } }
@keyframes rs-hand-press { 0%, 100% { scale: 1; } 30% { scale: .82; } }
@keyframes rs-tile-wave { 0%, 100% { translate: 0 0; } 45% { translate: 0 -10px; } }
@keyframes rs-hand-tap { 0% { scale: .3; opacity: 0; } 15% { scale: .5; opacity: 1; } 70% { scale: 1.3; opacity: .8; } 100% { scale: 1.6; opacity: 0; } }

@media (max-width: 480px) {
  .rs-lap.rs-panel { gap: 18px; padding: 22px 16px; }
  .rs-lap-title { font-size: 1.4rem; }
  .rs-lap-doors { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .rs-lap-door { flex-direction: row; gap: 14px; padding: 14px 16px; text-align: left; }
}

@media (max-width: 420px) {
  .rs-title { font-size: 1.35rem; }
  .rs-panel { padding: 12px; }
  .rs-sheet { padding: 24px 14px; }
}