/* ==========================================================================
   La roue des gages (template/generator/roue-des-gages.php, static/js/roue-des-gages.js).
   The evening of the online game: plum sky, breathing lamp, warm lights drifting up, the stars of the
   homepage. The wheel lies on the table, violet slices to talk and pink ones to act, as Truth and Dare
   in the game, with the flame of the logo at its heart. Then the light content of the game page.
   ========================================================================== */

.rdg-page {
  --rdg-night: #2a0f33;
  --rdg-plum: #3b163f;
  --rdg-pink: #f72585;
  --rdg-violet: #8b2cf6;
  --rdg-lamp: #ffb070;
  --rdg-gold: #ffd98a;
  --rdg-ink: #2a142d;
  --rdg-muted: #6f5a71;
  --rdg-line: #f0e3ef;
  --rdg-truth: #5132d8;
  --rdg-dare: #c8105a;
  --rdg-sky-a: 247, 37, 133;
  --rdg-sky-a-op: .30;
  --rdg-sky-b: 139, 44, 246;
  --rdg-ember-op: 0;
  --rdg-radius: 26px;
  --rdg-ease: cubic-bezier(.2, .8, .2, 1);
  --rdg-back:
    radial-gradient(80% 60% at 20% 10%, rgba(255, 216, 230, .6), transparent 60%),
    linear-gradient(155deg, #ff9ec4 0%, #f72585 38%, #7b2cbf 78%, #3b163f 100%);
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.rdg-page *,
.rdg-page *::before,
.rdg-page *::after {
  box-sizing: border-box;
}

.rdg-page [hidden] {
  display: none !important;
}

/* Japanese breaks lines between phrases where the browser knows how (never inside a name or a word), and the
   title only between its two parts. */
.rdg-page:lang(ja) {
  word-break: auto-phrase;
}

.rdg-page:lang(ja) .rdg-title {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* The evening colour when the page bounces past its top. */
html:has(> body.rdg-body) {
  background-color: #2a0f33;
}

.rdg-body {
  background: #fff7fb;
}

.rdg-page :is(button, input, summary, a):focus-visible {
  outline: 3px solid rgba(255, 185, 56, .9);
  outline-offset: 3px;
}

.rdg-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- The evening ---- */
.rdg-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0 16px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background:
    radial-gradient(70% 55% at 8% 4%, rgba(var(--rdg-sky-a), var(--rdg-sky-a-op)), transparent 70%),
    radial-gradient(60% 70% at 100% 100%, rgba(var(--rdg-sky-b), .34), transparent 70%),
    linear-gradient(160deg, #2a0f33 0%, #3b163f 48%, #4a1d6e 100%);
}

.rdg-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -16%;
  left: 50%;
  width: min(900px, 150vw);
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 176, 120, .30) 0%, rgba(247, 37, 133, .14) 45%, transparent 70%);
  animation: rdg-breathe 7s ease-in-out infinite;
}

.rdg-stars {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .8;
  background:
    radial-gradient(1.6px 1.6px at 8% 12%, rgba(255, 255, 255, .85), transparent 70%),
    radial-gradient(1.2px 1.2px at 22% 38%, rgba(255, 255, 255, .6), transparent 70%),
    radial-gradient(2px 2px at 38% 9%, rgba(255, 217, 138, .75), transparent 70%),
    radial-gradient(1.2px 1.2px at 64% 22%, rgba(255, 255, 255, .55), transparent 70%),
    radial-gradient(1.6px 1.6px at 79% 7%, rgba(255, 255, 255, .8), transparent 70%),
    radial-gradient(1.4px 1.4px at 91% 31%, rgba(255, 217, 138, .65), transparent 70%),
    radial-gradient(1.2px 1.2px at 13% 58%, rgba(255, 255, 255, .5), transparent 70%),
    radial-gradient(1.4px 1.4px at 95% 52%, rgba(255, 255, 255, .55), transparent 70%);
}

.rdg-ember {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(80% 45% at 50% 100%, rgba(255, 112, 70, .32), transparent 70%);
  opacity: var(--rdg-ember-op);
  transition: opacity 1.6s ease;
}

.rdg-lights {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.rdg-lights span {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle, var(--c) 0%, transparent 72%);
  box-shadow: 0 0 calc(var(--s) * 1.6) var(--c);
  opacity: 0;
  animation: rdg-drift var(--d) ease-in-out var(--delay) infinite;
}

@keyframes rdg-breathe {
  0%, 100% { opacity: .75; scale: 1; }
  50% { opacity: 1; scale: 1.06; }
}

@keyframes rdg-drift {
  0% { opacity: 0; transform: translateY(20px); }
  30% { opacity: .85; }
  100% { opacity: 0; transform: translateY(-140px); }
}

/* ---- Header, as in the online game ---- */
.rdg-top {
  width: min(100%, 560px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
}

.rdg-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 1.06rem;
  font-weight: 900;
  letter-spacing: -.01em;
  text-decoration: none;
}

.rdg-logo img {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
}

.rdg-tools {
  display: flex;
  gap: 8px;
}

.rdg-icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  color: rgba(255, 255, 255, .88);
  background: rgba(255, 255, 255, .08);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s var(--rdg-ease);
}

.rdg-icon-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, .16);
  transform: translateY(-1px);
}

.rdg-icon-btn .rdg-on,
.rdg-icon-btn[aria-pressed="true"] .rdg-off {
  display: none;
}

.rdg-icon-btn[aria-pressed="true"] .rdg-on {
  display: block;
}

/* ---- Before the game ---- */
.rdg-intro {
  flex: 1;
  width: min(100%, 440px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px 0 18px;
  text-align: center;
}

.rdg-intro__logo {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .35), 0 0 34px rgba(247, 37, 133, .45);
}

.rdg-pill-line {
  margin: 16px 0 0;
}

.rdg-pill {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: var(--rdg-gold);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.rdg-page .rdg-title {
  margin: 14px 0 10px;
  color: #fff;
  font-size: clamp(2.4rem, 11vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: .95;
  text-wrap: balance;
}

.rdg-title em,
.rdg-turn em {
  font-style: normal;
  background: linear-gradient(90deg, var(--rdg-gold), var(--rdg-lamp) 40%, #ff7eb3);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rdg-page .rdg-lead {
  margin: 0 auto;
  max-width: 30ch;
  color: rgba(255, 255, 255, .82);
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.45;
}

.rdg-names {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 26px 0 8px;
}

.rdg-names input {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font: inherit;
  font-weight: 800;
  font-size: 1.02rem;
  text-align: center;
  transition: border-color .2s ease, background .2s ease;
}

.rdg-names input::placeholder {
  color: rgba(255, 255, 255, .5);
  font-weight: 700;
  font-size: .92rem;
}

.rdg-names input:focus {
  outline: none;
  border-color: #fff;
  background: rgba(255, 255, 255, .14);
}

.rdg-names input.is-missing {
  border-color: var(--rdg-gold);
  animation: rdg-nudge .5s ease;
}

@keyframes rdg-nudge {
  0%, 100% { transform: none; }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.rdg-amp {
  color: rgba(255, 255, 255, .6);
  font-weight: 800;
}

.rdg-page .rdg-label {
  margin: 18px 0 8px;
  color: rgba(255, 255, 255, .6);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.rdg-temps {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.rdg-temp {
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .82);
  font-weight: 800;
  font-size: .84rem;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.rdg-temp[aria-pressed="true"] {
  color: var(--rdg-night);
  border-color: #fff;
  background: #fff;
  box-shadow: 0 8px 22px rgba(247, 37, 133, .38);
}

.rdg-soundline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto 20px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: rgba(255, 255, 255, .78);
  font-weight: 700;
  font-size: .92rem;
}

.rdg-switch {
  position: relative;
  width: 40px;
  height: 24px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .16);
  transition: background .3s ease;
}

.rdg-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .3s var(--rdg-ease);
}

.rdg-soundline[aria-pressed="true"] .rdg-switch {
  background: var(--rdg-pink);
}

.rdg-soundline[aria-pressed="true"] .rdg-switch::after {
  transform: translateX(16px);
}

.rdg-page .rdg-rules {
  margin: 18px auto 0;
  max-width: 34ch;
  color: rgba(255, 255, 255, .6);
  font-size: .85rem;
  font-weight: 500;
  line-height: 1.5;
}

.rdg-rules a {
  color: #fff;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- The game ---- */
.rdg-game {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: rdg-rise .6s var(--rdg-ease) backwards;
}

@keyframes rdg-rise {
  from { opacity: 0; transform: translateY(14px); }
}

/* The thread of the evening, as the thread of the free deck in the online game. */
.rdg-progress {
  width: min(100%, 560px);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.rdg-thread {
  position: relative;
  flex: 1;
  height: 18px;
}

.rdg-thread::before,
.rdg-fill {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  height: 4px;
  margin-top: -2px;
  border-radius: 999px;
}

.rdg-thread::before {
  right: 0;
  background: rgba(255, 255, 255, .14);
}

.rdg-fill {
  width: calc(100% * var(--p, 0));
  background: linear-gradient(90deg, var(--rdg-violet), var(--rdg-pink) 55%, var(--rdg-lamp));
  box-shadow: 0 0 12px rgba(247, 37, 133, .55);
  transition: width .9s var(--rdg-ease);
}

.rdg-fill::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -4px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px #fff, 0 0 16px rgba(255, 176, 120, .9);
}

.rdg-node {
  position: absolute;
  top: 50%;
  left: calc(100% * var(--at));
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: 2px solid rgba(255, 255, 255, .32);
  border-radius: 50%;
  background: #3b163f;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.rdg-node.is-on {
  border-color: #fff;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 176, 120, .22), 0 0 14px rgba(255, 176, 120, .9);
}

.rdg-node--end {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -20px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .5);
}

.rdg-node--end.is-on {
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--rdg-lamp);
  filter: drop-shadow(0 0 6px rgba(255, 140, 80, .9));
}

.rdg-page .rdg-counter {
  flex: none;
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-size: .84rem;
  font-weight: 800;
  white-space: nowrap;
}

.rdg-counter b {
  color: #fff;
}

.rdg-play {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 10px;
}

.rdg-page .rdg-turn {
  margin: 18px 0 0;
  color: #fff;
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1;
  text-align: center;
  text-wrap: balance;
}

.rdg-page .rdg-hint {
  margin: 10px 0 0;
  min-height: 1.2em;
  color: rgba(255, 255, 255, .62);
  font-size: .88rem;
  font-weight: 700;
  text-align: center;
  transition: opacity .6s ease;
}

/* ---- The wheel lying on the table: an ellipse with its edge at the front ---- */
.rdg-table {
  position: relative;
  width: min(calc(100vw - 12px), 560px);
  aspect-ratio: 1 / .66;
  margin-top: clamp(12px, 3vh, 30px);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.rdg-table:active {
  cursor: grabbing;
}

.rdg-shadow {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 0;
  height: 28%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(12, 2, 18, .8), transparent);
  filter: blur(14px);
}

.rdg-cam {
  position: absolute;
  inset: 0;
  transition: transform 1.4s var(--rdg-ease);
}

.rdg-cam.is-push {
  transform: scale(1.05) translateY(-2%);
}

.rdg-tilt {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  aspect-ratio: 1;
  transform: scaleY(.6);
}

.rdg-disc,
.rdg-edges {
  position: absolute;
  inset: 0;
}

.rdg-disc {
  border-radius: 50%;
}

.rdg-edge {
  background: radial-gradient(circle, #1b0620 60%, #5a1d6e 86%, #2a0b31 100%);
}

.rdg-edge.is-last {
  box-shadow: 0 34px 60px rgba(10, 2, 18, .7);
}

.rdg-spinner {
  will-change: transform;
}

.rdg-spinner canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition: filter .25s linear;
}

.rdg-spinner.is-fast canvas {
  filter: blur(1.1px);
}

.rdg-gloss {
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 46% 30% at 36% 24%, rgba(255, 255, 255, .26), transparent 70%),
    radial-gradient(ellipse 70% 60% at 50% 50%, transparent 62%, rgba(255, 220, 240, .08) 72%, transparent 80%);
}

.rdg-halo {
  pointer-events: none;
  opacity: 0;
  transition: opacity .7s var(--rdg-ease);
  -webkit-mask: radial-gradient(circle, transparent 25%, #000 26%, #000 89%, transparent 90%);
  mask: radial-gradient(circle, transparent 25%, #000 26%, #000 89%, transparent 90%);
  background: conic-gradient(from var(--h0, 0deg), rgba(255, 255, 255, .42) 0deg, rgba(255, 255, 255, .42) var(--hw, 0deg), transparent var(--hw, 0deg));
}

.rdg-halo.is-on {
  opacity: 1;
}

.rdg-flame {
  position: absolute;
  z-index: 3;
  width: 15%;
  aspect-ratio: 1;
  translate: -50% -78%;
  pointer-events: none;
  border-radius: 24%;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(10, 2, 18, .55), 0 0 0 3px rgba(255, 255, 255, .9), 0 0 26px rgba(247, 37, 133, .55);
  transition: box-shadow 1s ease;
}

.rdg-flame img {
  display: block;
  width: 100%;
  height: 100%;
}

.rdg-flame.is-hot {
  box-shadow: 0 10px 22px rgba(10, 2, 18, .55), 0 0 0 3px #fff, 0 0 40px rgba(255, 130, 80, .9);
}

.rdg-clapper {
  position: absolute;
  z-index: 3;
  width: 8%;
  aspect-ratio: 40 / 70;
  translate: -50% 0;
  pointer-events: none;
  filter: drop-shadow(0 6px 6px rgba(10, 2, 18, .6));
}

.rdg-clapper svg {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 70%;
}

.rdg-clapper.is-flick svg {
  animation: rdg-flick .14s ease-out;
}

@keyframes rdg-flick {
  0% { transform: rotate(0); }
  30% { transform: rotate(16deg); }
  100% { transform: rotate(0); }
}

/* ---- Launch and seats ---- */
.rdg-launch {
  position: relative;
  overflow: hidden;
  min-width: 230px;
  min-height: 58px;
  margin-top: clamp(8px, 2.4vh, 22px);
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: linear-gradient(135deg, #e0156f, #f0503a);
  color: #fff;
  font-weight: 900;
  font-size: 1.17rem;
  box-shadow: 0 14px 30px rgba(240, 40, 100, .38), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .18s var(--rdg-ease);
  -webkit-tap-highlight-color: transparent;
}

.rdg-launch:hover {
  transform: translateY(-2px);
}

.rdg-launch:active {
  transform: scale(.96);
}

/* The light sweep of the kit page. */
.rdg-launch::after,
.rdg-btn--primary::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-18deg);
  animation: rdg-shine 7s ease-in-out 2s infinite;
  pointer-events: none;
}

@keyframes rdg-shine {
  0%, 72% { left: -60%; }
  100% { left: 130%; }
}

.rdg-page .rdg-seats {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
}

.rdg-seat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 44vw;
  padding: 6px 7px 6px 13px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .78);
  font-weight: 800;
  transition: background .35s var(--rdg-ease), color .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.rdg-seat > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rdg-seat.is-me {
  color: var(--rdg-night);
  background: #fff;
  border-color: #fff;
  box-shadow: 0 8px 22px rgba(247, 37, 133, .38);
}

.rdg-seat b {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 176, 120, .2);
  color: var(--rdg-gold);
  font-size: .72rem;
  font-weight: 900;
  white-space: nowrap;
}

.rdg-seat.is-me b {
  background: #ffe8f1;
  color: var(--rdg-dare);
}

/* ---- The card the wheel deals: the back of the deck, then the white face of the game ---- */
.rdg-veil {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  justify-items: center;
  align-content: start;
  padding: max(70px, 9vh) 16px 16px;
  opacity: 0;
  transition: opacity .45s ease;
  background: radial-gradient(circle at var(--hx, 50%) var(--hy, 70%), rgba(26, 6, 30, 0) 0, rgba(26, 6, 30, 0) 64px, rgba(26, 6, 30, .74) 170px);
}

.rdg-veil.is-on {
  opacity: 1;
}

.rdg-deal {
  position: relative;
  width: min(100%, 410px);
  display: grid;
  perspective: 1400px;
}

.rdg-flip {
  grid-area: 1 / 1;
  display: grid;
  transform-style: preserve-3d;
  transform: translateY(34px) rotateY(180deg) scale(.96);
  transition: transform .75s var(--rdg-ease);
}

.rdg-veil.is-on .rdg-flip {
  transform: none;
}

.rdg-face {
  grid-area: 1 / 1;
  border-radius: var(--rdg-radius);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.rdg-back {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 240px;
  background: var(--rdg-back);
  box-shadow: 0 30px 70px rgba(10, 2, 18, .5);
  transform: rotateY(180deg);
}

.rdg-back::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1.5px solid rgba(255, 255, 255, .35);
  border-radius: calc(var(--rdg-radius) - 10px);
}

.rdg-back span {
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.6rem;
  font-style: italic;
  text-shadow: 0 2px 16px rgba(59, 22, 63, .4);
}

.rdg-back span::before {
  content: "\2665\FE0E";
  display: block;
  margin-bottom: 6px;
  font-size: 1.4rem;
  font-style: normal;
  text-align: center;
}

.rdg-front {
  --tint: 247, 37, 133;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 20px 16px;
  background: #fff;
  color: var(--rdg-ink);
  box-shadow: 0 30px 70px rgba(10, 2, 18, .5);
}

.rdg-front.is-talk {
  --tint: 106, 75, 255;
}

.rdg-front.is-gold {
  --tint: 255, 150, 60;
}

.rdg-front::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -30%;
  bottom: -40%;
  width: 90%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--tint), .17), transparent 68%);
}

.rdg-ctop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.rdg-page .rdg-kicker {
  margin: 0;
  padding: 7px 13px;
  border-radius: 999px;
  color: var(--rdg-dare);
  background: #ffe8f1;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.rdg-front.is-talk .rdg-kicker {
  color: var(--rdg-truth);
  background: #efebff;
}

.rdg-front.is-gold .rdg-kicker {
  color: #8a4b00;
  background: #fff1d6;
}

.rdg-clevel {
  color: #a08aa2;
  font-size: .78rem;
  font-weight: 800;
  white-space: nowrap;
}

.rdg-cbody {
  text-align: center;
}

.rdg-page .rdg-gage {
  margin: 0;
  color: var(--rdg-ink);
  font-size: clamp(1.3rem, 5.6vw, 1.7rem);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.rdg-gage em {
  font-style: normal;
  color: var(--rdg-dare);
}

.rdg-front.is-talk .rdg-gage em {
  color: var(--rdg-truth);
}

.rdg-page .rdg-aside {
  margin: 0 0 10px;
  color: var(--rdg-muted);
  font-size: .95rem;
  font-weight: 700;
}

.rdg-page .rdg-gage + .rdg-aside {
  margin: 10px 0 0;
}

.rdg-secret {
  margin-top: 4px;
  padding: 16px 14px;
  border-radius: 18px;
  border: 1.5px dashed rgba(200, 16, 90, .3);
  background: repeating-linear-gradient(45deg, rgba(247, 37, 133, .07) 0 6px, transparent 6px 12px);
}

.rdg-secret .rdg-gage {
  filter: blur(9px);
  transition: filter .25s ease;
  user-select: none;
  -webkit-user-select: none;
}

.rdg-secret.is-reading .rdg-gage {
  filter: none;
}

.rdg-cactions {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.rdg-page .rdg-cbrand {
  margin: 0;
  color: #b79db6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: .9rem;
  font-style: italic;
  text-align: center;
}

.rdg-cbrand::before {
  content: "\2665\FE0E\00A0";
  color: rgba(var(--tint), .45);
  font-style: normal;
}

.rdg-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 900;
  font-size: 1rem;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: transform .18s var(--rdg-ease), background .2s ease;
}

.rdg-btn:active {
  transform: scale(.96);
}

.rdg-btn--primary {
  flex: 1;
  min-width: 130px;
  background: linear-gradient(135deg, #e0156f, #f0503a);
  color: #fff;
  box-shadow: 0 10px 22px rgba(240, 40, 100, .32), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.rdg-front.is-talk .rdg-btn--primary {
  background: linear-gradient(135deg, #6c4dff, #9b3dff);
  box-shadow: 0 10px 22px rgba(108, 77, 255, .32), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.rdg-btn--light {
  background: #f6e8f0;
  color: #5b1d48;
}

.rdg-btn--timer {
  padding: 0 14px 0 12px;
  background: var(--rdg-ink);
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.rdg-ring {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: conic-gradient(var(--rdg-lamp) var(--p, 0%), rgba(255, 255, 255, .22) 0);
  -webkit-mask: radial-gradient(circle, transparent 5px, #000 5.5px);
  mask: radial-gradient(circle, transparent 5px, #000 5.5px);
}

.rdg-page .rdg-note {
  margin: 0;
  color: var(--rdg-dare);
  font-weight: 800;
  font-size: .95rem;
}

/* ---- The temperature rising, the end ---- */
.rdg-layer {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 24px 16px;
  overflow-y: auto;
  opacity: 0;
  transition: opacity .6s ease;
}

.rdg-layer.is-on {
  opacity: 1;
}

.rdg-heatup {
  background: radial-gradient(60% 50% at 50% 55%, rgba(255, 112, 70, .45), rgba(42, 15, 51, .9));
  text-align: center;
}

.rdg-heatup img {
  display: block;
  width: 84px;
  height: 84px;
  margin: 0 auto;
  border-radius: 24px;
  box-shadow: 0 0 0 3px #fff, 0 0 60px rgba(255, 130, 80, .9);
  animation: rdg-glow 1.6s ease-in-out infinite alternate;
}

@keyframes rdg-glow {
  from { box-shadow: 0 0 0 3px #fff, 0 0 40px rgba(255, 130, 80, .7); }
  to { box-shadow: 0 0 0 3px #fff, 0 0 70px rgba(255, 130, 80, 1); }
}

.rdg-page .rdg-hu-line {
  margin: 22px 0 0;
  color: #fff;
  font-size: clamp(2.1rem, 10vw, 3.4rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
}

.rdg-page .rdg-hu-act {
  display: inline-block;
  margin: 16px 0 0;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.rdg-end {
  background: rgba(26, 6, 30, .82);
}

.rdg-endcard {
  width: min(100%, 410px);
  padding: 30px 22px 24px;
  border-radius: var(--rdg-radius);
  text-align: center;
  background:
    radial-gradient(90% 70% at 15% 0%, rgba(255, 176, 120, .35), transparent 60%),
    linear-gradient(160deg, #3b163f 0%, #6a1b6e 55%, #f72585 100%);
  box-shadow: 0 30px 70px rgba(10, 2, 18, .5);
}

.rdg-page .rdg-title--end {
  font-size: clamp(2rem, 9vw, 2.8rem);
}

.rdg-endcard .rdg-lead {
  margin-bottom: 8px;
}

/* ---- The app wall, as the window of the online game ---- */
.rdg-wall {
  background: rgba(24, 5, 29, .66);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.rdg-wallcard {
  position: relative;
  width: min(440px, 100%);
  max-height: calc(100svh - 24px);
  overflow-y: auto;
  padding: 30px 24px 22px;
  border-radius: 28px;
  background: radial-gradient(120% 55% at 50% 0%, #ffe9f3 0%, #fff 62%);
  box-shadow: 0 30px 90px rgba(20, 0, 35, .45);
  color: var(--rdg-ink);
  text-align: center;
  transform: translateY(18px) scale(.97);
  transition: transform .5s var(--rdg-ease);
}

.rdg-wall.is-on .rdg-wallcard {
  transform: none;
}

.rdg-wallcard__logo {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(233, 30, 117, .3);
}

.rdg-page .rdg-wall-rating {
  margin: 14px 0 6px;
  color: #d81d7e;
  font-size: .9rem;
  font-weight: 900;
  letter-spacing: .04em;
}

.rdg-page .rdg-wall-act {
  display: inline-block;
  margin: 0 0 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #ffe8f1;
  color: var(--rdg-dare);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.rdg-page .rdg-wall-title {
  margin: 0 0 10px;
  color: var(--rdg-ink);
  font-size: clamp(1.7rem, 6.5vw, 2.2rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.rdg-page .rdg-wall-text {
  margin: 0 auto 18px;
  max-width: 34ch;
  color: var(--rdg-muted);
  font-weight: 500;
  line-height: 1.55;
}

.rdg-stores {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.rdg-stores a {
  display: block;
  border-radius: 12px;
  transition: transform .2s var(--rdg-ease);
}

.rdg-stores a:hover {
  transform: translateY(-2px);
}

.rdg-stores img {
  display: block;
  width: auto;
  height: 48px;
}

.rdg-wall-kit {
  margin-top: 18px;
}

.rdg-page .rdg-wall-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  color: #9a7f97;
  font-size: .76rem;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.rdg-wall-or::before,
.rdg-wall-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rdg-line);
}

.rdg-wall-stay {
  margin-top: 16px;
  padding: 6px 10px;
  border: 0;
  background: none;
  color: #7b416f;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

/* ---- Below the game: the sections of the kit page (kit.css), same type, cards and spacing ---- */
.rdg-more {
  color: #2a142d;
}

.rdg-section {
  padding: clamp(46px, 7vw, 82px) 0;
  background: #fff;
}

.rdg-section--soft {
  background: #fff1f6;
}

.rdg-section--faq {
  background: linear-gradient(180deg, #fff 0%, #fff7fb 100%);
}

.rdg-container {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

.rdg-section__header {
  max-width: 760px;
  margin-bottom: 30px;
}

.rdg-section__header--center {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.rdg-more h2 {
  margin: 0 0 12px;
  color: #2a142d;
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0;
  text-wrap: balance;
}

.rdg-more p {
  margin: 0;
  color: #745f75;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.65;
}

.rdg-more .rdg-kicker {
  margin: 0 0 10px;
  padding: 0;
  border-radius: 0;
  background: none;
  color: #9d1d53;
  font-size: .84rem;
  font-weight: 950;
  line-height: 1.3;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.rdg-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .78fr);
  gap: clamp(24px, 5vw, 58px);
  align-items: center;
}

.rdg-mini-cards {
  display: grid;
  gap: 12px;
}

.rdg-mini-cards article,
.rdg-related a {
  display: block;
  padding: 22px;
  border: 1px solid rgba(42, 20, 45, .09);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 15px 38px rgba(72, 22, 64, .08);
}

.rdg-mini-cards strong,
.rdg-related strong {
  display: block;
  margin: 0 0 9px;
  color: #2a142d;
  font-size: 1.08rem;
  line-height: 1.2;
}

.rdg-mini-cards span,
.rdg-related span {
  display: block;
  color: #745f75;
  line-height: 1.56;
}

/* The thermometer of the acts: it fills from violet to ember when it comes into view. */
.rdg-heatline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rdg-heatline::before,
.rdg-heatline::after {
  content: "";
  position: absolute;
  top: 27px;
  left: 12.5%;
  right: 12.5%;
  height: 6px;
  border-radius: 6px;
}

.rdg-heatline::before {
  background: rgba(42, 20, 45, .08);
}

.rdg-heatline::after {
  background: linear-gradient(90deg, #6c4dff, #9b3dff 30%, #f72585 66%, #f0503a);
  box-shadow: 0 0 14px rgba(247, 37, 133, .4);
  transform-origin: 0 50%;
  transition: transform 1.6s var(--rdg-ease);
}

.rdg-heatline.is-armed::after {
  transform: scaleX(0);
}

.rdg-heatline.is-armed.is-lit::after {
  transform: none;
}

.rdg-heatline li {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  text-align: center;
}

.rdg-heatline__dot {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 950;
  letter-spacing: .02em;
  box-shadow: 0 0 0 6px #fff1f6, 0 12px 26px rgba(72, 22, 64, .2);
  transition: transform .55s var(--rdg-ease) calc(var(--i) * .35s + .25s), opacity .55s ease calc(var(--i) * .35s + .25s);
}

.rdg-heatline li:nth-child(1) .rdg-heatline__dot { background: linear-gradient(135deg, #6c4dff, #9b3dff); }
.rdg-heatline li:nth-child(2) .rdg-heatline__dot { background: linear-gradient(135deg, #9b3dff, #d42a9a); }
.rdg-heatline li:nth-child(3) .rdg-heatline__dot { background: linear-gradient(135deg, #f72585, #c8105a); }
.rdg-heatline li:nth-child(4) .rdg-heatline__dot { background: linear-gradient(135deg, #e0156f, #f0503a); }

.rdg-heatline.is-armed .rdg-heatline__dot {
  opacity: .35;
  transform: scale(.6);
}

.rdg-heatline.is-armed.is-lit .rdg-heatline__dot {
  opacity: 1;
  transform: none;
}

.rdg-more .rdg-heatline h3 {
  margin: 4px 0 0;
  color: #2a142d;
  font-size: 1.15rem;
  line-height: 1.2;
}

.rdg-more .rdg-heatline p {
  font-size: .92rem;
  line-height: 1.45;
}

.rdg-heatline em {
  padding: 4px 10px;
  border-radius: 999px;
  background: #ffe8f1;
  color: #c8105a;
  font-size: .72rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* The golden slices: on the night of the game, gold that catches the light. */
.rdg-section--night {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(50% 40% at 85% 10%, rgba(255, 176, 120, .14), transparent 70%),
    linear-gradient(180deg, #3b163f 0%, #2a0f33 100%);
}

.rdg-section--night::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .75;
  background:
    radial-gradient(1.6px 1.6px at 8% 18%, rgba(255, 255, 255, .85), transparent 70%),
    radial-gradient(1.2px 1.2px at 26% 70%, rgba(255, 255, 255, .6), transparent 70%),
    radial-gradient(2px 2px at 44% 12%, rgba(255, 217, 138, .8), transparent 70%),
    radial-gradient(1.4px 1.4px at 66% 82%, rgba(255, 255, 255, .6), transparent 70%),
    radial-gradient(1.6px 1.6px at 84% 22%, rgba(255, 255, 255, .8), transparent 70%),
    radial-gradient(1.4px 1.4px at 94% 64%, rgba(255, 217, 138, .7), transparent 70%);
}

.rdg-more .rdg-section--night h2 {
  color: #fff;
}

.rdg-more .rdg-section--night .rdg-kicker {
  color: #ffb3d1;
}

.rdg-golds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.rdg-gold {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  padding: 24px 22px;
  border-radius: 24px;
  background: linear-gradient(118deg, #ffe7a8 0%, #ffd98a 20%, #ffb070 44%, #ffe2a0 60%, #f2a35c 82%, #ffd98a 100%);
  box-shadow: 0 0 46px rgba(255, 176, 112, .28), 0 18px 44px rgba(10, 2, 18, .35), 0 0 0 1px rgba(255, 236, 190, .7), inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -2px 0 rgba(150, 70, 0, .2);
}

/* Sparkles on the foil. */
.rdg-gold::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(2.4px 2.4px at 84% 18%, #fff, transparent 70%),
    radial-gradient(1.6px 1.6px at 72% 34%, rgba(255, 255, 255, .9), transparent 70%),
    radial-gradient(2px 2px at 92% 62%, rgba(255, 255, 255, .9), transparent 70%),
    radial-gradient(1.4px 1.4px at 62% 84%, rgba(255, 255, 255, .8), transparent 70%);
  animation: rdg-twinkle 3.6s ease-in-out calc(var(--i) * .6s) infinite alternate;
}

/* The light sweep of the site's buttons, across the gold (under the words). */
.rdg-gold::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: skewX(-18deg);
  animation: rdg-shine 6s ease-in-out calc(var(--i) * .9s + 1s) infinite;
  pointer-events: none;
}

@keyframes rdg-twinkle {
  from { opacity: .45; }
  to { opacity: 1; }
}

.rdg-gold__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: #3b163f;
  color: #ffd98a;
  box-shadow: 0 6px 16px rgba(59, 22, 63, .35), inset 0 0 0 1.5px rgba(255, 217, 138, .5);
}

.rdg-more .rdg-gold h3 {
  margin: 0 0 6px;
  color: #3b163f;
  font-size: 1.2rem;
  line-height: 1.2;
}

.rdg-more .rdg-gold p {
  color: #5b2a3f;
  line-height: 1.5;
}

/* Ideas of gages: one act at a time, as the cards of the game. */
.rdg-ideas__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.rdg-ideas__tab {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(42, 20, 45, .12);
  border-radius: 999px;
  background: #fff;
  color: #745f75;
  font-size: .9rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s var(--rdg-ease);
}

.rdg-ideas__tab:hover {
  color: #2a142d;
  transform: translateY(-1px);
}

.rdg-ideas__tab[aria-selected="true"] {
  border-color: #3b163f;
  background: #3b163f;
  color: #fff;
  box-shadow: 0 8px 22px rgba(247, 37, 133, .3);
  transform: none;
}

.rdg-ideas__panels {
  display: grid;
}

.rdg-ideas__panel {
  grid-area: 1 / 1;
  min-width: 0;
  transition: opacity .35s ease, visibility 0s linear 0s;
}

.rdg-ideas__panel:not(.is-current) {
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility 0s linear .2s;
}

.rdg-ideas__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rdg-ideas .rdg-idea {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  min-height: 148px;
  padding: 20px 22px 24px;
  border: 1px solid rgba(233, 30, 117, .14);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 15px 38px rgba(72, 22, 64, .08);
}

.rdg-idea span {
  margin-bottom: 14px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(233, 30, 117, .1);
  color: #9d1d53;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Violet when the gage is to say, as the slices of the wheel. */
.rdg-idea.is-talk span {
  background: rgba(139, 44, 246, .1);
  color: #5132d8;
}

.rdg-more .rdg-idea p {
  color: #2a142d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.12rem;
  font-weight: 400;
  line-height: 1.45;
}

/* The questions, as on the kit page. */
.rdg-faq {
  display: grid;
  gap: 12px;
}

.rdg-faq details {
  padding: 18px 20px;
  border: 1px solid rgba(42, 20, 45, .1);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(72, 22, 64, .05);
}

.rdg-faq summary {
  color: #2a142d;
  font-weight: 900;
  cursor: pointer;
}

.rdg-more .rdg-faq p {
  margin-top: 10px;
  line-height: 1.6;
}

.rdg-faq a {
  color: #9d1d53;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rdg-related {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.rdg-related a {
  color: #2a142d;
  text-decoration: none;
  transition: transform .25s var(--rdg-ease), box-shadow .25s ease;
}

.rdg-related a:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(72, 22, 64, .12);
}

@media (max-width: 860px) {
  .rdg-split,
  .rdg-golds,
  .rdg-related {
    grid-template-columns: 1fr;
  }

  .rdg-section {
    padding: 40px 0;
  }

  .rdg-section__header {
    margin-bottom: 20px;
  }

  /* The golden slices side by side with their sign, shorter to scroll. */
  .rdg-gold {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    column-gap: 16px;
    align-items: center;
    padding: 18px 20px;
  }

  .rdg-gold__icon {
    grid-row: 1 / span 2;
    margin: 0;
  }

  .rdg-more .rdg-gold h3 {
    margin: 0 0 2px;
  }

  /* The acts on one line that slides, as the levels of the online game. */
  .rdg-ideas__tabs {
    flex-wrap: nowrap;
    margin: 0 -12px 8px;
    padding: 2px 12px 10px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 34px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 34px), transparent);
  }

  .rdg-ideas__tab {
    flex: none;
  }

  /* On phones the ideas slide sideways, one card and a little of the next in view. */
  .rdg-ideas__row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    margin: 0 -12px;
    padding: 4px 12px 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 12px;
    scrollbar-width: none;
  }

  .rdg-ideas__tabs::-webkit-scrollbar,
  .rdg-ideas__row::-webkit-scrollbar {
    display: none;
  }

  .rdg-ideas .rdg-idea {
    padding: 16px 18px 18px;
    scroll-snap-align: start;
  }

  .rdg-more .rdg-idea p {
    font-size: 1.05rem;
  }
}

@media (max-width: 560px) {
  .rdg-container {
    width: min(100% - 24px, 1120px);
  }
}

@media (max-width: 680px) {
  /* The thermometer stands up: the acts one under the other. */
  .rdg-heatline {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .rdg-heatline::before,
  .rdg-heatline::after {
    top: 27px;
    bottom: 27px;
    left: 27px;
    right: auto;
    width: 6px;
    height: auto;
  }

  .rdg-heatline::after {
    background: linear-gradient(180deg, #6c4dff, #9b3dff 30%, #f72585 66%, #f0503a);
    transform-origin: 50% 0;
  }

  .rdg-heatline.is-armed::after {
    transform: scaleY(0);
  }

  .rdg-heatline li {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    column-gap: 16px;
    align-items: center;
    text-align: left;
  }

  .rdg-heatline__dot {
    grid-row: 1 / span 3;
  }

  .rdg-more .rdg-heatline h3 {
    margin: 0;
  }

  .rdg-heatline em {
    justify-self: start;
  }
}

@media (min-width: 900px) {
  .rdg-table {
    width: min(68vh, 600px);
  }
}

@media (max-height: 700px) and (max-width: 899px) {
  .rdg-hint {
    display: none;
  }

  .rdg-page .rdg-turn {
    margin-top: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rdg-stage::before,
  .rdg-lights span,
  .rdg-launch::after,
  .rdg-btn--primary::after,
  .rdg-heatup img,
  .rdg-game {
    animation: none;
  }

  .rdg-lights span {
    opacity: .4;
  }

  .rdg-cam,
  .rdg-flip,
  .rdg-fill {
    transition-duration: .01s;
  }

  .rdg-gold::before,
  .rdg-gold::after {
    animation: none;
  }
}