/*
 * welcome-redesign.css — /welcome under the redesign themes.
 *
 * Loaded only by views/welcome.pug when a redesign theme is active. Colors
 * come from the theme tokens (--rd-*, --mv-*) so a palette change reaches
 * this page. Removable with views/mixins/welcomeRedesign.pug and
 * plugins/redesign/welcomeExperience.js.
 *
 * Page states (data-welcome-intro on #welcome-page):
 *   pending  an intro is due; the plugin hasn't started it yet
 *   playing  the intro overlay is up
 *   done     the menu runs its entrance animation
 *   (none)   no intro and no plugin: the menu simply shows
 */

/* ---------- Page shell ---------- */
body:has(.rd-welcome) {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
.rd-welcome,
.rd-welcome *,
.rd-welcome *::before,
.rd-welcome *::after,
.rd-welcome-intro,
.rd-welcome-intro *,
.rd-welcome-intro *::before,
.rd-welcome-intro *::after {
  box-sizing: border-box;
}
body:has(.rd-welcome) main {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

body[data-redesign-theme] .rd-welcome {
  --welcome-ink-on-accent: var(--rd-bg);
  --welcome-card-ink: var(--rd-ink);
  --welcome-card-dim: var(--rd-ink-dim);
  --welcome-pointer-x: 0;
  --welcome-pointer-y: 0;
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  min-height: 640px;
  overflow: hidden;
  color: var(--rd-ink);
  font-family: var(--rd-font-body);
  font-weight: 400;
  text-align: left;
}
body[data-redesign-theme="cyberpunk"] .rd-welcome {
  --welcome-mood-1: var(--rd-accent);
  --welcome-mood-2: var(--rd-accent-hi);
  --welcome-mood-3: oklch(72% 0.22 295);
}
body[data-redesign-theme="soft"] .rd-welcome {
  --welcome-ink-on-accent: var(--rd-ink);
  --welcome-mood-1: var(--rd-accent);
  --welcome-mood-2: var(--rd-accent-hi);
  --welcome-mood-3: var(--rd-accent-dim);
}
body[data-redesign-theme="noir"] .rd-welcome {
  --welcome-mood-1: var(--rd-accent);
  --welcome-mood-2: var(--rd-danger);
  --welcome-mood-3: var(--rd-ink);
}
body[data-redesign-theme="medieval"] .rd-welcome {
  --welcome-card-ink: var(--mv-ink);
  --welcome-card-dim: var(--mv-ink-dim);
  --welcome-mood-1: var(--mv-amethyst);
  --welcome-mood-2: var(--mv-burgundy);
  --welcome-mood-3: var(--mv-emerald);
}

/* The drawn skyline replaces the photo here, so the image never downloads. */
body[data-redesign-theme="cyberpunk"]:has(.rd-welcome)::before {
  background-image: none;
  background-color: var(--rd-bg);
}
body[data-redesign-theme="cyberpunk"] .rd-welcome {
  background:
    radial-gradient(ellipse at 20% 10%,
      color-mix(in oklab, var(--rd-accent) 32%, transparent), transparent 50%),
    radial-gradient(ellipse at 90% 90%,
      color-mix(in oklab, var(--rd-accent-hi) 22%, transparent), transparent 50%),
    linear-gradient(180deg, var(--rd-bg) 0%, var(--rd-bg-elevated) 100%);
}

/* ---------- Living stage: parallax layers ---------- */
.rd-welcome-depth {
  position: absolute;
  inset: -48px;
  pointer-events: none;
  transition: transform 0.35s ease-out;
}
.rd-welcome-depth--far {
  transform: translate3d(
    calc(var(--welcome-pointer-x) * -10px),
    calc(var(--welcome-pointer-y) * -8px),
    0
  );
}
.rd-welcome-depth--mid {
  transform: translate3d(
    calc(var(--welcome-pointer-x) * -24px),
    calc(var(--welcome-pointer-y) * -16px),
    0
  );
}
.rd-welcome-depth--near {
  transform: translate3d(
    calc(var(--welcome-pointer-x) * -44px),
    calc(var(--welcome-pointer-y) * -30px),
    0
  );
}
.rd-welcome-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Hover color: one soft pool of light under each card. */
.rd-welcome-mood {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.rd-welcome-mood--trivia {
  background: radial-gradient(ellipse 70% 70% at 22% 72%,
    var(--welcome-mood-1), transparent 70%);
}
.rd-welcome-mood--med {
  background: radial-gradient(ellipse 70% 70% at 50% 76%,
    var(--welcome-mood-2), transparent 70%);
}
.rd-welcome-mood--swe {
  background: radial-gradient(ellipse 70% 70% at 78% 72%,
    var(--welcome-mood-3), transparent 70%);
}
.rd-welcome[data-welcome-mood="trivia"] .rd-welcome-mood--trivia,
.rd-welcome[data-welcome-mood="med"] .rd-welcome-mood--med,
.rd-welcome[data-welcome-mood="swe"] .rd-welcome-mood--swe {
  opacity: 0.55;
}

/* Once the canvas paints, reveal it behind the existing welcome menu. */
body[data-redesign-theme="cyberpunk"][data-cyberpunk-city-ready] .rd-welcome {
  background: transparent;
}

/* Noir: window-blind light and a vignette, over the theme's blueprint grid */
.rd-welcome-blinds {
  position: absolute;
  left: -10%;
  right: -10%;
  top: -20%;
  bottom: -20%;
  background: repeating-linear-gradient(0deg,
    color-mix(in oklab, var(--rd-accent-hi) 13%, transparent) 0 34px,
    transparent 34px 72px);
  transform: rotate(-14deg) skewX(-18deg);
  -webkit-mask-image:
    radial-gradient(ellipse 60% 55% at 70% 30%, #000, transparent 75%);
  mask-image:
    radial-gradient(ellipse 60% 55% at 70% 30%, #000, transparent 75%);
  animation: rd-welcome-blinds 9s ease-in-out infinite alternate;
}
@keyframes rd-welcome-blinds {
  from { opacity: 0.65; }
  to { opacity: 1; }
}
body[data-redesign-theme="noir"] .rd-welcome-overlay {
  background: radial-gradient(ellipse at center,
    transparent 45%, rgba(0, 0, 0, 0.72) 100%);
}

/* Medieval: a slowly turning sigil, above the theme's drifting icons */
.rd-welcome-sigil {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 980px;
  height: 980px;
  margin: -490px 0 0 -490px;
  color: var(--rd-accent-hi);
  opacity: 0.2;
  animation: rd-welcome-sigil-turn 90s linear infinite;
}
.rd-welcome-sigil circle,
.rd-welcome-sigil path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}
@keyframes rd-welcome-sigil-turn {
  to { transform: rotate(360deg); }
}

/* ---------- Particles: built by the plugin, animated only by CSS ---------- */
.rd-welcome-particle {
  position: absolute;
  bottom: -60px;
  border-radius: 50%;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
body[data-redesign-theme="cyberpunk"] .rd-welcome-particle {
  border-radius: 1px;
  background: var(--rd-accent-hi);
  box-shadow: 0 0 10px var(--rd-accent-hi);
  animation-name: rd-welcome-rise-dust;
}
body[data-redesign-theme="cyberpunk"] .rd-welcome-particle:nth-child(2n) {
  background: var(--rd-accent);
  box-shadow: 0 0 10px var(--rd-accent);
}
@keyframes rd-welcome-rise-dust {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: 1; }
  85% { opacity: 0.8; }
  100% { transform: translate(40px, -115vh); opacity: 0; }
}
body[data-redesign-theme="noir"] .rd-welcome-particle {
  background: color-mix(in oklab, var(--rd-ink) 9%, transparent);
  filter: blur(34px);
  animation-name: rd-welcome-rise-smoke;
}
@keyframes rd-welcome-rise-smoke {
  0% { transform: translate(0, 0) scale(0.7); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(180px, -95vh) scale(1.8); opacity: 0; }
}
body[data-redesign-theme="medieval"] .rd-welcome-particle {
  background: #F0C46A;
  box-shadow: 0 0 12px 2px rgba(240, 150, 60, 0.9);
  animation-name: rd-welcome-rise-ember;
}
@keyframes rd-welcome-rise-ember {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  35% { transform: translate(30px, -38vh); }
  65% { transform: translate(-24px, -72vh); opacity: 0.9; }
  100% { transform: translate(20px, -110vh); opacity: 0; }
}

/* ---------- Menu ---------- */
.rd-welcome-menu {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1304px;
  padding: 16px 32px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate3d(
    calc(var(--welcome-pointer-x) * 7px),
    calc(var(--welcome-pointer-y) * 5px),
    0
  );
  transition: transform 0.35s ease-out;
}

/* Hide the menu until the intro ends. The delayed reveal is the safety net
 * for a plugin that never loads. */
.rd-welcome[data-welcome-intro="pending"] .rd-welcome-menu {
  visibility: hidden;
  animation: rd-welcome-reveal 0s 1.5s forwards;
}
.rd-welcome[data-welcome-intro="playing"] .rd-welcome-menu {
  visibility: hidden;
}
@keyframes rd-welcome-reveal {
  to { visibility: visible; }
}

.rd-welcome-topnav {
  align-self: flex-end;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.rd-welcome-topnav-item {
  display: inline-flex;
  align-items: center;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 14px;
  background: transparent;
  border: 0;
  color: var(--rd-ink);
  font: 600 15px var(--rd-font-body);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  transition: text-decoration-color 0.2s;
}
.rd-welcome-topnav-item:hover {
  background: transparent;
  color: var(--rd-ink);
  text-decoration-color: var(--rd-accent);
}
.rd-welcome-topnav-item[hidden] { display: none; }
.rd-welcome-topnav-item:focus-visible {
  outline: 2px solid var(--rd-accent-hi);
  outline-offset: 2px;
}

/* The auto margins here and on the cards center the content below the nav. */
body[data-redesign-theme] .rd-welcome-title {
  margin: auto 0 0;
  padding: 0;
  background: none;
  font-family: var(--rd-font-display);
  font-size: clamp(3rem, 7.4vw, 6.25rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: var(--rd-text-display-tracking);
  text-transform: var(--rd-text-display-case);
  text-align: center;
}
.rd-welcome-tagline {
  margin: 10px 0 0;
  padding: 0;
  background: none;
  color: var(--rd-ink-dim);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  text-align: center;
}
body[data-redesign-theme="cyberpunk"] .rd-welcome-tagline {
  color: var(--rd-ink);
  text-shadow: 0 0 10px var(--rd-bg), 0 0 4px var(--rd-bg);
}
body[data-redesign-theme="cyberpunk"] .rd-welcome-title {
  color: var(--rd-ink);
  text-shadow:
    3px 0 0 var(--rd-accent),
    -3px 0 0 var(--rd-accent-hi),
    0 0 34px color-mix(in oklab, var(--rd-accent) 75%, transparent);
}
body[data-redesign-theme="soft"] .rd-welcome-title {
  color: var(--rd-ink);
  font-weight: 800;
  text-shadow: 5px 5px 0 var(--rd-accent);
}
body[data-redesign-theme="noir"] .rd-welcome-title,
body[data-redesign-theme="medieval"] .rd-welcome-title {
  background: linear-gradient(100deg,
    var(--rd-accent-dim) 0%,
    var(--rd-accent-hi) 30%,
    #FFF4D2 50%,
    var(--rd-accent-hi) 70%,
    var(--rd-accent-dim) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rd-welcome-foil 7s linear infinite;
}
@keyframes rd-welcome-foil {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

/* Room-code hero */
.rd-welcome-join {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  padding: 12px 16px 12px 22px;
  background: var(--rd-panel);
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius-md);
  box-shadow: var(--rd-shadow-card);
}
body[data-redesign-theme="soft"] .rd-welcome-join {
  border-width: 2px;
  border-radius: var(--rd-radius-lg);
}
.rd-welcome-join-label {
  color: var(--rd-ink);
  font-family: var(--rd-font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  font-weight: 700;
  letter-spacing: var(--rd-text-display-tracking);
  text-transform: var(--rd-text-display-case);
}
body[data-redesign-theme] .rd-welcome-join-field {
  width: 168px;
  height: 52px;
  margin: 0;
  padding: 0 0 0 16px;
  background: var(--rd-bg-elevated);
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius-sm);
  color: var(--rd-ink);
  font: 700 26px var(--rd-font-mono);
  letter-spacing: 0.35em;
  text-transform: uppercase;
}
body[data-redesign-theme="soft"] .rd-welcome-join-field { border-width: 2px; }
.rd-welcome-join-field::placeholder {
  color: var(--rd-ink-dim);
  opacity: 0.75;
}
body[data-redesign-theme] .rd-welcome-join-field:focus {
  outline: none;
  border-color: var(--rd-accent-hi);
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--rd-accent-hi) 40%, transparent);
}
body[data-redesign-theme] .rd-welcome-join-button {
  min-height: 52px;
  margin: 0;
  padding: 0 26px;
  background: var(--rd-accent);
  border: 0;
  border-radius: var(--rd-radius-sm);
  color: var(--welcome-ink-on-accent);
  font-family: var(--rd-font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: var(--rd-text-display-tracking);
  text-transform: var(--rd-text-display-case);
  cursor: pointer;
  transition: transform 0.15s, filter 0.15s;
}
body[data-redesign-theme="soft"] .rd-welcome-join-button {
  border: 2px solid var(--rd-ink);
}
.rd-welcome-join-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.12);
}
.rd-welcome-join-button:active { transform: translateY(1px); }
.rd-welcome-join-button:focus-visible {
  outline: 3px solid var(--rd-accent-hi);
  outline-offset: 2px;
}

.rd-welcome-divider {
  margin: 22px 0 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(100%, 560px);
  color: var(--rd-ink-dim);
  font: 600 14px var(--rd-font-body);
  white-space: nowrap;
}
.rd-welcome-divider::before,
.rd-welcome-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rd-line);
}
body[data-redesign-theme="soft"] .rd-welcome-divider { color: var(--rd-ink); }

/* ---------- Character-select cards ---------- */
.rd-welcome-cards {
  width: 100%;
  margin-bottom: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.rd-welcome-card {
  --welcome-card-accent: var(--welcome-mood-1);
  position: relative;
  display: block;
  color: var(--welcome-card-ink);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.3s cubic-bezier(0.2, 1.4, 0.4, 1),
    opacity 0.3s,
    filter 0.3s;
}
.rd-welcome-card[data-game="med"] {
  --welcome-card-accent: var(--welcome-mood-2);
}
.rd-welcome-card[data-game="swe"] {
  --welcome-card-accent: var(--welcome-mood-3);
}
.rd-welcome-card:hover { color: var(--welcome-card-ink); }
.rd-welcome-card:focus-visible {
  outline: 3px solid var(--rd-accent-hi);
  outline-offset: 5px;
}
.rd-welcome-card:hover,
.rd-welcome-card:focus-visible {
  transform: translateY(-10px);
}
.rd-welcome-cards:has(.rd-welcome-card:hover)
  .rd-welcome-card:not(:hover) {
  opacity: 0.55;
  filter: saturate(0.6);
}

.rd-welcome-card-body {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 330px;
  padding: 26px;
  overflow: hidden;
}
.rd-welcome-card-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin-bottom: 16px;
}
.rd-welcome-icon {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: currentColor;
}
.rd-welcome-icon path {
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rd-welcome-card-eyebrow {
  color: var(--welcome-card-dim);
  font: 500 12px var(--rd-font-mono);
  letter-spacing: 0.08em;
}
.rd-welcome-card-title {
  display: block;
  margin-top: 6px;
  font-family: var(--rd-font-display);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: var(--rd-text-display-tracking);
  text-transform: var(--rd-text-display-case);
}
.rd-welcome-card-tagline {
  display: block;
  margin: 10px 0 16px;
  color: var(--welcome-card-dim);
  font-size: 15.5px;
  line-height: 1.45;
}
.rd-welcome-card-action {
  display: inline-block;
  margin-top: auto;
  font-family: var(--rd-font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: var(--rd-text-display-tracking);
  text-transform: var(--rd-text-display-case);
}
.rd-welcome-card-sheen {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -60%;
  width: 40%;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent, rgba(255, 255, 255, 0.34), transparent);
  transform: skewX(-20deg);
  transition: left 0.75s ease;
}
.rd-welcome-card:hover .rd-welcome-card-sheen,
.rd-welcome-card:focus-visible .rd-welcome-card-sheen {
  left: 125%;
}
.rd-welcome-card-seal { display: none; }

/* Cyberpunk: cut-corner holo panels */
body[data-redesign-theme="cyberpunk"] .rd-welcome-card {
  filter: drop-shadow(0 0 12px
    color-mix(in oklab, var(--welcome-card-accent) 45%, transparent));
}
body[data-redesign-theme="cyberpunk"] .rd-welcome-card:hover {
  filter: drop-shadow(0 0 30px var(--welcome-card-accent));
}
body[data-redesign-theme="cyberpunk"] .rd-welcome-cards:has(.rd-welcome-card:hover)
  .rd-welcome-card:not(:hover) {
  filter: saturate(0.6);
}
body[data-redesign-theme="cyberpunk"] .rd-welcome-card-body {
  background: var(--welcome-card-accent);
  clip-path: polygon(
    22px 0, 100% 0, 100% calc(100% - 22px),
    calc(100% - 22px) 100%, 0 100%, 0 22px
  );
}
body[data-redesign-theme="cyberpunk"] .rd-welcome-card-body::before {
  content: "";
  position: absolute;
  inset: 2px;
  background:
    repeating-linear-gradient(0deg,
      transparent 0 3px, rgba(255, 255, 255, 0.025) 3px 4px),
    linear-gradient(160deg, var(--rd-panel-hi), var(--rd-bg-elevated));
  clip-path: polygon(
    21px 0, 100% 0, 100% calc(100% - 21px),
    calc(100% - 21px) 100%, 0 100%, 0 21px
  );
}
body[data-redesign-theme="cyberpunk"] .rd-welcome-card-art,
body[data-redesign-theme="cyberpunk"] .rd-welcome-card-eyebrow,
body[data-redesign-theme="cyberpunk"] .rd-welcome-card-title,
body[data-redesign-theme="cyberpunk"] .rd-welcome-card-tagline,
body[data-redesign-theme="cyberpunk"] .rd-welcome-card-action {
  position: relative;
}
body[data-redesign-theme="cyberpunk"] .rd-welcome-card-sheen {
  background: linear-gradient(90deg,
    transparent,
    color-mix(in oklab, var(--rd-accent-hi) 40%, transparent),
    color-mix(in oklab, var(--rd-accent) 40%, transparent),
    transparent);
}
body[data-redesign-theme="cyberpunk"] .rd-welcome-card-art {
  color: var(--welcome-card-accent);
  border: 1px solid var(--welcome-card-accent);
  box-shadow: inset 0 0 18px
    color-mix(in oklab, var(--welcome-card-accent) 40%, transparent);
}
body[data-redesign-theme="cyberpunk"] .rd-welcome-card-eyebrow,
body[data-redesign-theme="cyberpunk"] .rd-welcome-card-action {
  color: var(--rd-accent-hi);
}
body[data-redesign-theme="cyberpunk"] .rd-welcome-card:hover .rd-welcome-card-title {
  text-shadow: 2px 0 0 var(--rd-accent), -2px 0 0 var(--rd-accent-hi);
}

/* Soft Arcade: chunky toy capsules */
body[data-redesign-theme="soft"] .rd-welcome-card-body {
  padding: 0 24px 24px;
  background: var(--rd-panel);
  border: var(--rd-border-style);
  border-radius: var(--rd-radius-lg);
  box-shadow: var(--rd-shadow-card);
  transition: box-shadow 0.2s;
}
body[data-redesign-theme="soft"] .rd-welcome-card:hover {
  transform: translateY(-10px) rotate(-1.2deg);
}
body[data-redesign-theme="soft"] .rd-welcome-card[data-game="med"]:hover {
  transform: translateY(-10px) rotate(1.2deg);
}
body[data-redesign-theme="soft"] .rd-welcome-card:hover .rd-welcome-card-body {
  box-shadow: 0 16px 0 rgba(61, 64, 91, 0.2);
}
body[data-redesign-theme="soft"] .rd-welcome-card:active {
  transform: translateY(2px);
}
body[data-redesign-theme="soft"] .rd-welcome-card-art {
  width: calc(100% + 48px);
  height: 118px;
  margin: 0 -24px 16px;
  background: var(--welcome-card-accent);
  border-bottom: var(--rd-border-style);
  color: var(--rd-ink);
}
body[data-redesign-theme="soft"] .rd-welcome-card-art::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 26px;
  width: 54px;
  height: 16px;
  background: rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  transform: rotate(-10deg);
}
body[data-redesign-theme="soft"] .rd-welcome-icon {
  width: 58px;
  height: 58px;
  transition: transform 0.35s cubic-bezier(0.2, 1.8, 0.4, 1);
}
body[data-redesign-theme="soft"] .rd-welcome-card:hover .rd-welcome-icon {
  transform: scale(1.18) rotate(-6deg);
}
body[data-redesign-theme="soft"] .rd-welcome-card-eyebrow {
  font-family: var(--rd-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}
body[data-redesign-theme="soft"] .rd-welcome-card-action {
  align-self: flex-start;
  padding: 9px 18px;
  background: var(--rd-ink);
  border-radius: 999px;
  color: var(--rd-bg-elevated);
}
body[data-redesign-theme="soft"] .rd-welcome-card-sheen { display: none; }

/* Heist Noir: gold-foil case files */
body[data-redesign-theme="noir"] .rd-welcome-card-body {
  background: linear-gradient(165deg, var(--rd-panel-hi), var(--rd-panel));
  border: var(--rd-border-style);
  box-shadow: var(--rd-shadow-card);
}
body[data-redesign-theme="noir"] .rd-welcome-card-body::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--rd-line);
  pointer-events: none;
}
body[data-redesign-theme="noir"] .rd-welcome-card:hover .rd-welcome-card-body {
  box-shadow: 0 0 56px color-mix(in oklab, var(--rd-accent) 50%, transparent);
}
body[data-redesign-theme="noir"] .rd-welcome-card-art {
  width: 72px;
  height: 72px;
  margin: 8px 0 22px 8px;
  border: var(--rd-border-style);
  transform: rotate(45deg);
  color: var(--rd-accent-hi);
}
body[data-redesign-theme="noir"] .rd-welcome-icon {
  width: 36px;
  height: 36px;
  transform: rotate(-45deg);
}
body[data-redesign-theme="noir"] .rd-welcome-card-title {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 600;
  letter-spacing: 0.12em;
}
body[data-redesign-theme="noir"] .rd-welcome-card-eyebrow,
body[data-redesign-theme="noir"] .rd-welcome-card-action {
  color: var(--rd-accent-hi);
}
body[data-redesign-theme="noir"] .rd-welcome-card-action {
  font-size: 13px;
  letter-spacing: 0.16em;
}
body[data-redesign-theme="noir"] .rd-welcome-card-sheen {
  background: linear-gradient(90deg,
    transparent,
    color-mix(in oklab, var(--rd-accent-hi) 32%, transparent),
    transparent);
}

/* Medieval: illuminated parchment with a wax seal */
body[data-redesign-theme="medieval"] .rd-welcome-card-body {
  background:
    radial-gradient(ellipse at center,
      transparent 55%, rgba(122, 90, 40, 0.3) 100%),
    linear-gradient(170deg, var(--mv-parchment-hi), var(--mv-parchment));
  border: 2px solid var(--rd-accent);
  box-shadow: var(--rd-shadow-card);
}
body[data-redesign-theme="medieval"] .rd-welcome-card-body::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--rd-accent);
  pointer-events: none;
}
body[data-redesign-theme="medieval"] .rd-welcome-card:hover .rd-welcome-card-body {
  box-shadow: 0 0 60px
    color-mix(in oklab, var(--mv-amethyst-hi) 85%, transparent);
}
body[data-redesign-theme="medieval"] .rd-welcome-card-art {
  background: var(--welcome-card-accent);
  border: 3px double var(--rd-accent-hi);
  color: var(--mv-parchment-hi);
}
body[data-redesign-theme="medieval"] .rd-welcome-card-eyebrow {
  color: var(--mv-burgundy);
  font-weight: 700;
}
body[data-redesign-theme="medieval"] .rd-welcome-card-title {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  letter-spacing: 0.1em;
}
body[data-redesign-theme="medieval"] .rd-welcome-card-action {
  padding-right: 64px;
  color: var(--mv-burgundy);
  font-size: 13px;
  letter-spacing: 0.12em;
}
body[data-redesign-theme="medieval"] .rd-welcome-card-seal {
  display: block;
  position: absolute;
  right: 20px;
  bottom: 18px;
  width: 54px;
  height: 54px;
  border-radius: 50% 46% 52% 48%;
  background: radial-gradient(circle at 35% 30%,
    #B04338, var(--mv-burgundy) 62%, #52190F);
  box-shadow:
    inset 0 0 0 5px rgba(0, 0, 0, 0.14),
    0 2px 4px rgba(0, 0, 0, 0.4);
  transition:
    transform 0.35s cubic-bezier(0.2, 1.8, 0.4, 1),
    box-shadow 0.35s;
}
body[data-redesign-theme="medieval"] .rd-welcome-card:hover .rd-welcome-card-seal {
  transform: scale(1.14) rotate(-12deg);
  box-shadow:
    inset 0 0 0 5px rgba(0, 0, 0, 0.14),
    0 0 18px rgba(240, 150, 60, 0.9);
}
body[data-redesign-theme="medieval"] .rd-welcome-card-sheen {
  background: linear-gradient(90deg,
    transparent, rgba(255, 244, 210, 0.75), transparent);
}

/* ---------- Menu entrance: runs when the intro hands over ---------- */
.rd-welcome[data-welcome-intro="done"] .rd-welcome-topnav {
  animation: rd-welcome-fade-down 0.5s ease backwards;
}
.rd-welcome[data-welcome-intro="done"] .rd-welcome-tagline {
  animation: rd-welcome-fade-up 0.5s 0.15s ease backwards;
}
.rd-welcome[data-welcome-intro="done"] .rd-welcome-join {
  animation: rd-welcome-fade-up 0.5s 0.25s ease backwards;
}
.rd-welcome[data-welcome-intro="done"] .rd-welcome-divider {
  animation: rd-welcome-fade-up 0.5s 0.32s ease backwards;
}
body[data-redesign-theme="cyberpunk"]
  .rd-welcome[data-welcome-intro="done"] .rd-welcome-title,
body[data-redesign-theme="soft"]
  .rd-welcome[data-welcome-intro="done"] .rd-welcome-title {
  animation: rd-welcome-title-drop 0.7s cubic-bezier(0.2, 1.3, 0.4, 1) backwards;
}
.rd-welcome[data-welcome-intro="done"] .rd-welcome-card {
  animation: rd-welcome-card-in 0.7s cubic-bezier(0.2, 1.2, 0.4, 1) backwards;
}
.rd-welcome[data-welcome-intro="done"] .rd-welcome-card:nth-child(1) {
  animation-delay: 0.36s;
}
.rd-welcome[data-welcome-intro="done"] .rd-welcome-card:nth-child(2) {
  animation-delay: 0.46s;
}
.rd-welcome[data-welcome-intro="done"] .rd-welcome-card:nth-child(3) {
  animation-delay: 0.56s;
}
@keyframes rd-welcome-card-in {
  from { opacity: 0; transform: translateY(46px) scale(0.94); }
  to { opacity: 1; transform: none; }
}
@keyframes rd-welcome-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes rd-welcome-fade-down {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: none; }
}
@keyframes rd-welcome-title-drop {
  from { opacity: 0; transform: scale(1.5); }
  to { opacity: 1; transform: none; }
}

/* ---------- Intros: shared ---------- */
.rd-welcome-intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--rd-bg);
  color: var(--rd-ink);
  cursor: pointer;
}
/* Only the artwork fades here: the solid overlay stays until VS replaces it,
 * so the page behind never flashes between the two stages. */
.rd-welcome-intro--signature > :not(.rd-welcome-skip) {
  animation: rd-welcome-intro-out 0.35s 2.85s ease forwards;
}
.rd-welcome-intro--vs {
  animation: rd-welcome-intro-out 0.3s 1.4s ease forwards;
}
@keyframes rd-welcome-intro-out {
  to { opacity: 0; }
}
.rd-welcome-skip {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 5;
  min-height: 44px;
  padding: 0 16px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  color: #fff;
  font: 600 14px system-ui, sans-serif;
  cursor: pointer;
}
.rd-welcome-skip:hover {
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
}
.rd-welcome-skip:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Cyberpunk opening: boot terminal, then a glitch title */
.rd-welcome-terminal {
  width: min(640px, 86%);
  color: var(--rd-accent-hi);
  font: 500 clamp(13px, 1.8vw, 17px)/1.8 var(--rd-font-mono);
  text-align: left;
  animation: rd-welcome-terminal-gone 0.14s 2.05s steps(2) forwards;
}
.rd-welcome-terminal-line {
  display: block;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  animation: rd-welcome-type-line 0.34s steps(30) forwards;
}
.rd-welcome-terminal-line--ready { color: var(--rd-accent); }
@keyframes rd-welcome-type-line {
  to { width: 100%; }
}
.rd-welcome-terminal-bar {
  margin-top: 14px;
  height: 10px;
  border: 1px solid var(--rd-accent-hi);
}
.rd-welcome-terminal-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--rd-accent);
  box-shadow: 0 0 14px var(--rd-accent);
  animation: rd-welcome-terminal-fill 1.8s 0.15s steps(24) forwards;
}
@keyframes rd-welcome-terminal-fill {
  to { width: 100%; }
}
@keyframes rd-welcome-terminal-gone {
  0% { transform: translateX(-8px); }
  50% { transform: translateX(10px) skewX(14deg); }
  100% { opacity: 0; }
}
.rd-welcome-glitch {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  color: var(--rd-ink);
  font: 700 clamp(3rem, 10vw, 8rem) var(--rd-font-display);
  letter-spacing: var(--rd-text-display-tracking);
  text-transform: var(--rd-text-display-case);
  text-align: center;
  text-shadow: 6px 0 0 var(--rd-accent), -6px 0 0 var(--rd-accent-hi);
  animation: rd-welcome-glitch-in 0.62s 2.14s steps(1) forwards;
}
@keyframes rd-welcome-glitch-in {
  0% {
    opacity: 1;
    clip-path: inset(10% 0 62% 0);
    transform: translateX(-26px);
  }
  18% {
    opacity: 1;
    clip-path: inset(58% 0 12% 0);
    transform: translateX(22px);
  }
  36% {
    opacity: 1;
    clip-path: inset(30% 0 36% 0);
    transform: translateX(-12px);
  }
  54% {
    opacity: 1;
    clip-path: inset(0);
    transform: translateX(8px);
  }
  72%, 100% {
    opacity: 1;
    clip-path: inset(0);
    transform: none;
    text-shadow: 3px 0 0 var(--rd-accent), -3px 0 0 var(--rd-accent-hi);
  }
}

/* Soft Arcade opening: capsule machine */
.rd-welcome-machine {
  position: relative;
  width: 250px;
  height: 390px;
  animation: rd-welcome-pop-in 0.55s cubic-bezier(0.2, 1.7, 0.4, 1) backwards;
}
@keyframes rd-welcome-pop-in {
  from { transform: scale(0.3) translateY(80px); opacity: 0; }
}
.rd-welcome-machine-dome {
  position: absolute;
  left: 15px;
  top: 0;
  width: 220px;
  height: 220px;
  background: rgba(255, 255, 255, 0.72);
  border: 3px solid var(--rd-ink);
  border-radius: 50%;
  overflow: hidden;
}
.rd-welcome-capsule {
  position: absolute;
  width: 62px;
  height: 62px;
  border: 3px solid var(--rd-ink);
  border-radius: 50%;
  animation: rd-welcome-jiggle 0.22s 0.7s 5 alternate ease-in-out;
}
@keyframes rd-welcome-jiggle {
  from { transform: translate(-5px, 4px) rotate(-14deg); }
  to { transform: translate(6px, -9px) rotate(14deg); }
}
.rd-welcome-machine-base {
  position: absolute;
  left: 0;
  top: 196px;
  width: 250px;
  height: 190px;
  background: var(--rd-accent);
  border: 3px solid var(--rd-ink);
  border-radius: var(--rd-radius-lg);
}
.rd-welcome-machine-knob {
  position: absolute;
  left: 76px;
  top: 26px;
  width: 98px;
  height: 98px;
  background: var(--rd-bg-elevated);
  border: 3px solid var(--rd-ink);
  border-radius: 50%;
  animation: rd-welcome-knob-turn 0.95s 0.65s cubic-bezier(0.5, 0, 0.3, 1)
    forwards;
}
.rd-welcome-machine-knob::after {
  content: "";
  position: absolute;
  left: 40px;
  top: 6px;
  width: 12px;
  height: 80px;
  background: var(--rd-ink);
  border-radius: 6px;
}
@keyframes rd-welcome-knob-turn {
  to { transform: rotate(540deg); }
}
.rd-welcome-machine-chute {
  position: absolute;
  left: 86px;
  bottom: 12px;
  width: 78px;
  height: 42px;
  background: var(--rd-ink);
  border-radius: 12px 12px 4px 4px;
}
.rd-welcome-machine-prize {
  position: absolute;
  left: 95px;
  bottom: 16px;
  width: 60px;
  height: 60px;
  border: 3px solid var(--rd-ink);
  border-radius: 50%;
  background: linear-gradient(180deg,
    var(--rd-warning) 50%, var(--rd-bg-elevated) 50%);
  opacity: 0;
  animation:
    rd-welcome-prize-drop 0.72s 1.55s cubic-bezier(0.3, 1.4, 0.5, 1) forwards,
    rd-welcome-prize-pop 0.5s 2.3s cubic-bezier(0.5, 0, 1, 0.6) forwards;
}
@keyframes rd-welcome-prize-drop {
  0% { opacity: 1; transform: translateY(-20px) scale(0.5); }
  100% { opacity: 1; transform: translateY(70px) scale(1); }
}
@keyframes rd-welcome-prize-pop {
  0% { opacity: 1; transform: translateY(70px) scale(1); }
  100% { opacity: 1; transform: translateY(-120px) scale(34); }
}
.rd-welcome-burst {
  position: absolute;
  left: 50%;
  top: 50%;
}

/* Heist Noir opening: vault door */
.rd-welcome-vault {
  position: relative;
  width: min(460px, 76vw);
  aspect-ratio: 1;
  perspective: 1100px;
}
.rd-welcome-vault-light {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: radial-gradient(circle,
    #FFF4D2 0%,
    var(--rd-accent-hi) 38%,
    var(--rd-accent-dim) 72%,
    var(--rd-bg-elevated) 100%);
  animation: rd-welcome-vault-bloom 0.95s 2s cubic-bezier(0.6, 0, 1, 0.8)
    forwards;
}
@keyframes rd-welcome-vault-bloom {
  to { transform: scale(9); }
}
.rd-welcome-vault-door {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle,
    var(--rd-panel-hi) 0%, var(--rd-panel) 55%, var(--rd-bg) 100%);
  border: 8px solid var(--rd-accent);
  box-shadow:
    inset 0 0 0 10px var(--rd-bg-elevated),
    inset 0 0 0 12px var(--rd-accent-dim),
    0 0 50px color-mix(in oklab, var(--rd-accent) 35%, transparent);
  transform-origin: left center;
  animation: rd-welcome-vault-swing 1s 2s cubic-bezier(0.6, 0, 0.4, 1) forwards;
}
@keyframes rd-welcome-vault-swing {
  to { transform: rotateY(-118deg); }
}
.rd-welcome-vault-arm {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
}
.rd-welcome-vault-bolt {
  position: absolute;
  left: 118px;
  top: -9px;
  width: 58px;
  height: 18px;
  background: linear-gradient(180deg,
    var(--rd-accent-hi), var(--rd-accent-dim));
  animation: rd-welcome-bolt-pull 0.3s 1.65s ease-in forwards;
}
@keyframes rd-welcome-bolt-pull {
  to { transform: translateX(-44px); }
}
.rd-welcome-vault-wheel {
  position: absolute;
  inset: 32%;
  color: var(--rd-accent-hi);
  animation: rd-welcome-wheel-spin 1.5s 0.15s cubic-bezier(0.5, 0, 0.3, 1)
    forwards;
}
.rd-welcome-vault-wheel circle,
.rd-welcome-vault-wheel path {
  fill: none;
  stroke: currentColor;
  stroke-width: 6;
  stroke-linecap: round;
}
@keyframes rd-welcome-wheel-spin {
  to { transform: rotate(720deg); }
}

/* Medieval opening: sealed tome */
.rd-welcome-tome {
  position: relative;
  width: min(330px, 62vw);
  height: min(440px, 82vw);
  perspective: 1400px;
  animation: rd-welcome-pop-in 0.6s ease backwards;
}
.rd-welcome-tome-page {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(90deg,
    var(--mv-parchment-dim), var(--mv-parchment-hi) 20%);
  border: 2px solid var(--rd-accent-dim);
  color: var(--mv-burgundy);
  font: 700 clamp(1.5rem, 4vw, 2.3rem)/1.15 var(--rd-font-display);
  letter-spacing: 0.06em;
  text-align: center;
}
.rd-welcome-tome-glow {
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background: radial-gradient(circle,
    #FFF4D2, rgba(240, 196, 106, 0.7) 45%, transparent 72%);
  opacity: 0;
  animation: rd-welcome-tome-glow 1.1s 1.75s ease-in forwards;
}
@keyframes rd-welcome-tome-glow {
  0% { opacity: 0; transform: scale(0.5); }
  45% { opacity: 1; transform: scale(1.5); }
  100% { opacity: 1; transform: scale(9); }
}
.rd-welcome-tome-cover {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #52190F, var(--mv-burgundy) 55%, #3E130C);
  border: 2px solid var(--rd-accent-hi);
  box-shadow:
    inset 0 0 0 10px #52190F,
    inset 0 0 0 12px var(--rd-accent-hi),
    0 18px 50px rgba(0, 0, 0, 0.7);
  transform-origin: left center;
  backface-visibility: hidden;
  color: var(--rd-accent-hi);
  animation: rd-welcome-cover-open 0.9s 1.4s cubic-bezier(0.6, 0, 0.3, 1)
    forwards;
}
@keyframes rd-welcome-cover-open {
  to { transform: rotateY(-168deg); }
}
.rd-welcome-tome-mark {
  position: absolute;
  inset: 20%;
  width: 60%;
  height: 60%;
}
.rd-welcome-tome-mark circle,
.rd-welcome-tome-mark path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}
.rd-welcome-tome-seal {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 42px;
  height: 84px;
  margin-top: -42px;
  background: radial-gradient(circle at 90% 40%,
    #C2564A, #8C2E24 60%, #52190F);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
}
.rd-welcome-tome-seal--left {
  right: 12px;
  border-radius: 42px 0 0 42px;
  animation: rd-welcome-seal-fall-left 0.6s 1s
    cubic-bezier(0.5, 0, 0.9, 0.5) forwards;
}
.rd-welcome-tome-seal--right {
  right: -30px;
  border-radius: 0 42px 42px 0;
  animation: rd-welcome-seal-fall-right 0.6s 1s
    cubic-bezier(0.5, 0, 0.9, 0.5) forwards;
}
@keyframes rd-welcome-seal-fall-left {
  to { transform: translate(-46px, 320px) rotate(-70deg); opacity: 0; }
}
@keyframes rd-welcome-seal-fall-right {
  to { transform: translate(56px, 340px) rotate(80deg); opacity: 0; }
}

/* VS: two blades, a clash, and the title slam */
.rd-welcome-clash {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: rd-welcome-shake 0.34s 0.38s linear;
}
@keyframes rd-welcome-shake {
  0%, 100% { transform: none; }
  15% { transform: translate(-14px, 9px); }
  30% { transform: translate(12px, -11px); }
  45% { transform: translate(-9px, -6px); }
  60% { transform: translate(8px, 6px); }
  80% { transform: translate(-4px, 3px); }
}
.rd-welcome-blade {
  --welcome-blade-length: min(62vw, 760px);
  position: absolute;
  top: 50%;
  width: var(--welcome-blade-length);
  height: 74px;
  margin-top: -37px;
}
.rd-welcome-blade--left {
  right: 50%;
}
/* A mirror of the left blade: same motion, flipped around the screen center. */
.rd-welcome-blade--right {
  left: 50%;
  transform: scaleX(-1);
}
.rd-welcome-blade-motion {
  width: 100%;
  height: 100%;
  transform-origin: 90% 50%;
  animation: rd-welcome-blade-swing 1.3s linear forwards;
}
.rd-welcome-blade svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.rd-welcome-blade-steel {
  fill: var(--rd-ink);
  stroke: var(--rd-accent);
  stroke-width: 2;
}
.rd-welcome-blade-trim { fill: var(--rd-accent); }
@keyframes rd-welcome-blade-swing {
  0% { transform: translateX(-85vw) rotate(-22deg); opacity: 1; }
  30% { transform: translateX(3%) rotate(-22deg); opacity: 1; }
  40% { transform: translateX(-5%) rotate(-27deg); opacity: 1; }
  80% { transform: translateX(-16%) rotate(-31deg); opacity: 0.5; }
  100% { transform: translateX(-22%) rotate(-33deg); opacity: 0.2; }
}
.rd-welcome-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  animation: rd-welcome-flash 0.28s 0.38s ease-out;
}
@keyframes rd-welcome-flash {
  0% { opacity: 0.95; }
  100% { opacity: 0; }
}
.rd-welcome-spark-arm {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
}
.rd-welcome-spark {
  position: absolute;
  left: 0;
  top: -2px;
  height: 4px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    transparent, var(--rd-accent-hi), #fff);
  opacity: 0;
  animation-name: rd-welcome-spark-fly;
  animation-timing-function: cubic-bezier(0.1, 0.7, 0.3, 1);
  animation-fill-mode: forwards;
}
.rd-welcome-spark--pop {
  top: -4px;
  height: 8px;
  background: linear-gradient(90deg,
    transparent, var(--rd-accent), var(--rd-ink));
}
@keyframes rd-welcome-spark-fly {
  0% { opacity: 1; transform: translateX(12px); }
  100% { opacity: 0; transform: translateX(46vmin); }
}
.rd-welcome-clash-title {
  position: relative;
  z-index: 2;
  color: var(--rd-ink);
  font: 700 clamp(3rem, 10vw, 8rem)/1 var(--rd-font-display);
  letter-spacing: var(--rd-text-display-tracking);
  text-transform: var(--rd-text-display-case);
  text-align: center;
  opacity: 0;
  text-shadow: 0 6px 0 var(--rd-accent), 0 0 40px var(--rd-accent);
  animation: rd-welcome-slam 0.42s 0.46s cubic-bezier(0.2, 1.5, 0.4, 1) forwards;
}
@keyframes rd-welcome-slam {
  0% { opacity: 0; transform: scale(3.4) rotate(-5deg); }
  100% { opacity: 1; transform: none; }
}

/* ---------- Card click: full-screen carry-over ---------- */
.rd-welcome-launch {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--rd-bg-elevated);
  color: var(--rd-ink);
  font: 700 clamp(2rem, 6vw, 4.5rem)/1.1 var(--rd-font-display);
  letter-spacing: var(--rd-text-display-tracking);
  text-transform: var(--rd-text-display-case);
  text-align: center;
  clip-path: circle(0 at var(--welcome-launch-x) var(--welcome-launch-y));
  transition: clip-path 0.5s cubic-bezier(0.6, 0, 0.2, 1);
}
.rd-welcome-launch--open {
  clip-path: circle(150vmax at var(--welcome-launch-x) var(--welcome-launch-y));
}

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  .rd-welcome-menu { padding: 8px 16px 28px; }
  .rd-welcome-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .rd-welcome-card-body {
    min-height: 0;
    padding: 20px;
  }
  body[data-redesign-theme="soft"] .rd-welcome-card-art { height: 88px; }
  body[data-redesign-theme="medieval"] .rd-welcome-card-tagline {
    margin-bottom: 26px;
  }
  body[data-redesign-theme="medieval"] .rd-welcome-card-seal {
    right: 18px;
    bottom: 16px;
    width: 40px;
    height: 40px;
  }
  .rd-welcome-join {
    width: 100%;
    padding: 14px;
  }
  .rd-welcome-join-label {
    width: 100%;
    text-align: center;
  }
  body[data-redesign-theme] .rd-welcome-join-field {
    flex: 1 1 130px;
    width: 130px;
  }
  body[data-redesign-theme] .rd-welcome-join-button { flex: 1 1 110px; }
  .rd-welcome-sigil {
    width: 640px;
    height: 640px;
    margin: -320px 0 0 -320px;
  }
}

/* The Replay button still plays the intro: that is an explicit request. */
@media (prefers-reduced-motion: reduce) {
  .rd-welcome-particle,
  .rd-welcome-floor,
  .rd-welcome-blinds,
  .rd-welcome-sigil,
  body[data-redesign-theme] .rd-welcome-title {
    animation: none;
  }
  .rd-welcome-depth,
  .rd-welcome-menu,
  .rd-welcome-launch {
    transition: none;
    transform: none;
  }
  .rd-welcome[data-welcome-intro] .rd-welcome-card,
  .rd-welcome[data-welcome-intro] .rd-welcome-topnav,
  .rd-welcome[data-welcome-intro] .rd-welcome-tagline,
  .rd-welcome[data-welcome-intro] .rd-welcome-join,
  .rd-welcome[data-welcome-intro] .rd-welcome-divider {
    animation: none;
  }
}