/*
 * Customer-facing stylesheet entrypoint.
 *
 * Keep this self-contained: Active Admin has its own Sass entrypoint
 * (`_active_admin.scss`) and is loaded only by the internal console. A broad
 * `require_tree` directive would pull that stylesheet into this bundle and
 * allow its global reset and control styles to change the product UI.
 */

:root {
  --page: #f4f6f6;
  --surface: #ffffff;
  --ink: #1c2428;
  --muted: #667278;
  --line: #d8dfe0;
  --accent: #0f766e;
  --accent-strong: #115e59;
  --signal: #c87916;
  --danger: #b91c1c;
  --sidebar: #202528;
}

* {
  box-sizing: border-box;
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
textarea,
select {
  font: inherit;
}

.studio-shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 100vh;
}

.studio-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  height: 100vh;
  flex-direction: column;
  border-right: 1px solid #343b3f;
  background: var(--sidebar);
  color: #eef3f2;
  padding: 20px 14px 16px;
}

.studio-brand {
  display: inline-flex;
  align-items: center;
  color: #ffffff;
  text-decoration: none;
}

.fusionery-logo {
  display: block;
  width: 156px;
  height: auto;
  color: #172c2e;
}

.fusionery-logo--light {
  color: #ffffff;
}

.fusionery-logo--icon {
  width: 26px;
  height: 26px;
}

.studio-brand .fusionery-logo {
  width: 154px;
}

.studio-nav {
  display: grid;
  gap: 14px;
  margin-top: 32px;
}

.studio-nav-section-links {
  display: grid;
  gap: 4px;
  margin-top: 4px;
}

.studio-nav-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #93a3a7;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  padding: 4px 10px 2px;
  user-select: none;
}

.studio-nav-section-title::-webkit-details-marker { display: none; }

.studio-nav-section-title::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #6d7d82;
  transition: transform 140ms ease;
}

.studio-nav-section:not([open]) .studio-nav-section-title::before {
  transform: rotate(-90deg);
}

.studio-nav-sublabel {
  margin: 8px 10px 0;
  color: #6d7d82;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-nav-sublink {
  display: flex;
  align-items: center;
  min-height: 30px;
  border-left: 2px solid transparent;
  border-radius: 4px;
  margin-left: 8px;
  padding: 0 10px;
  color: #9fadb2;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-nav-sublink:hover {
  color: #f3f6f6;
  background: rgba(255, 255, 255, 0.04);
}

/* The play-area catalog reuses the marketplace cards on a studio page. */
.play-games-page { display: grid; gap: 28px; }

.fusion-castle-logo--studio-header {
  height: 34px;
  width: auto;
  color: currentColor;
}

.play-games-header h1 {
  margin: 2px 0 6px;
  font-size: 28px;
}

.play-games-subtitle {
  margin: 0;
  color: #93a3a7;
  font-size: 14px;
}

.play-games-section { display: grid; gap: 16px; }

.play-games-section-heading h2 {
  margin: 2px 0 0;
  font-size: 20px;
}

.play-games-empty {
  border: 1px dashed #31414a;
  border-radius: 10px;
  color: #93a3a7;
  padding: 28px;
  text-align: center;
}

.studio-nav-link {
  display: flex;
  min-height: 38px;
  align-items: center;
  border-left: 2px solid transparent;
  border-radius: 4px;
  color: #b9c4c8;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.studio-nav-link:hover {
  background: #2c3438;
  color: #ffffff;
}

.studio-nav-link.is-active {
  border-left-color: #33c4b5;
  background: #2c3438;
  color: #ffffff;
}

.studio-nav-link--make,
.studio-nav-link--play {
  gap: 8px;
}

.studio-nav-make-icon,
.studio-nav-gamepad {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.studio-sidebar-footer {
  margin-top: auto;
  border-top: 1px solid #343b3f;
  padding: 16px 10px 0;
}

.studio-sidebar-user-email {
  overflow: hidden;
  color: #93a3a7;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-sidebar-feedback {
  display: flex;
  width: 100%;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  border: 1px solid #4a595d;
  border-radius: 6px;
  background: transparent;
  color: #eef3f2;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.studio-sidebar-feedback svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.studio-sidebar-feedback:hover,
.studio-sidebar-feedback.is-active {
  border-color: #51ddd0;
  background: #2c3438;
  color: #ffffff;
}

.studio-frame {
  min-width: 0;
}

.studio-header {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.88);
  padding: 10px 36px;
}

.studio-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.studio-management-menu {
  position: relative;
}

.studio-management-menu > summary {
  display: grid;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  place-items: center;
  cursor: pointer;
  list-style: none;
  transition: border-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.studio-management-menu > summary::-webkit-details-marker {
  display: none;
}

.studio-management-menu > summary:hover,
.studio-management-menu[open] > summary {
  border-color: #7255b6;
  color: var(--accent-strong);
  transform: translateY(-1px);
}

.studio-management-menu > summary svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.studio-management-menu-panel {
  position: absolute;
  z-index: 6;
  top: calc(100% + 10px);
  right: 0;
  width: min(290px, calc(100vw - 32px));
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 14px 34px rgba(24, 35, 38, 0.18);
  overflow: hidden;
}

.studio-management-menu-panel > header {
  display: grid;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  padding: 13px 15px;
}

.studio-management-menu-panel > header span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-management-menu-panel > header strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-management-menu-panel nav {
  display: grid;
  padding: 5px;
}

.studio-management-menu-link {
  display: grid;
  gap: 2px;
  border-radius: 6px;
  color: var(--ink);
  padding: 9px 10px;
  text-decoration: none;
}

.studio-management-menu-link:hover,
.studio-management-menu-link.is-active {
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}

.studio-management-menu-link.is-active {
  box-shadow: inset 3px 0 0 var(--accent);
}

.studio-management-menu-link span {
  font-size: 12px;
  font-weight: 800;
}

.studio-management-menu-link small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.studio-management-menu-utilities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  border-top: 1px solid var(--line);
  padding: 5px;
}

.studio-management-utility-link,
.studio-management-logout {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  padding: 7px 9px;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.studio-management-utility-link:hover,
.studio-management-logout:hover {
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}

.studio-management-menu-utilities form {
  margin: 0;
}

.studio-management-logout {
  width: 100%;
  color: var(--danger);
}

.studio-header-context {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.studio-header-context strong {
  color: var(--ink);
}

.studio-header-home {
  display: grid;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  color: var(--accent-strong);
  place-items: center;
  transition: background 120ms ease, color 120ms ease;
}

.studio-header-home:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--ink);
}

.studio-header-home svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.studio-create-link {
  min-height: 36px;
  padding: 0 16px;
  gap: 7px;
  font-size: 13px;
}

.studio-create-link-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
}

.primary-link.studio-create-link {
  border-radius: 999px;
  background: #ffd171;
  box-shadow: 3px 4px 0 rgba(20, 14, 46, 0.35);
  color: #3a2a10;
  font-weight: 850;
  transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.primary-link.studio-create-link:hover {
  background: #ffdf9b;
  transform: translateY(-1px);
  box-shadow: 4px 5px 0 rgba(20, 14, 46, 0.4);
}

.studio-main {
  min-width: 0;
  padding: 34px 36px 48px;
}

.studio-main .content-shell {
  width: min(1160px, 100%);
  margin: 0;
  padding: 0;
}

.studio-main .content-shell.narrow {
  width: min(760px, 100%);
}

.marketing-shell {
  overflow: hidden;
  background: #eef2f1;
}

.marketing-hero {
  position: relative;
  display: flex;
  min-height: 760px;
  flex-direction: column;
  color: #f7fbfa;
  isolation: isolate;
  overflow: hidden;
}

.marketing-hero-image,
.auth-visual img {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: cover;
}

.marketing-hero-shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: rgba(4, 13, 17, 0.5);
}

.marketing-hero-image {
  z-index: 0;
}

.marketing-header,
.marketing-hero-copy,
.marketing-hero-footer {
  position: relative;
  z-index: 2;
}

.marketing-header {
  display: flex;
  width: min(1240px, calc(100% - 64px));
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  padding: 26px 0;
}

.marketing-brand,
.marketing-actions,
.marketing-hero-actions {
  display: flex;
  align-items: center;
}

.marketing-brand {
  color: #ffffff;
  text-decoration: none;
}

.marketing-brand .fusionery-logo {
  width: 152px;
}

.marketing-actions {
  gap: 18px;
}

.marketing-nav {
  display: flex;
  gap: 22px;
  margin-left: auto;
  margin-right: 34px;
}

.marketing-nav a {
  color: #d5e2e0;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.marketing-nav a:hover {
  color: #ffffff;
}

.marketing-login,
.marketing-signup,
.marketing-primary-action,
.marketing-secondary-action {
  min-height: 44px;
  align-items: center;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.marketing-login {
  display: inline-flex;
  color: #ffffff;
}

.marketing-signup,
.marketing-primary-action {
  display: inline-flex;
  justify-content: center;
  background: #2ec4b6;
  color: #102426;
  padding: 0 18px;
}

.marketing-signup:hover,
.marketing-primary-action:hover {
  background: #69d8cc;
}

.marketing-hero-copy {
  width: min(1240px, calc(100% - 64px));
  margin: auto;
  padding: 90px 0 136px;
}

.marketing-kicker {
  margin: 0 0 16px;
  color: #2ec4b6;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.marketing-hero-copy h1 {
  max-width: 620px;
  margin: 0;
  color: #ffffff;
  font-size: 64px;
  line-height: 1.02;
}

.marketing-hero-copy > p:not(.marketing-kicker) {
  max-width: 520px;
  margin: 24px 0 0;
  color: #d5e2e0;
  font-size: 19px;
  line-height: 1.55;
}

.marketing-hero-actions {
  gap: 12px;
  margin-top: 32px;
}

.marketing-crossplay-promise {
  display: flex;
  width: min(100%, 560px);
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 20px;
  border-left: 2px solid rgba(255, 231, 156, 0.42);
  padding: 3px 0 3px 11px;
}

.marketing-crossplay-promise-label {
  color: #dce6ff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: none;
}

a.marketing-crossplay-promise-label {
  text-decoration: none;
}

a.marketing-crossplay-promise-label:hover {
  color: #ffffff;
}

.marketing-crossplay-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.marketing-crossplay-platforms span {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.11);
  color: #dce6ff;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 800;
}

.marketing-crossplay-promise p {
  flex-basis: 100%;
  margin: 0;
  color: rgba(219, 231, 255, 0.72);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
}

.marketing-secondary-action {
  display: inline-flex;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  padding: 0 18px;
}

.marketing-secondary-action:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.marketing-hero-footer {
  display: flex;
  width: min(1240px, calc(100% - 64px));
  gap: 26px;
  margin: 0 auto;
  border-top: 1px solid rgba(221, 241, 238, 0.32);
  padding: 20px 0 26px;
  color: #d5e2e0;
  font-size: 13px;
  font-weight: 700;
}

.marketing-proof {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: 56px;
  width: min(1120px, calc(100% - 64px));
  margin: 0 auto;
  padding: 104px 0;
}

.marketing-section-heading h2,
.marketing-cta h2 {
  margin: 0;
  color: #172c2e;
  font-size: 42px;
  line-height: 1.12;
}

.marketing-workflow {
  display: grid;
  gap: 0;
  border-top: 1px solid #c7d3d1;
}

.marketing-workflow article {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 18px;
  border-bottom: 1px solid #c7d3d1;
  padding: 22px 0;
}

.marketing-workflow article > span {
  grid-row: span 2;
  color: #0f766e;
  font-size: 13px;
  font-weight: 800;
}

.marketing-workflow h3 {
  margin: 0;
  color: #172c2e;
  font-size: 18px;
}

.marketing-workflow p {
  margin: 8px 0 0;
  color: #5d6d70;
  line-height: 1.55;
}

.marketing-game-types,
.marketing-build-path {
  width: min(1120px, calc(100% - 64px));
  margin: 0 auto;
  padding: 104px 0;
}

.marketing-game-types {
  padding-top: 8px;
}

.marketing-game-types-heading,
.marketing-build-path-heading {
  max-width: 760px;
  margin-bottom: 36px;
}

.marketing-game-types-heading h2,
.marketing-build-path-heading h2,
.marketing-composition h2 {
  margin: 0;
  color: #172c2e;
  font-size: 42px;
  line-height: 1.12;
}

.marketing-game-types-heading > p:not(.marketing-kicker) {
  max-width: 680px;
  margin: 18px 0 0;
  color: #526467;
  line-height: 1.6;
}

.marketing-game-grid,
.marketing-build-outputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.marketing-game-card {
  --marketing-game-accent: #0f766e;

  display: flex;
  min-height: 390px;
  flex-direction: column;
  border: 1px solid #c7d3d1;
  border-top: 4px solid var(--marketing-game-accent);
  border-radius: 8px;
  background: #ffffff;
  padding: 28px;
}

.marketing-game-card--racing {
  --marketing-game-accent: #b65412;
}

.marketing-game-card--rpg {
  --marketing-game-accent: #5748bd;
}

.marketing-game-card--tower_defense {
  --marketing-game-accent: #a64d18;
}

.marketing-game-card--platformer {
  --marketing-game-accent: #2c6db3;
}

.marketing-game-card--farming_sim {
  --marketing-game-accent: #5b7f2a;
}

.marketing-game-card--city_builder {
  --marketing-game-accent: #8758a5;
}

.marketing-game-card--rhythm {
  --marketing-game-accent: #bf467d;
}

.marketing-game-card--open_world {
  --marketing-game-accent: #147c76;
}

.marketing-game-card--survival {
  --marketing-game-accent: #a13e35;
}

.marketing-game-card-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.marketing-game-card-heading span,
.marketing-game-card-heading p,
.marketing-build-outputs span {
  margin: 0;
  color: var(--marketing-game-accent, #0f766e);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.marketing-game-card h3 {
  margin: 28px 0 0;
  color: #172c2e;
  font-size: 25px;
  line-height: 1.16;
}

.marketing-game-card > p {
  margin: 16px 0 0;
  color: #526467;
  line-height: 1.6;
}

.marketing-game-card ul {
  margin: auto 0 0;
  border-top: 1px solid #d6dfdd;
  padding: 16px 0 0;
  color: #314547;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  list-style: none;
}

.marketing-game-card li + li {
  margin-top: 9px;
}

.marketing-game-card li::before {
  color: var(--marketing-game-accent);
  content: "+ ";
}

.marketing-composition {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 64px;
  background: #16292b;
  color: #f6fbfa;
  padding: 96px max(32px, calc((100% - 1120px) / 2));
}

.marketing-composition .marketing-kicker {
  color: #69d8cc;
}

.marketing-composition h2 {
  color: #f6fbfa;
}

.marketing-composition-copy > p:not(.marketing-kicker) {
  max-width: 480px;
  margin: 20px 0 0;
  color: #b7c9c7;
  line-height: 1.6;
}

.marketing-building-blocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid #466164;
  border-left: 1px solid #466164;
}

.marketing-building-blocks article {
  min-height: 152px;
  border-right: 1px solid #466164;
  border-bottom: 1px solid #466164;
  padding: 24px;
}

.marketing-building-blocks span {
  color: #69d8cc;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.marketing-building-blocks p {
  margin: 16px 0 0;
  color: #d5e2e0;
  line-height: 1.55;
}

.marketing-build-path-heading {
  max-width: 650px;
}

.marketing-build-outputs {
  gap: 0;
  border-top: 1px solid #c7d3d1;
}

.marketing-build-outputs article {
  min-height: 220px;
  border-right: 1px solid #c7d3d1;
  border-bottom: 1px solid #c7d3d1;
  padding: 26px 28px 28px;
}

.marketing-build-outputs article:first-child {
  border-left: 1px solid #c7d3d1;
}

.marketing-build-outputs h3 {
  margin: 28px 0 0;
  color: #172c2e;
  font-size: 21px;
  line-height: 1.2;
}

.marketing-build-outputs p {
  margin: 12px 0 0;
  color: #526467;
  line-height: 1.55;
}

.marketing-platform {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 64px;
  background: #16292b;
  color: #f6fbfa;
  padding: 96px max(32px, calc((100% - 1120px) / 2));
}

.marketing-platform .marketing-kicker {
  color: #69d8cc;
}

.marketing-platform h2 {
  max-width: 480px;
  margin: 0;
  font-size: 42px;
  line-height: 1.12;
}

.marketing-platform-intro > p:not(.marketing-kicker) {
  max-width: 480px;
  margin: 20px 0 0;
  color: #b7c9c7;
  line-height: 1.6;
}

.marketing-platform-stages {
  display: grid;
  border-top: 1px solid #466164;
}

.marketing-platform-stages article {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  column-gap: 18px;
  border-bottom: 1px solid #466164;
  padding: 24px 0;
}

.marketing-platform-stages span {
  grid-row: span 2;
  color: #69d8cc;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.marketing-platform-stages h3 {
  margin: 0;
  font-size: 19px;
}

.marketing-platform-stages p {
  margin: 8px 0 0;
  color: #b7c9c7;
  line-height: 1.55;
}

.marketing-marketplace {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: 64px;
  width: min(1120px, calc(100% - 64px));
  margin: 0 auto;
  padding: 104px 0;
}

.marketing-marketplace-copy h2 {
  max-width: 520px;
  margin: 0;
  color: #172c2e;
  font-size: 42px;
  line-height: 1.12;
}

.fusion-castle-logo.marketing-marketplace-logo {
  width: min(100%, 300px);
  margin-bottom: 22px;
  color: #173235;
}

.fusion-castle-logo.marketing-marketplace-logo text:last-child {
  fill: #5d6d70;
}

.marketing-marketplace-copy > p:not(.marketing-kicker) {
  max-width: 540px;
  margin: 20px 0 0;
  color: #526467;
  line-height: 1.6;
}

.marketing-marketplace-principles {
  display: grid;
  gap: 0;
  margin: 30px 0;
  border-top: 1px solid #c7d3d1;
}

.marketing-marketplace-principles article {
  border-bottom: 1px solid #c7d3d1;
  padding: 16px 0;
}

.marketing-marketplace-principles h3 {
  margin: 0;
  color: #172c2e;
  font-size: 16px;
}

.marketing-marketplace-principles p {
  margin: 6px 0 0;
  color: #5d6d70;
  font-size: 14px;
  line-height: 1.5;
}

.marketing-marketplace-showcase {
  position: relative;
  aspect-ratio: 3 / 2;
  margin: 0;
  overflow: hidden;
  background: #172c2e;
}

.marketing-marketplace-showcase img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.marketing-marketplace-showcase figcaption {
  position: absolute;
  z-index: 1;
  right: 24px;
  bottom: 22px;
  left: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  background: rgba(4, 16, 18, 0.78);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  padding: 10px;
  text-align: center;
}

.marketing-marketplace-showcase figcaption span {
  border-top: 2px solid #f28a3f;
  padding-top: 9px;
}

.marketing-cta {
  display: flex;
  width: min(1120px, calc(100% - 64px));
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  border-top: 1px solid #c7d3d1;
  padding: 68px 0 88px;
}

.marketing-cta .marketing-kicker {
  margin-bottom: 12px;
}

.marketplace-shell {
  background: #f4f1e9;
}

.marketplace-hero {
  position: relative;
  background: #102426;
  color: #f7fbfa;
  isolation: isolate;
  overflow: hidden;
}

.marketplace-hero::after {
  position: absolute;
  z-index: 1;
  right: -82px;
  bottom: -128px;
  width: 480px;
  height: 420px;
  border: 1px solid rgba(242, 182, 76, 0.38);
  border-radius: 48% 48% 0 0;
  box-shadow: 0 0 0 32px rgba(242, 182, 76, 0.07), 0 0 0 64px rgba(242, 182, 76, 0.035);
  content: "";
  transform: perspective(500px) rotateX(16deg);
}

.marketplace-hero-image,
.marketplace-hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.marketplace-hero-image {
  z-index: 0;
  object-fit: cover;
}

.marketplace-hero-shade {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(8, 25, 28, 0.96) 0%, rgba(9, 28, 31, 0.87) 42%, rgba(6, 19, 23, 0.5) 100%),
    linear-gradient(0deg, rgba(12, 34, 36, 0.84), rgba(12, 34, 36, 0.08));
}

.marketplace-header,
.marketplace-hero-copy {
  position: relative;
  z-index: 2;
}

.marketplace-hero-copy {
  width: min(1120px, calc(100% - 64px));
  margin: 40px auto 0;
  padding-bottom: 44px;
}

.marketplace-hero-copy .marketing-kicker {
  color: #f2c56e;
}

.marketplace-hero-copy h1 {
  max-width: 640px;
  margin: 0;
  color: #ffffff;
  font-size: 54px;
  line-height: 1.04;
}

.marketplace-hero-copy > p:not(.marketing-kicker) {
  max-width: 560px;
  margin: 20px 0 28px;
  color: #d5e2e0;
  font-size: 18px;
  line-height: 1.6;
}

.marketplace-hero-copy .marketing-primary-action,
.marketplace-creator-cta .marketing-primary-action {
  background: #f2b64c;
  color: #172c2e;
}

.marketplace-hero-copy .marketing-primary-action:hover,
.marketplace-creator-cta .marketing-primary-action:hover {
  background: #ffd074;
}

.marketplace-hero-markers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 32px;
}

.marketplace-hero-markers span {
  border: 1px solid rgba(245, 236, 213, 0.28);
  border-radius: 999px;
  background: rgba(14, 39, 42, 0.48);
  color: #e5eee9;
  padding: 8px 11px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.marketplace-header {
  margin-top: 18px;
  border: 1px solid rgba(245, 236, 213, 0.14);
  border-radius: 14px;
  background: rgba(8, 28, 30, 0.6);
  box-shadow: 0 16px 42px rgba(4, 13, 17, 0.18);
  padding: 12px 18px;
  backdrop-filter: blur(12px);
}

.fusion-castle-logo {
  display: block;
  width: 212px;
  height: auto;
  color: #ffffff;
}

.marketplace-header .marketing-nav a.is-active {
  border-radius: 999px;
  background: rgba(242, 182, 76, 0.18);
  color: #ffd981;
  padding: 7px 10px;
}

.marketplace-header .marketing-nav a {
  padding: 7px 10px;
}

.marketplace-catalog {
  width: min(1120px, calc(100% - 64px));
  margin: 0 auto;
  /* The hero now carries the section heading; the cards open the section. */
  padding: 56px 0 100px;
}

/* Search / filter / pagination controls shared by the marketplace and the
   studio Play page (each context restyles tone via its shell). */
.catalog-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}

.catalog-controls-search {
  flex: 1 1 220px;
  min-width: 180px;
  max-width: 340px;
}

.catalog-controls-search,
.catalog-controls-select {
  border: 1px solid #cdbfa4;
  border-radius: 8px;
  background: #fffdf8;
  color: #172c2e;
  padding: 9px 12px;
  font-size: 14px;
}

.catalog-controls-submit {
  border: 0;
  border-radius: 999px;
  background: #172c2e;
  color: #f7efe0;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.catalog-controls-clear {
  color: #8b651e;
  font-size: 13px;
  font-weight: 700;
}

.catalog-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 32px;
}

.catalog-page-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid #cdbfa4;
  border-radius: 8px;
  color: #172c2e;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.catalog-page-link.is-current {
  background: #172c2e;
  border-color: #172c2e;
  color: #f7efe0;
}

/* Studio (dark) restyle of the same controls on /play. */
.play-games-page .catalog-controls-search,
.play-games-page .catalog-controls-select {
  border-color: #31414a;
  background: #0e141a;
  color: #e6ecef;
}

.play-games-page .catalog-controls-submit {
  background: #2dd4bf;
  color: #06211f;
}

.play-games-page .catalog-controls-clear { color: #7c8894; }

.play-games-page .catalog-page-link {
  border-color: #31414a;
  color: #c7d0d9;
}

.play-games-page .catalog-page-link.is-current {
  background: #2dd4bf;
  border-color: #2dd4bf;
  color: #06211f;
}

/* Big beta badge on the pricing hero. */
.pricing-beta-badge {
  display: inline-block;
  margin-bottom: 18px;
  border: 2px solid #f2b64c;
  border-radius: 14px;
  background: rgba(242, 182, 76, 0.14);
  color: #f2b64c;
  padding: 10px 22px;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 0.22em;
  transform: rotate(-2deg);
  box-shadow: 0 0 0 6px rgba(242, 182, 76, 0.08);
}

.pricing-card--proposed {
  opacity: 0.92;
}

/* The beta card borrows the featured emphasis but is the ONLY plan — a
   "most popular" ribbon over a field of one reads as a joke. */
.pricing-card--beta::before {
  display: none;
  content: none;
}

.pricing-proposed-tag {
  display: inline-block;
  margin-left: 8px;
  border: 1px solid #cdbfa4;
  border-radius: 999px;
  color: #8b651e;
  padding: 2px 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}

.pricing-proposed-note {
  color: #8b651e;
  font-size: 13px;
  font-weight: 700;
}

.marketplace-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  align-items: end;
  gap: 64px;
  margin-bottom: 36px;
}

.marketplace-section-heading h2,
.marketplace-explainer h2,
.marketplace-creator-cta h2 {
  margin: 0;
  color: #172c2e;
  font-size: 42px;
  line-height: 1.12;
}

.marketplace-section-heading > p {
  margin: 0;
  color: #526467;
  line-height: 1.6;
}

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

.marketplace-game-card {
  display: flex;
  min-height: 300px;
  flex-direction: column;
  border: 1px solid #d8d0bd;
  border-radius: 14px;
  background: #fffdf8;
  box-shadow: 0 14px 32px rgba(43, 46, 35, 0.06);
  padding: 26px;
}

.marketplace-game-card:nth-child(3n + 1) {
  border-top: 4px solid #1d9d93;
}

.marketplace-game-card:nth-child(3n + 2) {
  border-top: 4px solid #e3972e;
}

.marketplace-game-card:nth-child(3n) {
  border-top: 4px solid #786bb5;
}

.marketplace-game-card-meta,
.marketplace-game-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.marketplace-game-card-meta {
  color: #197b74;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.marketplace-game-card-meta span:last-child {
  color: #6b7b7d;
}

.marketplace-game-card h3 {
  margin: 28px 0 0;
  color: #172c2e;
  font-size: 25px;
  line-height: 1.16;
}

.marketplace-game-card > p {
  margin: 14px 0 0;
  color: #526467;
  line-height: 1.6;
}

.marketplace-game-card footer {
  margin-top: auto;
  border-top: 1px solid #d6dfdd;
  padding-top: 17px;
  color: #526467;
  font-size: 13px;
  font-weight: 700;
}

.marketplace-play-link {
  color: #0f766e;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.marketplace-play-link:hover {
  color: #115e59;
  text-decoration: underline;
}

.marketplace-empty-state {
  max-width: 640px;
  border: 1px solid #d8d0bd;
  border-left: 4px solid #e2a33b;
  border-radius: 12px;
  background: #fffdf8;
  padding: 34px;
}

.marketplace-empty-state h3 {
  margin: 0;
  color: #172c2e;
  font-size: 26px;
}

.marketplace-empty-state > p:not(.marketing-kicker) {
  max-width: 480px;
  margin: 12px 0 24px;
  color: #526467;
  line-height: 1.6;
}

.marketplace-explainer {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 64px;
  background:
    linear-gradient(120deg, rgba(11, 35, 38, 0.98), rgba(19, 60, 61, 0.94)),
    #17373a;
  color: #f6fbfa;
  padding: 96px max(32px, calc((100% - 1120px) / 2));
}

.marketplace-explainer .marketing-kicker,
.marketplace-creator-cta .marketing-kicker {
  color: #f2c56e;
}

.marketplace-explainer h2 {
  color: #f6fbfa;
}

.marketplace-explainer-copy > p:not(.marketing-kicker) {
  max-width: 460px;
  margin: 20px 0 0;
  color: #b7c9c7;
  line-height: 1.6;
}

.marketplace-steps {
  display: grid;
  margin: 0;
  border-top: 1px solid #466164;
  padding: 0;
  list-style: none;
}

.marketplace-steps li {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 16px;
  border-bottom: 1px solid #466164;
  padding: 24px 0;
}

.marketplace-steps li > span {
  color: #69d8cc;
  font-size: 13px;
  font-weight: 800;
}

.marketplace-steps h3 {
  margin: 0;
  font-size: 19px;
}

.marketplace-steps p {
  margin: 8px 0 0;
  color: #b7c9c7;
  line-height: 1.55;
}

.marketplace-creator-cta {
  position: relative;
  display: flex;
  width: min(1120px, calc(100% - 64px));
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin: 0 auto;
  padding: 76px 0 88px;
}

.marketplace-creator-cta::before {
  position: absolute;
  z-index: 0;
  top: 26px;
  right: -32px;
  width: 242px;
  height: 242px;
  border: 1px solid rgba(226, 163, 59, 0.42);
  border-radius: 50%;
  content: "";
}

.marketplace-creator-cta > * {
  position: relative;
  z-index: 1;
}

.marketplace-creator-cta h2 {
  max-width: 600px;
}

.marketing-nav a.is-active {
  color: #ffffff;
}

.marketing-footer {
  background: #102426;
  color: #d5e2e0;
}

.marketing-footer-inner {
  display: grid;
  grid-template-columns: minmax(150px, 0.9fr) minmax(150px, 0.9fr) repeat(3, minmax(130px, 0.7fr));
  align-items: start;
  width: min(1120px, calc(100% - 64px));
  gap: 32px;
  margin: 0 auto;
  padding: 32px 0;
}

.marketing-footer .fusionery-logo {
  width: 148px;
}

.marketing-footer-column {
  display: grid;
  align-content: start;
  gap: 10px;
}

.marketing-footer-column > p {
  margin: 0 0 4px;
  color: #69d8cc;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: left;
  text-transform: uppercase;
}

.marketing-footer-column a {
  color: #d5e2e0;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.marketing-footer-column a:hover {
  color: #ffffff;
}

.marketing-footer-tagline {
  margin: 0;
  color: #8fa6a3;
  font-size: 13px;
  line-height: 1.5;
}

.marketing-footer-column a span {
  margin-left: 4px;
  color: #8fa6a3;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.developers-hero {
  min-height: 440px;
  background: #102426;
  color: #f7fbfa;
}

.developers-hero-copy {
  width: min(1120px, calc(100% - 64px));
  margin: 82px auto 0;
  padding-bottom: 70px;
}

.developers-hero .marketing-kicker {
  color: #69d8cc;
}

.developers-hero-copy h1 {
  max-width: 700px;
  margin: 0;
  color: #ffffff;
  font-size: 54px;
  line-height: 1.04;
}

.developers-hero-copy > p:not(.marketing-kicker) {
  max-width: 640px;
  margin: 20px 0 0;
  color: #d5e2e0;
  font-size: 18px;
  line-height: 1.6;
}

.developers-overview,
.developers-grid,
.developers-comparison,
.developers-note {
  width: min(1120px, calc(100% - 64px));
  margin: 0 auto;
}

.developers-overview {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: end;
  gap: 64px;
  padding: 96px 0 64px;
}

.developers-overview h2,
.developers-grid h2,
.developers-grid h3,
.developers-note h2 {
  margin: 0;
  color: #172c2e;
  font-size: 42px;
  line-height: 1.12;
}

.developers-overview > p {
  margin: 0;
  color: #526467;
  line-height: 1.65;
}

.developers-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding-bottom: 96px;
}

.developers-grid article {
  min-height: 312px;
  border: 1px solid #c7d3d1;
  border-top: 4px solid #2ec4b6;
  border-radius: 8px;
  background: #ffffff;
  padding: 28px;
}

.developers-grid h2,
.developers-grid h3 {
  margin-top: 16px;
  font-size: 27px;
}

.developers-grid article > p:not(.marketing-kicker) {
  margin: 16px 0 0;
  color: #526467;
  line-height: 1.6;
}

.developers-comparison {
  padding: 0 0 96px;
}

.developers-comparison-heading {
  max-width: 730px;
  margin: 0 auto 34px;
  text-align: center;
}

.developers-comparison-heading h2 {
  margin: 8px 0 14px;
  color: #172c2e;
  font-size: 42px;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.developers-comparison-heading > p:last-child,
.developers-comparison-note {
  color: #526467;
  line-height: 1.65;
}

.developers-comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.developers-comparison-card {
  min-height: 270px;
  border: 1px solid #d6dfdd;
  border-radius: 22px;
  padding: 30px;
}

.developers-comparison-card--desktop {
  background: linear-gradient(145deg, #fffdf8, #f6f0e8);
}

.developers-comparison-card--fusionery {
  border-color: #a9dcd5;
  background: linear-gradient(145deg, #f7fffd, #e9f8f5);
  box-shadow: 9px 10px 0 rgba(46, 196, 182, 0.12);
}

.developers-comparison-card h3 {
  margin: 10px 0 18px;
  color: #172c2e;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.developers-comparison-card ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 19px;
  color: #526467;
  line-height: 1.5;
}

.developers-comparison-card li::marker { color: #178d82; }

.developers-comparison-note {
  max-width: 850px;
  margin: 26px auto 0;
  border-left: 4px solid #f0a253;
  background: #fff9ed;
  padding: 15px 18px;
}

.developers-comparison-note a {
  color: #0f766e;
  font-weight: 800;
}

.developers-card-status {
  margin-top: 22px !important;
  border-top: 1px solid #d6dfdd;
  padding-top: 16px;
  color: #314547 !important;
  font-size: 13px;
  font-weight: 700;
}

.developers-note {
  margin-bottom: 96px;
  border-top: 1px solid #c7d3d1;
  padding-top: 64px;
}

.developers-note h2 {
  max-width: 690px;
}

.developers-note > p:not(.marketing-kicker) {
  max-width: 680px;
  margin: 20px 0 0;
  color: #526467;
  line-height: 1.65;
}

.marketing-page-shell {
  overflow: hidden;
  background: #eef2f1;
}

.marketing-page-hero {
  position: relative;
  min-height: 570px;
  color: #f7fbfa;
  isolation: isolate;
  overflow: hidden;
}

.marketing-page-hero-image,
.marketing-page-hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.marketing-page-hero-image {
  z-index: 0;
  object-fit: cover;
}

.marketing-page-hero-shade {
  z-index: 1;
  background: rgba(4, 13, 17, 0.58);
}

.marketing-page-header,
.marketing-page-hero-copy {
  position: relative;
  z-index: 2;
}

.marketing-page-hero-copy {
  width: min(1120px, calc(100% - 64px));
  margin: 102px auto 0;
}

.marketing-page-hero-copy h1,
.pricing-hero-copy h1 {
  max-width: 720px;
  margin: 0;
  color: #ffffff;
  font-size: 54px;
  line-height: 1.04;
}

.marketing-page-hero-copy > p:not(.marketing-kicker),
.pricing-hero-copy > p:not(.marketing-kicker) {
  max-width: 590px;
  margin: 20px 0 28px;
  color: #d5e2e0;
  font-size: 18px;
  line-height: 1.6;
}

.how-it-works-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  align-items: end;
  gap: 64px;
  width: min(1120px, calc(100% - 64px));
  margin: 0 auto;
  padding: 104px 0 68px;
}

.how-it-works-overview h2,
.how-it-works-steps h2,
.how-it-works-steps h3,
.how-it-works-systems h2,
.marketing-page-cta h2,
.pricing-plans h2,
.pricing-included h2,
.pricing-faq h2 {
  margin: 0;
  color: #172c2e;
  font-size: 42px;
  line-height: 1.12;
}

.how-it-works-overview > p {
  margin: 0;
  color: #526467;
  line-height: 1.6;
}

.how-it-works-steps {
  width: min(1120px, calc(100% - 64px));
  margin: 0 auto;
  border-top: 1px solid #c7d3d1;
}

.how-it-works-steps article {
  display: grid;
  grid-template-columns: 68px minmax(0, 1.05fr) minmax(240px, 0.6fr);
  gap: 28px;
  border-bottom: 1px solid #c7d3d1;
  padding: 42px 0;
}

.how-it-works-steps article > span {
  color: #0f766e;
  font-size: 14px;
  font-weight: 800;
}

.how-it-works-steps .marketing-kicker {
  margin-bottom: 14px;
}

.how-it-works-steps h2,
.how-it-works-steps h3 {
  font-size: 28px;
}

.how-it-works-steps div > p:not(.marketing-kicker) {
  max-width: 560px;
  margin: 14px 0 0;
  color: #526467;
  line-height: 1.6;
}

.how-it-works-steps ul {
  align-self: end;
  margin: 0;
  border-top: 1px solid #d6dfdd;
  padding: 14px 0 0;
  color: #314547;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  list-style: none;
}

.how-it-works-steps li + li {
  margin-top: 9px;
}

.how-it-works-steps li::before {
  color: #2aa99e;
  content: "+ ";
}

.how-it-works-systems {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 64px;
  margin-top: 104px;
  background: #dbe6e4;
  padding: 88px max(32px, calc((100% - 1120px) / 2));
}

.how-it-works-systems-copy > p:not(.marketing-kicker) {
  max-width: 480px;
  margin: 20px 0 0;
  color: #526467;
  line-height: 1.6;
}

.how-it-works-system-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid #aabfbc;
  border-left: 1px solid #aabfbc;
}

.how-it-works-system-grid article {
  min-height: 152px;
  border-right: 1px solid #aabfbc;
  border-bottom: 1px solid #aabfbc;
  padding: 24px;
}

.how-it-works-system-grid span,
.pricing-included span {
  color: #0f766e;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.how-it-works-system-grid p {
  margin: 16px 0 0;
  color: #425659;
  line-height: 1.55;
}

.marketing-page-cta {
  display: flex;
  width: min(1120px, calc(100% - 64px));
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin: 0 auto;
  padding: 78px 0 88px;
}

.marketing-page-cta h2 {
  max-width: 650px;
}

.pricing-hero {
  min-height: 450px;
  background: #102426;
  color: #f7fbfa;
}

.pricing-header,
.pricing-hero-copy {
  position: relative;
}

.pricing-hero-copy {
  width: min(1120px, calc(100% - 64px));
  margin: 84px auto 0;
  padding-bottom: 82px;
}

.pricing-hero-copy .marketing-kicker {
  color: #69d8cc;
}

.pricing-plans {
  width: min(1120px, calc(100% - 64px));
  margin: 0 auto;
  padding: 104px 0;
}

.pricing-plans-heading {
  max-width: 620px;
  margin-bottom: 36px;
}

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

.pricing-card {
  display: flex;
  min-height: 458px;
  flex-direction: column;
  border: 1px solid #c7d3d1;
  border-radius: 8px;
  background: #ffffff;
  padding: 30px;
}

.pricing-card--featured {
  border: 2px solid #2ec4b6;
  background: #f7fffd;
}

.pricing-card-label {
  margin: 0;
  color: #0f766e;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
}

.pricing-price {
  margin: 24px 0 0;
  color: #526467;
  font-size: 16px;
  font-weight: 700;
}

.pricing-price span {
  color: #172c2e;
  font-size: 44px;
  line-height: 1;
}

.pricing-card-summary {
  min-height: 96px;
  margin: 18px 0 0;
  color: #526467;
  line-height: 1.55;
}

.pricing-card ul {
  margin: 30px 0 0;
  border-top: 1px solid #d6dfdd;
  padding: 18px 0 0;
  color: #314547;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  list-style: none;
}

.pricing-card li + li {
  margin-top: 12px;
}

.pricing-card li::before {
  color: #2aa99e;
  content: "+ ";
}

.pricing-launch-note {
  max-width: 720px;
  margin: 0;
  color: #9fc4be;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}

.pricing-action {
  width: 100%;
  margin-top: auto;
}

.pricing-card .marketing-secondary-action {
  border-color: #aabfbc;
  color: #172c2e;
}

.pricing-card .marketing-secondary-action:hover {
  border-color: #0f766e;
  background: #eef8f6;
}

.pricing-usage {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  column-gap: 64px;
  row-gap: 34px;
  background: #172c2e;
  padding: 88px max(32px, calc((100% - 1120px) / 2));
}

.pricing-usage .marketing-kicker {
  color: #69d8cc;
}

.pricing-usage h2 {
  margin: 0;
  color: #ffffff;
  font-size: 42px;
  line-height: 1.12;
}

.pricing-usage-heading > p:not(.marketing-kicker) {
  max-width: 510px;
  margin: 20px 0 0;
  color: #c4d4d1;
  line-height: 1.6;
}

.pricing-usage-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-self: end;
  border-top: 1px solid #526c6b;
}

.pricing-usage-details article {
  border-right: 1px solid #526c6b;
  border-bottom: 1px solid #526c6b;
  padding: 24px;
}

.pricing-usage-details article:first-child {
  border-left: 1px solid #526c6b;
}

.pricing-usage-details span {
  color: #69d8cc;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.pricing-usage-details p,
.pricing-usage-footnote {
  margin: 12px 0 0;
  color: #c4d4d1;
  font-size: 14px;
  line-height: 1.55;
}

.pricing-usage-footnote {
  grid-column: 2;
  margin: -12px 0 0;
  color: #9fc4be;
}

.pricing-comparison {
  width: min(1120px, calc(100% - 64px));
  margin: 0 auto;
  padding: 104px 0;
}

.pricing-comparison-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: end;
  gap: 64px;
  margin-bottom: 36px;
}

.pricing-comparison-heading h2 {
  margin: 0;
  color: #172c2e;
  font-size: 42px;
  line-height: 1.12;
}

.pricing-comparison-heading > p:not(.marketing-kicker) {
  margin: 0;
  color: #526467;
  line-height: 1.6;
}

.pricing-comparison-table-wrap {
  overflow-x: auto;
  border: 1px solid #c7d3d1;
  background: #ffffff;
}

.pricing-comparison-table {
  width: 100%;
  min-width: 1000px;
  border-collapse: collapse;
  color: #425659;
  font-size: 13px;
  line-height: 1.5;
}

.pricing-comparison-table--compact {
  min-width: 680px;
}

.pricing-comparison-table--compact th,
.pricing-comparison-table--compact td {
  min-width: 0;
}

.pricing-comparison-table--compact tbody th {
  width: 175px;
}

.pricing-comparison-table caption {
  padding: 16px 24px;
  border-bottom: 1px solid #c7d3d1;
  background: #eef8f6;
  color: #526467;
  font-size: 12px;
  text-align: left;
}

.pricing-comparison-table th,
.pricing-comparison-table td {
  min-width: 150px;
  border-right: 1px solid #d6dfdd;
  border-bottom: 1px solid #d6dfdd;
  padding: 19px 18px;
  vertical-align: top;
}

.pricing-comparison-table th:last-child,
.pricing-comparison-table td:last-child {
  border-right: 0;
}

.pricing-comparison-table tbody tr:last-child th,
.pricing-comparison-table tbody tr:last-child td {
  border-bottom: 0;
}

.pricing-comparison-table thead th {
  color: #172c2e;
  font-size: 14px;
  font-weight: 800;
  text-align: left;
}

.pricing-comparison-table thead th:nth-child(2),
.pricing-comparison-table tbody td:first-of-type {
  background: #f3fffc;
}

.pricing-comparison-table tbody th {
  width: 155px;
  color: #172c2e;
  font-weight: 800;
  text-align: left;
}

.pricing-comparison-table a {
  color: #0f766e;
  text-decoration: none;
}

.pricing-comparison-table a:hover {
  color: #115e59;
  text-decoration: underline;
}

.pricing-comparison-table strong {
  color: #172c2e;
}

.pricing-comparison-note {
  max-width: 780px;
  margin: 18px 0 0;
  color: #526467;
  font-size: 13px;
  line-height: 1.6;
}

.pricing-included {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 64px;
  background: #dbe6e4;
  padding: 88px max(32px, calc((100% - 1120px) / 2));
}

.pricing-included h2 {
  max-width: 500px;
}

.pricing-included-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid #aabfbc;
}

.pricing-included-grid article {
  border-right: 1px solid #aabfbc;
  border-bottom: 1px solid #aabfbc;
  padding: 24px;
}

.pricing-included-grid article:first-child {
  border-left: 1px solid #aabfbc;
}

.pricing-included-grid p {
  margin: 16px 0 0;
  color: #425659;
  line-height: 1.55;
}

.pricing-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 64px;
  width: min(1120px, calc(100% - 64px));
  margin: 0 auto;
  padding: 104px 0;
}

.pricing-faq-heading h2 {
  max-width: 440px;
}

.pricing-faq dl {
  display: grid;
  margin: 0;
  border-top: 1px solid #c7d3d1;
}

.pricing-faq dl > div {
  border-bottom: 1px solid #c7d3d1;
  padding: 24px 0;
}

.pricing-faq dt {
  color: #172c2e;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
}

.pricing-faq dd {
  margin: 10px 0 0;
  color: #526467;
  line-height: 1.6;
}

.legal-hero {
  min-height: 390px;
  background: #102426;
  color: #f7fbfa;
}

.legal-hero-copy {
  width: min(1120px, calc(100% - 64px));
  margin: 70px auto 0;
  padding-bottom: 64px;
}

.legal-hero .marketing-kicker {
  color: #69d8cc;
}

.legal-hero-copy h1 {
  max-width: 700px;
  margin: 0;
  color: #ffffff;
  font-size: 50px;
  line-height: 1.08;
}

.legal-hero-copy > p:not(.marketing-kicker) {
  max-width: 650px;
  margin: 18px 0 0;
  color: #d5e2e0;
  font-size: 17px;
  line-height: 1.6;
}

.legal-hero--document {
  min-height: 315px;
}

.legal-index,
.legal-document {
  width: min(1120px, calc(100% - 64px));
  margin: 0 auto;
}

.legal-index {
  padding: 96px 0;
}

.legal-index-heading {
  max-width: 650px;
  margin-bottom: 36px;
}

.legal-index-heading h2 {
  margin: 0;
  color: #172c2e;
  font-size: 42px;
  line-height: 1.12;
}

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

.legal-index-grid article {
  display: flex;
  min-height: 238px;
  flex-direction: column;
  border: 1px solid #c7d3d1;
  border-top: 4px solid #2ec4b6;
  border-radius: 8px;
  background: #ffffff;
  padding: 28px;
}

.legal-index-grid h3 {
  margin: 16px 0 0;
  color: #172c2e;
  font-size: 24px;
  line-height: 1.2;
}

.legal-index-grid p:not(.marketing-kicker) {
  margin: 14px 0 0;
  color: #526467;
  line-height: 1.6;
}

.legal-link {
  margin-top: auto;
  padding-top: 22px;
  color: #0f766e;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.legal-link:hover {
  color: #115e59;
  text-decoration: underline;
}

.legal-review-note {
  margin-top: 32px;
  border-left: 4px solid #f28a3f;
  background: #fff7ed;
  padding: 20px 22px;
  color: #6e4a28;
  line-height: 1.6;
}

.legal-document {
  max-width: 800px;
  padding: 82px 0 96px;
}

.legal-document-intro {
  margin: 0 0 42px;
  color: #314547;
  font-size: 19px;
  line-height: 1.65;
}

.legal-document section + section {
  margin-top: 36px;
}

.legal-document h2 {
  margin: 0;
  color: #172c2e;
  font-size: 25px;
  line-height: 1.3;
}

.legal-document p:not(.legal-document-intro) {
  margin: 14px 0 0;
  color: #526467;
  line-height: 1.7;
}

.legal-document a,
.auth-legal-note a {
  color: #0f766e;
  font-weight: 700;
}

.auth-shell {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(460px, 0.9fr);
  min-height: 100vh;
  background: #edf3f1;
}

.auth-visual {
  position: relative;
  min-height: 620px;
  isolation: isolate;
  overflow: hidden;
}

.auth-visual::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: rgba(4, 16, 18, 0.42);
  content: "";
}

.auth-visual img {
  z-index: 0;
}

.auth-visual-copy {
  position: absolute;
  z-index: 2;
  bottom: 52px;
  left: 52px;
  display: grid;
  max-width: 370px;
  gap: 12px;
  color: #ffffff;
}

.auth-visual-copy .fusionery-logo {
  width: 152px;
}

.auth-visual-copy strong {
  font-size: 26px;
  line-height: 1.2;
}

.auth-content {
  display: grid;
  align-content: center;
  justify-items: center;
  grid-template-columns: minmax(0, 440px);
  justify-content: center;
  background: #f8fbfa;
  padding: 44px;
}

.auth-brand {
  display: inline-flex;
  width: min(430px, 100%);
  align-items: center;
  margin-bottom: 28px;
  color: #172c2e;
  text-decoration: none;
}

.auth-brand .fusionery-logo {
  width: 150px;
}

.auth-panel {
  display: grid;
  width: min(430px, 100%);
  gap: 24px;
}

.auth-panel h1 {
  margin: 0;
  color: #172c2e;
  font-size: 34px;
  line-height: 1.1;
}

.auth-intro {
  margin: 10px 0 0;
  color: #607174;
  line-height: 1.5;
}

.auth-form {
  display: grid;
  gap: 16px;
}

.auth-form .primary-button {
  width: 100%;
  min-height: 46px;
  background: #0f766e;
}

.auth-form .primary-button:hover {
  background: #115e59;
}

.auth-switch {
  margin: 0;
  color: #607174;
  font-size: 14px;
}

.auth-switch a {
  color: #0f766e;
  font-weight: 800;
}

.auth-legal-note {
  margin: 18px 0 0;
  color: #6b7b7d;
  font-size: 12px;
  line-height: 1.55;
}

.account-summary {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 4px 20px;
}

.account-summary dl {
  margin: 0;
}

.account-summary dl div {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 18px;
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}

.account-summary dl div:last-child {
  border-bottom: 0;
}

.account-summary dt {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.account-summary dd {
  margin: 0;
}

/* Workspace collaboration page */
.workspace-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 16px;
}

.workspace-table th {
  text-align: left;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--line);
}

.workspace-table td {
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  font-size: 14px;
}

.workspace-table tr:last-child td {
  border-bottom: 0;
}

.workspace-table td strong {
  display: block;
}

.workspace-invite-form {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  margin: 12px 0 18px;
}

.workspace-invite-form .form-field {
  margin: 0;
}

.workspace-invite-link {
  width: 100%;
  max-width: 280px;
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
}

.workspace-project-access {
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}

.workspace-project-access:last-child {
  border-bottom: 0;
}

.workspace-project-access-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
}

.workspace-project-access-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.workspace-project-members {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
}

.studio-sidebar-switch {
  font-size: 12px;
  color: inherit;
  opacity: 0.75;
  text-decoration: underline;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--line);
  font-size: 12px;
  font-weight: 700;
}

.app-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  background: var(--sidebar);
  color: #f8fafc;
  padding: 24px 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 700;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: var(--accent);
  border-radius: 6px;
}

.nav-list {
  display: grid;
  gap: 6px;
  margin-top: 36px;
}

.nav-item {
  color: #dbe3ea;
  padding: 10px 12px;
  border-radius: 6px;
  text-decoration: none;
}

.nav-item.active,
.nav-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.workspace {
  padding: 32px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  max-width: 780px;
  margin-bottom: 0;
  font-size: 34px;
  line-height: 1.1;
}

/* Header game-identity cluster (name · version · state, right of the logo):
   must live here (unlayered) — the global h1 rule above beats any @layer
   rule regardless of specificity. */
.editor-title-cluster {
  margin-left: 12px;
}

/* Early-development marker next to every top-left brand logo; the title
   attribute carries the reassurance (games and version history are safe). */
.fusionery-beta-badge {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(240, 177, 90, 0.55);
  background: rgba(240, 177, 90, 0.12);
  color: #f0b15a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: help;
}
/* The editor titlebar has a wide flex gap; tuck the badge toward the logo. */
.editor-titlebar .fusionery-beta-badge { margin-left: -6px; }
/* The /play topnav toggle is a compact pill with its own gap. */
.release-topnav-toggle .fusionery-beta-badge { margin-left: 0; font-size: 9px; padding: 1px 6px; }

.editor-title-version {
  font-size: 12px;
  font-style: italic;
  font-weight: 600;
  color: #4ade80;
  white-space: nowrap;
}

.editor-title-cluster h1 {
  max-width: 26rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

h2 {
  margin-bottom: 0;
  font-size: 20px;
}

.primary-button {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
}

.secondary-button {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}

.primary-link,
.secondary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
}

.primary-link {
  background: var(--accent);
  color: #ffffff;
}

.primary-link:hover {
  background: var(--accent-strong);
}

.secondary-link {
  border: 1px solid var(--line);
  color: var(--ink);
}

.primary-button:hover {
  background: var(--accent-strong);
}

.secondary-button:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.public-release {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: 100dvh;
  min-height: 100vh;
  background: #101418;
}

.release-runtime-frame-wrap {
  position: relative;
  min-height: 0;
}

.release-runtime-frame-wrap iframe {
  position: absolute;
  inset: 0;
}

.release-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 20px;
  border-bottom: 1px solid #2f363d;
  background: #181d22;
  color: #f8fafc;
}

.release-bar h1 {
  font-size: 22px;
}

.release-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.release-lobby-panel {
  border-bottom: 1px solid #2f363d;
  background: #111820;
  color: #dbe3ea;
}

.release-lobby-form {
  display: grid;
  grid-template-columns: minmax(140px, 190px) minmax(120px, 160px) minmax(180px, 1fr) auto minmax(160px, auto);
  align-items: end;
  gap: 10px;
  padding: 12px 20px;
}

.release-lobby-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.release-lobby-form label span {
  color: #9ca8b3;
  font-size: 12px;
  font-weight: 700;
}

.release-lobby-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.release-lobby-share {
  grid-column: 1 / 4;
}

.release-lobby-form input {
  width: 100%;
  min-height: 36px;
  border: 1px solid #3c4650;
  border-radius: 6px;
  background: #0e141a;
  color: #f8fafc;
  padding: 7px 9px;
  outline: none;
}

.release-lobby-form input:focus {
  border-color: #2dd4bf;
  box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.18);
}

.release-lobby-form button {
  min-height: 36px;
  border: 0;
  border-radius: 6px;
  background: #0f766e;
  color: #ffffff;
  padding: 0 14px;
  font-weight: 700;
  cursor: pointer;
}

.release-lobby-form button:hover {
  background: #115e59;
}

.release-lobby-form button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.release-lobby-form output {
  grid-column: 4 / -1;
  min-width: 0;
  color: #9ca8b3;
  font-size: 13px;
  line-height: 1.3;
}

.release-lobby-form output[data-status="success"] {
  color: #5eead4;
}

.release-lobby-form output[data-status="pending"] {
  color: #fde68a;
}

.release-lobby-form output[data-status="error"] {
  color: #fca5a5;
}

.release-lobby-launch {
  grid-column: 1 / -1;
  border-top: 1px solid #2f363d;
  padding-top: 10px;
}

.release-lobby-launch-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 700;
}

.release-lobby-launch-heading span:last-child {
  color: #9ca8b3;
  font-weight: 600;
}

.release-lobby-launch dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
  gap: 8px;
  margin: 8px 0 0;
}

.release-lobby-launch dl div {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 1px solid #2f363d;
  border-radius: 6px;
  background: #0e141a;
  padding: 8px 10px;
}

.release-lobby-launch dt {
  color: #9ca8b3;
  font-size: 11px;
  font-weight: 700;
}

.release-lobby-launch dd {
  margin: 0;
  overflow: hidden;
  color: #f8fafc;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.release-lobby-roster {
  grid-column: 1 / -1;
  border-top: 1px solid #2f363d;
  padding-top: 10px;
}

.release-lobby-roster-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 700;
}

.release-lobby-roster-heading span:last-child {
  color: #9ca8b3;
  font-weight: 600;
}

.release-lobby-roster ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.release-lobby-roster li {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 1px solid #2f363d;
  border-radius: 6px;
  background: #0e141a;
  padding: 8px 10px;
}

.release-lobby-roster strong,
.release-lobby-roster li span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.release-lobby-roster strong {
  color: #f8fafc;
  font-size: 13px;
}

.release-lobby-roster li span {
  color: #9ca8b3;
  font-size: 12px;
}

.release-lobby-roster li[data-status="ready"],
.release-lobby-roster li[data-status="connected"] {
  border-color: rgba(45, 212, 191, 0.45);
}

.release-lobby-roster li[data-status="left"],
.release-lobby-roster li[data-status="disconnected"] {
  opacity: 0.72;
}

.release-lobby-readiness {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #7c8894;
}

.release-lobby-readiness[data-ready="true"] {
  color: #2dd4bf;
}

.release-lobby-roster li[data-present="false"] {
  opacity: 0.55;
}

/* Ready-up loadout picker (entry + lobby screens) */
.release-loadout {
  display: grid;
  gap: 10px;
  /* Fills its stage column. A definite width matters: an auto-width panel
     gives an auto-fill card grid nothing to fill, and it collapses to one
     enormous column. */
  width: 100%;
  border: 1px solid #2f363d;
  border-radius: 8px;
  background: rgba(10, 15, 20, 0.72);
  padding: 12px 14px;
}

.release-loadout-title {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9ca8b3;
}

.release-loadout-group {
  display: grid;
  gap: 6px;
}

.release-loadout-label {
  font-size: 12px;
  color: #c7d0d9;
}

.release-loadout-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Choices that have a model render it; the label sits beneath the art. */
.release-loadout-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
  gap: 8px;
}

.release-loadout-card {
  display: grid;
  gap: 6px;
  justify-items: center;
  border: 1px solid #3a434c;
  border-radius: 10px;
  background: #131a21;
  color: #c7d0d9;
  padding: 8px 6px 9px;
  font-size: 11.5px;
  line-height: 1.25;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.release-loadout-card:hover {
  border-color: #56626d;
  color: #f8fafc;
}

.release-loadout-card.is-selected {
  border-color: var(--release-accent, #2dd4bf);
  background: color-mix(in srgb, var(--release-accent, #2dd4bf) 18%, #131a21);
  color: #f8fafc;
}

.release-loadout-card:disabled { opacity: 0.6; cursor: default; }

.release-loadout-card-art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  /* Never let one wide column turn a thumbnail into a billboard. */
  max-height: 148px;
  border-radius: 8px;
  /* A neutral stage so pale and dark models both read. */
  background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.09), rgba(0, 0, 0, 0.28));
}

.release-loadout-card-art canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* A choice with no bound model sits in the same grid as its siblings; an
   empty frame reads as a broken image, a mark reads as "nothing to show". */
.release-loadout-card-art:empty::after {
  content: "—";
  color: #56626d;
  font-size: 16px;
}

.release-loadout-card-label {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: center;
}

.release-loadout-chip {
  appearance: none;
  border: 1px solid #3a434c;
  border-radius: 999px;
  background: #131a21;
  color: #c7d0d9;
  font-size: 12px;
  line-height: 1;
  padding: 7px 12px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.release-loadout-chip:hover {
  border-color: #56626d;
  color: #f8fafc;
}

/* Pad/keyboard focus ring on the staged screens — programmatic focus from
   the gamepad navigator does not always trigger :focus-visible. */
.public-release--staged button:focus,
.public-release--staged summary:focus,
.public-release--staged input:focus,
.public-release--staged .pad-focused {
  outline: 2px solid var(--release-accent, #2dd4bf);
  outline-offset: 2px;
}

.release-loadout-chip:disabled {
  opacity: 0.6;
  cursor: default;
}

.release-loadout-hint {
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #7c8894;
}

.release-loadout-chip.is-selected {
  border-color: var(--release-accent, #2dd4bf);
  background: color-mix(in srgb, var(--release-accent, #2dd4bf) 18%, #131a21);
  color: #f8fafc;
}

.public-release iframe {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  background: #0b1020;
}

@media (max-width: 900px) {
  .release-lobby-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .release-lobby-actions,
  .release-lobby-share,
  .release-lobby-launch dl,
  .release-lobby-form output {
    grid-column: 1 / -1;
  }

  .release-lobby-launch dl {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .release-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .release-lobby-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .release-lobby-actions button {
    flex: 1 1 96px;
  }
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.status-card,
.work-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.status-card {
  padding: 18px;
}

.status-card strong {
  display: block;
  margin: 8px 0;
  font-size: 24px;
}

.status-card p,
.track-item p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.5;
}

.status-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.work-panel {
  padding: 20px;
}

.dashboard-empty {
  border: 0;
  background: transparent;
  padding: 12px 0 0;
}

.dashboard-empty h2 {
  margin-bottom: 16px;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.track-list {
  display: grid;
  gap: 18px;
  padding-top: 18px;
}

.track-item {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.track-dot {
  width: 14px;
  height: 14px;
  margin-top: 3px;
  border: 2px solid var(--line);
  border-radius: 50%;
}

.track-item.complete .track-dot {
  border-color: var(--accent);
  background: var(--accent);
}

/* ── projects index: marketing-inspired reskin ───────────────────────────── */

.projects-page .page-header h1 {
  margin: 0;
  font-size: 32px;
  letter-spacing: -0.03em;
}

.projects-page .record-list {
  display: grid;
  gap: 12px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.projects-page .record-row {
  border: 1px solid #d8d2e8;
  border-top: 4px solid #2ec4b6;
  border-radius: 14px;
  background: var(--surface);
  padding: 18px 20px;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.projects-page .record-row:nth-child(3n + 2) { border-top-color: #7255b6; }
.projects-page .record-row:nth-child(3n) { border-top-color: #eeaf3a; }

.projects-page .record-row:hover {
  box-shadow: 6px 7px 0 rgba(53, 39, 106, 0.1);
  transform: translateY(-2px);
}

.projects-page .record-row h2 a {
  color: var(--ink);
  text-decoration: none;
}

.projects-page .record-row h2 a:hover {
  color: #4a3585;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.projects-page .record-row p {
  margin: 6px 0 0;
  color: var(--muted);
}

.projects-page .pill {
  flex-shrink: 0;
  border: 1px solid #cbc4e2;
  background: rgba(255, 255, 255, 0.7);
  color: #4a3585;
  font-size: 12px;
  font-weight: 800;
}

.projects-empty {
  display: grid;
  justify-items: start;
  gap: 8px;
  border: 1px solid rgba(114, 85, 182, 0.35);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 6%, rgba(255, 209, 113, 0.22), transparent 24%),
    linear-gradient(140deg, #f4efff, #fdf8ef 60%, #eefbf6);
  box-shadow: 8px 9px 0 rgba(77, 49, 128, 0.08);
  padding: 30px 32px;
}

.projects-empty h2 {
  margin: 0;
  font-size: 24px;
  letter-spacing: -0.025em;
}

.projects-empty p {
  max-width: 480px;
  margin: 0;
  color: #56506e;
  line-height: 1.6;
}

.projects-empty .new-game-primary-cta {
  margin-top: 12px;
}

/* ── asset library: 3D preview ───────────────────────────────────────────── */

.asset-viewer-panel {
  margin-bottom: 24px;
}

.asset-viewer {
  position: relative;
  height: 440px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    radial-gradient(circle at 80% 12%, rgba(114, 85, 182, 0.12), transparent 34%),
    var(--surface);
}

.asset-viewer canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.asset-viewer-status[hidden] {
  display: none;
}

.asset-viewer-status {
  position: absolute;
  inset: 0;
  display: grid;
  margin: 0;
  place-items: center;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  pointer-events: none;
}

.asset-viewer-hint {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.asset-viewer-image {
  display: block;
  max-width: 100%;
  max-height: 440px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 12px;
}

.asset-viewer-audio {
  display: block;
  width: min(480px, 100%);
}

.asset-studio {
  display: flex;
  align-items: stretch;
  gap: 14px;
}

.asset-studio .asset-viewer {
  flex: 1;
  min-width: 0;
}

.asset-editor-toggle {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  border: 1px solid #cbc4e2;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: #4a3585;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.asset-editor-toggle:hover {
  border-color: #7255b6;
  background: #eee7ff;
  transform: translateY(-1px);
}

.asset-editor-toggle.is-active {
  border-color: #7255b6;
  background: #7255b6;
  color: #ffffff;
}

.asset-editor-toggle[hidden] {
  display: none;
}

.asset-editor-sidebar {
  display: flex;
  width: 280px;
  flex-direction: column;
  flex-shrink: 0;
  gap: 16px;
  overflow-y: auto;
  max-height: 440px;
  border: 1px solid var(--line);
  border-top: 4px solid #7255b6;
  border-radius: 14px;
  background: var(--surface);
  padding: 16px;
}

.asset-editor-sidebar[hidden] {
  display: none;
}

.asset-editor-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
}

.asset-editor-tabs-spacer {
  flex: 1;
}

.asset-editor-icon-button {
  display: grid;
  width: 26px;
  height: 26px;
  border: 1px solid #cbc4e2;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: #4a3585;
  place-items: center;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.asset-editor-icon-button:hover:not(:disabled) {
  border-color: #7255b6;
  background: #eee7ff;
  transform: translateY(-1px);
}

.asset-editor-icon-button:disabled {
  opacity: 0.4;
  cursor: default;
}

.asset-editor-cursor {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.asset-editor-cursor[hidden] {
  display: none;
}

.asset-editor-cursor--brush {
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(20, 14, 46, 0.6), inset 0 0 0 1px rgba(20, 14, 46, 0.35);
  transform: translate(-50%, -50%);
}


.asset-editor-tab {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 6px 10px 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}

.asset-editor-tab:hover {
  color: #4a3585;
}

.asset-editor-tab.is-active {
  border-bottom-color: #7255b6;
  color: #4a3585;
}

.asset-editor-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.asset-editor-tab-panel[hidden] {
  display: none;
}

.asset-editor-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.asset-editor-section[hidden] {
  display: none;
}

.asset-editor-section .asset-editor-label {
  flex-basis: 100%;
}

/* Guaranteed breathing room above the save block: margin-top: auto pins it
   to the bottom when content is short, and the panel's bottom margin keeps a
   minimum gap when the sidebar is full. */
.asset-editor-tab-panel {
  margin-bottom: 14px;
}

.asset-editor-save-section {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.asset-editor-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.asset-editor-label {
  margin-right: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.asset-editor-chip {
  border: 1px solid #cbc4e2;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: #4a3585;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.asset-editor-chip:hover:not(:disabled) {
  border-color: #7255b6;
  background: #eee7ff;
  transform: translateY(-1px);
}

.asset-editor-chip:disabled {
  opacity: 0.5;
  cursor: default;
}

.asset-editor-chip.is-active {
  border-color: #7255b6;
  background: #7255b6;
  color: #ffffff;
}

.asset-editor-paint-controls {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: 8px;
}

.asset-editor-paint-controls[hidden] {
  display: none;
}

.asset-editor-inline[hidden] {
  display: none;
}

.asset-editor-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.asset-editor-slider {
  flex: 1 1 100%;
}

.asset-editor-slider input[type="range"] {
  flex: 1;
  min-width: 0;
}

.asset-editor-materials {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.asset-editor-material {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--page);
  padding: 4px 10px 4px 5px;
}

.asset-editor-material.is-selected {
  border-color: #7255b6;
  box-shadow: 0 0 0 1px #7255b6;
}

.asset-editor-material input[type="color"] {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.asset-editor-material-name {
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.asset-editor-upload input[type="file"][hidden] {
  display: none;
}

.asset-editor-hint {
  flex-basis: 100%;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.asset-editor-ai-prompt {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--page);
  color: var(--ink);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.45;
  resize: vertical;
}

.asset-editor-ai-apply {
  width: 100%;
  text-align: center;
}

.asset-editor-name {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--page);
  color: var(--ink);
  padding: 7px 10px;
  font-size: 13px;
}

.asset-editor-save {
  border: 0;
  border-radius: 999px;
  background: #ffd171;
  box-shadow: 2px 3px 0 rgba(20, 14, 46, 0.3);
  color: #3a2a10;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}

.asset-editor-save:hover:not(:disabled) {
  background: #ffdf9b;
  transform: translateY(-1px);
}

.asset-editor-save:disabled {
  opacity: 0.55;
  cursor: default;
}

.asset-editor-status {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.asset-editor-status a {
  color: #4a3585;
  text-decoration: underline;
  text-underline-offset: 2px;
}

html[data-theme="dark"] .studio-workspace .asset-editor-status a {
  color: #c9b8f0;
}

.asset-editor-status.is-error {
  color: var(--danger);
}

/* ── settings + integrations ─────────────────────────────────────────────── */

.settings-page {
  display: grid;
  align-content: start;
}

.settings-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.settings-header h1 {
  margin: 4px 0 8px;
  font-size: 34px;
  letter-spacing: -0.04em;
}

.settings-header > div > p:not(.eyebrow) {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.settings-header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.settings-header-meta span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  color: var(--muted);
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 750;
}

.settings-tabs {
  display: flex;
  gap: 4px;
  margin-top: 24px;
  border-bottom: 1px solid var(--line);
}

.settings-tab {
  position: relative;
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  border-radius: 7px 7px 0 0;
  color: var(--muted);
  padding: 0 16px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.settings-tab:hover {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--ink);
}

.settings-tab.is-active {
  background: var(--surface);
  color: var(--accent-strong);
}

.settings-tab.is-active::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
  content: "";
}

.settings-tab-content {
  margin-top: 28px;
}

.settings-tab-content--account {
  display: grid;
  width: min(760px, 100%);
  gap: 18px;
}

.settings-tab-content > .page-header h2 {
  margin: 2px 0 0;
  font-size: 28px;
  letter-spacing: -0.03em;
}

.integrations-page .page-header {
  max-width: 760px;
}

.integration-list {
  display: grid;
  gap: 14px;
  max-width: 760px;
}

.integration-card {
  border: 1px solid var(--line);
  border-top: 4px solid #7255b6;
  border-radius: 14px;
  background: var(--surface);
  padding: 24px 26px;
}

.integration-card--upcoming {
  border-top-color: #2ec4b6;
  opacity: 0.85;
}

.integration-card-heading {
  display: flex;
  align-items: center;
  gap: 14px;
}

.integration-card-logo {
  display: grid;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 14px 14px 14px 5px;
  background: #f2fce2;
  place-items: center;
  overflow: hidden;
}

.integration-card-logo img {
  width: 34px;
  height: auto;
}

.integration-card-logo--ghost {
  background: #e5f5f2;
  color: #0f766e;
  font-size: 18px;
  font-weight: 900;
}

.integration-card-heading h2 {
  margin: 0;
  font-size: 19px;
  letter-spacing: -0.02em;
}

.integration-card-heading > div > p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.integration-status {
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 800;
}

.integration-status.is-connected {
  border-color: rgba(46, 196, 182, 0.55);
  background: rgba(46, 196, 182, 0.12);
  color: var(--accent);
}

.integration-card-copy {
  margin: 16px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.integration-card-copy a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.integration-card-note {
  margin: 16px 0 0;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.integration-form {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.integration-remove-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.integration-connect {
  padding: 12px 24px;
  font-size: 14px;
}

/* ── workspace management center ───────────────────────────────────────── */

.management-overview,
.workspace-management-content,
.integrations-page,
.management-profile-page,
.asset-management-content {
  display: grid;
  gap: 20px;
}

.asset-management-content--narrow {
  width: min(760px, 100%);
}

.management-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.management-section-heading h2 {
  margin: 3px 0 5px;
  font-size: 27px;
  letter-spacing: -0.035em;
}

.management-section-heading p:last-child {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.management-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 11px;
}

.management-summary-grid--compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.management-summary-grid--integrations {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 900px;
}

.management-summary-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-top: 3px solid #7255b6;
  border-radius: 11px;
  background: var(--surface);
  padding: 17px 18px;
}

.management-summary-card:nth-child(2) { border-top-color: #2ec4b6; }
.management-summary-card:nth-child(3) { border-top-color: #eeaf3a; }
.management-summary-card:nth-child(4) { border-top-color: #4c8ed9; }
.management-summary-card:nth-child(5) { border-top-color: #c86791; }

.management-summary-card > span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.management-summary-card > strong {
  display: block;
  margin-top: 7px;
  color: var(--ink);
  font-size: 28px;
  letter-spacing: -0.035em;
  line-height: 1;
}

.management-summary-card > .management-summary-text {
  overflow: hidden;
  font-size: 17px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.management-summary-card p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.management-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
  align-items: start;
  gap: 16px;
}

.management-side-stack {
  display: grid;
  gap: 16px;
}

.management-panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 21px 23px;
}

.management-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.management-panel-heading h2 {
  margin: 3px 0 0;
  font-size: 19px;
  letter-spacing: -0.02em;
}

.management-capacity {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.management-checklist {
  display: grid;
  gap: 0;
  margin: 17px 0 0;
  padding: 0;
  list-style: none;
}

.management-checklist li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 15px 0;
}

.management-checklist li:first-child {
  border-top: 0;
  padding-top: 0;
}

.management-checklist li:last-child { padding-bottom: 0; }

.management-checklist li > span {
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border: 2px solid #9b8bad;
  border-radius: 50%;
  background: var(--surface);
}

.management-checklist .is-ready > span {
  border-color: #199989;
  background: #2ec4b6;
}

.management-checklist .needs-attention > span {
  border-color: #c37c09;
  background: #eeaf3a;
}

.management-checklist strong {
  display: block;
  font-size: 13px;
}

.management-checklist p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.48;
}

.management-inline-action {
  display: inline-block;
  margin-top: 6px;
  border: 0;
  background: transparent;
  color: var(--accent-strong);
  padding: 0;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.management-inline-action:hover { text-decoration: underline; }

.management-usage-list,
.management-profile-list {
  margin: 13px 0 0;
}

.management-usage-list > div,
.management-profile-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--line);
  padding: 10px 0;
}

.management-usage-list dt,
.management-profile-list dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.management-usage-list dd,
.management-profile-list dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.management-panel-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.management-billing-panel {
  display: grid;
  gap: 18px;
}

.management-billing-summary {
  margin-top: 0;
}

.management-profile-page {
  width: min(760px, 100%);
}

.management-profile-page .form-panel { margin-top: 0; }

.workspace-table-wrap,
.integration-token-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.integration-token-table-wrap { margin-top: 16px; }

.integration-token-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.integration-token-table th {
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  padding: 8px 10px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
}

.integration-token-table td {
  border-bottom: 1px solid var(--line);
  padding: 10px;
  vertical-align: middle;
}

.integration-token-table tr:last-child td { border-bottom: 0; }

.workspace-management-content > .management-panel {
  padding: 22px 25px;
}

.workspace-project-list {
  margin-top: 15px;
  border-top: 1px solid var(--line);
}

.workspace-project-access-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) auto minmax(180px, 1.25fr) auto;
  align-items: center;
}

.workspace-project-identity {
  display: grid;
  gap: 3px;
}

.workspace-project-identity > span {
  color: var(--muted);
  font-size: 11px;
}

.workspace-restricted-toggle { white-space: nowrap; }

.management-empty-state {
  margin-top: 13px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  padding: 14px;
  font-size: 12px;
}

.management-permission-note {
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.management-permission-note p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.integration-list { max-width: 900px; }

@media (max-width: 1040px) {
  .management-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .management-summary-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .management-layout { grid-template-columns: 1fr; }
  .management-side-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-project-access-row { grid-template-columns: minmax(140px, 1fr) auto; }
  .workspace-project-members { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .settings-header h1 { font-size: 28px; }
  .settings-tabs { overflow-x: auto; }
  .settings-tab { flex: 0 0 auto; padding: 0 12px; }
  .management-section-heading { align-items: flex-start; flex-direction: column; }
  .management-summary-grid,
  .management-summary-grid--compact,
  .management-summary-grid--integrations,
  .management-side-stack { grid-template-columns: 1fr; }
  .management-panel,
  .workspace-management-content > .management-panel { padding: 19px; }
  .management-panel-heading { align-items: flex-start; flex-direction: column; }
  .workspace-project-access-row { grid-template-columns: 1fr; align-items: start; }
  .workspace-project-members { grid-column: auto; }
  .integration-card-heading { align-items: flex-start; flex-wrap: wrap; }
  .integration-status { margin-left: 60px; }
}

/* ── studio dashboard: marketing-inspired reskin ─────────────────────────── */

.studio-dashboard .status-card {
  border-radius: 14px;
  border-top: 4px solid #2ec4b6;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.studio-dashboard .status-card--games { border-top-color: #7255b6; }
.studio-dashboard .status-card--assets { border-top-color: #eeaf3a; }

.studio-dashboard .status-card:hover {
  transform: translateY(-3px);
  box-shadow: 6px 7px 0 rgba(53, 39, 106, 0.1);
}

.studio-dashboard .status-card strong {
  font-size: 30px;
  letter-spacing: -0.02em;
}

.studio-dashboard .work-panel {
  border: 1px solid rgba(114, 85, 182, 0.35);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 6%, rgba(255, 209, 113, 0.22), transparent 24%),
    linear-gradient(140deg, #f4efff, #fdf8ef 60%, #eefbf6);
  box-shadow: 8px 9px 0 rgba(77, 49, 128, 0.08);
  padding: 26px 28px;
}

.studio-dashboard .panel-heading {
  border-bottom: 1px solid rgba(76, 61, 126, 0.2);
}

.studio-dashboard .panel-heading .status-label {
  color: #4a3585;
}

.studio-dashboard .dashboard-games {
  margin-bottom: 24px;
}

.dashboard-game-list {
  display: grid;
  gap: 12px;
  padding-top: 18px;
}

.dashboard-game-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(440px, 1.4fr) auto;
  align-items: center;
  gap: 24px;
  border: 1px solid #d8d2e8;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.8);
  padding: 16px 18px;
}

.dashboard-game-identity h3 {
  margin: 0 0 5px;
  font-size: 17px;
}

.dashboard-game-identity h3 a {
  color: var(--ink);
  text-decoration: none;
}

.dashboard-game-identity h3 a:hover {
  color: #4a3585;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dashboard-game-identity p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.dashboard-game-identity .dashboard-game-last-played {
  margin-top: 5px;
}

.dashboard-game-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.dashboard-game-stat {
  min-width: 0;
  border-left: 1px solid rgba(76, 61, 126, 0.16);
  padding-left: 14px;
}

.dashboard-game-stat dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dashboard-game-stat dd {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.dashboard-game-actions {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.dashboard-game-action {
  border: 1px solid #cbc4e2;
  border-radius: 999px;
  padding: 7px 13px;
  color: #4a3585;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.dashboard-game-action:hover {
  border-color: #8a6fc9;
  background: #eee7ff;
  transform: translateY(-1px);
}

.dashboard-game-action--play {
  border-color: #7255b6;
  background: #7255b6;
  color: #ffffff;
}

.dashboard-game-action--play:hover {
  background: #61459f;
  color: #ffffff;
}

/* ── game management ───────────────────────────────────────────────────── */

.game-management-page {
  display: grid;
  gap: 24px;
}

.game-management-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  border: 1px solid rgba(114, 85, 182, 0.34);
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 209, 113, 0.3), transparent 28%),
    linear-gradient(135deg, #f2ecff, #fff9ec 62%, #eaf9f4);
  box-shadow: 8px 9px 0 rgba(77, 49, 128, 0.08);
  padding: 28px 30px;
}

.game-management-hero h1 {
  margin: 0;
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -0.04em;
}

.game-management-hero > div > p:not(.eyebrow) {
  max-width: 680px;
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.game-management-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}

.game-management-hero-meta span,
.game-management-status {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d4cbe8;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  padding: 5px 9px;
  color: #554477;
  font-size: 11px;
  font-weight: 800;
}

.game-management-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.game-management-button,
.game-management-inline-link {
  border: 1px solid #c9bfdf;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  padding: 9px 15px;
  color: #4a3585;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.game-management-button:hover,
.game-management-inline-link:hover {
  border-color: #8a6fc9;
  background: #eee7ff;
  transform: translateY(-1px);
}

.game-management-button--primary {
  border-color: #7255b6;
  background: #7255b6;
  color: #ffffff;
}

.game-management-button--primary:hover {
  background: #61459f;
  color: #ffffff;
}

.game-management-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.game-management-summary-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-top: 4px solid #7255b6;
  border-radius: 14px;
  background: var(--surface);
  padding: 16px;
}

.game-management-summary-card:nth-child(2) { border-top-color: #2ec4b6; }
.game-management-summary-card:nth-child(3) { border-top-color: #eeaf3a; }
.game-management-summary-card:nth-child(4) { border-top-color: #4c8ed9; }
.game-management-summary-card:nth-child(5) { border-top-color: #c86791; }

.game-management-summary-card > span,
.game-management-panel-heading span,
.game-management-metric-grid article span,
.game-management-operations-grid span,
.game-management-revenue-state > span,
.game-management-commerce-list li > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.game-management-summary-card > strong {
  display: block;
  margin-top: 8px;
  font-size: 28px;
  letter-spacing: -0.03em;
}

.game-management-summary-card > .game-management-text-value {
  padding: 5px 0;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.game-management-summary-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.game-management-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.game-management-panel {
  min-width: 0;
  border: 1px solid rgba(114, 85, 182, 0.28);
  border-radius: 18px;
  background: var(--surface);
  padding: 22px 24px;
}

.game-management-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.game-management-panel-heading h2 {
  margin: 3px 0 0;
  font-size: 21px;
  letter-spacing: -0.025em;
}

.game-management-panel-heading > strong {
  color: #7255b6;
  font-size: 24px;
}

.game-management-panel-heading > p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.game-management-progress {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7e1ef;
}

.game-management-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7255b6, #2ec4b6);
}

.game-management-milestones {
  display: grid;
  gap: 0;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.game-management-milestone {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 11px;
  padding-bottom: 17px;
}

.game-management-milestone:last-child { padding-bottom: 0; }

.game-management-milestone::before {
  position: absolute;
  top: 15px;
  bottom: 0;
  left: 7px;
  width: 2px;
  background: #ded7e9;
  content: "";
}

.game-management-milestone:last-child::before { display: none; }

.game-management-milestone-marker {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  border: 3px solid #c8c0d5;
  border-radius: 50%;
  background: var(--surface);
}

.game-management-milestone--completed .game-management-milestone-marker {
  border-color: #2b9d8f;
  background: #2ec4b6;
}

.game-management-milestone--warning .game-management-milestone-marker,
.game-management-milestone--working .game-management-milestone-marker {
  border-color: #c58c25;
  background: #ffd171;
}

.game-management-milestone--failed .game-management-milestone-marker {
  border-color: #b65151;
  background: #df7272;
}

.game-management-milestone strong { font-size: 13px; }

.game-management-milestone p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.game-management-detail-list,
.game-management-cost-context {
  display: grid;
  gap: 0;
  margin: 0;
}

.game-management-detail-list > div,
.game-management-cost-context > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding: 9px 0;
}

.game-management-detail-list dt,
.game-management-cost-context dt {
  color: var(--muted);
  font-size: 12px;
}

.game-management-detail-list dd,
.game-management-cost-context dd {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.game-management-build-health {
  margin-top: 18px;
}

.game-management-build-health h3 {
  margin: 0 0 9px;
  font-size: 13px;
}

.game-management-build-health p,
.game-management-disclosure {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.game-management-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.game-management-status--succeeded,
.game-management-status--published,
.game-management-status--built,
.game-management-status--deployed,
.game-management-status--live {
  border-color: #98d7ca;
  background: #eaf8f4;
  color: #226d62;
}

.game-management-status--failed,
.game-management-status--invalid {
  border-color: #e2b0b0;
  background: #fff0f0;
  color: #913d3d;
}

.game-management-status--queued,
.game-management-status--running,
.game-management-status--building,
.game-management-status--validating {
  border-color: #e4c985;
  background: #fff8de;
  color: #806018;
}

.game-management-next-steps {
  background:
    radial-gradient(circle at 95% 0, rgba(46, 196, 182, 0.12), transparent 28%),
    var(--surface);
}

.game-management-next-steps ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.game-management-next-steps li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
}

.game-management-next-steps li > span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  background: #7255b6;
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
}

.game-management-next-steps li p {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.45;
}

.game-management-metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.game-management-metric-grid article,
.game-management-operations-grid > div {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 88%, #f1ecff);
  padding: 13px;
}

.game-management-metric-grid article strong,
.game-management-operations-grid strong {
  display: block;
  margin-top: 7px;
  font-size: 22px;
  letter-spacing: -0.025em;
}

.game-management-usage-details,
.game-management-feedback-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 16px;
}

.game-management-usage-details p,
.game-management-feedback-summary p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.game-management-usage-details strong,
.game-management-feedback-summary strong { color: var(--ink); }

.game-management-event-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 15px;
  border-top: 1px solid var(--line);
  padding-top: 15px;
}

.game-management-event-breakdown span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--muted);
  font-size: 10px;
}

.game-management-event-breakdown strong { color: var(--ink); }

.game-management-table-wrap { overflow-x: auto; }

.game-management-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.game-management-table th {
  border-bottom: 1px solid var(--line);
  padding: 0 10px 9px;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.game-management-table td {
  border-bottom: 1px solid var(--line);
  padding: 11px 10px;
  white-space: nowrap;
}

.game-management-table tbody tr:last-child td { border-bottom: 0; }

.game-management-table-link {
  color: #5c419a;
  font-weight: 850;
  text-decoration: none;
}

.game-management-table-link:hover { text-decoration: underline; }

.game-management-empty {
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 18px;
  text-align: center;
}

.game-management-empty strong { font-size: 13px; }

.game-management-empty p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.game-management-operations-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 17px;
}

.game-management-operations-grid strong { font-size: 18px; }

.game-management-cost-context { margin-bottom: 14px; }

.game-management-revenue-state {
  border: 1px solid #e2c6d2;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff4f8, #fffaf0);
  padding: 18px;
}

.game-management-revenue-state strong {
  display: block;
  margin-top: 7px;
  font-size: 24px;
  letter-spacing: -0.025em;
}

.game-management-revenue-state p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.game-management-commerce-list {
  display: grid;
  gap: 0;
  margin: 14px 0 16px;
  padding: 0;
  list-style: none;
}

.game-management-commerce-list li {
  display: grid;
  grid-template-columns: minmax(100px, 0.7fr) minmax(110px, 0.7fr) minmax(180px, 1.4fr);
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}

.game-management-commerce-list li strong { font-size: 11px; }

.game-management-commerce-list li p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.game-management-feedback-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  margin-top: 15px;
}

.game-management-feedback-list article {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px;
}

.game-management-feedback-list article > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.game-management-feedback-list article > div span {
  border-radius: 999px;
  background: #eee8f8;
  padding: 3px 6px;
  color: #5a4778;
  font-size: 9px;
  font-weight: 800;
}

.game-management-feedback-list h3 {
  margin: 9px 0 0;
  font-size: 13px;
}

.game-management-feedback-list h3 a {
  color: var(--ink);
  text-decoration: none;
}

.game-management-feedback-list h3 a:hover { color: #5c419a; }

.game-management-feedback-list p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
}

html[data-theme="dark"] .studio-workspace .game-management-hero {
  border-color: rgba(138, 111, 201, 0.4);
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 209, 113, 0.08), transparent 28%),
    linear-gradient(135deg, #211e33, #241f2e 62%, #1b2622);
  box-shadow: 8px 9px 0 rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .studio-workspace .game-management-panel,
html[data-theme="dark"] .studio-workspace .game-management-summary-card {
  border-color: #3d3654;
  background: #21252d;
}

html[data-theme="dark"] .studio-workspace .game-management-hero-meta span,
html[data-theme="dark"] .studio-workspace .game-management-status,
html[data-theme="dark"] .studio-workspace .game-management-button,
html[data-theme="dark"] .studio-workspace .game-management-inline-link {
  border-color: #4a4168;
  background: rgba(33, 28, 55, 0.75);
  color: #c9b8f0;
}

html[data-theme="dark"] .studio-workspace .game-management-button:hover,
html[data-theme="dark"] .studio-workspace .game-management-inline-link:hover {
  border-color: #8a6fc9;
  background: #2c2647;
}

html[data-theme="dark"] .studio-workspace .game-management-button--primary {
  border-color: #8a6fc9;
  background: #7255b6;
  color: #ffffff;
}

html[data-theme="dark"] .studio-workspace .game-management-progress { background: #3a3545; }
html[data-theme="dark"] .studio-workspace .game-management-milestone::before { background: #45404f; }
html[data-theme="dark"] .studio-workspace .game-management-milestone-marker { background: #21252d; }

html[data-theme="dark"] .studio-workspace .game-management-metric-grid article,
html[data-theme="dark"] .studio-workspace .game-management-operations-grid > div,
html[data-theme="dark"] .studio-workspace .game-management-next-steps li,
html[data-theme="dark"] .studio-workspace .game-management-feedback-list article {
  border-color: #3d3654;
  background: #272c34;
}

html[data-theme="dark"] .studio-workspace .game-management-revenue-state {
  border-color: #654858;
  background: linear-gradient(135deg, #31232b, #2d2921);
}

html[data-theme="dark"] .studio-workspace .game-management-feedback-list article > div span {
  background: #312b48;
  color: #c9b8f0;
}

html[data-theme="dark"] .studio-workspace .game-management-table-link,
html[data-theme="dark"] .studio-workspace .game-management-feedback-list h3 a:hover {
  color: #c9b8f0;
}

@media (max-width: 1050px) {
  .game-management-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .game-management-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .game-management-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .game-management-hero-actions { justify-content: flex-start; }
  .game-management-two-column { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .game-management-hero,
  .game-management-panel { padding: 18px; }

  .game-management-summary-grid,
  .game-management-metric-grid,
  .game-management-operations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-management-summary-card:last-child { grid-column: 1 / -1; }

  .game-management-commerce-list li {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

.dashboard-view-all {
  border: 1px solid #cbc4e2;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: #4a3585;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  transition: background 120ms ease, transform 120ms ease;
}

.dashboard-view-all:hover {
  background: #eee7ff;
  transform: translateY(-1px);
}

.studio-dashboard .track-item {
  border: 1px solid #d8d2e8;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.8);
  padding: 12px 14px;
  transition: border-color 140ms ease, transform 140ms ease;
}

.studio-dashboard .track-item:hover {
  border-color: #8a6fc9;
  transform: translateY(-1px);
}

.studio-dashboard .track-item.complete .track-dot {
  border-color: #7255b6;
  background: #7255b6;
}

.studio-dashboard .track-item a {
  color: var(--ink);
  text-decoration: none;
}

.studio-dashboard .track-item a:hover {
  color: #4a3585;
  text-decoration: underline;
  text-underline-offset: 2px;
}


.content-shell {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 32px 0;
}

.content-shell.narrow {
  width: min(760px, calc(100% - 40px));
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-copy {
  max-width: 720px;
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.record-list,
.form-panel,
.empty-state,
.blueprint-summary,
.layer-row,
.asset-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.record-list {
  overflow: hidden;
}

.record-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.record-row:last-child {
  border-bottom: 0;
}

.record-row h2 {
  font-size: 18px;
}

a {
  color: inherit;
}

.empty-state {
  padding: 28px;
}

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

.catalog-tabs {
  display: grid;
  gap: 20px;
}

.catalog-tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--line);
}

.catalog-tab {
  appearance: none;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  padding: 10px 14px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}

.catalog-tab:hover {
  color: var(--ink);
}

.catalog-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 4px;
}

.catalog-tab.is-active {
  color: var(--accent-strong);
  border-bottom-color: var(--accent);
}

.catalog-tab-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: color-mix(in srgb, var(--line) 55%, var(--surface));
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 4px;
}

.asset-table-collection-label {
  display: block;
  font-weight: 600;
}

.asset-table-collection-desc {
  display: block;
  white-space: normal;
  max-width: 420px;
}

.asset-table-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.asset-add-to-game {
  display: grid;
  gap: 14px;
  margin: 0 0 28px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.asset-add-to-game-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.asset-add-to-game-form .form-field {
  display: grid;
  gap: 4px;
  min-width: 180px;
}

.asset-add-to-game-form input,
.asset-add-to-game-form select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}

.asset-add-to-game-usage {
  align-items: center;
}

.asset-catalog-section {
  display: grid;
  gap: 14px;
  margin: 0 0 32px;
}

.asset-catalog-count {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  vertical-align: 0.15em;
  margin-left: 4px;
}

.asset-table-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Music library tab: composer/pack strip with install + support actions,
   and compact inline preview players in the track table. */
.audio-pack-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}

.audio-pack-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 10px 12px;
}

.audio-pack-chip.is-active { border-color: var(--accent, #6d5bd0); }

.audio-pack-chip-copy { display: grid; gap: 2px; min-width: 0; }

.audio-pack-chip-name {
  font-weight: 700;
  font-size: 14px;
  color: inherit;
  text-decoration: none;
}

.audio-pack-chip-name:hover { text-decoration: underline; }

.audio-pack-chip-meta {
  font-size: 12px;
  color: var(--muted);
}

.audio-pack-chip-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.audio-preview-cell { min-width: 230px; }

.audio-preview-player {
  width: 220px;
  height: 32px;
  display: block;
}

.asset-table-controls input[type="search"] {
  flex: 1 1 220px;
  max-width: 320px;
}

.asset-table-controls input[type="search"],
.asset-table-controls select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}

.asset-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.asset-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.asset-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.asset-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.asset-table tbody tr:last-child td {
  border-bottom: 0;
}

.asset-table-name a {
  font-weight: 600;
  text-decoration: none;
}

.asset-table-name a:hover {
  color: var(--accent-strong);
  text-decoration: underline;
}

.asset-table-file,
.asset-table-meta {
  color: var(--muted);
  white-space: nowrap;
}

.asset-table-meta {
  display: block;
  font-size: 12px;
}

.asset-pagination {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: var(--muted);
}

.asset-pagination a {
  color: var(--accent-strong);
  font-weight: 600;
  text-decoration: none;
}

.asset-pagination a:hover {
  text-decoration: underline;
}

.asset-table-empty {
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
}

.asset-table-empty p {
  margin: 0;
}

.kenney-collections {
  display: grid;
  gap: 16px;
  margin: 0 0 28px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), var(--surface));
}

.kenney-collection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.kenney-collection-card {
  display: flex;
  min-height: 190px;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.kenney-collection-card h3 {
  margin: 8px 0;
  font-size: 17px;
}

.kenney-collection-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.kenney-collection-meta {
  margin-top: 10px !important;
  font-size: 13px;
}

.kenney-collection-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kenney-collection-actions form {
  margin: 0;
}

.asset-card {
  display: flex;
  min-height: 150px;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
}

.asset-card h2 {
  margin: 8px 0;
  font-size: 18px;
}

.asset-card p {
  margin-bottom: 0;
  color: var(--muted);
}

.asset-chip-row {
  margin-top: 8px;
}

.compatibility-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.compatibility-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(160px, 0.6fr);
  align-items: start;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.compatibility-row p,
.target-hint {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.safety-badge {
  align-self: flex-start;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.safety-badge.approved {
  border-color: #99f6e4;
  background: #ccfbf1;
  color: var(--accent-strong);
}

.safety-badge.pending,
.safety-badge.processing {
  border-color: #fde68a;
  background: #fef3c7;
  color: #92400e;
}

.safety-badge.rejected,
.safety-badge.failed {
  border-color: #fecaca;
  background: #fee2e2;
  color: var(--danger);
}

.form-panel {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.form-field {
  display: grid;
  gap: 8px;
}

.form-field label {
  font-weight: 700;
}

/* ── two-path creation layout ─────────────────────────────────────────────── */

.creation-path {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 28px;
}

.creation-path-header {
  margin-block-end: 20px;
}

.creation-path-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 6px;
}

.creation-path-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.creation-path-form {
  display: grid;
  gap: 16px;
}

.creation-or-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 28px 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.creation-or-divider::before,
.creation-or-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--line);
}

.creation-hint {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-actions--inline {
  justify-content: flex-start;
}

/* ── template picker ─────────────────────────────────────────────────────── */

.template-picker {
  display: grid;
  gap: 18px;
  margin: 0;
  border: 0;
  padding: 0;
  scroll-margin-top: 16px;
}

.template-picker legend {
  padding: 0;
}

.template-family-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.template-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--page);
  padding: 11px 12px;
  cursor: pointer;
}

.template-option:has(input:checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: var(--surface);
}

.template-option:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.template-option input {
  margin: 3px 0 0;
}

.template-option-content {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.template-option-name {
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.template-option-desc {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.template-path-footer {
  margin-block-start: 24px;
  padding-block-start: 20px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 16px;
}

/* ── new game page: marketing-inspired reskin ────────────────────────────── */

/* With the starter-template picker hidden, the AI path is the only card on
   the page — let it use the full studio column instead of sitting in the
   narrow two-path measure. */
.content-shell.narrow.new-game-page,
.studio-main .content-shell.narrow.new-game-page {
  width: 100%;
}

/* Idea-to-published path shown above the creation card. Five equal steps on
   a connecting rule; collapses to a stack on narrow viewports. */
.creation-how {
  margin-top: 30px;
}

.creation-how-title {
  margin: 0 0 14px;
  color: #f3f6f6;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.creation-timeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.creation-timeline-step {
  display: grid;
  gap: 6px;
  align-content: start;
  position: relative;
  border-top: 2px solid #2b3640;
  padding: 14px 0 0;
}

.creation-timeline-step:first-child { border-top-color: #c5f955; }

.creation-timeline-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #202a33;
  color: #9fb0bd;
  font-size: 11px;
  font-weight: 800;
}

.creation-timeline-step:first-child .creation-timeline-index {
  background: #c5f955;
  color: #16210b;
}

.creation-timeline-label {
  color: #f3f6f6;
  font-size: 14px;
  font-weight: 800;
}

.creation-timeline-detail {
  color: #93a3a7;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .creation-timeline { grid-template-columns: 1fr; gap: 12px; }
  .creation-timeline-step { border-top: 0; border-left: 2px solid #2b3640; padding: 0 0 0 12px; }
  .creation-timeline-step:first-child { border-left-color: #c5f955; }
}

.new-game-kicker {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  margin: 0 0 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #7ee0d2;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.new-game-kicker--dark {
  background: rgba(255, 255, 255, 0.72);
  color: #4a3585;
}

.new-game-kicker--glow {
  background: rgba(20, 28, 16, 0.35);
  color: #c5f955;
}

.new-game-page .creation-path-title {
  font-size: 24px;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.new-game-page .creation-path--prompt {
  position: relative;
  overflow: hidden;
  border: 1px solid #45386c;
  border-radius: 26px;
  background:
    radial-gradient(circle at 90% 12%, rgba(197, 249, 85, 0.22), transparent 22%),
    linear-gradient(145deg, #241f3d, #3c2f63);
  box-shadow: 9px 11px 0 rgba(52, 36, 94, 0.17);
  color: #ffffff;
  padding: 32px 34px;
}

.new-game-page .creation-path--prompt::after {
  position: absolute;
  right: -48px;
  top: -58px;
  width: 150px;
  height: 150px;
  border: 2px dashed rgba(255, 143, 189, 0.55);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.new-game-page .creation-path--prompt-copy {
  position: relative;
  z-index: 1;
}

.new-game-page .creation-path--prompt .creation-path-title {
  color: #ffffff;
  font-size: 26px;
}

.new-game-page .creation-path--prompt .creation-path-subtitle {
  max-width: 520px;
  color: #d9d3ec;
}

/* Single-card page: the copy and its call to action read as one centered
   column rather than a two-column split. */
.new-game-page .creation-path--prompt-copy {
  text-align: center;
}

.new-game-page .creation-path--prompt .creation-path-subtitle {
  margin-inline: auto;
}

.new-game-page .creation-path--prompt .creation-path-cta {
  align-items: center;
}

.new-game-primary-cta {
  width: fit-content;
  border-radius: 999px;
  background: #ffd171;
  box-shadow: 5px 6px 0 rgba(20, 14, 46, 0.45);
  color: #3a2a10;
  padding: 16px 34px;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.01em;
  transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.new-game-primary-cta:hover {
  background: #ffdf9b;
  color: #3a2a10;
  transform: translateY(-2px);
  box-shadow: 6px 8px 0 rgba(20, 14, 46, 0.5);
}

.new-game-page .creation-or-divider {
  color: #8a87a5;
}

.new-game-page .creation-or-divider span::before {
  margin-right: 7px;
  color: #ff9cbd;
  content: "✦";
}

.new-game-page .creation-path--templates {
  border: 1px solid rgba(114, 85, 182, 0.35);
  border-radius: 26px;
  background:
    radial-gradient(circle at 7% 6%, rgba(255, 209, 113, 0.26), transparent 18%),
    linear-gradient(140deg, #f4efff, #fdf8ef 52%, #eefbf6);
  box-shadow: 10px 12px 0 rgba(77, 49, 128, 0.08);
  padding: 32px 34px;
}

.new-game-page .template-toolbar {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.new-game-page .template-search {
  width: min(360px, 100%);
  border: 1px solid #cbc4e2;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
  padding: 10px 16px;
  font-size: 14px;
}

.new-game-page .template-search:focus {
  border-color: #7255b6;
  outline: 2px solid rgba(114, 85, 182, 0.25);
  outline-offset: 1px;
}

.new-game-page .template-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.new-game-page .template-category-pill {
  border: 1px solid #cbc4e2;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: #4a3585;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}

.new-game-page .template-category-pill:hover {
  background: #eee7ff;
  transform: translateY(-1px);
}

.new-game-page .template-category-pill.is-active {
  border-color: #7255b6;
  background: #7255b6;
  color: #ffffff;
}

.new-game-page .template-family-options {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}

.new-game-page .template-option {
  border: 1px solid #d8d2e8;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.8);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.new-game-page .template-option[hidden] {
  display: none;
}

.new-game-page .template-option:hover {
  border-color: #8a6fc9;
  transform: translateY(-1px);
}

.new-game-page .template-empty {
  margin: 0;
  color: #6b6584;
  font-size: 14px;
}

.new-game-page .template-empty[hidden],
.new-game-page .template-pager[hidden] {
  display: none;
}

.new-game-page .template-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.new-game-page .template-pager-button {
  border: 1px solid #cbc4e2;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  color: #4a3585;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}

.new-game-page .template-pager-button:hover:not(:disabled) {
  background: #eee7ff;
  transform: translateY(-1px);
}

.new-game-page .template-pager-button:disabled {
  opacity: 0.45;
  cursor: default;
}

.new-game-page .template-pager-status {
  color: #6b6584;
  font-size: 12px;
  font-weight: 700;
}

.new-game-page .template-option:has(input:checked) {
  border-color: #7255b6;
  box-shadow: 3px 4px 0 rgba(77, 49, 128, 0.16);
  background: #ffffff;
}

.new-game-page .template-path-footer {
  border-top: 1px solid rgba(76, 61, 126, 0.2);
}

@media (max-width: 760px) {
  .new-game-page .creation-path--prompt,
  .new-game-page .creation-path--templates {
    border-radius: 20px;
    padding: 24px 20px;
  }
}

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  background: #ffffff;
  color: var(--ink);
}

.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

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

.form-error {
  margin-bottom: 16px;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 12px;
  background: #fff1f2;
  color: var(--danger);
}

.notice-banner {
  margin-bottom: 16px;
  border: 1px solid #99f6e4;
  border-radius: 6px;
  padding: 12px;
  background: #ecfdf5;
  color: var(--accent-strong);
}

/* Flash banners (notice/alert): dismissible ✕ aligned right; the flash
   Stimulus controller also auto-removes them after 15s. */
.flash-banner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.flash-banner-text { flex: 1 1 auto; min-width: 0; }
.flash-banner-dismiss {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
  padding: 0 2px;
}
.flash-banner-dismiss:hover { opacity: 1; }

.notice-banner--warning {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  color: var(--muted);
  padding: 8px 36px;
  font-size: 13px;
}

.notice-banner--warning form {
  margin: 0;
}

.notice-banner--warning .inline-link {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.notice-banner--warning .inline-link:hover {
  color: var(--ink);
}


.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ── conversational game setup chat ──────────────────────────────────────── */

/* remove studio-main padding when hosting the chat screen */
.studio-main:has(.setup-screen) {
  padding: 0;
}

.setup-screen {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 64px); /* 64px = studio-header */
  overflow: hidden;
  background: var(--page);
}

/* top bar */
.setup-topbar {
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  min-height: 60px;
  border-bottom: 1px solid rgba(135, 112, 205, 0.42);
  background:
    radial-gradient(circle at 86% 30%, rgba(255, 209, 113, 0.24), transparent 34%),
    linear-gradient(135deg, #25215e, #11656d);
  color: #ffffff;
  flex-shrink: 0;
}

.setup-topbar::after {
  position: absolute;
  right: 18%;
  top: -46px;
  width: 90px;
  height: 90px;
  border: 2px dashed rgba(255, 231, 157, 0.45);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.setup-topbar-info {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.setup-topbar-kicker {
  margin: 0;
}

.setup-topbar-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.setup-cancel {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  color: #ffffff;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: background 140ms ease, transform 140ms ease;
}

.setup-cancel:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}

/* scrollable thread */
.setup-thread {
  flex: 1;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.setup-thread-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 32px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.setup-conversation-messages {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* individual message */
.setup-msg {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* `.setup-msg` is a flex row, which would otherwise override the browser's
   default `[hidden]` display rule and expose the idle thinking indicator. */
.setup-msg[hidden] {
  display: none;
}

.setup-msg--user {
  flex-direction: row-reverse;
}

.setup-msg-avatar {
  width: 30px;
  height: 30px;
  border-radius: 11px 11px 11px 4px;
  background: linear-gradient(145deg, #241f3d, #3c2f63);
  color: #c5f955;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.setup-msg-body {
  max-width: 76%;
  font-size: 14px;
  line-height: 1.6;
}

.setup-msg-text {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* assistant messages: plain text, no bubble */
.setup-msg--assistant .setup-msg-body {
  color: var(--ink);
  padding-top: 4px;
}

/* user messages: filled bubble */
.setup-msg--user .setup-msg-body {
  background: linear-gradient(135deg, #7255b6, #4f68b8);
  color: #fff;
  padding: 10px 14px;
  border-radius: 16px;
  border-bottom-right-radius: 4px;
  box-shadow: 3px 4px 0 rgba(77, 49, 128, 0.14);
}

/* typing dots */
.setup-typing {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 0;
}

.setup-thinking-label {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.setup-typing span {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  animation: setup-dot 1.2s ease-in-out infinite;
}

.setup-typing span:nth-child(2) { animation-delay: 0.2s; }
.setup-typing span:nth-child(3) { animation-delay: 0.4s; }

.setup-composition-progress {
  margin: 0.9rem 0 1.2rem 3rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(114, 85, 182, 0.35);
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 6%, rgba(255, 209, 113, 0.24), transparent 22%),
    linear-gradient(140deg, #f4efff, #fdf8ef 60%, #eefbf6);
  box-shadow: 6px 7px 0 rgba(77, 49, 128, 0.08);
}

/* ── build animation: game blocks hopping while the AI works ─────────────── */
.setup-build-anim {
  align-items: flex-end;
  display: flex;
  gap: 12px;
  height: 46px;
  justify-content: center;
  margin-bottom: 0.6rem;
  padding-bottom: 8px;
  position: relative;
}

/* twinkling sparks beside the blocks */
.setup-build-anim::before,
.setup-build-anim::after {
  animation: setup-spark 1.8s ease-in-out infinite;
  background: #f2b23f;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  content: "";
  height: 9px;
  position: absolute;
  width: 9px;
}

.setup-build-anim::before { left: calc(50% - 58px); top: 6px; }
.setup-build-anim::after { animation-delay: 0.9s; right: calc(50% - 60px); top: 16px; }

.setup-build-cube {
  animation: setup-cube-hop 1.4s cubic-bezier(0.38, 0, 0.32, 1) infinite;
  border-radius: 4px;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18);
  height: 18px;
  position: relative;
  transform-origin: 50% 100%;
  width: 18px;
}

/* top-left face highlight for a chunky voxel read */
.setup-build-cube::before {
  background: rgba(255, 255, 255, 0.45);
  border-radius: 2px;
  content: "";
  inset: 2px 8px 8px 2px;
  position: absolute;
}

/* Ground shadow: counter-translates against the cube's hop (same duration,
   easing, and delay) so it stays on the floor and shrinks while airborne. */
.setup-build-cube::after {
  animation: setup-cube-shadow 1.4s cubic-bezier(0.38, 0, 0.32, 1) infinite;
  background: rgba(77, 49, 128, 0.28);
  border-radius: 50%;
  bottom: -8px;
  content: "";
  height: 4px;
  left: 6%;
  position: absolute;
  right: 6%;
}

.setup-build-cube--a { background: #51ddd0; }
.setup-build-cube--b { background: #8b6bd6; }
.setup-build-cube--c { background: #f2a13f; }

/* The purple-tinted ground shadow disappears on the dark card; deepen it. */
html[data-theme="dark"] .studio-workspace .setup-build-cube::after {
  background: rgba(0, 0, 0, 0.55);
}

.setup-build-cube--b,
.setup-build-cube--b::after { animation-delay: 0.18s; }
.setup-build-cube--c,
.setup-build-cube--c::after { animation-delay: 0.36s; }

@keyframes setup-cube-hop {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1, 1); }
  12% { transform: translateY(0) rotate(0deg) scale(1.16, 0.82); }
  42% { transform: translateY(-16px) rotate(9deg) scale(0.92, 1.1); }
  54% { transform: translateY(-15px) rotate(-5deg) scale(0.96, 1.05); }
  74% { transform: translateY(0) rotate(0deg) scale(1.14, 0.84); }
  88% { transform: translateY(0) rotate(0deg) scale(1, 1); }
}

@keyframes setup-cube-shadow {
  0%, 12%, 74%, 88%, 100% { opacity: 0.55; transform: translateY(0) scaleX(1); }
  42% { opacity: 0.22; transform: translateY(16px) scaleX(0.5); }
  54% { opacity: 0.26; transform: translateY(15px) scaleX(0.55); }
}

@keyframes setup-spark {
  0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
  .setup-build-cube,
  .setup-build-cube::after,
  .setup-build-anim::before,
  .setup-build-anim::after { animation: none; }
}

.setup-composition-progress-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.setup-composition-progress-heading strong,
.setup-composition-stage strong {
  display: block;
}

.setup-composition-stages {
  display: grid;
  gap: 0.7rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.setup-composition-stage {
  display: grid;
  grid-template-columns: 0.75rem 1fr;
  gap: 0.65rem;
  align-items: start;
  color: var(--muted);
}

/* Pending stages are progressively revealed as they activate; the class's
   display:grid would otherwise defeat the hidden attribute. */
.setup-composition-stage[hidden] {
  display: none;
}

.setup-composition-stage > span {
  width: 0.65rem;
  height: 0.65rem;
  margin-top: 0.3rem;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.setup-composition-stage p {
  margin: 0.18rem 0 0;
  font-size: 0.82rem;
}

.setup-composition-stage--completed { color: var(--ink); }
.setup-composition-stage--completed > span { border-color: #7255b6; background: #7255b6; }
.setup-composition-stage--running { color: var(--ink); }
.setup-composition-stage--running > span { border-color: #7255b6; background: #7255b6; box-shadow: 0 0 0 4px rgba(114, 85, 182, 0.22); }

.setup-composition-events {
  display: grid;
  gap: 0.45rem;
  margin: 1rem 0 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.setup-composition-events li {
  display: grid;
  grid-template-columns: 4.8rem 1fr;
  gap: 0.55rem;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.setup-composition-events time {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

@keyframes setup-dot {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.35; }
  30%            { transform: translateY(-5px); opacity: 1;    }
}

/* done CTA */
.setup-done-cta {
  padding-top: 8px;
}

/* input bar */
.setup-input-bar {
  flex-shrink: 0;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 12px 16px 14px;
}

.setup-genre-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 680px;
  margin: 8px auto 0;
}

/* Options toolbar under the setup prompt: uniform tool buttons over one
   shared panel frame, so every option reads and behaves the same way. */
.setup-toolbar-shell {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
}

.setup-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.setup-tool {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  border: 1px solid #2f363d;
  border-radius: 999px;
  background: rgba(14, 20, 26, 0.75);
  color: #c7d0d9;
  padding: 0 13px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.setup-tool:hover {
  border-color: #4a5560;
  color: #f3f6f6;
}

.setup-tool.is-active {
  border-color: var(--setup-tool-accent, #2dd4bf);
  background: color-mix(in srgb, var(--setup-tool-accent, #2dd4bf) 16%, rgba(14, 20, 26, 0.75));
  color: #f3f6f6;
}

.setup-tool-icon { font-size: 13px; }

/* An explicit display beats the user-agent's [hidden] rule, so the Clear
   button and the attachment badge both showed while still marked hidden. */
.setup-tool[hidden],
.setup-tool-badge[hidden] { display: none; }

.setup-tool-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  border-radius: 999px;
  background: var(--setup-tool-accent, #2dd4bf);
  color: #06211f;
  padding: 0 5px;
  font-size: 10.5px;
  font-weight: 800;
}

/* Sits with the rest of the tools now that the row is centred, set apart by
   tone rather than position. */
.setup-tool--clear { color: #93a3a7; }

.setup-tool-panel {
  display: grid;
  gap: 10px;
  border: 1px solid #2f363d;
  border-radius: 10px;
  background: rgba(14, 20, 26, 0.6);
  padding: 12px 14px;
}

.setup-tool-panel[hidden] { display: none; }

.setup-tool-caption {
  margin: 0;
  color: #93a3a7;
  font-size: 12px;
  line-height: 1.5;
}

.setup-tool-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.setup-tool-option {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #2f363d;
  border-radius: 999px;
  background: rgba(20, 27, 34, 0.8);
  color: #c7d0d9;
  padding: 6px 12px;
  font-size: 12.5px;
  cursor: pointer;
}

.setup-tool-option:hover { border-color: #4a5560; }

.setup-attach-input {
  color: #93a3a7;
  font-size: 12px;
}

/* The native control is the odd one out in this panel; restyle its button to
   match the toolbar's pills. */
.setup-attach-input::file-selector-button {
  margin-right: 10px;
  border: 1px solid #2f363d;
  border-radius: 999px;
  background: rgba(20, 27, 34, 0.9);
  color: #c7d0d9;
  padding: 6px 13px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.setup-attach-input::file-selector-button:hover {
  border-color: #4a5560;
  color: #f3f6f6;
}

.setup-asset-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
  list-style: none;
}

.setup-asset-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1.4fr);
  align-items: center;
  gap: 8px;
}

.setup-asset-name {
  min-width: 0;
  overflow: hidden;
  color: #e6ecef;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setup-asset-usage,
.setup-asset-note {
  border: 1px solid #31414a;
  border-radius: 7px;
  background: #0e141a;
  color: #e6ecef;
  padding: 6px 8px;
  font-size: 12px;
}

@media (max-width: 720px) {
  .setup-asset-row { grid-template-columns: 1fr; }
}

.setup-genre-label {
  max-width: 680px;
  margin: 24px auto 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
}

.setup-genre-chip {
  border: 1px solid #cbc4e2;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: #4a3585;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.setup-genre-chip:hover {
  border-color: #7255b6;
  background: #eee7ff;
  transform: translateY(-1px);
}

.setup-genre-chip--clear {
  border-color: var(--line);
  color: var(--muted);
}

.setup-genre-chip--clear:hover {
  border-color: var(--danger);
  background: #fdf0f0;
  color: var(--danger);
}

.setup-genre-chip[hidden] {
  display: none;
}

.setup-input-wrap {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--surface);
  border: 1.5px solid #d8d2e8;
  border-radius: 18px;
  padding: 6px 6px 6px 16px;
  box-shadow: 4px 5px 0 rgba(77, 49, 128, 0.08);
  transition: border-color 0.12s, box-shadow 0.12s;
}

.setup-input-wrap form {
  align-items: flex-end;
  display: flex;
  flex: 1;
  gap: 8px;
}

.setup-input-wrap:focus-within {
  border-color: #7255b6;
  box-shadow: 4px 5px 0 rgba(77, 49, 128, 0.16);
}

.setup-meshy-options {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin: 6px auto 0;
  max-width: 680px;
  padding: 0 6px;
}

.setup-meshy-caption {
  color: var(--muted);
  flex: 1 1 100%;
  font-size: 11px;
  line-height: 1.3;
}

.setup-meshy-option {
  align-items: center;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  font-size: 11px;
  gap: 5px;
  line-height: 1.2;
  padding: 4px 2px;
}

.setup-meshy-option input {
  accent-color: var(--accent);
  flex: 0 0 auto;
  margin: 0;
}

.setup-input-field {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 5px 0;
  font-size: 14px;
  line-height: 1.55;
  /* Drag-to-grow: a game description is often several sentences, and the
     box should not fight the person writing one. */
  resize: vertical;
  color: var(--ink);
  font-family: inherit;
  min-height: 124px;
  max-height: 420px;
  overflow-y: auto;
}

.setup-input-field::placeholder {
  color: var(--muted);
}

.setup-input-field:focus {
  outline: none;
}

.setup-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 0;
  background: #ffd171;
  color: #3a2a10;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s, opacity 0.12s, transform 0.12s;
}

.setup-send-btn:hover {
  background: #ffdf9b;
  transform: translateY(-1px);
}

.setup-send-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Sits between the prompt box and the toolbar as a hint on the input. */
.setup-input-hint {
  max-width: 680px;
  margin: 8px auto 0;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

.setup-input-hint a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── creation path CTA (prompt path replaced by link to setup) ───────────── */

.creation-path-cta {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.studio-panel,
.history-panel,
.preview-panel {
  display: grid;
  gap: 18px;
  margin-bottom: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 20px;
}

.studio-panel {
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
}

.studio-panel p {
  color: var(--muted);
  line-height: 1.5;
}

.preview-panel iframe {
  width: 100%;
  height: min(680px, 72vh);
  min-height: 420px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #111827;
}

.prompt-form {
  display: grid;
  gap: 12px;
}

.prompt-form textarea {
  min-height: 118px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
}

.prompt-form .primary-button {
  justify-self: end;
}

.inline-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 16px;
}

.inline-empty p {
  margin: 0;
  color: var(--muted);
}

.inline-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.inline-actions form {
  margin: 0;
}

.server-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.server-actions form {
  margin: 0;
}

.server-scale-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.server-scale-form select {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 10px;
  background: #ffffff;
  color: var(--ink);
}

.path-pill {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 10px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blueprint-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
}

.blueprint-summary {
  align-self: start;
  padding: 18px;
}

.blueprint-summary dl {
  display: grid;
  gap: 14px;
  margin: 18px 0 0;
}

.blueprint-summary dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.blueprint-summary dd {
  margin: 4px 0 0;
  font-weight: 700;
}

.layer-list {
  display: grid;
  gap: 14px;
}

.layer-row {
  padding: 16px;
  overflow: hidden;
}

.layer-row-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.layer-row pre {
  overflow: auto;
  margin: 0;
  border-radius: 6px;
  padding: 14px;
  background: #111827;
  color: #f8fafc;
  font-size: 13px;
  line-height: 1.45;
}

.capability-list {
  display: grid;
  gap: 14px;
  margin: 0;
}

.capability-list dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.capability-list dd {
  margin: 4px 0 0;
}

.text-separator {
  color: var(--muted);
  margin: 0 6px;
}

.history-list {
  display: grid;
  gap: 12px;
}

.insight-list {
  display: grid;
  gap: 10px;
}

.insight-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.insight-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.insight-row p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.assignment-list {
  display: grid;
  gap: 10px;
}

.preview-signal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.preview-signal-grid > div {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  background: #f8fafc;
}

.preview-signal-grid strong {
  display: block;
  margin-top: 4px;
  font-size: 18px;
}

.runtime-status-grid strong {
  font-variant-numeric: tabular-nums;
}

.tool-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.layer-verification > div:first-child {
  flex: 1;
}

.layer-verification-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.layer-verification-item {
  display: grid;
  align-content: start;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  background: #f8fafc;
}

.layer-verification-item p {
  margin: 0;
}

.assignment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.assignment-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.assignment-row p {
  margin: 4px 0 0;
  color: var(--muted);
}

.section-action-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.section-action-row form {
  margin: 0;
}

.compact-member-list {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.compact-member-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
}

.generated-file-list {
  display: grid;
  gap: 6px;
  margin-top: 16px;
}

.generated-file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
  color: var(--muted);
  font-size: 13px;
}

.generated-file-row code {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-item {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.history-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.history-item h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.history-item p {
  margin-bottom: 8px;
  color: var(--muted);
  line-height: 1.5;
}

.tool-chip {
  display: inline-flex;
  margin: 4px 6px 0 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 700;
}

/* The editor shell's layout and chrome are owned by the Tailwind design
   system (app/assets/tailwind/application.css). Only rules with no Tailwind
   counterpart may live here — unlayered rules beat @layer rules regardless
   of load order, so a duplicate here silently overrides the design system. */

.toolbar-menu summary,
.editor-section summary {
  cursor: pointer;
  list-style: none;
}

.toolbar-menu summary::-webkit-details-marker,
.editor-section summary::-webkit-details-marker {
  display: none;
}

.toolbar-menu-panel form,
.toolbar-menu-panel .button_to {
  margin: 0;
}

.toolbar-form {
  display: flex;
  align-items: center;
  gap: 10px;
}

.toolbar-form.stacked {
  display: grid;
  align-items: stretch;
}

.toolbar-form select {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 10px;
  background: #ffffff;
  color: var(--ink);
}

.editor-flash-row {
  display: grid;
  gap: 8px;
  border-bottom: 1px solid #3b3d40;
  background: #2f3135;
  padding: 10px 14px;
}

.editor-flash-row .notice-banner,
.editor-flash-row .form-error {
  margin: 0;
}

.editor-section {
  display: grid;
  gap: 12px;
  border: 1px solid #d0cec6;
  border-radius: 8px;
  background: #fbfbf8;
  padding: 12px;
  color: var(--ink);
}

.editor-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.editor-section summary h2 {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-section summary::after {
  color: var(--muted);
  content: "Show";
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.editor-section[open] summary::after {
  content: "Hide";
}

.editor-section[open] {
  align-content: start;
}

.game-editor-shell .history-panel,
.game-editor-shell .studio-panel,
.game-editor-shell .preview-panel {
  margin-bottom: 0;
}

.editor-preview-panel {
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  border-color: #404247;
  background: #111214;
  color: #f7f7f5;
  padding: 10px;
}

.editor-preview-panel .panel-heading {
  border-bottom-color: #303236;
  padding: 0 2px 10px;
}

.editor-preview-panel .panel-heading p {
  margin: 4px 0 0;
  color: #b9bdc3;
}

.editor-preview-panel iframe {
  width: 100%;
  height: 100%;
  min-height: 520px;
  border-color: #303236;
  background: #0a0b0d;
}

.preview-drawer,
.blueprint-drawer {
  max-height: 34vh;
  overflow: auto;
}

.compact-prompt-form textarea {
  min-height: 150px;
}

.compact-muted {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.full-width-button {
  width: 100%;
}

.compact-link,
.compact-link.secondary-button,
.compact-link.secondary-link {
  min-height: 34px;
  padding: 0 10px;
  font-size: 12px;
}

.compact-row {
  align-items: flex-start;
  gap: 10px;
}

.compact-row strong,
.compact-row p {
  word-break: break-word;
}

.compact-signal-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compact-signal-grid > div {
  padding: 10px;
}

.single-column {
  grid-template-columns: 1fr;
}

.compact-compatibility-row {
  grid-template-columns: 1fr;
}

.compact-empty {
  align-items: stretch;
  flex-direction: column;
}

.compact-generated-list {
  max-height: 260px;
  overflow: auto;
}

.editor-blueprint-layout {
  grid-template-columns: 220px minmax(0, 1fr);
}

.vertical-actions {
  align-items: stretch;
  flex-direction: column;
}

.server-scale-form.stacked {
  align-items: stretch;
  flex-direction: column;
}

.game-editor-shell .pill {
  background: rgba(255, 255, 255, 0.66);
}

.editor-topbar .pill,
.editor-preview-panel .pill {
  border-color: #50545a;
  background: #303337;
  color: #dfe4e7;
}

@media (max-width: 760px) {
  .kenney-collection-grid {
    grid-template-columns: 1fr;
  }

  .marketing-hero {
    min-height: 700px;
  }

  .marketing-header,
  .marketing-hero-copy,
  .marketing-hero-footer,
  .marketing-proof,
  .marketing-game-types,
  .marketing-build-path,
  .marketplace-hero-copy,
  .marketplace-catalog,
  .marketplace-creator-cta,
  .marketing-page-hero-copy,
  .how-it-works-overview,
  .how-it-works-steps,
  .marketing-page-cta,
  .pricing-hero-copy,
  .pricing-plans,
  .pricing-faq,
  .marketing-footer-inner,
  .marketing-cta {
    width: min(100% - 40px, 1120px);
  }

  .marketing-header {
    padding: 18px 0;
  }

  .marketing-actions {
    gap: 12px;
  }

  .marketing-brand .fusionery-logo {
    width: 124px;
  }

  .marketing-brand .fusion-castle-logo {
    width: 148px;
  }

  .marketplace-header {
    margin-top: 12px;
    padding: 10px 12px;
  }

  .marketing-nav {
    display: none;
  }

  .marketing-login,
  .marketing-signup {
    min-height: 38px;
    font-size: 13px;
  }

  .marketing-signup {
    padding: 0 11px;
  }

  .marketing-hero-copy {
    padding: 72px 0 92px;
  }

  .marketing-hero-copy h1 {
    font-size: 42px;
  }

  .marketplace-hero {
    min-height: 540px;
  }

  .marketplace-hero-copy {
    margin-top: 64px;
    padding-bottom: 58px;
  }

  .marketplace-hero-copy h1 {
    font-size: 38px;
  }

  .marketplace-hero-copy > p:not(.marketing-kicker) {
    font-size: 16px;
  }

  .marketplace-hero-markers {
    margin-top: 26px;
  }

  .marketplace-hero-markers span {
    font-size: 10px;
  }

  .marketing-page-hero {
    min-height: 520px;
  }

  .marketing-page-hero-copy {
    margin-top: 74px;
  }

  .marketing-page-hero-copy h1,
  .pricing-hero-copy h1 {
    font-size: 38px;
  }

  .marketing-page-hero-copy > p:not(.marketing-kicker),
  .pricing-hero-copy > p:not(.marketing-kicker) {
    font-size: 16px;
  }

  .pricing-hero {
    min-height: 420px;
  }

  .pricing-hero-copy {
    margin-top: 70px;
    padding-bottom: 64px;
  }

  .legal-hero-copy,
  .legal-index,
  .legal-document,
  .developers-hero-copy,
  .developers-overview,
  .developers-grid,
  .developers-comparison,
  .developers-note {
    width: min(100% - 40px, 1120px);
  }

  .legal-hero {
    min-height: 340px;
  }

  .legal-hero-copy {
    margin-top: 58px;
    padding-bottom: 52px;
  }

  .legal-hero-copy h1 {
    font-size: 37px;
  }

  .legal-index,
  .legal-document {
    padding: 72px 0;
  }

  .legal-index-heading h2 {
    font-size: 34px;
  }

  .legal-index-grid {
    grid-template-columns: 1fr;
  }

  .legal-index-grid article {
    min-height: 0;
  }

  .developers-hero {
    min-height: 390px;
  }

  .developers-hero-copy {
    margin-top: 64px;
    padding-bottom: 58px;
  }

  .developers-hero-copy h1 {
    font-size: 38px;
  }

  .developers-hero-copy > p:not(.marketing-kicker) {
    font-size: 16px;
  }

  .developers-overview {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 72px 0 48px;
  }

  .developers-overview h2,
  .developers-note h2 {
    font-size: 34px;
  }

  .developers-grid {
    grid-template-columns: 1fr;
    padding-bottom: 72px;
  }

  .developers-comparison {
    padding-bottom: 72px;
  }

  .developers-comparison-grid {
    grid-template-columns: 1fr;
  }

  .developers-grid article {
    min-height: 0;
  }

  .developers-note {
    margin-bottom: 72px;
    padding-top: 48px;
  }

  .marketing-hero-copy > p:not(.marketing-kicker) {
    font-size: 17px;
  }

  .marketing-hero-footer {
    flex-wrap: wrap;
    gap: 10px 18px;
  }

  .marketing-proof {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 68px 0;
  }

  .marketplace-catalog {
    padding: 72px 0;
  }

  .how-it-works-overview,
  .pricing-faq {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 72px 0 48px;
  }

  .how-it-works-steps article {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 32px 0;
  }

  .how-it-works-steps h2,
  .how-it-works-steps h3 {
    font-size: 25px;
  }

  .how-it-works-steps ul {
    margin-top: 4px;
  }

  .how-it-works-systems {
    grid-template-columns: 1fr;
    gap: 34px;
    margin-top: 72px;
    padding: 72px 20px;
  }

  .how-it-works-system-grid,
  .pricing-included-grid {
    grid-template-columns: 1fr;
  }

  .how-it-works-system-grid article {
    min-height: 0;
  }

  .marketing-page-cta {
    align-items: flex-start;
    flex-direction: column;
    padding: 56px 0 64px;
  }

  .pricing-plans {
    padding: 72px 0;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .pricing-card {
    min-height: 0;
    padding: 26px;
  }

  .pricing-card-summary {
    min-height: 0;
  }

  .pricing-card ul {
    margin-bottom: 30px;
  }

  .pricing-included {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 72px 20px;
  }

  .pricing-usage {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 72px 20px;
  }

  .pricing-usage h2 {
    font-size: 34px;
  }

  .pricing-usage-details {
    grid-template-columns: 1fr;
  }

  .pricing-usage-details article,
  .pricing-usage-details article:first-child {
    border-right: 1px solid #526c6b;
    border-left: 1px solid #526c6b;
  }

  .pricing-usage-footnote {
    grid-column: auto;
    margin: -10px 0 0;
  }

  .pricing-comparison {
    width: min(100% - 40px, 1120px);
    padding: 72px 0;
  }

  .pricing-comparison-heading {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 28px;
  }

  .pricing-comparison-heading h2 {
    font-size: 34px;
  }

  .pricing-comparison-table-wrap {
    margin-right: -20px;
  }

  .pricing-included-grid article,
  .pricing-included-grid article:first-child {
    border-right: 1px solid #aabfbc;
    border-left: 1px solid #aabfbc;
  }

  .pricing-faq {
    padding: 72px 0;
  }

  .marketing-footer-inner {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 30px 0;
  }

  .marketing-footer-tagline {
    text-align: left;
  }

  .marketplace-section-heading {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 28px;
  }

  .marketplace-section-heading h2,
  .marketplace-explainer h2,
  .marketplace-creator-cta h2 {
    font-size: 31px;
  }

  .marketplace-game-grid {
    grid-template-columns: 1fr;
  }

  .marketplace-game-card {
    min-height: 0;
    padding: 24px;
  }

  .marketplace-game-card h3 {
    font-size: 23px;
  }

  .marketplace-catalog::before {
    margin-bottom: 20px;
  }

  .marketing-game-types,
  .marketing-build-path {
    padding: 72px 0;
  }

  .marketing-game-types {
    padding-top: 4px;
  }

  .marketing-game-types-heading,
  .marketing-build-path-heading {
    margin-bottom: 28px;
  }

  .marketing-game-types-heading h2,
  .marketing-build-path-heading h2,
  .marketing-composition h2 {
    font-size: 31px;
  }

  .marketing-game-grid,
  .marketing-build-outputs,
  .marketing-building-blocks {
    grid-template-columns: 1fr;
  }

  .marketing-game-card {
    min-height: 0;
    padding: 24px;
  }

  .marketing-game-card h3 {
    font-size: 23px;
  }

  .marketing-game-card ul {
    margin-top: 28px;
  }

  .marketing-composition {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 72px 20px;
  }

  .marketplace-explainer {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 72px 20px;
  }

  .marketplace-creator-cta {
    align-items: flex-start;
    flex-direction: column;
    padding: 56px 0 64px;
  }

  .marketing-building-blocks article {
    min-height: 0;
  }

  .marketing-build-outputs article,
  .marketing-build-outputs article:first-child {
    min-height: 0;
    border-right: 1px solid #c7d3d1;
    border-left: 1px solid #c7d3d1;
  }

  .marketing-platform {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 68px 20px;
  }

  .marketing-marketplace {
    grid-template-columns: 1fr;
    gap: 38px;
    width: min(100% - 40px, 1120px);
    padding: 72px 0;
  }

  .marketing-platform h2 {
    font-size: 31px;
  }

  .marketing-marketplace-copy h2 {
    font-size: 31px;
  }

  .marketing-platform-stages article {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .marketing-platform-stages span {
    grid-row: auto;
  }

  .marketing-section-heading h2,
  .marketing-cta h2 {
    font-size: 31px;
  }

  .marketing-cta {
    align-items: flex-start;
    flex-direction: column;
    padding: 48px 0 64px;
  }

  .auth-shell {
    display: block;
    min-height: 100vh;
  }

  .auth-visual {
    min-height: 220px;
  }

  .auth-visual-copy {
    bottom: 28px;
    left: 24px;
    max-width: 300px;
    gap: 4px;
  }

  .auth-visual-copy strong {
    display: none;
  }

  .auth-content {
    display: block;
    padding: 30px 20px 48px;
  }

  .auth-brand,
  .auth-panel {
    width: 100%;
  }

  .auth-panel h1 {
    font-size: 30px;
  }

  .studio-shell {
    display: block;
  }

  .studio-sidebar {
    position: static;
    display: grid;
    height: auto;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    border-right: 0;
    border-bottom: 1px solid #343b3f;
    padding: 12px 16px;
  }

  .studio-nav {
    display: flex;
    justify-content: flex-end;
    gap: 2px;
    margin: 0;
  }

  .studio-nav-link {
    min-height: 32px;
    border-left: 0;
    border-bottom: 2px solid transparent;
    padding: 0 8px;
    font-size: 12px;
  }

  .studio-nav-link.is-active {
    border-left-color: transparent;
    border-bottom-color: #33c4b5;
  }

  .studio-sidebar-footer {
    display: block;
    grid-column: 1 / -1;
    margin-top: 0;
    padding: 12px 0 0;
  }

  .studio-sidebar-feedback {
    min-height: 34px;
  }

  .studio-header {
    min-height: 54px;
    padding: 8px 16px;
  }

  .studio-main {
    padding: 24px 20px 36px;
  }

  .account-summary dl div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    padding: 18px;
  }

  .nav-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    margin-top: 18px;
    overflow-x: auto;
  }

  .nav-item {
    text-align: center;
    white-space: nowrap;
  }

  .workspace {
    padding: 20px;
  }

  .topbar,
  .panel-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  h1 {
    font-size: 28px;
  }

  .status-grid {
    grid-template-columns: 1fr;
  }

  .page-header,
  .header-actions,
  .record-row,
  .form-actions,
  .inline-empty,
  .inline-actions,
  .server-actions,
  .insight-row,
  .assignment-row {
    align-items: stretch;
    flex-direction: column;
  }

  .asset-grid {
    grid-template-columns: 1fr;
  }

  .blueprint-layout {
    grid-template-columns: 1fr;
  }

  .studio-panel {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .template-family-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .preview-signal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .layer-verification-grid {
    grid-template-columns: 1fr;
  }
}

/* Edit mode uses the same Godot Web render as play, but the runtime runs with
   its explicit non-playing editor contract. There is no schematic fallback. */

.play-shell-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.editor-runtime-frame-wrap {
  position: relative;
  overflow: hidden;
  background: #000;
}

.editor-runtime-frame {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.game-element-blueprint-thumbnail {
  display: grid;
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 132px;
  place-items: center;
  align-content: center;
  gap: 5px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 34%, rgba(106, 224, 255, 0.34), transparent 35%), linear-gradient(135deg, #10213d, #233f5e);
  color: #d8f5ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.game-element-blueprint-thumbnail::before,
.game-element-blueprint-thumbnail::after {
  position: absolute;
  width: 180px;
  height: 1px;
  background: rgba(151, 224, 255, 0.22);
  content: "";
  transform: rotate(-31deg);
}

.game-element-blueprint-thumbnail::after { transform: rotate(31deg); }
.game-element-blueprint-thumbnail > span, .game-element-blueprint-thumbnail small { position: relative; z-index: 1; }
.game-element-blueprint-mark { display: grid; width: 42px; height: 42px; place-items: center; border: 2px solid #9de4ff; border-radius: 12px; background: rgba(7, 19, 37, 0.72); box-shadow: 0 0 0 5px rgba(98, 195, 255, 0.12); color: #fff3a9; font-size: 20px; }
.game-element-blueprint-thumbnail small { color: #9fc4d6; font-size: 9px; letter-spacing: 0.05em; }

.editor-runtime-empty { display: grid; place-content: center; justify-items: center; gap: 14px; padding: 32px; color: #d7e8f7; text-align: center; }
.editor-runtime-empty h2, .editor-runtime-empty p { max-width: 520px; margin: 0; }

.editor-selection-panel {
  display: grid;
  gap: 8px;
  border: 1px solid #c9d8e6;
  border-radius: 9px;
  background: #f6fbff;
  padding: 12px;
}

.editor-selection-panel > div { display: grid; gap: 2px; }
.editor-selection-panel .status-label { color: #46647f; }
.editor-selection-panel strong { color: #102d47; }
.editor-selection-panel p { margin: 0; color: #5c7185; font-size: 13px; line-height: 1.45; }
.editor-selection-panel .editor-spatial-scope { padding: 8px; border-radius: 7px; background: #e9f5fb; color: #315c78; font-size: 12px; }
.editor-selection-panel dl { display: grid; gap: 8px; margin: 0; }
.editor-selection-panel dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.editor-selection-panel dt { color: #617689; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.editor-selection-panel dd { margin: 0; color: #173d5d; font-size: 12px; font-weight: 700; text-align: right; }
.editor-transform-form { display: grid; gap: 10px; margin-top: 4px; padding-top: 10px; border-top: 1px solid #d8e4ec; }
.editor-transform-form fieldset { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.editor-transform-form legend { color: #173d5d; font-size: 12px; font-weight: 800; }
.editor-transform-modes { display: flex; gap: 5px; }
.editor-transform-modes button { flex: 1; border: 1px solid #c8d8e6; border-radius: 7px; background: #fff; color: #46647f; cursor: pointer; font: inherit; font-size: 10px; font-weight: 800; letter-spacing: .03em; padding: 6px 4px; text-transform: uppercase; }
.editor-transform-modes button.is-active { border-color: #2b92c5; background: #e2f7ff; color: #116087; }
.editor-transform-modes button:disabled { cursor: not-allowed; opacity: .5; }
.editor-transform-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.editor-transform-grid label { display: grid; gap: 3px; color: #617689; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.editor-transform-grid input { width: 100%; min-width: 0; padding: 6px; border: 1px solid #c8d8e6; border-radius: 7px; color: #173d5d; font: inherit; font-size: 12px; text-transform: none; }
.editor-transform-form .secondary-button { justify-self: start; }
.editor-scene-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.editor-create-form,
.editor-selected-asset-form {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
}
.editor-create-form label,
.editor-selected-asset-form label {
  display: grid;
  gap: 4px;
  color: var(--ink-muted);
  font-size: 0.8rem;
  font-weight: 700;
}
.editor-transform-status { min-height: 18px; color: #46647f; font-size: 12px; }

/* The play surfaces give the game every available pixel: a slim header bar,
   then the frame fills the rest of the viewport edge to edge. */
.play-shell { display: flex; flex-direction: column; height: 100dvh; padding: 0; background: #071325; }
.play-shell-header { flex: none; max-width: none; margin: 0; padding: 10px 16px; border-bottom: 1px solid rgba(163, 222, 255, 0.16); background: #0a1a30; color: #edf8ff; }
.play-shell-title { display: flex; min-width: 0; align-items: center; gap: 10px; }
.play-shell-title .status-label { color: #8ed7ff; }
.play-shell-header h1 { overflow: hidden; margin: 0; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.play-shell-header p { margin: 0; color: #a8c4d8; }
.play-shell-back-link {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px 0 10px;
  border: 1px solid rgba(193, 231, 255, 0.48);
  border-radius: 8px;
  background: rgba(236, 249, 255, 0.12);
  color: #f4fbff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}
.play-shell-back-link-icon { width: 16px; height: 16px; }
.play-shell-back-link:hover {
  border-color: #bcecff;
  background: rgba(122, 212, 255, 0.26);
  color: #ffffff;
  transform: translateX(-1px);
}
.play-shell-back-link:focus-visible {
  outline: 3px solid #78dfff;
  outline-offset: 3px;
}
html[data-theme="dark"] .play-shell-back-link {
  border-color: rgba(162, 227, 255, 0.58);
  background: rgba(71, 162, 207, 0.2);
  color: #f5fcff;
}
html[data-theme="dark"] .play-shell-back-link:hover {
  border-color: #d1f2ff;
  background: rgba(106, 205, 247, 0.32);
}
.play-runtime-frame-wrap { position: relative; flex: 1; min-height: 0; background: #000; }
.play-runtime-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-height: 0; margin: 0; border: 0; border-radius: 0; background: #000; }
.play-empty-state { max-width: 560px; margin: 12vh auto; align-self: center; padding: 28px; border-radius: 16px; background: #10213d; color: #eef7ff; text-align: center; }

@media (max-width: 760px) {
  .play-shell-header { align-items: flex-start; flex-direction: column; gap: 6px; }
}

/* Pricing benefits are a connected path, not another comparison table. */
.pricing-benefits {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 91% 15%, rgba(255, 202, 108, 0.24), transparent 19%),
    radial-gradient(circle at 7% 82%, rgba(89, 225, 202, 0.2), transparent 19%),
    linear-gradient(128deg, #30205e, #12666d);
  color: #ffffff;
  padding: 104px max(32px, calc((100% - 1120px) / 2));
}

.pricing-benefits::before {
  position: absolute;
  z-index: -1;
  top: -54px;
  right: 7%;
  width: 160px;
  height: 160px;
  border: 2px dashed rgba(255, 232, 157, 0.56);
  border-radius: 50%;
  content: "";
  transform: rotate(18deg);
}

.pricing-benefits-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: end;
  gap: 64px;
  margin-bottom: 42px;
}

.pricing-benefits .marketing-kicker { color: #9bf2de; }

.pricing-benefits h2 {
  max-width: 520px;
  margin: 0;
  color: #ffffff;
  font-size: 42px;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.pricing-benefits-heading > p:not(.marketing-kicker) {
  max-width: 570px;
  margin: 0;
  color: #d1e3e1;
  line-height: 1.6;
}

.pricing-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(236, 255, 249, 0.3);
}

.pricing-benefit-grid article {
  position: relative;
  min-height: 224px;
  border-right: 1px solid rgba(236, 255, 249, 0.3);
  border-bottom: 1px solid rgba(236, 255, 249, 0.3);
  padding: 31px 30px 28px;
}

.pricing-benefit-grid article:first-child { border-left: 1px solid rgba(236, 255, 249, 0.3); }

.pricing-benefit-grid article > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: #ffda74;
  box-shadow: 0 0 0 5px rgba(255, 218, 116, 0.13);
  color: #3c285b;
  font-size: 21px;
  font-weight: 900;
}

.pricing-benefit-grid article:nth-child(2) > span { background: #9bf1df; }
.pricing-benefit-grid article:nth-child(3) > span { background: #f7a3c5; }

.pricing-benefit-grid h3 {
  margin: 24px 0 0;
  color: #ffffff;
  font-size: 21px;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.pricing-benefit-grid p {
  margin: 12px 0 0;
  color: #d1e3e1;
  line-height: 1.55;
}

/* The underlying engine deserves a clear place in the creation story. */
.how-it-works-godot {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 64px;
  width: min(1120px, calc(100% - 64px));
  margin: 48px auto 76px;
  padding: 104px 0;
}

.how-it-works-godot::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: calc((100vw - 100%) / -2);
  bottom: 0;
  left: calc((100vw - 100%) / -2);
  border-top: 1px solid rgba(123, 95, 194, 0.16);
  border-bottom: 1px solid rgba(123, 95, 194, 0.16);
  background:
    radial-gradient(circle at 12% 25%, rgba(255, 211, 113, 0.32), transparent 18%),
    radial-gradient(circle at 84% 72%, rgba(108, 223, 203, 0.25), transparent 23%),
    linear-gradient(115deg, #f4efff 0%, #f9f5ff 48%, #ebfbf7 100%);
  content: "";
}

.how-it-works-godot > * {
  position: relative;
  z-index: 1;
}

.how-it-works-godot-intro h2 {
  max-width: 510px;
  margin: 0;
  color: #20224e;
  font-size: 42px;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.how-it-works-godot-intro > p:not(.marketing-kicker) {
  max-width: 520px;
  margin: 20px 0 0;
  color: #536072;
  line-height: 1.6;
}

.how-it-works-godot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 26px;
}

.how-it-works-godot-links a {
  display: inline-flex;
  align-items: center;
  border: 1px solid #9a86dc;
  border-radius: 999px;
  background: #f7f4ff;
  color: #58418e;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.how-it-works-godot-links a::after { content: "↗"; margin-left: 6px; }

.how-it-works-godot-links a:hover {
  border-color: #7255b6;
  background: #eee7ff;
  color: #412d78;
}

.how-it-works-godot-project {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(135, 112, 205, 0.42);
  border-radius: 26px;
  background:
    radial-gradient(circle at 91% 12%, rgba(255, 211, 113, 0.3), transparent 19%),
    linear-gradient(145deg, #2d215c, #166a72);
  box-shadow: 11px 13px 0 rgba(83, 57, 134, 0.14);
  color: #ffffff;
  padding: 30px;
}

.how-it-works-godot-project::before {
  position: absolute;
  right: -56px;
  bottom: -58px;
  width: 180px;
  height: 180px;
  border: 2px dashed rgba(255, 231, 157, 0.52);
  border-radius: 50%;
  content: "";
}

.how-it-works-godot-project-heading {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 23px;
}

.how-it-works-godot-logo {
  display: block;
  width: 48px;
  height: 48px;
  padding: 5px;
  border-radius: 15px 15px 15px 5px;
  background: #eaf8ff;
  object-fit: contain;
}

.how-it-works-godot-project-heading p {
  margin: 0;
  color: #a9e9db;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.how-it-works-godot-project-heading strong {
  display: block;
  margin-top: 4px;
  color: #ffffff;
  font: 800 18px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.how-it-works-godot-project ol {
  position: relative;
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid rgba(235, 255, 249, 0.27);
  padding: 0;
  list-style: none;
}

.how-it-works-godot-project li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  border-bottom: 1px solid rgba(235, 255, 249, 0.21);
  padding: 16px 0;
}

.how-it-works-godot-project li > span {
  color: #ffdc78;
  font-size: 12px;
  font-weight: 900;
}

.how-it-works-godot-project li strong { color: #ffffff; font-size: 14px; }

.how-it-works-godot-project li p {
  margin: 5px 0 0;
  color: #d4e5e1;
  font-size: 13px;
  line-height: 1.45;
}

.how-it-works-godot-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  gap: 64px;
  width: min(1120px, calc(100% - 64px));
  margin: 0 auto;
  border: 1px solid #c8b7ed;
  border-radius: 30px;
  background:
    radial-gradient(circle at 9% 9%, rgba(255, 209, 113, 0.42), transparent 21%),
    linear-gradient(135deg, #f6f1ff, #ecfbf7);
  box-shadow: 10px 12px 0 rgba(77, 49, 128, 0.1);
  padding: 48px;
}

.how-it-works-godot-faq-heading h2 {
  max-width: 430px;
  margin: 22px 0 0;
  color: #292253;
  font-size: 36px;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.how-it-works-godot-faq-logo {
  display: block;
  width: min(100%, 250px);
  height: auto;
  margin-top: 20px;
  filter: drop-shadow(0 8px 0 rgba(56, 81, 129, 0.12));
}

.how-it-works-godot-faq-heading > p:not(.marketing-kicker) {
  max-width: 440px;
  margin: 18px 0 0;
  color: #5d6177;
  line-height: 1.58;
}

.how-it-works-godot-faq dl {
  display: grid;
  margin: 0;
  border-top: 1px solid rgba(76, 61, 126, 0.2);
}

.how-it-works-godot-faq dl > div {
  border-bottom: 1px solid rgba(76, 61, 126, 0.2);
  padding: 19px 0;
}

.how-it-works-godot-faq dt {
  color: #2f285b;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.35;
}

.how-it-works-godot-faq dd {
  margin: 8px 0 0;
  color: #5d6177;
  font-size: 14px;
  line-height: 1.55;
}

.assets-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 520px;
  background:
    radial-gradient(circle at 84% 16%, rgba(46, 196, 182, 0.26), transparent 30%),
    radial-gradient(circle at 12% 82%, rgba(255, 161, 191, 0.24), transparent 22%),
    linear-gradient(130deg, #221e44, #14454d 100%);
  color: #f7f6fb;
}

.assets-hero-image,
.assets-hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.assets-hero-image {
  z-index: 0;
  object-fit: cover;
}

.assets-hero-shade {
  z-index: 1;
  background:
    linear-gradient(105deg, rgba(19, 27, 70, 0.91) 0%, rgba(25, 46, 91, 0.72) 48%, rgba(35, 22, 71, 0.38) 100%),
    linear-gradient(0deg, rgba(18, 23, 61, 0.62), transparent 54%);
}

.assets-hero > .assets-header {
  background: rgba(24, 28, 66, 0.66);
}

.assets-hero .marketing-kicker { color: #8fe3d9; }

.assets-hero-copy {
  position: relative;
  z-index: 2;
  width: min(1120px, calc(100% - 64px));
  margin: 82px auto 0;
  padding-bottom: 70px;
}

.assets-hero-copy h1 {
  max-width: 700px;
  margin: 0;
  color: #ffffff;
  font-size: 54px;
  line-height: 1.04;
}

.assets-hero-copy > p:not(.marketing-kicker) {
  max-width: 660px;
  margin: 20px 0 0;
  color: #d9d6e6;
  font-size: 18px;
  line-height: 1.6;
}

.assets-overview,
.assets-paths,
.assets-faq {
  width: min(1120px, calc(100% - 64px));
  margin: 0 auto;
}

.assets-overview {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: end;
  gap: 64px;
  padding: 96px 0 64px;
}

.assets-overview h2 {
  margin: 0;
  color: #201c38;
  font-size: 42px;
  line-height: 1.12;
}

.assets-overview > p {
  margin: 0;
  color: #565267;
  line-height: 1.65;
}

.assets-paths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding-bottom: 96px;
}

.assets-paths article {
  min-height: 312px;
  border: 1px solid #cecbd9;
  border-top: 4px solid #7255b6;
  border-radius: 8px;
  background: #ffffff;
  padding: 28px;
}

.assets-paths h3 {
  margin: 16px 0 0;
  color: #201c38;
  font-size: 27px;
  line-height: 1.12;
}

.assets-paths article > p:not(.marketing-kicker) {
  margin: 16px 0 0;
  color: #565267;
  line-height: 1.6;
}

.assets-card-status {
  margin-top: 22px !important;
  border-top: 1px solid #ddd9e5;
  padding-top: 16px;
  color: #38324d !important;
  font-size: 13px;
  font-weight: 700;
}

.assets-quaternius,
.assets-kenney,
.assets-meshy {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 64px;
  width: min(1120px, calc(100% - 64px));
  margin: 0 auto 76px;
  border-radius: 32px;
  padding: 48px;
}

.assets-meshy {
  border: 1px solid rgba(197, 249, 85, 0.62);
  background:
    radial-gradient(circle at 9% 10%, rgba(255, 62, 143, 0.18), transparent 18%),
    radial-gradient(circle at 79% 18%, rgba(197, 249, 85, 0.27), transparent 24%),
    linear-gradient(140deg, #f6ffe6, #fff7fb 52%, #ecfff6);
  box-shadow: 11px 13px 0 rgba(58, 95, 26, 0.12);
}

.assets-meshy-logo {
  display: block;
  width: min(100%, 230px);
  height: auto;
  margin-top: 18px;
}

.assets-quaternius {
  border: 1px solid rgba(114, 85, 182, 0.42);
  background:
    radial-gradient(circle at 9% 10%, rgba(255, 209, 113, 0.34), transparent 20%),
    radial-gradient(circle at 82% 14%, rgba(46, 196, 182, 0.2), transparent 24%),
    linear-gradient(140deg, #f4efff, #fdf8ef 52%, #eefbf6);
  box-shadow: 11px 13px 0 rgba(77, 49, 128, 0.11);
}

.assets-kenney {
  border: 1px solid rgba(30, 124, 134, 0.42);
  background:
    radial-gradient(circle at 9% 10%, rgba(46, 196, 182, 0.26), transparent 20%),
    radial-gradient(circle at 82% 14%, rgba(255, 184, 94, 0.26), transparent 24%),
    linear-gradient(140deg, #eafaf6, #f2f9ff 52%, #fdf7ec);
  box-shadow: 11px 13px 0 rgba(23, 92, 99, 0.11);
}

.assets-quaternius-intro h2,
.assets-kenney-intro h2,
.assets-meshy-intro h2 {
  max-width: 520px;
  margin: 20px 0 0;
  color: #2b2153;
  font-size: 37px;
  letter-spacing: -0.04em;
  line-height: 1.12;
}

.assets-meshy-intro h2 { color: #263c1b; }

.assets-quaternius-intro > p:not(.marketing-kicker),
.assets-kenney-intro > p:not(.marketing-kicker),
.assets-meshy-intro > p:not(.marketing-kicker) {
  max-width: 520px;
  margin: 18px 0 0;
  color: #56506e;
  line-height: 1.6;
}

.assets-kenney-intro > p:not(.marketing-kicker) { color: #46605c; }
.assets-meshy-intro > p:not(.marketing-kicker) { color: #52634c; }

.assets-quaternius-links,
.assets-kenney-links,
.assets-meshy-links {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 25px;
}

.assets-quaternius-links a,
.assets-kenney-links a,
.assets-meshy-links a {
  display: inline-flex;
  align-items: center;
  border: 1px solid #8a6fc9;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #4a3585;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.assets-quaternius-links a::after,
.assets-kenney-links a::after,
.assets-meshy-links a::after { margin-left: 6px; content: "↗"; }
.assets-quaternius-links a:hover { background: #eee7ff; color: #33235f; }

.assets-kenney-links a {
  border-color: #3f96a0;
  color: #175c63;
}

.assets-kenney-links a:hover { background: #d9f5f0; color: #0f444a; }

.assets-meshy-links a {
  border-color: #90b74b;
  color: #345220;
}

.assets-meshy-links a:hover { background: #e2fac0; color: #1e3b10; }

.assets-quaternius-card,
.assets-kenney-card,
.assets-meshy-card {
  position: relative;
  overflow: hidden;
  border-radius: 27px;
  padding: 30px;
}

.assets-meshy-card {
  border: 1px solid #3c4e2d;
  background:
    radial-gradient(circle at 93% 8%, rgba(197, 249, 85, 0.32), transparent 20%),
    linear-gradient(145deg, #20271e, #344a2a);
  box-shadow: 9px 11px 0 rgba(48, 78, 25, 0.17);
}

.assets-quaternius-card {
  border: 1px solid #45386c;
  background:
    radial-gradient(circle at 93% 8%, rgba(255, 209, 113, 0.28), transparent 20%),
    linear-gradient(145deg, #241f3d, #3c2f63);
  box-shadow: 9px 11px 0 rgba(52, 36, 94, 0.17);
}

.assets-kenney-card {
  border: 1px solid #2b5e64;
  background:
    radial-gradient(circle at 93% 8%, rgba(255, 184, 94, 0.3), transparent 20%),
    linear-gradient(145deg, #16333b, #1e5a5d);
  box-shadow: 9px 11px 0 rgba(18, 63, 68, 0.17);
}

.assets-quaternius-card::after,
.assets-kenney-card::after,
.assets-meshy-card::after {
  position: absolute;
  right: -47px;
  bottom: -58px;
  width: 160px;
  height: 160px;
  border: 2px dashed rgba(143, 227, 217, 0.62);
  border-radius: 50%;
  content: "";
}

.assets-quaternius-card-heading,
.assets-kenney-card-heading,
.assets-meshy-card-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 23px;
}

.assets-quaternius-card-heading > span,
.assets-kenney-card-heading > span,
.assets-meshy-card-heading > span {
  display: grid;
  width: 48px;
  height: 48px;
  border-radius: 15px 15px 15px 5px;
  place-items: center;
  background: #ffd171;
  color: #3a2a10;
  font-size: 22px;
  font-weight: 950;
}

.assets-kenney-card-heading > span { background: #8fe3d9; color: #103a37; }
.assets-meshy-card-heading > span { background: #c5f955; color: #1d2c19; }

.assets-quaternius-card-heading p,
.assets-kenney-card-heading p,
.assets-meshy-card-heading p {
  margin: 0;
  color: #ffd171;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.assets-kenney-card-heading p { color: #8fe3d9; }
.assets-meshy-card-heading p { color: #c5f955; }

.assets-quaternius-card-heading strong,
.assets-kenney-card-heading strong,
.assets-meshy-card-heading strong {
  display: block;
  margin-top: 4px;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.1;
}

.assets-quaternius-card ol,
.assets-kenney-card ol,
.assets-meshy-card ol {
  position: relative;
  z-index: 1;
  display: grid;
  margin: 0;
  border-top: 1px solid rgba(238, 231, 255, 0.22);
  padding: 0;
  list-style: none;
}

.assets-quaternius-card li,
.assets-kenney-card li,
.assets-meshy-card li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  border-bottom: 1px solid rgba(238, 231, 255, 0.18);
  padding: 16px 0;
}

.assets-quaternius-card li > span,
.assets-kenney-card li > span,
.assets-meshy-card li > span { color: #8fe3d9; font-size: 12px; font-weight: 900; }
.assets-kenney-card li > span { color: #ffd171; }
.assets-meshy-card li > span { color: #ff8fbd; }
.assets-quaternius-card li strong,
.assets-kenney-card li strong,
.assets-meshy-card li strong { color: #ffffff; font-size: 14px; }

.assets-quaternius-card li p,
.assets-kenney-card li p,
.assets-meshy-card li p {
  margin: 5px 0 0;
  color: #d9d3ec;
  font-size: 13px;
  line-height: 1.45;
}

.assets-kenney-card li p { color: #cfe6e1; }
.assets-meshy-card li p { color: #d8e5d2; }

/* Soundtrack creator spotlight: mirrors the Quaternius/Kenney spotlight
   layout with its own rose/plum identity. Self-contained on purpose — the
   shared spotlight selectors above predate it and stay untouched. */
.assets-music {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 64px;
  width: min(1120px, calc(100% - 64px));
  margin: 0 auto 76px;
  border: 1px solid rgba(182, 85, 130, 0.42);
  border-radius: 32px;
  background:
    radial-gradient(circle at 9% 10%, rgba(255, 158, 199, 0.3), transparent 20%),
    radial-gradient(circle at 82% 14%, rgba(255, 209, 113, 0.24), transparent 24%),
    linear-gradient(140deg, #fdf0f6, #fff8ef 52%, #f4f0ff);
  box-shadow: 11px 13px 0 rgba(128, 49, 88, 0.11);
  padding: 48px;
}

.assets-music-intro h2 {
  max-width: 520px;
  margin: 20px 0 0;
  color: #4a1f38;
  font-size: 37px;
  letter-spacing: -0.04em;
  line-height: 1.12;
}

.assets-music-intro > p:not(.marketing-kicker) {
  max-width: 520px;
  margin: 18px 0 0;
  color: #6b4a5c;
  line-height: 1.6;
}

.assets-music-links {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 25px;
}

.assets-music-links a {
  display: inline-flex;
  align-items: center;
  border: 1px solid #c2679a;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #85355f;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.assets-music-links a::after { margin-left: 6px; content: "↗"; }
.assets-music-links a:hover { background: #ffe4f0; color: #5f2343; }

.assets-music-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #6c3253;
  border-radius: 27px;
  background:
    radial-gradient(circle at 93% 8%, rgba(255, 158, 199, 0.26), transparent 20%),
    linear-gradient(145deg, #2e1826, #56294a);
  box-shadow: 9px 11px 0 rgba(80, 30, 60, 0.17);
  padding: 30px;
}

.assets-music-card::after {
  position: absolute;
  right: -47px;
  bottom: -58px;
  width: 160px;
  height: 160px;
  border: 2px dashed rgba(255, 158, 199, 0.55);
  border-radius: 50%;
  content: "";
}

.assets-music-card-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 23px;
}

.assets-music-card-heading > span {
  display: grid;
  width: 48px;
  height: 48px;
  border-radius: 15px 15px 15px 5px;
  place-items: center;
  background: #ff9ec7;
  color: #47122c;
  font-size: 22px;
  font-weight: 950;
}

.assets-music-card-heading p {
  margin: 0;
  color: #ff9ec7;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.assets-music-card-heading strong {
  display: block;
  margin-top: 4px;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.1;
}

.assets-music-card ol {
  position: relative;
  z-index: 1;
  display: grid;
  margin: 0;
  border-top: 1px solid rgba(255, 228, 240, 0.22);
  padding: 0;
  list-style: none;
}

.assets-music-card li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  border-bottom: 1px solid rgba(255, 228, 240, 0.18);
  padding: 16px 0;
}

.assets-music-card li > span { color: #ffd171; font-size: 12px; font-weight: 900; }
.assets-music-card li strong { color: #ffffff; font-size: 14px; }

.assets-music-card li p {
  margin: 5px 0 0;
  color: #ecd5e2;
  font-size: 13px;
  line-height: 1.45;
}

.assets-music-card li p a {
  color: #ff9ec7;
  font-weight: 800;
  text-decoration: none;
}

.assets-music-card li p a:hover { color: #ffc7de; text-decoration: underline; }

.assets-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 64px;
  margin-bottom: 76px;
}

.assets-faq h2 {
  max-width: 420px;
  margin: 0;
  color: #2b2153;
  font-size: 36px;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.assets-faq dl {
  display: grid;
  margin: 0;
  border-top: 1px solid rgba(76, 61, 126, 0.24);
}

.assets-faq dl > div {
  border-bottom: 1px solid rgba(76, 61, 126, 0.24);
  padding: 20px 0;
}

.assets-faq dt { color: #2f285b; font-size: 17px; font-weight: 900; line-height: 1.35; }

.assets-faq dd {
  margin: 8px 0 0;
  color: #56506e;
  font-size: 14px;
  line-height: 1.55;
}

.earnings-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 440px;
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 209, 113, 0.26), transparent 28%),
    radial-gradient(circle at 10% 80%, rgba(46, 196, 182, 0.22), transparent 24%),
    linear-gradient(130deg, #1f2f24, #114a56 100%);
  color: #f6fbf7;
}

.earnings-hero .marketing-kicker { color: #a4e8b8; }

.earnings-hero-copy {
  position: relative;
  z-index: 2;
  width: min(1120px, calc(100% - 64px));
  margin: 82px auto 0;
  padding-bottom: 70px;
}

.earnings-hero-copy h1 {
  max-width: 700px;
  margin: 0;
  color: #ffffff;
  font-size: 54px;
  line-height: 1.04;
}

.earnings-hero-copy > p:not(.marketing-kicker) {
  max-width: 650px;
  margin: 20px 0 0;
  color: #d8e6da;
  font-size: 18px;
  line-height: 1.6;
}

.earnings-overview {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: end;
  gap: 64px;
  width: min(1120px, calc(100% - 64px));
  margin: 0 auto;
  padding: 96px 0 64px;
}

.earnings-overview h2 {
  margin: 0;
  color: #1c3024;
  font-size: 42px;
  line-height: 1.12;
}

.earnings-overview > p {
  margin: 0;
  color: #52655a;
  line-height: 1.65;
}

.earnings-path {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 64px;
  width: min(1120px, calc(100% - 64px));
  margin: 0 auto 76px;
  border-radius: 32px;
  padding: 48px;
}

.earnings-path--steam {
  border: 1px solid rgba(30, 82, 124, 0.42);
  background:
    radial-gradient(circle at 9% 10%, rgba(102, 192, 244, 0.28), transparent 20%),
    radial-gradient(circle at 82% 14%, rgba(255, 209, 113, 0.24), transparent 24%),
    linear-gradient(140deg, #ecf5fd, #f4f9ff 52%, #fdf8ef);
  box-shadow: 11px 13px 0 rgba(23, 62, 99, 0.11);
}

.earnings-path--castle {
  border: 1px solid rgba(114, 85, 182, 0.42);
  background:
    radial-gradient(circle at 9% 10%, rgba(255, 161, 191, 0.26), transparent 20%),
    radial-gradient(circle at 82% 14%, rgba(46, 196, 182, 0.2), transparent 24%),
    linear-gradient(140deg, #f4efff, #fdf4f8 52%, #eefbf6);
  box-shadow: 11px 13px 0 rgba(77, 49, 128, 0.11);
}

.earnings-path-intro h2 {
  max-width: 520px;
  margin: 20px 0 0;
  color: #1d3a55;
  font-size: 37px;
  letter-spacing: -0.04em;
  line-height: 1.12;
}

.earnings-path--castle .earnings-path-intro h2 { color: #2b2153; }

.earnings-path-intro > p:not(.marketing-kicker) {
  max-width: 520px;
  margin: 18px 0 0;
  color: #4c6072;
  line-height: 1.6;
}

.earnings-path--castle .earnings-path-intro > p:not(.marketing-kicker) { color: #56506e; }

.earnings-path-links {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 25px;
}

.earnings-path-links a {
  display: inline-flex;
  align-items: center;
  border: 1px solid #4f87b8;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #23577f;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.earnings-path-links a::after { margin-left: 6px; content: "↗"; }
.earnings-path-links a:hover { background: #ddeefb; color: #153c5a; }

.earnings-path--castle .earnings-path-links a {
  border-color: #8a6fc9;
  color: #4a3585;
}

.earnings-path--castle .earnings-path-links a::after { content: "→"; }
.earnings-path--castle .earnings-path-links a:hover { background: #eee7ff; color: #33235f; }

.earnings-path-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #2a4a66;
  border-radius: 27px;
  background:
    radial-gradient(circle at 93% 8%, rgba(102, 192, 244, 0.28), transparent 20%),
    linear-gradient(145deg, #16283b, #1e4460);
  box-shadow: 9px 11px 0 rgba(16, 44, 68, 0.17);
  padding: 30px;
}

.earnings-path-card--castle {
  border: 1px solid #45386c;
  background:
    radial-gradient(circle at 93% 8%, rgba(255, 161, 191, 0.26), transparent 20%),
    linear-gradient(145deg, #241f3d, #3c2f63);
  box-shadow: 9px 11px 0 rgba(52, 36, 94, 0.17);
}

.earnings-path-card::after {
  position: absolute;
  right: -47px;
  bottom: -58px;
  width: 160px;
  height: 160px;
  border: 2px dashed rgba(255, 209, 113, 0.62);
  border-radius: 50%;
  content: "";
}

.earnings-path-card-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 23px;
}

.earnings-path-card-heading > span {
  display: grid;
  width: 48px;
  height: 48px;
  border-radius: 15px 15px 15px 5px;
  place-items: center;
  background: #66c0f4;
  color: #0e2438;
  font-size: 22px;
  font-weight: 950;
}

.earnings-path-card--castle .earnings-path-card-heading > span { background: #ff9cbd; color: #401527; }

.earnings-path-card-heading p {
  margin: 0;
  color: #9bd4f5;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.earnings-path-card--castle .earnings-path-card-heading p { color: #ff9cbd; }

.earnings-path-card-heading strong {
  display: block;
  margin-top: 4px;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.1;
}

.earnings-path-card ol {
  position: relative;
  z-index: 1;
  display: grid;
  margin: 0;
  border-top: 1px solid rgba(231, 243, 255, 0.22);
  padding: 0;
  list-style: none;
}

.earnings-path-card li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  border-bottom: 1px solid rgba(231, 243, 255, 0.18);
  padding: 16px 0;
}

.earnings-path-card li > span { color: #ffd171; font-size: 12px; font-weight: 900; }
.earnings-path-card li strong { color: #ffffff; font-size: 14px; }

.earnings-path-card li p {
  margin: 5px 0 0;
  color: #cfe0ee;
  font-size: 13px;
  line-height: 1.45;
}

.earnings-path-card--castle li p { color: #d9d3ec; }

.earnings-note {
  width: min(1120px, calc(100% - 64px));
  margin: 0 auto 24px;
  border-top: 1px solid #c2d1c7;
  padding-top: 64px;
}

.earnings-note h2 {
  max-width: 690px;
  margin: 0;
  color: #1c3024;
  font-size: 42px;
  line-height: 1.12;
}

.earnings-note > p:not(.marketing-kicker) {
  max-width: 680px;
  margin: 20px 0 0;
  color: #52655a;
  line-height: 1.65;
}

.creator-earnings-summary {
  display: flex;
  width: min(1120px, calc(100% - 64px));
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin: 96px auto 0;
  border: 1px solid rgba(164, 232, 184, 0.4);
  border-radius: 30px;
  background:
    radial-gradient(circle at 88% 20%, rgba(255, 209, 113, 0.22), transparent 26%),
    linear-gradient(130deg, #1f2f24, #114a56 100%);
  box-shadow: 10px 12px 0 rgba(24, 60, 48, 0.14);
  color: #f6fbf7;
  padding: 44px 48px;
}

.creator-earnings-summary .marketing-kicker { color: #a4e8b8; }

.creator-earnings-summary h2 {
  max-width: 560px;
  margin: 16px 0 0;
  color: #ffffff;
  font-size: 34px;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.creator-earnings-summary > div > p:not(.marketing-kicker) {
  max-width: 560px;
  margin: 14px 0 0;
  color: #d8e6da;
  line-height: 1.6;
}

.creator-earnings-summary .marketing-primary-action { flex-shrink: 0; }

.developers-grid + .creator-earnings-summary {
  margin-top: 0;
  margin-bottom: 96px;
}

@media (max-width: 760px) {
  .pricing-benefits { padding: 72px 20px; }

  .pricing-benefits-heading {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 30px;
  }

  .pricing-benefits h2 { font-size: 34px; }

  .pricing-benefit-grid { grid-template-columns: 1fr; }

  .pricing-benefit-grid article,
  .pricing-benefit-grid article:first-child {
    min-height: 0;
    border-left: 1px solid rgba(236, 255, 249, 0.3);
  }

  .how-it-works-godot {
    grid-template-columns: 1fr;
    gap: 34px;
    width: min(100% - 40px, 1120px);
    margin: 32px auto 52px;
    padding: 72px 0;
  }

  .how-it-works-godot-intro h2 { font-size: 34px; }
  .how-it-works-godot-project { padding: 24px; }

  .how-it-works-godot-faq {
    grid-template-columns: 1fr;
    gap: 28px;
    width: min(100% - 40px, 1120px);
    border-radius: 24px;
    padding: 30px 24px;
  }

  .how-it-works-godot-faq-logo { width: 190px; }
  .how-it-works-godot-faq-heading h2 { font-size: 30px; }

  .assets-hero-copy h1 { font-size: 40px; }

  .assets-overview {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 64px 0 40px;
  }

  .assets-overview h2 { font-size: 34px; }

  .assets-paths {
    grid-template-columns: 1fr;
    padding-bottom: 64px;
  }

  .assets-paths article { min-height: 0; }

  .assets-quaternius,
  .assets-kenney,
  .assets-music,
  .assets-meshy,
  .assets-faq {
    grid-template-columns: 1fr;
    gap: 30px;
    width: min(100% - 40px, 1120px);
  }

  .assets-quaternius,
  .assets-kenney,
  .assets-music,
  .assets-meshy {
    margin: 0 auto 52px;
    border-radius: 24px;
    padding: 30px 24px;
  }

  .assets-meshy-logo { width: 180px; }
  .assets-quaternius-intro h2,
  .assets-kenney-intro h2,
  .assets-music-intro h2,
  .assets-meshy-intro h2,
  .assets-faq h2 { font-size: 30px; }
  .assets-quaternius-card,
  .assets-kenney-card,
  .assets-music-card,
  .assets-meshy-card { padding: 24px; }
  .assets-faq { margin-bottom: 52px; }

  .earnings-hero-copy h1 { font-size: 40px; }

  .earnings-overview {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 64px 0 40px;
  }

  .earnings-overview h2 { font-size: 34px; }

  .earnings-path {
    grid-template-columns: 1fr;
    gap: 30px;
    width: min(100% - 40px, 1120px);
    margin: 0 auto 52px;
    border-radius: 24px;
    padding: 30px 24px;
  }

  .earnings-path-intro h2 { font-size: 30px; }
  .earnings-path-card { padding: 24px; }

  .earnings-note {
    width: min(100% - 40px, 1120px);
    padding-top: 48px;
  }

  .earnings-note h2 { font-size: 34px; }

  .creator-earnings-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: min(100% - 40px, 1120px);
    margin-top: 64px;
    border-radius: 24px;
    padding: 30px 24px;
  }

  .creator-earnings-summary h2 { font-size: 28px; }

  .developers-grid + .creator-earnings-summary {
    margin-top: 0;
    margin-bottom: 64px;
  }
}

/* Playful marketing refresh -------------------------------------------------
 * The studio UI stays deliberately calm.  These styles are limited to the
 * public-facing pages so the brand can feel energetic before someone enters
 * the product.
 */
.marketing-shell,
.marketing-page-shell,
.marketplace-shell {
  background:
    radial-gradient(circle at 7% 13%, rgba(255, 205, 112, 0.32) 0 3px, transparent 4px),
    radial-gradient(circle at 92% 9%, rgba(180, 129, 255, 0.22) 0 4px, transparent 5px),
    radial-gradient(circle at 12% 67%, rgba(73, 219, 194, 0.18) 0 2px, transparent 3px),
    #f8f5ef;
}

.marketing-hero,
.marketing-page-hero,
.marketplace-hero,
.developers-hero,
.pricing-hero,
.legal-hero {
  background-color: #17234f;
}

.marketing-hero::before,
.marketing-page-hero::before,
.marketplace-hero::before,
.developers-hero::before,
.pricing-hero::before,
.legal-hero::before,
.assets-hero::before,
.earnings-hero::before {
  position: absolute;
  z-index: 1;
  top: 18%;
  right: 8%;
  width: clamp(130px, 18vw, 255px);
  aspect-ratio: 1;
  border: 2px solid rgba(255, 231, 157, 0.7);
  border-radius: 43% 57% 56% 44% / 45% 43% 57% 55%;
  background: rgba(255, 184, 94, 0.14);
  box-shadow: -28px 48px 0 -9px rgba(108, 235, 210, 0.16), 48px -20px 0 -18px rgba(255, 117, 177, 0.38);
  content: "";
  pointer-events: none;
  transform: rotate(-12deg);
}

.marketing-hero::after,
.marketing-page-hero::after,
.developers-hero::after,
.pricing-hero::after,
.legal-hero::after,
.assets-hero::after,
.earnings-hero::after {
  position: absolute;
  z-index: 1;
  right: 22%;
  bottom: 14%;
  width: 54px;
  height: 54px;
  border: 2px solid rgba(255, 255, 255, 0.52);
  border-radius: 50% 46% 51% 44%;
  background: rgba(255, 113, 174, 0.2);
  box-shadow: 78px 22px 0 -14px rgba(251, 217, 108, 0.72), -52px 48px 0 -17px rgba(75, 226, 203, 0.68);
  content: "";
  pointer-events: none;
}

.marketing-hero-shade,
.marketing-page-hero-shade {
  background:
    linear-gradient(105deg, rgba(19, 27, 70, 0.91) 0%, rgba(25, 46, 91, 0.72) 48%, rgba(35, 22, 71, 0.38) 100%),
    linear-gradient(0deg, rgba(18, 23, 61, 0.62), transparent 54%);
}

.marketplace-hero-shade {
  background:
    linear-gradient(105deg, rgba(38, 27, 75, 0.96) 0%, rgba(19, 82, 103, 0.84) 44%, rgba(21, 28, 71, 0.4) 100%),
    linear-gradient(0deg, rgba(27, 25, 70, 0.72), transparent 58%);
}

.developers-hero,
.pricing-hero,
.legal-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 77% 20%, rgba(255, 161, 191, 0.48), transparent 16%),
    radial-gradient(circle at 68% 76%, rgba(77, 221, 203, 0.38), transparent 19%),
    linear-gradient(130deg, #25215e, #11656d 100%);
}

.marketing-header {
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: rgba(22, 29, 75, 0.54);
  box-shadow: 0 14px 35px rgba(17, 20, 58, 0.2);
  padding: 12px 18px;
  backdrop-filter: blur(14px);
}

.marketing-hero > .marketing-header,
.marketing-page-hero > .marketing-header,
.developers-hero > .marketing-header,
.pricing-hero > .marketing-header,
.legal-hero > .marketing-header,
.assets-hero > .marketing-header,
.earnings-hero > .marketing-header {
  margin-top: 18px;
}

.game-marketing-hero > .marketing-header {
  margin-top: 18px;
}

.marketplace-header {
  background: rgba(38, 30, 81, 0.64);
}

.marketing-nav a {
  border-radius: 999px;
  padding: 7px 10px;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.marketing-nav a:hover,
.marketing-nav a.is-active {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  transform: translateY(-1px);
}

.marketing-kicker {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: #a34488;
  padding: 6px 10px;
  letter-spacing: 0.06em;
  line-height: 1;
}

.marketing-kicker::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.marketing-hero .marketing-kicker,
.marketing-page-hero .marketing-kicker,
.marketplace-hero .marketing-kicker,
.developers-hero .marketing-kicker,
.pricing-hero .marketing-kicker,
.legal-hero .marketing-kicker,
.crossplay-hero .marketing-kicker,
.marketing-composition .marketing-kicker,
.marketing-platform .marketing-kicker,
.pricing-usage .marketing-kicker,
.marketplace-explainer .marketing-kicker,
.marketplace-creator-cta .marketing-kicker {
  border-color: rgba(255, 232, 160, 0.62);
  background: rgba(33, 30, 82, 0.5);
  color: #ffe79c;
}

.marketing-signup,
.marketing-primary-action,
.marketing-secondary-action {
  border-radius: 999px;
  box-shadow: 0 7px 0 rgba(14, 31, 62, 0.24), 0 12px 22px rgba(18, 24, 69, 0.18);
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.marketing-signup,
.marketing-primary-action {
  background: linear-gradient(110deg, #ffcf5a, #ff8bb8 100%);
  color: #302055;
}

.marketing-signup:hover,
.marketing-primary-action:hover {
  background: linear-gradient(110deg, #ffe184, #ffa9cb 100%);
  box-shadow: 0 4px 0 rgba(14, 31, 62, 0.24), 0 8px 18px rgba(18, 24, 69, 0.2);
  transform: translateY(3px);
}

.marketing-secondary-action {
  border-color: rgba(255, 255, 255, 0.68);
  background: rgba(28, 35, 87, 0.3);
}

.marketing-secondary-action:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(3px);
}

.marketing-hero-footer {
  border-top: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 18px 0 26px;
}

.marketing-hero-footer span,
.marketplace-hero-markers span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 999px;
  background: rgba(27, 35, 87, 0.52);
  box-sizing: border-box;
  padding: 0 14px;
  box-shadow: 0 5px 15px rgba(11, 18, 56, 0.16);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.marketing-proof,
.marketing-game-types,
.marketing-build-path,
.marketing-marketplace,
.pricing-plans,
.pricing-comparison,
.pricing-faq,
.developers-overview,
.legal-index {
  position: relative;
}

.marketing-proof::before,
.marketing-game-types::before,
.marketing-build-path::before,
.pricing-plans::before,
.developers-overview::before,
.legal-index::before {
  position: absolute;
  top: 74px;
  left: -34px;
  color: #ff9cbd;
  content: "✦";
  font-size: 28px;
  transform: rotate(-15deg);
}

.marketing-section-heading h2,
.marketing-cta h2,
.marketing-game-types-heading h2,
.marketing-build-path-heading h2,
.marketing-composition h2,
.marketing-platform h2,
.marketing-marketplace-copy h2,
.how-it-works-overview h2,
.how-it-works-steps h2,
.how-it-works-steps h3,
.how-it-works-systems h2,
.marketing-page-cta h2,
.pricing-plans h2,
.pricing-included h2,
.pricing-faq h2,
.pricing-comparison-heading h2,
.developers-overview h2,
.developers-grid h2,
.developers-grid h3,
.developers-note h2,
.legal-index-heading h2 {
  letter-spacing: -0.035em;
}

.marketing-workflow {
  gap: 14px;
  border-top: 0;
}

.marketing-workflow article,
.marketing-build-outputs article,
.how-it-works-steps article {
  border: 1px solid #dfd8d0;
  border-radius: 20px;
  background: #fffdf9;
  box-shadow: 0 10px 0 rgba(115, 86, 151, 0.06);
}

.marketing-workflow article {
  padding: 22px;
}

.marketing-workflow article:nth-child(2) {
  transform: translateX(12px);
}

.marketing-workflow article:nth-child(3) {
  transform: translateX(4px);
}

.marketing-workflow article > span,
.how-it-works-steps article > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: #e1fff5;
  color: #176b69;
}

.marketing-game-grid,
.pricing-grid,
.developers-grid,
.legal-index-grid,
.marketplace-game-grid {
  gap: 20px;
}

.marketing-game-card,
.pricing-card,
.developers-grid article,
.legal-index-grid article,
.marketplace-game-card,
.marketplace-empty-state {
  border: 1px solid rgba(55, 54, 91, 0.14);
  border-radius: 24px;
  box-shadow: 0 12px 0 rgba(71, 55, 116, 0.08), 0 20px 35px rgba(67, 47, 108, 0.08);
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.marketing-game-card:hover,
.pricing-card:hover,
.developers-grid article:hover,
.legal-index-grid article:hover,
.marketplace-game-card:hover {
  box-shadow: 0 7px 0 rgba(71, 55, 116, 0.1), 0 16px 30px rgba(67, 47, 108, 0.13);
  transform: translateY(5px) rotate(-0.35deg);
}

.marketing-game-card {
  border-top-width: 7px;
  background: linear-gradient(145deg, #ffffff 0%, var(--marketing-game-wash, #f6fffc) 100%);
}

.marketing-game-card--racing { --marketing-game-wash: #fff1e8; }
.marketing-game-card--rpg { --marketing-game-wash: #f2edff; }
.marketing-game-card--tower_defense { --marketing-game-wash: #fff3df; }
.marketing-game-card--platformer { --marketing-game-wash: #eaf5ff; }
.marketing-game-card--farming_sim { --marketing-game-wash: #f2f9df; }
.marketing-game-card--city_builder { --marketing-game-wash: #f8edff; }
.marketing-game-card--rhythm { --marketing-game-wash: #ffeaf4; }
.marketing-game-card--open_world { --marketing-game-wash: #e6fbf4; }
.marketing-game-card--survival { --marketing-game-wash: #ffede8; }

.marketing-game-card-heading span,
.marketing-game-card-heading p,
.marketing-build-outputs span {
  display: inline-flex;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  padding: 6px 9px;
}

.marketing-composition,
.marketing-platform,
.marketplace-explainer,
.pricing-usage {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 16%, rgba(255, 151, 192, 0.36), transparent 16%),
    radial-gradient(circle at 10% 86%, rgba(93, 229, 207, 0.25), transparent 19%),
    linear-gradient(125deg, #30215f, #12656d 100%);
}

.marketing-composition::before,
.marketing-platform::before,
.marketplace-explainer::before,
.pricing-usage::before {
  position: absolute;
  top: -54px;
  right: 5%;
  width: 160px;
  height: 160px;
  border: 2px dashed rgba(255, 232, 157, 0.58);
  border-radius: 50%;
  content: "";
  transform: rotate(18deg);
}

.marketing-building-blocks,
.how-it-works-system-grid,
.pricing-included-grid,
.pricing-usage-details {
  gap: 12px;
  border: 0;
}

.marketing-building-blocks article,
.how-it-works-system-grid article,
.pricing-included-grid article,
.pricing-usage-details article {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
}

.how-it-works-systems,
.pricing-included {
  background:
    radial-gradient(circle at 8% 16%, rgba(255, 201, 104, 0.34), transparent 17%),
    linear-gradient(135deg, #e7fff4, #e8efff 100%);
}

.how-it-works-steps {
  display: grid;
  gap: 18px;
  border-top: 0;
}

.how-it-works-steps article {
  align-items: start;
  border-bottom: 1px solid #dfd8d0;
  padding: 34px;
}

.how-it-works-steps article:nth-child(even) {
  background: #fff8e9;
  transform: rotate(0.25deg);
}

.how-it-works-steps ul,
.pricing-card ul,
.marketing-game-card ul {
  border-top-color: rgba(61, 74, 99, 0.16);
}

.marketing-build-outputs {
  gap: 16px;
  border-top: 0;
}

.marketing-build-outputs article,
.marketing-build-outputs article:first-child {
  min-height: 220px;
  border: 1px solid #dfd8d0;
  padding: 28px;
}

.marketing-build-outputs article:nth-child(2) {
  background: #f4edff;
  transform: translateY(12px);
}

.marketing-build-outputs article:nth-child(3) {
  background: #e8fff8;
}

.marketing-marketplace-showcase {
  border: 8px solid #ffffff;
  border-radius: 38% 62% 45% 55% / 48% 40% 60% 52%;
  box-shadow: 16px 18px 0 rgba(255, 150, 189, 0.54), 26px -12px 0 rgba(255, 205, 91, 0.56);
  transform: rotate(1.5deg);
}

.marketing-marketplace-showcase figcaption {
  right: 18px;
  bottom: 16px;
  left: 18px;
  border-radius: 16px;
  background: rgba(33, 27, 76, 0.84);
}

.pricing-card--featured {
  position: relative;
  border: 3px solid #fe8abb;
  background: linear-gradient(145deg, #fffafd, #fff1c9 100%);
  transform: translateY(-12px) rotate(-0.6deg);
}

.pricing-card--featured::before {
  position: absolute;
  top: -14px;
  left: 50%;
  border-radius: 999px;
  background: #fe8abb;
  color: #382254;
  content: "MOST POPULAR";
  padding: 6px 11px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  transform: translateX(-50%) rotate(1deg);
}

.pricing-card .marketing-secondary-action {
  border-color: #b9a8db;
  background: #ffffff;
  box-shadow: 0 5px 0 rgba(95, 69, 132, 0.14);
}

.pricing-comparison-table-wrap {
  border-radius: 22px;
  box-shadow: 0 12px 0 rgba(71, 55, 116, 0.06);
}

.marketplace-hero-copy .marketing-primary-action,
.marketplace-creator-cta .marketing-primary-action {
  background: linear-gradient(110deg, #ffdb65, #ff95bc 100%);
}

.marketplace-catalog::before {
  border-color: #f1a4bd;
  background: #fff7df;
  color: #9d3e77;
  box-shadow: 4px 4px 0 rgba(241, 164, 189, 0.38);
}

/* Fusion Castle cards feel like invitations to a game world, without implying
 * that the abstract artwork is a literal gameplay screenshot. */
.marketplace-game-card {
  min-height: 0;
  overflow: hidden;
  border: 0;
  background: #fffdf9;
  padding: 0;
}

/* Every card used to draw the same purple-to-teal sky because the style class
   keyed off game.type, which is now `composed_game` for every game. The card
   inherits --card-accent / --card-primary from the game's own art direction
   (marketplace_card_palette_style), so one rule gives every game its own
   look; the theme classes below then adjust mood rather than repeating it. */
.marketplace-game-card {
  --card-accent: #6ae8d7;
  --card-primary: #4a338f;
}

.marketplace-game-card-scene {
  position: relative;
  min-height: 156px;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 22%, rgba(255, 255, 255, 0.58) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 17%, rgba(255, 255, 255, 0.48) 0 2px, transparent 3px),
    radial-gradient(circle at 57% 38%, rgba(255, 255, 255, 0.35) 0 1px, transparent 2px),
    linear-gradient(145deg, var(--card-primary) 0%, color-mix(in oklab, var(--card-accent) 62%, var(--card-primary)) 100%);
}

.marketplace-game-card-scene::before {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 7px);
  content: "";
  opacity: 0.72;
}

.marketplace-scene-sun,
.marketplace-scene-portal,
.marketplace-scene-hill,
.marketplace-scene-spark,
.marketplace-scene-label {
  position: absolute;
  z-index: 1;
}

.marketplace-scene-sun {
  top: 23px;
  right: 24px;
  width: 55px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in oklab, var(--card-accent) 78%, #fff6cf);
  box-shadow:
    0 0 0 9px color-mix(in oklab, var(--card-accent) 18%, transparent),
    0 0 28px color-mix(in oklab, var(--card-accent) 62%, transparent);
}

.marketplace-scene-portal {
  right: 34%;
  bottom: 19px;
  width: 53px;
  height: 74px;
  border: 6px solid rgba(255, 255, 255, 0.75);
  border-radius: 48% 52% 44% 46%;
  background: linear-gradient(150deg, color-mix(in oklab, var(--card-accent) 85%, #ffffff), var(--card-accent) 100%);
  box-shadow:
    0 0 0 7px color-mix(in oklab, var(--card-primary) 55%, transparent),
    0 0 22px color-mix(in oklab, var(--card-accent) 70%, transparent);
  transform: rotate(-9deg);
}

.marketplace-scene-hill {
  bottom: -43px;
  border-radius: 50% 50% 0 0;
  transform: rotate(-5deg);
}

.marketplace-scene-hill--back {
  right: -7%;
  width: 68%;
  height: 92px;
  background: color-mix(in oklab, var(--card-primary) 72%, #0b1020);
}

.marketplace-scene-hill--front {
  bottom: -52px;
  left: -6%;
  width: 86%;
  height: 106px;
  background: color-mix(in oklab, var(--card-primary) 88%, #05070f);
  transform: rotate(5deg);
}

.marketplace-scene-spark {
  color: color-mix(in oklab, var(--card-accent) 45%, #fff5b4);
  font-size: 20px;
  line-height: 1;
  text-shadow: 0 0 10px rgba(255, 241, 162, 0.78);
}

.marketplace-scene-spark--one { top: 23px; left: 25px; }
.marketplace-scene-spark--two { top: 73px; right: 18px; font-size: 13px; }

.marketplace-scene-label {
  bottom: 15px;
  left: 18px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(18, 25, 75, 0.5);
  color: #ffffff;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Mood per art-direction theme: silhouette and light, not a second palette.
   The colours still come from the game's own accent/primary above. */
.marketplace-game-card--noir .marketplace-game-card-scene,
.marketplace-game-card--gothic .marketplace-game-card-scene {
  filter: saturate(0.55) contrast(1.12);
}

.marketplace-game-card--noir .marketplace-scene-sun,
.marketplace-game-card--gothic .marketplace-scene-sun {
  width: 34px;
  opacity: 0.55;
}

.marketplace-game-card--neon .marketplace-game-card-scene::after,
.marketplace-game-card--scifi .marketplace-game-card-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, color-mix(in oklab, var(--card-accent) 14%, transparent) 0 1px, transparent 1px 6px);
  pointer-events: none;
}

.marketplace-game-card--neon .marketplace-scene-portal,
.marketplace-game-card--scifi .marketplace-scene-portal {
  border-radius: 6px;
  transform: rotate(0deg);
}

.marketplace-game-card--ember .marketplace-scene-sun {
  width: 74px;
  box-shadow: 0 0 0 14px color-mix(in oklab, var(--card-accent) 22%, transparent), 0 0 44px color-mix(in oklab, var(--card-accent) 78%, transparent);
}

.marketplace-game-card--frost .marketplace-game-card-scene,
.marketplace-game-card--coral .marketplace-game-card-scene {
  filter: brightness(1.12) saturate(0.9);
}

.marketplace-game-card--dune .marketplace-scene-hill,
.marketplace-game-card--verdant .marketplace-scene-hill {
  border-radius: 46% 54% 0 0;
}

.marketplace-game-card--dune .marketplace-scene-sun {
  top: 46px;
  width: 66px;
}

.marketplace-game-card--storybook .marketplace-scene-portal,
.marketplace-game-card--dawn .marketplace-scene-portal {
  border-radius: 50% 50% 46% 46%;
}

.marketplace-game-card--arena .marketplace-scene-portal,
.marketplace-game-card--tropic .marketplace-scene-portal {
  right: 22%;
  width: 92px;
  height: 28px;
  border-radius: 999px;
  transform: rotate(-16deg);
}

.marketplace-game-card-body {
  display: flex;
  min-height: 242px;
  flex-direction: column;
  padding: 22px 24px 24px;
}

.marketplace-game-card .marketplace-game-card-meta {
  color: #51457e;
}

.marketplace-game-card-meta span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.marketplace-game-card-meta i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #48d4af;
  box-shadow: 0 0 0 4px rgba(72, 212, 175, 0.18);
}

.marketplace-game-card h3 {
  margin: 16px 0 0;
  font-size: 27px;
}

.marketplace-game-card-body > p {
  margin: 12px 0 0;
  color: #5e6075;
  line-height: 1.55;
}

.marketplace-game-card footer {
  align-items: end;
  margin-top: auto;
  border-top-color: rgba(76, 66, 122, 0.14);
}

.marketplace-game-card footer > div {
  display: grid;
  gap: 7px;
}

.marketplace-platform-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.marketplace-platform-chips b {
  border-radius: 999px;
  background: #edf0ff;
  color: #625a95;
  padding: 3px 6px;
  font-size: 9px;
  letter-spacing: 0.03em;
}

.marketplace-play-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  background: linear-gradient(110deg, #ffda65, #ff94bd 100%);
  box-shadow: 0 4px 0 rgba(88, 57, 120, 0.18);
  color: #34214f;
  padding: 9px 12px;
  text-decoration: none;
}

.marketplace-play-link:hover {
  color: #34214f;
  text-decoration: none;
  transform: translateY(2px);
}

.marketplace-game-card-actions {
  display: flex !important;
  align-items: center;
  gap: 10px;
}

.marketplace-about-link {
  color: #625a95;
  font-size: 12px;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.marketplace-about-link:hover,
.marketplace-about-link:focus-visible { color: #34214f; }

/* Published games have their own shareable page; playing stays isolated on
   /play while this surface carries the discovery, story, and SEO context. */
.game-marketing-page { background: #fffdf8; }

.game-marketing-hero {
  position: relative;
  min-height: 580px;
  overflow: hidden;
  color: #ffffff;
  background: radial-gradient(circle at 80% 20%, rgba(255, 198, 87, 0.42), transparent 22%), linear-gradient(135deg, #1b255f, #64357e 56%, #a5507b);
}

.game-marketing-hero-image,
.game-marketing-hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.game-marketing-hero-image { object-fit: cover; }
.game-marketing-hero-shade { background: linear-gradient(90deg, rgba(13, 20, 62, 0.9), rgba(23, 19, 63, 0.53) 56%, rgba(76, 34, 86, 0.34)); }

.game-marketing-hero-copy {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100% - 64px));
  margin: 110px auto 0;
  padding-bottom: 84px;
}

.game-marketing-hero-copy .marketing-kicker { color: #ffe49f; }
.game-marketing-hero-copy h1 { max-width: 780px; margin: 0; color: #fff9dd; font-size: clamp(48px, 7vw, 82px); line-height: .96; letter-spacing: -.065em; }
.game-marketing-hero-copy > p:not(.marketing-kicker) { max-width: 650px; margin: 22px 0 0; color: rgba(255, 248, 238, .92); font-size: 18px; line-height: 1.6; }
.game-marketing-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 28px; }
.game-marketing-back-link { color: #fff7d3; font-size: 14px; font-weight: 850; text-decoration: underline; text-underline-offset: 4px; }

.game-marketing-overview,
.game-marketing-play,
.game-marketing-cta { width: min(1120px, calc(100% - 64px)); margin: 0 auto; }

.game-marketing-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, .85fr); gap: 72px; padding: 104px 0; }
.game-marketing-overview h2,
.game-marketing-play h2,
.game-marketing-cta h2 { margin: 8px 0 15px; color: #2e234b; font-size: clamp(34px, 4vw, 52px); line-height: 1.04; letter-spacing: -.055em; }
.game-marketing-overview > div > p:last-child,
.game-marketing-play-copy > p:last-child,
.game-marketing-cta > p:not(.marketing-kicker) { margin: 0; color: #625570; font-size: 16px; line-height: 1.65; }

.game-marketing-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.game-marketing-facts div { border: 1px solid #e4d9ef; border-radius: 18px; background: linear-gradient(145deg, #ffffff, #faf3ff); padding: 18px; }
.game-marketing-facts div:nth-child(2n) { background: linear-gradient(145deg, #fffef8, #fff2d6); }
.game-marketing-facts dt { color: #8b658e; font-size: 11px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.game-marketing-facts dd { margin: 7px 0 0; color: #3e2b58; font-size: 16px; font-weight: 850; line-height: 1.3; }

.game-marketing-play { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 52px; align-items: center; border-top: 1px solid #ebdfef; padding: 94px 0; }
.game-marketing-platforms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.game-marketing-platforms article { min-height: 175px; border: 1px solid #ddd1ec; border-radius: 20px; background: #ffffff; box-shadow: 6px 8px 0 rgba(89, 57, 125, .09); padding: 20px; }
.game-marketing-platforms article:nth-child(2) { background: #f3fffb; transform: translateY(10px); }.game-marketing-platforms article:nth-child(3) { background: #fff8e8; }
.game-marketing-platforms span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; background: #eee2ff; color: #744ca0; }.game-marketing-platforms strong { display: block; margin-top: 18px; color: #38254f; font-size: 17px; }.game-marketing-platforms p { margin: 7px 0 0; color: #6b5e76; font-size: 12px; line-height: 1.45; }

.game-marketing-cta { margin-bottom: 100px; border-radius: 30px; background: linear-gradient(125deg, #29366f, #754481 58%, #b56782); box-shadow: 0 20px 42px rgba(75, 41, 99, .2); color: #fff; padding: 66px; text-align: center; }.game-marketing-cta .marketing-kicker { color: #ffe09a; }.game-marketing-cta h2 { color: #fff8dd; }.game-marketing-cta > p:not(.marketing-kicker) { max-width: 550px; margin: 0 auto 24px; color: rgba(255, 248, 240, .9); }.game-marketing-cta .marketing-primary-action { display: inline-flex; }

@media (max-width: 760px) {
  .game-marketing-hero { min-height: 500px; }.game-marketing-hero-copy, .game-marketing-overview, .game-marketing-play, .game-marketing-cta { width: min(100% - 40px, 1120px); }.game-marketing-hero-copy { margin-top: 84px; padding-bottom: 64px; }.game-marketing-hero-copy > p:not(.marketing-kicker) { font-size: 16px; }.game-marketing-overview, .game-marketing-play { grid-template-columns: 1fr; gap: 32px; padding: 72px 0; }.game-marketing-facts { grid-template-columns: 1fr 1fr; }.game-marketing-platforms { grid-template-columns: 1fr; }.game-marketing-platforms article:nth-child(2) { transform: none; }.game-marketing-cta { margin-bottom: 72px; border-radius: 24px; padding: 42px 24px; }
}

@media (prefers-reduced-motion: no-preference) {
  .marketplace-game-card:hover .marketplace-scene-portal {
    animation: marketplace-portal-pop 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .marketplace-game-card:hover .marketplace-scene-spark {
    animation: marketing-sparkle 850ms ease-in-out both;
  }
}

@keyframes marketplace-portal-pop {
  50% { transform: rotate(-9deg) scale(1.14); }
  100% { transform: rotate(-9deg) scale(1); }
}

.developers-grid article:nth-child(2),
.legal-index-grid article:nth-child(2) {
  border-top-color: #8f72e8;
  background: #f7f1ff;
}

.developers-grid article:nth-child(3),
.legal-index-grid article:nth-child(3) {
  border-top-color: #f09b4e;
  background: #fff7e8;
}

.legal-review-note {
  border: 1px solid #f0b2ca;
  border-left: 8px solid #fe8abb;
  border-radius: 20px;
  background: #fff4f8;
  box-shadow: 0 8px 0 rgba(151, 86, 125, 0.08);
}

/* Give each public card group its own job and silhouette instead of reusing
 * one generic rounded panel across the whole marketing site. */
.marketing-workflow article {
  position: relative;
  overflow: hidden;
  border-width: 2px;
  border-radius: 24px 24px 24px 8px;
  box-shadow: 7px 8px 0 rgba(66, 47, 113, 0.1);
}

.marketing-workflow article::after {
  position: absolute;
  right: 18px;
  bottom: 15px;
  color: rgba(57, 43, 107, 0.1);
  font-size: 54px;
  font-weight: 950;
  line-height: 1;
}

.marketing-workflow article:nth-child(1) {
  border-color: #67cfc2;
  background: linear-gradient(145deg, #f4fffb, #dcf8ef);
}

.marketing-workflow article:nth-child(1)::after { content: "✦"; }

.marketing-workflow article:nth-child(2) {
  border-color: #b494e8;
  border-radius: 8px 24px 24px;
  background: linear-gradient(145deg, #fbf8ff, #eee4ff);
}

.marketing-workflow article:nth-child(2)::after { content: "▦"; }

.marketing-workflow article:nth-child(3) {
  border-color: #f1ae5d;
  border-radius: 24px 8px 24px 24px;
  background: linear-gradient(145deg, #fffaf0, #ffe7bd);
}

.marketing-workflow article:nth-child(3)::after { content: "↗"; }

.marketing-workflow article:nth-child(2) > span { background: #e6d8ff; color: #6b4caf; }
.marketing-workflow article:nth-child(3) > span { background: #ffe3af; color: #a85d20; }

.marketing-game-card {
  position: relative;
  overflow: hidden;
  border-top-width: 8px;
  border-radius: 28px 18px 28px 18px;
}

.marketing-game-card::before {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border: 2px solid rgba(56, 49, 100, 0.12);
  border-radius: 50% 43% 55% 46%;
  background: rgba(255, 255, 255, 0.36);
  content: "";
  transform: rotate(-20deg);
}

.marketing-game-card:nth-child(3n + 2) { border-radius: 18px 28px 18px 28px; }
.marketing-game-card:nth-child(3n) { border-radius: 30px 30px 14px 30px; }

.marketing-game-card--racing { border-top-color: #f08d57; }
.marketing-game-card--rpg { border-top-color: #9675e8; }
.marketing-game-card--tower_defense { border-top-color: #e7a94c; }
.marketing-game-card--platformer { border-top-color: #5aaee1; }
.marketing-game-card--farming_sim { border-top-color: #7fb84d; }
.marketing-game-card--city_builder { border-top-color: #b47cdd; }
.marketing-game-card--rhythm { border-top-color: #ed79ad; }
.marketing-game-card--open_world { border-top-color: #47b99d; }
.marketing-game-card--survival { border-top-color: #dc7461; }

.marketing-game-card-heading span {
  border: 1px solid rgba(54, 49, 99, 0.1);
  background: #ffffff;
  box-shadow: 3px 3px 0 rgba(73, 54, 123, 0.1);
}

.marketing-build-outputs article {
  position: relative;
  overflow: hidden;
  border-width: 2px;
  border-radius: 26px 10px 26px 10px;
  box-shadow: 8px 9px 0 rgba(81, 58, 133, 0.08);
}

.marketing-build-outputs article::before {
  position: absolute;
  top: 17px;
  right: 18px;
  color: rgba(72, 53, 120, 0.18);
  font-size: 38px;
  font-weight: 900;
  line-height: 1;
}

.marketing-build-outputs article:nth-child(1) { background: linear-gradient(145deg, #e8fffa, #d9f5ec); }
.marketing-build-outputs article:nth-child(1)::before { content: "⌘"; }
.marketing-build-outputs article:nth-child(2) { border-radius: 10px 26px 10px 26px; }
.marketing-build-outputs article:nth-child(2)::before { content: "▣"; }
.marketing-build-outputs article:nth-child(3) { background: linear-gradient(145deg, #fff4fb, #e7fff8); }
.marketing-build-outputs article:nth-child(3)::before { content: "◉"; }

.how-it-works-steps article {
  position: relative;
  border-left-width: 8px;
  border-radius: 12px 28px 28px 12px;
  box-shadow: 8px 8px 0 rgba(78, 57, 126, 0.07);
}

.how-it-works-steps article:nth-child(1) { border-left-color: #47c8b4; background: #f5fffb; }
.how-it-works-steps article:nth-child(2) { border-left-color: #aa84e9; background: #f8f4ff; }
.how-it-works-steps article:nth-child(3) { border-left-color: #f1a85a; background: #fff9ed; }
.how-it-works-steps article:nth-child(4) { border-left-color: #f07fae; background: #fff3f8; }
.how-it-works-steps article:nth-child(2) > span { background: #eadfff; color: #7353af; }
.how-it-works-steps article:nth-child(3) > span { background: #ffe8c2; color: #a65d22; }
.how-it-works-steps article:nth-child(4) > span { background: #ffdce9; color: #a44471; }

.how-it-works-system-grid article {
  position: relative;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.21);
}

.how-it-works-system-grid article:nth-child(2) { transform: translateY(10px); background: rgba(237, 224, 255, 0.52); }
.how-it-works-system-grid article:nth-child(3) { background: rgba(255, 235, 194, 0.5); }
.how-it-works-system-grid article:nth-child(4) { transform: translateY(10px); background: rgba(212, 255, 239, 0.58); }

.pricing-card {
  position: relative;
  border-width: 2px;
  border-radius: 28px 12px 28px 12px;
  overflow: hidden;
}

.pricing-card::after {
  position: absolute;
  right: -12px;
  bottom: -24px;
  width: 114px;
  height: 114px;
  border: 2px dashed currentColor;
  border-radius: 50%;
  content: "";
  opacity: 0.14;
}

.pricing-card:nth-child(1) { border-color: #7e8dda; background: linear-gradient(145deg, #fafbff, #e5e9ff); color: #5e65a9; }
.pricing-card:nth-child(3) { border-color: #45a99d; border-radius: 12px 28px 12px 28px; background: linear-gradient(145deg, #effff9, #d5f5ea); color: #287c75; }
.pricing-card--featured { color: #b24c83; }
.pricing-card--featured::after { width: 136px; height: 136px; opacity: 0.18; }
.pricing-card-label { position: relative; z-index: 1; }
.pricing-card .marketing-primary-action,
.pricing-card .marketing-secondary-action { position: relative; z-index: 1; }

.pricing-usage-details article {
  border-radius: 50% 50% 18px 18px;
  transform: rotate(-1deg);
}

.pricing-usage-details article:nth-child(2) { transform: translateY(13px) rotate(1deg); background: rgba(221, 206, 255, 0.16); }
.pricing-usage-details article:nth-child(3) { transform: rotate(-2deg); background: rgba(255, 225, 155, 0.16); }

.pricing-included-grid article {
  border-radius: 18px 30px 18px 30px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 5px 6px 0 rgba(93, 71, 140, 0.08);
}

.pricing-included-grid article:nth-child(2n) { border-radius: 30px 18px 30px 18px; transform: translateY(8px); }

.developers-grid article {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  box-shadow: inset 4px 0 0 #48c9ba, 8px 9px 0 rgba(70, 53, 113, 0.1);
}

.developers-grid article::before {
  position: absolute;
  top: 18px;
  right: 18px;
  border: 1px solid currentColor;
  border-radius: 6px;
  color: rgba(61, 51, 107, 0.42);
  content: "///";
  padding: 3px 6px;
  font: 800 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.developers-grid article:nth-child(2) { box-shadow: inset 4px 0 0 #9a79e6, 8px 9px 0 rgba(70, 53, 113, 0.1); }
.developers-grid article:nth-child(3) { box-shadow: inset 4px 0 0 #f0a253, 8px 9px 0 rgba(70, 53, 113, 0.1); }
.developers-grid article:nth-child(2)::before { content: "{ }"; }
.developers-grid article:nth-child(3)::before { content: "v1"; }

.legal-index-grid article {
  position: relative;
  overflow: hidden;
  border-radius: 8px 24px 8px 24px;
  background: linear-gradient(120deg, #fffdfa, #fff4df);
}

.legal-index-grid article::before {
  position: absolute;
  top: 0;
  right: 22px;
  width: 34px;
  height: 44px;
  border-radius: 0 0 10px 10px;
  background: #efb562;
  content: "";
}

.legal-index-grid article:nth-child(2) { border-radius: 24px 8px 24px 8px; background: linear-gradient(120deg, #fbf8ff, #eee5ff); }
.legal-index-grid article:nth-child(2)::before { background: #a388e1; }
.legal-index-grid article:nth-child(3) { background: linear-gradient(120deg, #f3fff9, #dff7ec); }
.legal-index-grid article:nth-child(3)::before { background: #59beac; }

.crossplay-benefit-grid article {
  position: relative;
  overflow: hidden;
  border-width: 2px;
  border-radius: 26px 10px 26px 10px;
}

.crossplay-benefit-grid article::after {
  position: absolute;
  right: 20px;
  bottom: 19px;
  color: rgba(57, 43, 107, 0.09);
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
}

.crossplay-benefit-grid article:nth-child(1)::after { content: "⌘"; }
.crossplay-benefit-grid article:nth-child(2) { border-radius: 10px 26px 10px 26px; }
.crossplay-benefit-grid article:nth-child(2)::after { content: "▣"; }
.crossplay-benefit-grid article:nth-child(3)::after { content: "◉"; }

.crossplay-platform-list article {
  position: relative;
  overflow: hidden;
  border-left-width: 5px;
  border-radius: 12px 22px 22px 12px;
  background: rgba(255, 255, 255, 0.8);
}

.crossplay-platform-list article:nth-child(1) { border-left-color: #ecae58; }
.crossplay-platform-list article:nth-child(2) { border-left-color: #43baad; transform: translateX(12px); }
.crossplay-platform-list article:nth-child(3) { border-left-color: #e787b2; }

.marketing-cta,
.marketing-page-cta,
.marketplace-creator-cta {
  border: 0;
  border-radius: 28px;
  background: linear-gradient(115deg, #fff0ba, #ffd6e5 52%, #d7fff1 100%);
  box-shadow: 0 12px 0 rgba(84, 63, 131, 0.08);
  margin-bottom: 40px;
  padding: 48px;
}

.marketplace-creator-cta {
  margin-top: 72px;
  margin-bottom: 72px;
}

.marketing-cta {
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.marketing-page-cta--how-it-works {
  margin-top: 72px;
  margin-bottom: 72px;
}

.marketing-cta > div {
  display: grid;
  justify-items: center;
}

.marketing-cta .marketing-kicker,
.marketing-page-cta .marketing-kicker,
.marketplace-creator-cta .marketing-kicker {
  background: rgba(255, 255, 255, 0.62);
  color: #a34488;
}

.marketing-footer {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 148, 190, 0.36), transparent 15%),
    linear-gradient(120deg, #242058, #0f6469 100%);
}

.marketing-footer::before {
  position: absolute;
  right: 8%;
  bottom: -55px;
  width: 150px;
  height: 150px;
  border: 2px solid rgba(255, 231, 157, 0.56);
  border-radius: 50%;
  content: "";
}

.marketing-footer-elf {
  position: absolute;
  z-index: 1;
  bottom: clamp(-132px, -9vw, -84px);
  left: clamp(10px, 3vw, 52px);
  width: clamp(112px, 12vw, 176px);
  pointer-events: none;
}

.marketing-footer-elf::after {
  position: absolute;
  right: 7%;
  bottom: 8%;
  width: 58%;
  height: 13%;
  border-radius: 50%;
  background: rgba(1, 11, 44, 0.34);
  content: "";
  filter: blur(7px);
  transform: rotate(-4deg);
}

.marketing-footer-elf img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 8px 9px rgba(2, 11, 47, 0.34));
}

.marketing-footer-inner {
  position: relative;
  z-index: 2;
}

@media (max-width: 760px) {
  .marketing-header {
    border-radius: 22px;
    padding: 10px 12px;
  }

  .marketing-hero > .marketing-header,
  .marketing-page-hero > .marketing-header,
  .developers-hero > .marketing-header,
  .pricing-hero > .marketing-header,
  .legal-hero > .marketing-header,
  .assets-hero > .marketing-header,
  .earnings-hero > .marketing-header {
    margin-top: 12px;
  }

  .game-marketing-hero > .marketing-header {
    margin-top: 12px;
  }

  .marketing-hero::before,
  .marketing-page-hero::before,
  .marketplace-hero::before,
  .developers-hero::before,
  .pricing-hero::before,
  .legal-hero::before,
  .assets-hero::before {
    top: 22%;
    right: -42px;
  }

  .marketing-hero::after,
  .marketing-page-hero::after,
  .developers-hero::after,
  .pricing-hero::after,
  .legal-hero::after {
    right: 12%;
    bottom: 8%;
  }

  .marketing-workflow article:nth-child(2),
  .marketing-workflow article:nth-child(3),
  .marketing-build-outputs article:nth-child(2),
  .pricing-card--featured,
  .how-it-works-steps article:nth-child(even),
  .how-it-works-system-grid article:nth-child(n),
  .pricing-usage-details article:nth-child(n),
  .pricing-included-grid article:nth-child(n),
  .crossplay-platform-list article:nth-child(n) {
    transform: none;
  }

  .how-it-works-steps article {
    padding: 24px;
  }

  .marketing-cta,
  .marketing-page-cta,
  .marketplace-creator-cta {
    width: min(100% - 40px, 1120px);
    margin-bottom: 28px;
    padding: 30px;
  }

  .marketplace-creator-cta {
    margin-top: 48px;
    margin-bottom: 48px;
  }

  .marketing-page-cta--how-it-works {
    margin-top: 48px;
    margin-bottom: 48px;
  }

  .marketing-marketplace-showcase {
    border-width: 5px;
    box-shadow: 9px 11px 0 rgba(255, 150, 189, 0.54), 15px -8px 0 rgba(255, 205, 91, 0.56);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .marketing-hero::before,
  .marketing-page-hero::before,
  .marketplace-hero::before,
  .developers-hero::before,
  .pricing-hero::before,
  .legal-hero::before {
    animation: marketing-float 8s ease-in-out infinite alternate;
  }

  .marketing-hero::after,
  .marketing-page-hero::after,
  .developers-hero::after,
  .pricing-hero::after,
  .legal-hero::after {
    animation: marketing-float 6s ease-in-out infinite alternate-reverse;
  }
}

@keyframes marketing-float {
  to {
    transform: translateY(14px) rotate(9deg);
  }
}

/* Authentication is part of the welcome, too. */
.auth-shell {
  background:
    radial-gradient(circle at 87% 8%, rgba(255, 148, 190, 0.34), transparent 17%),
    radial-gradient(circle at 60% 92%, rgba(81, 225, 203, 0.25), transparent 19%),
    #f8f5ef;
}

.auth-visual {
  background: #20225c;
}

.auth-visual::before {
  position: absolute;
  z-index: 1;
  top: 13%;
  right: 10%;
  width: min(31vw, 270px);
  aspect-ratio: 1;
  border: 2px solid rgba(255, 229, 145, 0.68);
  border-radius: 45% 55% 60% 40% / 42% 45% 55% 58%;
  background: rgba(255, 144, 187, 0.18);
  box-shadow: -38px 70px 0 -14px rgba(89, 226, 206, 0.2), 60px 40px 0 -30px rgba(255, 210, 93, 0.75);
  content: "";
  transform: rotate(-13deg);
}

.auth-visual::after {
  z-index: 2;
  background:
    linear-gradient(115deg, rgba(28, 23, 74, 0.87), rgba(12, 88, 103, 0.57)),
    rgba(4, 16, 18, 0.24);
}

.auth-visual img {
  filter: saturate(1.15);
  transform: scale(1.035);
}

.auth-visual img[src*="fusionery-signup-hero"] {
  object-position: 62% center;
}

.auth-visual-copy {
  z-index: 3;
  max-width: 400px;
}

.auth-visual-copy::before {
  width: fit-content;
  border: 1px solid rgba(255, 232, 160, 0.62);
  border-radius: 999px;
  background: rgba(33, 30, 82, 0.5);
  color: #ffe79c;
  content: "WELCOME BACK";
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.auth-content {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 193, 101, 0.26), transparent 17%),
    radial-gradient(circle at 11% 83%, rgba(191, 155, 255, 0.22), transparent 16%),
    #fbf8f2;
}

.auth-content::before {
  position: absolute;
  z-index: -1;
  right: -82px;
  bottom: -86px;
  width: 220px;
  height: 220px;
  border: 2px dashed rgba(176, 112, 209, 0.38);
  border-radius: 50%;
  content: "";
}

.auth-brand {
  position: relative;
  z-index: 1;
  width: min(470px, 100%);
  margin-bottom: 18px;
  border: 1px solid rgba(67, 55, 116, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 22px rgba(75, 55, 116, 0.07);
  padding: 12px 18px;
}

.auth-panel {
  position: relative;
  z-index: 1;
  width: min(470px, 100%);
  border: 1px solid rgba(67, 55, 116, 0.14);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 13px 0 rgba(92, 65, 137, 0.08), 0 24px 45px rgba(71, 52, 110, 0.12);
  padding: 34px;
}

.auth-panel .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  border: 1px solid #e6a1be;
  border-radius: 999px;
  background: #fff5f9;
  color: #a34488;
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.07em;
}

.auth-panel .eyebrow::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.auth-panel h1 {
  color: #272252;
  font-size: 38px;
  letter-spacing: -0.04em;
}

.auth-intro {
  color: #596276;
}

.auth-form .form-field {
  gap: 7px;
}

.auth-form .form-field label {
  color: #3b3b59;
  font-size: 13px;
}

.auth-form .form-field input {
  border-color: #ddd5ec;
  border-radius: 14px;
  background: #fffdfa;
  padding: 12px 14px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.auth-form .form-field input:focus {
  border-color: #ab71d6;
  box-shadow: 0 0 0 4px rgba(171, 113, 214, 0.14);
  outline: 0;
}

.auth-form .form-field--consent {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  margin-top: 2px;
}

.auth-form .form-field--consent input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: #9b4787;
}

.auth-form .form-field--consent label {
  font-weight: 600;
  line-height: 1.45;
}

.auth-form .primary-button {
  border-radius: 999px;
  background: linear-gradient(110deg, #ffcf5a, #ff8bb8 100%);
  box-shadow: 0 6px 0 rgba(86, 60, 126, 0.18), 0 11px 20px rgba(83, 61, 123, 0.14);
  color: #302055;
  font-weight: 900;
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.auth-form .primary-button:hover {
  background: linear-gradient(110deg, #ffe184, #ffa9cb 100%);
  box-shadow: 0 3px 0 rgba(86, 60, 126, 0.18), 0 7px 16px rgba(83, 61, 123, 0.16);
  transform: translateY(3px);
}

.auth-switch {
  color: #667085;
}

.auth-switch a,
.auth-legal-note a {
  color: #9b4787;
  text-decoration-color: rgba(155, 71, 135, 0.36);
}

.auth-switch a:hover,
.auth-legal-note a:hover {
  color: #713568;
}

.auth-legal-note {
  color: #6b7181;
}

.auth-panel .notice-banner,
.auth-panel .form-error {
  margin-bottom: 0;
  border-radius: 14px;
}

@media (max-width: 760px) {
  .auth-content {
    padding: 30px 20px 48px;
  }

  .auth-brand {
    margin-bottom: 16px;
  }

  .auth-panel {
    border-radius: 24px;
    padding: 26px;
  }

  .auth-panel h1 {
    font-size: 32px;
  }
}

/* Cross-platform acquisition page */
.pricing-hero-image,
.pricing-hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pricing-hero-image {
  z-index: 0;
  object-fit: cover;
  object-position: center;
}

.pricing-hero-shade {
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(18, 20, 71, 0.96) 0%, rgba(26, 33, 90, 0.83) 43%, rgba(20, 31, 86, 0.26) 100%),
    linear-gradient(0deg, rgba(16, 18, 61, 0.68), transparent 56%);
}

.pricing-hero > .pricing-header,
.pricing-hero > .pricing-hero-copy {
  z-index: 2;
}

.crossplay-hero {
  position: relative;
  min-height: 620px;
  color: #ffffff;
  isolation: isolate;
  overflow: hidden;
}

.crossplay-hero-image,
.crossplay-hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.crossplay-hero-image {
  z-index: 0;
  object-fit: cover;
}

.crossplay-hero-shade {
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(17, 21, 68, 0.93) 0%, rgba(23, 38, 91, 0.82) 43%, rgba(19, 48, 97, 0.32) 100%),
    linear-gradient(0deg, rgba(16, 20, 64, 0.7), transparent 52%);
}

.crossplay-hero::before {
  position: absolute;
  z-index: 1;
  top: 22%;
  right: 9%;
  width: 190px;
  height: 190px;
  border: 2px solid rgba(255, 229, 145, 0.64);
  border-radius: 50%;
  box-shadow: 0 0 0 19px rgba(255, 150, 193, 0.16), -72px 78px 0 -16px rgba(77, 224, 205, 0.52);
  content: "";
  pointer-events: none;
}

.crossplay-header,
.crossplay-hero-copy {
  position: relative;
  z-index: 2;
}

.crossplay-header {
  margin-top: 18px;
}

.crossplay-hero-copy {
  width: min(1120px, calc(100% - 64px));
  margin: 94px auto 0;
}

.crossplay-hero-copy h1 {
  max-width: 650px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(46px, 5vw, 68px);
  letter-spacing: -0.05em;
  line-height: 0.98;
}

.crossplay-hero-copy > p:not(.marketing-kicker) {
  max-width: 570px;
  margin: 22px 0 0;
  color: #e4edff;
  font-size: 19px;
  line-height: 1.55;
}

.crossplay-hero-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0;
}

.crossplay-hero-platforms span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 999px;
  background: rgba(23, 27, 78, 0.64);
  box-shadow: 0 6px 16px rgba(7, 13, 50, 0.18);
  color: #ffffff;
  padding: 9px 13px;
  font-size: 13px;
  font-weight: 900;
}

.crossplay-hero-platforms b {
  color: #ffe79c;
  font-size: 15px;
}

.crossplay-intro,
.crossplay-benefits,
.crossplay-faq {
  width: min(1120px, calc(100% - 64px));
  margin: 0 auto;
}

.crossplay-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  align-items: end;
  gap: 72px;
  padding: 110px 0 80px;
}

.crossplay-intro h2,
.crossplay-connection h2,
.crossplay-benefits h2,
.crossplay-platforms h2,
.crossplay-faq h2 {
  margin: 0;
  color: #24234d;
  font-size: 44px;
  letter-spacing: 0.035em;
  line-height: 1.08;
}

.crossplay-intro > p {
  margin: 0;
  color: #566174;
  font-size: 18px;
  line-height: 1.65;
}

.crossplay-connection {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  align-items: center;
  gap: 70px;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 17%, rgba(255, 151, 193, 0.34), transparent 16%),
    radial-gradient(circle at 12% 86%, rgba(71, 221, 203, 0.27), transparent 19%),
    linear-gradient(125deg, #2a2161, #106571 100%);
  color: #ffffff;
  padding: 92px max(32px, calc((100% - 1120px) / 2));
}

.crossplay-connection .marketing-kicker {
  border-color: rgba(255, 229, 145, 0.6);
  background: rgba(30, 28, 81, 0.45);
  color: #ffe79c;
}

.crossplay-connection h2 {
  color: #ffffff;
}

.crossplay-connection-copy > p:not(.marketing-kicker) {
  max-width: 460px;
  margin: 20px 0 0;
  color: #cedcf4;
  line-height: 1.62;
}

.crossplay-orbit {
  position: relative;
  width: min(100%, 470px);
  aspect-ratio: 1;
  justify-self: center;
  border: 1px dashed rgba(255, 232, 160, 0.58);
  border-radius: 50%;
}

.crossplay-orbit::before,
.crossplay-orbit::after {
  position: absolute;
  border: 1px solid rgba(139, 235, 221, 0.42);
  border-radius: 50%;
  content: "";
}

.crossplay-orbit::before {
  inset: 13%;
}

.crossplay-orbit::after {
  inset: 28%;
}

.crossplay-orbit-platform,
.crossplay-orbit-core {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 50%;
  text-align: center;
}

.crossplay-orbit-platform {
  z-index: 2;
  width: 96px;
  height: 96px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 9px 0 rgba(19, 24, 75, 0.19), 0 15px 25px rgba(12, 20, 64, 0.22);
  color: #302055;
  font-size: 14px;
  font-weight: 900;
}

.crossplay-orbit-platform--web {
  top: -5px;
  left: calc(50% - 48px);
  background: #ffdc69;
}

.crossplay-orbit-platform--mobile {
  bottom: 7%;
  left: 3%;
  background: #8df1df;
}

.crossplay-orbit-platform--steam {
  right: 3%;
  bottom: 7%;
  background: #f6a2c7;
}

.crossplay-orbit-core {
  top: 50%;
  left: 50%;
  width: 174px;
  height: 174px;
  border: 7px solid rgba(255, 255, 255, 0.82);
  background: linear-gradient(145deg, #7057c8, #17a6a0 100%);
  box-shadow: 0 0 0 15px rgba(255, 218, 100, 0.12), 0 16px 34px rgba(10, 19, 63, 0.28);
  color: #ffffff;
  transform: translate(-50%, -50%);
}

.crossplay-orbit-core strong {
  align-self: end;
  font-size: 22px;
  letter-spacing: -0.04em;
}

.crossplay-orbit-core span {
  align-self: start;
  color: #e5fffa;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.crossplay-benefits {
  padding: 110px 0;
}

.crossplay-benefits-heading {
  max-width: 670px;
  margin-bottom: 42px;
}

.crossplay-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.crossplay-benefit-grid article {
  min-height: 280px;
  border: 1px solid rgba(67, 55, 116, 0.15);
  border-radius: 24px;
  background: #fffdf9;
  box-shadow: 0 11px 0 rgba(71, 55, 116, 0.07), 0 20px 35px rgba(67, 47, 108, 0.07);
  padding: 28px;
}

.crossplay-benefit-grid article:nth-child(2) {
  background: #f5efff;
  transform: translateY(12px);
}

.crossplay-benefit-grid article:nth-child(3) {
  background: #eafff7;
}

.crossplay-benefit-grid span,
.crossplay-platform-list span {
  display: inline-flex;
  border-radius: 999px;
  background: #fff0a9;
  color: #7d4b74;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crossplay-benefit-grid h3,
.crossplay-platform-list h3 {
  margin: 22px 0 0;
  color: #27264f;
  font-size: 22px;
  letter-spacing: -0.025em;
  line-height: 1.16;
}

.crossplay-benefit-grid p,
.crossplay-platform-list p {
  margin: 14px 0 0;
  color: #596476;
  line-height: 1.58;
}

.crossplay-platforms {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 70px;
  background:
    radial-gradient(circle at 8% 18%, rgba(255, 201, 104, 0.32), transparent 17%),
    linear-gradient(135deg, #ecfff5, #e9efff 100%);
  padding: 92px max(32px, calc((100% - 1120px) / 2));
}

.crossplay-platform-list {
  display: grid;
  gap: 14px;
}

.crossplay-platform-list article {
  border: 1px solid rgba(68, 72, 122, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.68);
  padding: 22px 24px;
}

.crossplay-platform-list article:nth-child(2) span {
  background: #c6f9ec;
}

.crossplay-platform-list article:nth-child(3) span {
  background: #f8d3e5;
}

.crossplay-platform-list h3 {
  margin-top: 14px;
  font-size: 20px;
}

.crossplay-platform-list p {
  margin-top: 7px;
}

.crossplay-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 72px;
  padding: 110px 0;
}

.crossplay-faq h2 {
  max-width: 420px;
}

.crossplay-faq dl {
  display: grid;
  margin: 0;
  border-top: 1px solid rgba(68, 72, 122, 0.2);
}

.crossplay-faq dl > div {
  border-bottom: 1px solid rgba(68, 72, 122, 0.2);
  padding: 24px 0;
}

.crossplay-faq dt {
  color: #2c2b51;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
}

.crossplay-faq dd {
  margin: 10px 0 0;
  color: #596476;
  line-height: 1.6;
}

.crossplay-cta {
  text-align: left;
}

.crossplay-cta > div {
  justify-items: start;
}

/* Marketing motion: energetic enough to feel like a game world, while keeping
 * the content stable and readable. */
.marketing-game-card:hover,
.pricing-card:hover,
.developers-grid article:hover,
.legal-index-grid article:hover,
.marketplace-game-card:hover {
  transform: translateY(-7px) rotate(-0.35deg);
}

.pricing-card--featured:hover {
  transform: translateY(-18px) rotate(-0.6deg);
}

@media (prefers-reduced-motion: no-preference) {
  .marketing-hero-image,
  .marketing-page-hero-image,
  .marketplace-hero-image,
  .pricing-hero-image,
  .crossplay-hero-image,
  .assets-hero-image,
  .auth-visual > img {
    animation: marketing-hero-drift 20s ease-in-out infinite alternate;
    will-change: transform;
  }

  .marketing-hero > .marketing-header,
  .marketing-page-hero > .marketing-header,
  .marketplace-hero > .marketing-header,
  .game-marketing-hero > .marketing-header,
  .developers-hero > .marketing-header,
  .pricing-hero > .pricing-header,
  .legal-hero > .marketing-header,
  .assets-hero > .marketing-header,
  .earnings-hero > .marketing-header,
  .crossplay-header {
    animation: marketing-enter 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .marketing-hero-copy,
  .marketing-page-hero-copy,
  .marketplace-hero-copy,
  .developers-hero-copy,
  .pricing-hero-copy,
  .legal-hero-copy,
  .assets-hero-copy,
  .earnings-hero-copy,
  .crossplay-hero-copy {
    animation: marketing-enter 760ms 110ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .marketing-hero-footer span,
  .marketplace-hero-markers span,
  .crossplay-hero-platforms span {
    animation: marketing-chip-bob 3.6s ease-in-out infinite;
  }

  .marketing-hero-footer span:nth-child(2),
  .marketplace-hero-markers span:nth-child(2),
  .crossplay-hero-platforms span:nth-child(2) {
    animation-delay: -1.2s;
  }

  .marketing-hero-footer span:nth-child(3),
  .marketplace-hero-markers span:nth-child(3),
  .crossplay-hero-platforms span:nth-child(3) {
    animation-delay: -2.35s;
  }

  .marketing-proof::before,
  .marketing-game-types::before,
  .marketing-build-path::before,
  .pricing-plans::before,
  .developers-overview::before,
  .legal-index::before {
    animation: marketing-sparkle 3.8s ease-in-out infinite;
  }

  .marketing-composition::before,
  .marketing-platform::before,
  .marketplace-explainer::before,
  .pricing-usage::before {
    animation: marketing-orbit 22s linear infinite;
  }

  .marketing-marketplace-showcase {
    animation: marketing-showcase-sway 7s ease-in-out infinite alternate;
  }

  .pricing-card--featured {
    animation: marketing-feature-glow 3.5s ease-in-out infinite;
  }

  .crossplay-orbit::before,
  .crossplay-orbit::after {
    animation: marketing-orbit-ring 14s linear infinite;
  }

  .crossplay-orbit::after {
    animation-direction: reverse;
    animation-duration: 10s;
  }

  .crossplay-orbit-core {
    animation: marketing-core-pulse 3.4s ease-in-out infinite;
  }

  .crossplay-orbit-platform--web {
    animation: marketing-platform-bob 3.8s ease-in-out infinite;
  }

  .crossplay-orbit-platform--mobile {
    animation: marketing-platform-bob 4.3s -1.3s ease-in-out infinite;
  }

  .crossplay-orbit-platform--steam {
    animation: marketing-platform-bob 4s -2.1s ease-in-out infinite;
  }

  .marketing-footer-elf {
    animation: marketing-elf-sword-swing 7.2s steps(4, end) infinite;
  }

  .marketing-footer-elf img {
    animation: marketing-elf-sword-flash 7.2s steps(4, end) infinite;
  }
}

@keyframes marketing-hero-drift {
  from { transform: scale(1.025) translate3d(-0.5%, calc(-0.4% + var(--marketing-parallax-y, 0px)), 0); }
  to { transform: scale(1.075) translate3d(0.8%, calc(0.7% + var(--marketing-parallax-y, 0px)), 0); }
}

@keyframes marketing-enter {
  from { opacity: 0; transform: translateY(22px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes marketing-chip-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(-1deg); }
}

@keyframes marketing-sparkle {
  0%, 100% { opacity: 0.62; transform: rotate(-15deg) scale(0.82); }
  50% { opacity: 1; transform: rotate(12deg) scale(1.18); }
}

@keyframes marketing-orbit {
  from { transform: rotate(18deg); }
  to { transform: rotate(378deg); }
}

@keyframes marketing-showcase-sway {
  from { transform: translateY(-3px) rotate(-0.4deg); }
  to { transform: translateY(6px) rotate(2.4deg); }
}

@keyframes marketing-feature-glow {
  0%, 100% { box-shadow: 0 12px 0 rgba(71, 55, 116, 0.08), 0 20px 35px rgba(67, 47, 108, 0.08); }
  50% { box-shadow: 0 14px 0 rgba(254, 138, 187, 0.16), 0 25px 45px rgba(145, 91, 202, 0.18); }
}

@keyframes marketing-orbit-ring {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes marketing-core-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.055); }
}

@keyframes marketing-platform-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}

@keyframes marketing-elf-sword-swing {
  0%, 55%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  64% { transform: translate(1px, 1px) rotate(0.7deg) scale(0.998); }
  72% { transform: translate(-2px, -3px) rotate(-2deg) scale(1.01); }
  81% { transform: translate(1px, 0) rotate(0.5deg) scale(1); }
}

@keyframes marketing-elf-sword-flash {
  0%, 66%, 84%, 100% { filter: drop-shadow(0 8px 9px rgba(2, 11, 47, 0.34)); }
  72%, 78% { filter: drop-shadow(0 8px 9px rgba(2, 11, 47, 0.34)) brightness(1.09) saturate(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .marketing-shell *,
  .marketing-page-shell *,
  .marketplace-shell *,
  .auth-shell * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 760px) {
  .marketing-footer-elf {
    bottom: -76px;
    left: 6px;
    width: 102px;
    opacity: 0.88;
  }

  .crossplay-hero {
    min-height: 620px;
  }

  .crossplay-header,
  .crossplay-hero-copy,
  .crossplay-intro,
  .crossplay-benefits,
  .crossplay-faq {
    width: min(100% - 40px, 1120px);
  }

  .crossplay-header {
    margin-top: 12px;
  }

  .crossplay-hero-copy {
    margin-top: 80px;
  }

  .crossplay-hero-copy h1 {
    font-size: 44px;
  }

  .crossplay-hero-copy > p:not(.marketing-kicker) {
    font-size: 17px;
  }

  .crossplay-hero::before {
    top: 24%;
    right: -74px;
    width: 150px;
    height: 150px;
  }

  .crossplay-intro,
  .crossplay-connection,
  .crossplay-platforms,
  .crossplay-faq {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .crossplay-intro,
  .crossplay-benefits,
  .crossplay-faq {
    padding: 76px 0;
  }

  .crossplay-intro h2,
  .crossplay-connection h2,
  .crossplay-benefits h2,
  .crossplay-platforms h2,
  .crossplay-faq h2 {
    font-size: 34px;
  }

  .crossplay-connection,
  .crossplay-platforms {
    padding: 72px 20px;
  }

  .crossplay-orbit {
    width: min(100%, 360px);
  }

  .crossplay-orbit-platform {
    width: 78px;
    height: 78px;
    font-size: 12px;
  }

  .crossplay-orbit-platform--web {
    left: calc(50% - 39px);
  }

  .crossplay-orbit-core {
    width: 140px;
    height: 140px;
  }

  .crossplay-orbit-core strong {
    font-size: 18px;
  }

  .crossplay-benefit-grid {
    grid-template-columns: 1fr;
  }

  .crossplay-benefit-grid article:nth-child(2) {
    transform: none;
  }

  .crossplay-cta {
    align-items: flex-start;
    text-align: left;
  }
}

/* Structural variation for public content: these groups intentionally use
 * different visual metaphors instead of sharing one elevated-card component. */
.marketing-workflow {
  position: relative;
  gap: 0;
  padding-left: 58px;
}

.marketing-workflow::before {
  position: absolute;
  top: 18px;
  bottom: 22px;
  left: 18px;
  width: 2px;
  background: linear-gradient(#50cbb7, #a482e8 48%, #f0ac59);
  content: "";
}

.marketing-workflow article,
.marketing-workflow article:nth-child(n) {
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 13px 0 25px;
  transform: none;
}

.marketing-workflow article::after { content: none; }

.marketing-workflow article > span {
  position: absolute;
  left: -58px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 3px solid #f8f5ef;
  border-radius: 50%;
  background: #57cbbb;
  box-shadow: 0 0 0 2px #57cbbb;
  color: #143d43;
}

.marketing-workflow article:nth-child(2) > span {
  border-radius: 10px;
  background: #a482e8;
  box-shadow: 0 0 0 2px #a482e8;
  color: #ffffff;
  transform: rotate(8deg);
}

.marketing-workflow article:nth-child(3) > span {
  border-radius: 50% 50% 50% 8px;
  background: #f0ac59;
  box-shadow: 0 0 0 2px #f0ac59;
  color: #533119;
}

.marketing-workflow h3 { font-size: 22px; }
.marketing-workflow article:nth-child(1) h3 { color: #197d71; }
.marketing-workflow article:nth-child(2) h3 { color: #7052b3; }
.marketing-workflow article:nth-child(3) h3 { color: #a35a21; }

.marketing-game-grid { grid-auto-flow: dense; }

.marketing-game-card,
.marketing-game-card:nth-child(n) {
  min-height: 350px;
  border: 0;
  box-shadow: none;
  isolation: isolate;
  transform: none;
}

.marketing-game-card::before {
  z-index: 0;
  top: auto;
  right: auto;
  bottom: -54px;
  left: -38px;
  width: 190px;
  height: 190px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  content: "";
  transform: none;
}

.marketing-game-card > * {
  position: relative;
  z-index: 1;
}

.marketing-game-card-heading span,
.marketing-game-card-heading p {
  border: 0;
  background: rgba(255, 255, 255, 0.65);
  color: #29234f;
}

.marketing-game-card--racing {
  background: repeating-linear-gradient(135deg, #ffb37d 0 18px, #ffcb8a 18px 36px);
  border-radius: 46px 10px 46px 10px;
}

.marketing-game-card--rpg {
  background: radial-gradient(circle at 82% 18%, #fff3be 0 9%, transparent 10%), linear-gradient(140deg, #b49af4, #e8dcff);
  border-radius: 18px 54px 18px 54px;
}

.marketing-game-card--tower_defense {
  background-color: #ffd98e;
  background-image: radial-gradient(#d98545 1.5px, transparent 1.5px);
  background-size: 13px 13px;
  border-radius: 12px 12px 50px 12px;
}

.marketing-game-card--platformer {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.28) 50%, transparent 50%), linear-gradient(#7dcaef 50%, #aee9ff 50%);
  background-size: 28px 28px;
  border-radius: 54px 16px 16px 16px;
}

.marketing-game-card--farming_sim {
  background: repeating-linear-gradient(171deg, #b8df76 0 21px, #d5f09c 21px 42px);
  border-radius: 42px 42px 10px 42px;
}

.marketing-game-card--city_builder {
  background-color: #d8b6f4;
  background-image: linear-gradient(rgba(107, 74, 161, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(107, 74, 161, 0.2) 1px, transparent 1px);
  background-size: 24px 24px;
  border-radius: 10px 42px 42px 10px;
}

.marketing-game-card--rhythm {
  background: radial-gradient(circle at 25% 24%, #fff4aa 0 6%, transparent 7%), radial-gradient(circle at 73% 65%, #ff87b7 0 10%, transparent 11%), #f4b5d6;
  border-radius: 50px 50px 14px 14px;
}

.marketing-game-card--open_world {
  background: linear-gradient(155deg, #8ae2c9 0 44%, #c7f5d6 44% 72%, #e5f3a8 72%);
  border-radius: 14px 50px 14px 50px;
}

.marketing-game-card--survival {
  background: repeating-linear-gradient(45deg, #ed9278 0 13px, #f7b691 13px 26px);
  border-radius: 50px 14px 50px 14px;
}

.marketing-game-card:hover { box-shadow: none; transform: translateY(-5px) rotate(-0.4deg); }

@media (min-width: 980px) {
  .marketing-game-card--racing,
  .marketing-game-card--rhythm { grid-column: span 2; }
}

.marketing-build-outputs {
  gap: 22px;
  border: 0;
}

.marketing-build-outputs article,
.marketing-build-outputs article:first-child {
  min-height: 248px;
  border: 0;
  box-shadow: 7px 8px 0 rgba(65, 45, 109, 0.13);
}

.marketing-build-outputs article:nth-child(1) {
  border-radius: 4px;
  background-color: #d9f4ed;
  background-image: linear-gradient(rgba(51, 123, 119, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(51, 123, 119, 0.16) 1px, transparent 1px);
  background-size: 18px 18px;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 93% 100%, 0 100%);
}

.marketing-build-outputs article:nth-child(2) {
  border-radius: 50% 10px 50% 10px;
  background: #36245f;
  box-shadow: 9px 10px 0 #e58ab2;
  color: #ffffff;
  transform: rotate(1.1deg);
}

.marketing-build-outputs article:nth-child(2) h3 { color: #ffffff; }
.marketing-build-outputs article:nth-child(2) p { color: #e3dfff; }
.marketing-build-outputs article:nth-child(2) span { background: #ffdd72; color: #4a285f; }

.marketing-build-outputs article:nth-child(3) {
  border-radius: 10px 10px 44px 10px;
  background: repeating-linear-gradient(90deg, #fff1b0 0 5px, #ffe59b 5px 10px);
  box-shadow: 7px 8px 0 #65c8b7;
  transform: rotate(-0.7deg);
}

.marketing-build-outputs article::before { opacity: 0.65; }

.how-it-works-steps {
  position: relative;
  gap: 0;
  border: 0;
  padding-left: 82px;
}

.how-it-works-steps::before {
  position: absolute;
  top: 35px;
  bottom: 35px;
  left: 27px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(#4ecab8, #9b83e1 36%, #f1aa59 68%, #f27faf);
  content: "";
}

.how-it-works-steps article,
.how-it-works-steps article:nth-child(n) {
  grid-template-columns: minmax(0, 1.05fr) minmax(240px, 0.6fr);
  gap: 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 30px 0 38px;
  transform: none;
}

.how-it-works-steps article > span {
  position: absolute;
  left: -82px;
  width: 56px;
  height: 56px;
  border: 4px solid #f8f5ef;
  background: #4ecab8;
  box-shadow: 0 0 0 2px #4ecab8;
  color: #174f4b;
}

.how-it-works-steps article:nth-child(2) > span { border-radius: 11px; background: #9b83e1; box-shadow: 0 0 0 2px #9b83e1; color: #ffffff; transform: rotate(7deg); }
.how-it-works-steps article:nth-child(3) > span { border-radius: 50% 50% 11px 50%; background: #f1aa59; box-shadow: 0 0 0 2px #f1aa59; color: #61381c; }
.how-it-works-steps article:nth-child(4) > span { border-radius: 50% 11px 50% 50%; background: #f27faf; box-shadow: 0 0 0 2px #f27faf; color: #5e2546; transform: rotate(-7deg); }

.how-it-works-steps article:nth-child(1) h3 { color: #197f73; }
.how-it-works-steps article:nth-child(2) h3 { color: #7053b4; }
.how-it-works-steps article:nth-child(3) h3 { color: #a45d23; }
.how-it-works-steps article:nth-child(4) h3 { color: #a34371; }

.how-it-works-system-grid article {
  min-height: 170px;
  border: 0;
  box-shadow: none;
}

.how-it-works-system-grid article:nth-child(1) { border-radius: 42px 10px 10px 10px; background: #cdf6e8; }
.how-it-works-system-grid article:nth-child(2) { border-radius: 10px 42px 10px 10px; background: #e5d9ff; }
.how-it-works-system-grid article:nth-child(3) { border-radius: 10px 10px 10px 42px; background: #ffe3ad; }
.how-it-works-system-grid article:nth-child(4) { border-radius: 10px 10px 42px 10px; background: #ffd8e7; }

.pricing-card,
.pricing-card:nth-child(n) {
  border: 0;
  box-shadow: none;
  color: #2c3056;
}

.pricing-card--player {
  border-radius: 6px;
  background: #e2ebff;
  box-shadow: 8px 8px 0 #91a6e8;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 97% 48%, 100% 51%, 100% 100%, 0 100%, 0 51%, 3% 48%, 0 45%);
}

.pricing-card--player::after {
  right: 22px;
  bottom: 18px;
  width: 84px;
  height: 84px;
  border-style: solid;
  border-radius: 10px;
  opacity: 0.13;
  transform: rotate(13deg);
}

.pricing-card--creator {
  border-radius: 42px 42px 12px 12px;
  background: linear-gradient(150deg, #fff4ba, #ffd2e2 53%, #d9fbef);
  box-shadow: 10px 12px 0 #da78aa;
  color: #4a285f;
  animation: none;
  transform: translateY(-12px) rotate(-0.6deg);
}

.pricing-card--creator::after { border-width: 3px; opacity: 0.2; }

.pricing-card--studio {
  border-radius: 8px 34px 8px 8px;
  background: linear-gradient(135deg, #1f3a62, #306b73);
  box-shadow: 9px 9px 0 #8bd8cc;
  color: #e9fffb;
}

.pricing-card--studio::after {
  border-color: #ffdc79;
  opacity: 0.24;
}

.pricing-card--studio .pricing-card-label,
.pricing-card--studio .pricing-price,
.pricing-card--studio .pricing-price span,
.pricing-card--studio .pricing-card-summary,
.pricing-card--studio li { color: #ecfffb; }

.pricing-card--studio ul { border-top-color: rgba(255, 255, 255, 0.28); }
.pricing-card--studio li::before { color: #ffdb74; }
.pricing-card--studio .marketing-secondary-action { border: 0; background: #ffdc73; color: #253154; }
.pricing-card--studio .marketing-secondary-action:hover { background: #ffedaa; color: #253154; }

.pricing-card:hover { box-shadow: none; transform: translateY(-5px) rotate(-0.35deg); }
.pricing-card--player:hover { box-shadow: 8px 13px 0 #91a6e8; }
.pricing-card--creator:hover { box-shadow: 10px 17px 0 #da78aa; transform: translateY(-17px) rotate(-0.9deg); }
.pricing-card--studio:hover { box-shadow: 9px 14px 0 #8bd8cc; }

.pricing-usage-details article,
.pricing-usage-details article:nth-child(n) {
  border: 0;
  box-shadow: none;
}

.pricing-usage-details article:nth-child(1) { border-radius: 50% 50% 18px 18px; background: rgba(93, 224, 202, 0.18); }
.pricing-usage-details article:nth-child(2) { border-radius: 12px; background: rgba(190, 155, 255, 0.24); transform: rotate(2deg); }
.pricing-usage-details article:nth-child(3) { border-radius: 18px 18px 50% 50%; background: rgba(255, 211, 106, 0.2); transform: rotate(-2deg); }

.pricing-included-grid article,
.pricing-included-grid article:nth-child(n) {
  border: 0;
  box-shadow: none;
  transform: none;
}

.pricing-included-grid article:nth-child(1) { border-radius: 50px 12px 12px 12px; background: #bfeee2; }
.pricing-included-grid article:nth-child(2) { border-radius: 12px 50px 12px 12px; background: #dcd3ff; }
.pricing-included-grid article:nth-child(3) { border-radius: 12px 12px 50px 12px; background: #ffd9ad; }

.crossplay-benefit-grid article,
.crossplay-benefit-grid article:nth-child(n) {
  border: 0;
  box-shadow: none;
}

.crossplay-benefit-grid article:nth-child(1) { border-radius: 54px 10px 54px 10px; background: #c8f5e7; }
.crossplay-benefit-grid article:nth-child(2) { border-radius: 10px 54px 10px 54px; background: #e2d5ff; transform: rotate(1deg); }
.crossplay-benefit-grid article:nth-child(3) { border-radius: 54px 54px 10px 10px; background: #ffe0ae; }

.crossplay-platform-list { gap: 20px; }

.crossplay-platform-list article,
.crossplay-platform-list article:nth-child(n) {
  border: 0;
  border-left: 0;
  box-shadow: none;
  transform: none;
}

.crossplay-platform-list article:nth-child(1) { border-radius: 999px 14px 14px 999px; background: #ffe2a1; }
.crossplay-platform-list article:nth-child(2) { border-radius: 14px 999px 999px 14px; background: #c9f7e9; }
.crossplay-platform-list article:nth-child(3) { border-radius: 14px 14px 999px 14px; background: #f8d3e5; }

@media (max-width: 760px) {
  .marketing-workflow { padding-left: 52px; }
  .marketing-workflow::before { left: 16px; }
  .marketing-workflow article > span { left: -52px; }

  .how-it-works-steps { padding-left: 70px; }
  .how-it-works-steps::before { left: 23px; }
  .how-it-works-steps article,
  .how-it-works-steps article:nth-child(n) {
    grid-template-columns: 1fr;
    padding: 24px 0 32px;
  }
  .how-it-works-steps article > span { left: -70px; width: 50px; height: 50px; }

  .marketing-build-outputs article:nth-child(2),
  .marketing-build-outputs article:nth-child(3),
  .pricing-card--creator,
  .pricing-usage-details article:nth-child(n),
  .crossplay-benefit-grid article:nth-child(n) { transform: none; }
}

/* A section is a collection: preserve its own visual language, while making
 * its individual cards feel like a deliberately related set. */
.marketing-workflow article:nth-child(n) > span {
  border-radius: 50%;
  background: #57cbbb;
  box-shadow: 0 0 0 2px #57cbbb;
  color: #143d43;
  transform: none;
}

.marketing-workflow article:nth-child(n) h3 { color: #197d71; }

.marketing-game-card,
.marketing-game-card:nth-child(n) {
  grid-column: auto;
  border: 0;
  border-top: 8px solid var(--marketing-game-accent);
  border-radius: 26px;
  background: linear-gradient(145deg, #ffffff 0%, var(--marketing-game-wash, #f6fffc) 100%);
  box-shadow: 8px 9px 0 rgba(70, 53, 113, 0.1);
  clip-path: none;
}

.marketing-game-card::before {
  width: 124px;
  height: 124px;
  border: 2px solid color-mix(in srgb, var(--marketing-game-accent) 20%, transparent);
  background: color-mix(in srgb, var(--marketing-game-accent) 10%, transparent);
}

.marketing-game-card:hover { box-shadow: 8px 14px 0 rgba(70, 53, 113, 0.14); transform: translateY(-5px); }

/* Keep the game-family cards as one poster system, but give that system the
 * richer, more saturated energy of the games it represents. */
.marketing-game-card--racing { --marketing-poster-start: #a91e4a; --marketing-poster-end: #df5524; }
.marketing-game-card--rpg { --marketing-poster-start: #382076; --marketing-poster-end: #7942ba; }
.marketing-game-card--tower_defense { --marketing-poster-start: #984123; --marketing-poster-end: #d1701e; }
.marketing-game-card--platformer { --marketing-poster-start: #14549f; --marketing-poster-end: #2781cb; }
.marketing-game-card--farming_sim { --marketing-poster-start: #3b6f31; --marketing-poster-end: #5d9830; }
.marketing-game-card--city_builder { --marketing-poster-start: #56318d; --marketing-poster-end: #9149bd; }
.marketing-game-card--rhythm { --marketing-poster-start: #9f225d; --marketing-poster-end: #cf4389; }
.marketing-game-card--open_world { --marketing-poster-start: #09645f; --marketing-poster-end: #159b85; }
.marketing-game-card--survival { --marketing-poster-start: #8f2e36; --marketing-poster-end: #c85635; }

.marketing-game-card,
.marketing-game-card:nth-child(n) {
  background:
    radial-gradient(circle at 92% 9%, color-mix(in srgb, var(--marketing-game-accent) 16%, transparent) 0 10%, transparent 34%),
    linear-gradient(145deg, #e1dcf3 0%, #d4e3e7 100%);
  box-shadow: 8px 9px 0 rgba(62, 51, 108, 0.16), 0 17px 32px rgba(62, 51, 108, 0.1);
}

.marketing-game-card::before {
  border-color: color-mix(in srgb, var(--marketing-game-accent) 24%, transparent);
  background: rgba(255, 255, 255, 0.3);
}

.marketing-game-card-heading span,
.marketing-game-card-heading p {
  background: rgba(255, 255, 255, 0.58);
  color: #2e2858;
}

.marketing-game-card h3 { color: #2e2858; }
.marketing-game-card > p { color: #3d4961; }
.marketing-game-card ul { border-top-color: rgba(48, 42, 88, 0.2); color: #2f3e55; }
.marketing-game-card li::before { color: #b76438; }
.marketing-game-card:hover { box-shadow: 8px 14px 0 rgba(62, 51, 108, 0.19), 0 20px 36px rgba(62, 51, 108, 0.13); }

.marketing-build-outputs article:nth-child(n),
.marketing-build-outputs article:first-child {
  border: 2px solid #5cbfac;
  border-radius: 20px;
  background: linear-gradient(145deg, #f7fffc, #dcf7ed);
  box-shadow: 7px 8px 0 rgba(44, 122, 111, 0.12);
  clip-path: none;
  color: #172c2e;
  transform: none;
}

.marketing-build-outputs article:nth-child(n)::before { color: rgba(38, 125, 113, 0.18); }
.marketing-build-outputs article:nth-child(n) h3 { color: #172c2e; }
.marketing-build-outputs article:nth-child(n) p { color: #526467; }
.marketing-build-outputs article:nth-child(n) span { background: #ffffff; color: #18766d; }

.how-it-works-steps article:nth-child(n) > span {
  border-radius: 50%;
  background: #4ecab8;
  box-shadow: 0 0 0 2px #4ecab8;
  color: #174f4b;
  transform: none;
}

.how-it-works-steps article:nth-child(n) h3 { color: #197f73; }

.how-it-works-system-grid article:nth-child(n) {
  border: 1px solid rgba(72, 128, 123, 0.22);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 5px 6px 0 rgba(55, 112, 106, 0.08);
}

.pricing-card,
.pricing-card:nth-child(n),
.pricing-card--player,
.pricing-card--creator,
.pricing-card--studio {
  border: 2px solid #9a86db;
  border-radius: 28px;
  background: linear-gradient(145deg, #fbf9ff, #eee8ff);
  box-shadow: 8px 9px 0 rgba(91, 67, 142, 0.12);
  clip-path: none;
  color: #2c3056;
  transform: none;
}

.pricing-card::after,
.pricing-card--player::after,
.pricing-card--creator::after,
.pricing-card--studio::after {
  right: -12px;
  bottom: -24px;
  width: 114px;
  height: 114px;
  border: 2px dashed #8e76d4;
  border-radius: 50%;
  opacity: 0.14;
  transform: none;
}

.pricing-card--creator {
  border-color: #ef87b8;
  background: linear-gradient(145deg, #fffafd, #ffe7f1);
  box-shadow: 8px 14px 0 rgba(209, 99, 151, 0.16);
  transform: translateY(-12px);
}

.pricing-card--creator::after { border-color: #e866a5; }

.pricing-card--studio .pricing-card-label,
.pricing-card--studio .pricing-price,
.pricing-card--studio .pricing-price span,
.pricing-card--studio .pricing-card-summary,
.pricing-card--studio li { color: inherit; }

.pricing-card--studio ul { border-top-color: rgba(61, 74, 99, 0.16); }
.pricing-card--studio li::before { color: #2aa99e; }
.pricing-card--studio .marketing-secondary-action { border: 1px solid #b9a8db; background: #ffffff; color: #172c2e; }
.pricing-card--studio .marketing-secondary-action:hover { background: #f7f2ff; color: #172c2e; }

.pricing-card:hover { box-shadow: 8px 14px 0 rgba(91, 67, 142, 0.16); transform: translateY(-5px); }
.pricing-card--creator:hover { box-shadow: 8px 19px 0 rgba(209, 99, 151, 0.2); transform: translateY(-17px); }

.pricing-usage-details article:nth-child(n) {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: none;
  transform: none;
}

.pricing-included-grid article:nth-child(n) {
  border: 1px solid rgba(69, 127, 122, 0.2);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 5px 6px 0 rgba(55, 112, 106, 0.08);
}

.crossplay-benefit-grid article:nth-child(n) {
  border: 2px solid #75cbbb;
  border-radius: 24px;
  background: linear-gradient(145deg, #f5fffb, #def7ed);
  box-shadow: 7px 8px 0 rgba(44, 122, 111, 0.1);
  transform: none;
}

.crossplay-platform-list article:nth-child(n) {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
}

@media (max-width: 760px) {
  .pricing-card--creator,
  .pricing-card--creator:hover { transform: none; }
}

/* Game foundations become regions of one shared RPG atlas. Each card is the
 * same parchment map panel; the landmark stamp and route color identify the
 * kind of adventure without turning the grid into competing artwork. */
.marketing-game-types {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.marketing-game-types::before {
  position: absolute;
  z-index: -1;
  top: 160px;
  right: max(24px, calc((100% - 1160px) / 2));
  bottom: 76px;
  left: max(24px, calc((100% - 1160px) / 2));
  border: 1px solid rgba(119, 90, 52, 0.25);
  border-radius: 34px;
  background:
    radial-gradient(ellipse at 14% 18%, rgba(118, 169, 121, 0.24) 0 8%, transparent 8.5%),
    radial-gradient(ellipse at 84% 72%, rgba(83, 157, 168, 0.2) 0 11%, transparent 11.5%),
    repeating-linear-gradient(28deg, transparent 0 38px, rgba(145, 109, 61, 0.07) 39px 40px, transparent 41px 78px),
    #eee5ce;
  box-shadow: inset 0 0 72px rgba(116, 84, 48, 0.12);
  content: "";
}

.marketing-game-types-heading {
  position: relative;
  max-width: 760px;
  padding-top: 8px;
}

.marketing-game-types-heading .marketing-kicker {
  border-color: #c3a96a;
  background: #fff9e8;
  color: #77542c;
}

.marketing-game-grid {
  position: relative;
  gap: 18px;
  padding: 28px;
}

.marketing-game-grid::before {
  position: absolute;
  z-index: -1;
  top: 8px;
  right: 4%;
  left: 4%;
  height: 22px;
  border-top: 2px dashed rgba(139, 94, 48, 0.42);
  border-radius: 50%;
  content: "";
}

.marketing-game-card,
.marketing-game-card:nth-child(n) {
  min-height: 356px;
  border: 1px solid #c9b27c;
  border-top: 7px solid var(--marketing-map-accent);
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(126, 92, 48, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(126, 92, 48, 0.06) 1px, transparent 1px),
    linear-gradient(145deg, #fffdf2, #f5ead0);
  background-size: 18px 18px, 18px 18px, auto;
  box-shadow: 5px 6px 0 rgba(108, 77, 42, 0.17), inset 0 0 0 4px rgba(255, 253, 242, 0.72);
}

.marketing-game-card { --marketing-map-accent: #648b72; }

.marketing-game-card::before {
  top: 18px;
  right: 19px;
  bottom: auto;
  left: auto;
  width: 46px;
  height: 46px;
  border: 2px solid color-mix(in srgb, var(--marketing-map-accent) 68%, #6f4c29);
  border-radius: 50% 50% 50% 10px;
  background: color-mix(in srgb, var(--marketing-map-accent) 22%, #fff9df);
  content: "";
  transform: rotate(-14deg);
}

.marketing-game-card::after {
  position: absolute;
  top: 26px;
  right: 29px;
  z-index: 1;
  color: #654324;
  content: "✦";
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
}

.marketing-game-card-heading span,
.marketing-game-card-heading p {
  border: 1px solid rgba(105, 73, 38, 0.18);
  background: #fff9e9;
  color: #70502d;
  box-shadow: none;
}

.marketing-game-card-heading p { margin-right: 54px; }
.marketing-game-card h3 { color: #312b45; }
.marketing-game-card > p { color: #5b5360; }
.marketing-game-card ul { border-top-color: rgba(105, 73, 38, 0.22); color: #4a454b; }
.marketing-game-card li::before { color: var(--marketing-map-accent); }
.marketing-game-card:hover { box-shadow: 5px 10px 0 rgba(108, 77, 42, 0.2), inset 0 0 0 4px rgba(255, 253, 242, 0.72); transform: translateY(-4px); }

.marketing-game-card--composed_game { --marketing-map-accent: #5b938f; }
.marketing-game-card--composed_game::after { content: "✧"; }
.marketing-game-card--session_shooter { --marketing-map-accent: #5b76ad; }
.marketing-game-card--session_shooter::after { content: "✹"; }
.marketing-game-card--racing { --marketing-map-accent: #c35e3f; }
.marketing-game-card--racing::after { content: "↝"; }
.marketing-game-card--rpg { --marketing-map-accent: #7860b5; }
.marketing-game-card--rpg::after { content: "✦"; }
.marketing-game-card--tower_defense { --marketing-map-accent: #b47a37; }
.marketing-game-card--tower_defense::after { content: "♜"; }
.marketing-game-card--platformer { --marketing-map-accent: #498bb9; }
.marketing-game-card--platformer::after { content: "▲"; font-size: 16px; }
.marketing-game-card--farming_sim { --marketing-map-accent: #6c9646; }
.marketing-game-card--farming_sim::after { content: "✿"; }
.marketing-game-card--city_builder { --marketing-map-accent: #985db4; }
.marketing-game-card--city_builder::after { content: "▦"; font-size: 18px; }
.marketing-game-card--rhythm { --marketing-map-accent: #c15788; }
.marketing-game-card--rhythm::after { content: "♫"; }
.marketing-game-card--open_world { --marketing-map-accent: #3f9b87; }
.marketing-game-card--open_world::after { content: "✧"; }
.marketing-game-card--survival { --marketing-map-accent: #b65b4b; }
.marketing-game-card--survival::after { content: "⟡"; }

@media (max-width: 760px) {
  .marketing-game-types::before {
    top: 130px;
    right: 16px;
    bottom: 54px;
    left: 16px;
    border-radius: 24px;
  }

  .marketing-game-grid { padding: 20px; }
}

/* The foundations are places in a single playable world, not a catalog of
 * cards. The map remains navigable with native disclosure controls. */
.marketing-game-types::before { content: none; }

.marketing-game-map {
  position: relative;
  width: min(100%, 1180px);
  aspect-ratio: 3 / 2;
  margin: 38px auto 0;
  border: 8px solid #fff9e8;
  border-radius: 34px;
  background: #d4dfb6;
  box-shadow: 0 16px 0 rgba(100, 70, 45, 0.12), 0 25px 45px rgba(57, 44, 82, 0.12);
}

.marketing-game-map-image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 26px;
  object-fit: cover;
}

.marketing-game-map-node {
  --marketing-map-marker: #4d8d83;

  position: absolute;
  z-index: 1;
}

.marketing-game-map-node details { position: relative; }

.marketing-game-map-node summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  filter: drop-shadow(0 3px 0 rgba(59, 43, 65, 0.24));
}

.marketing-game-map-node summary::-webkit-details-marker { display: none; }

.marketing-game-map-node-number {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border: 3px solid #fff8df;
  border-radius: 50% 50% 50% 8px;
  background: var(--marketing-map-marker);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--marketing-map-marker) 70%, #433159);
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  transform: rotate(-13deg);
}

.marketing-game-map-node-label {
  border: 1px solid rgba(70, 48, 51, 0.22);
  border-radius: 999px;
  background: rgba(255, 250, 233, 0.94);
  box-shadow: 0 2px 0 rgba(80, 55, 48, 0.15);
  color: #493a40;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  white-space: nowrap;
}

.marketing-game-map-node summary:hover .marketing-game-map-node-label,
.marketing-game-map-node summary:focus-visible .marketing-game-map-node-label {
  background: #ffffff;
  color: #2f2552;
}

.marketing-game-map-node summary:focus-visible { outline: 3px solid #f3c95d; outline-offset: 4px; }

.marketing-game-map-node-details {
  position: absolute;
  z-index: 2;
  top: calc(100% + 11px);
  left: 0;
  width: 270px;
  border: 2px solid #c9aa71;
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(126, 92, 48, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(126, 92, 48, 0.05) 1px, transparent 1px),
    #fff9e8;
  background-size: 16px 16px;
  box-shadow: 6px 7px 0 rgba(87, 61, 40, 0.2);
  padding: 17px;
}

.marketing-game-map-node-details h3 {
  margin: 0;
  color: #2e2949;
  font-size: 18px;
  line-height: 1.12;
}

.marketing-game-map-node-details p {
  margin: 10px 0 0;
  color: #5b5360;
  font-size: 13px;
  line-height: 1.5;
}

.marketing-game-map-node-details ul {
  margin: 12px 0 0;
  border-top: 1px solid rgba(107, 75, 43, 0.2);
  padding: 11px 0 0;
  color: #49434a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  list-style: none;
}

.marketing-game-map-node-details li + li { margin-top: 5px; }
.marketing-game-map-node-details li::before { color: var(--marketing-map-marker); content: "✦ "; }

.marketing-game-map-node[open] .marketing-game-map-node-number { transform: rotate(-13deg) translateY(-3px); }
.marketing-game-map-node:has(details[open]) { z-index: 4; }

.marketing-game-map-node--composed_game { top: 15%; left: 7%; --marketing-map-marker: #4d938e; }
.marketing-game-map-node--session_shooter { top: 52%; left: 7%; --marketing-map-marker: #705c9f; }
.marketing-game-map-node--racing { top: 73%; left: 13%; --marketing-map-marker: #c75f46; }
.marketing-game-map-node--rpg { top: 17%; left: 31%; --marketing-map-marker: #7a62b3; }
.marketing-game-map-node--tower_defense { top: 43%; left: 43%; --marketing-map-marker: #b67b3d; }
.marketing-game-map-node--platformer { top: 49%; left: 74%; --marketing-map-marker: #4b91bd; }
.marketing-game-map-node--farming_sim { top: 15%; left: 59%; --marketing-map-marker: #70974f; }
.marketing-game-map-node--city_builder { top: 57%; left: 43%; --marketing-map-marker: #9a61b5; }
.marketing-game-map-node--rhythm { top: 80%; left: 65%; --marketing-map-marker: #c45c89; }
.marketing-game-map-node--open_world { top: 35%; left: 56%; --marketing-map-marker: #439a87; }
.marketing-game-map-node--survival { top: 16%; left: 80%; --marketing-map-marker: #ad5c51; }

.marketing-game-map-node--platformer .marketing-game-map-node-details,
.marketing-game-map-node--rhythm .marketing-game-map-node-details,
.marketing-game-map-node--survival .marketing-game-map-node-details { right: 0; left: auto; }

.marketing-game-map-node--racing .marketing-game-map-node-details,
.marketing-game-map-node--rhythm .marketing-game-map-node-details { top: auto; bottom: calc(100% + 11px); }

@media (max-width: 760px) {
  .marketing-game-map {
    display: grid;
    gap: 10px;
    aspect-ratio: auto;
    border-width: 5px;
    border-radius: 24px;
    background: #fff9e8;
    padding: 0 14px 18px;
  }

  .marketing-game-map-image {
    width: calc(100% + 28px);
    height: auto;
    margin-left: -14px;
    border-radius: 19px 19px 0 0;
  }

  .marketing-game-map-node {
    position: static;
  }

  .marketing-game-map-node details { position: static; }

  .marketing-game-map-node summary {
    width: 100%;
    justify-content: flex-start;
    border-bottom: 1px solid rgba(107, 75, 43, 0.18);
    padding: 7px 0;
  }

  .marketing-game-map-node-label { font-size: 11px; }

  .marketing-game-map-node-details,
  .marketing-game-map-node--platformer .marketing-game-map-node-details,
  .marketing-game-map-node--rhythm .marketing-game-map-node-details,
  .marketing-game-map-node--survival .marketing-game-map-node-details,
  .marketing-game-map-node--racing .marketing-game-map-node-details {
    position: static;
    width: auto;
    margin: 4px 0 10px 35px;
    box-shadow: none;
  }
}

/* ── studio theme: light / dark ──────────────────────────────────────────────
   Dark is the default; "light" applies only when the user explicitly chose it
   via the header toggle (persisted in localStorage). The theme covers the
   studio workspace; marketing pages keep their designed palette. */

.studio-theme-toggle {
  display: grid;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  place-items: center;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  transition: border-color 120ms ease, transform 120ms ease;
}

.studio-theme-toggle:hover {
  border-color: #7255b6;
  transform: translateY(-1px);
}

.studio-theme-toggle-icon::before {
  content: "🌙";
}

html[data-theme="dark"] .studio-theme-toggle-icon::before {
  content: "☀️";
}

html[data-theme="dark"] body.studio-workspace {
  --page: #14171d;
  --surface: #1d2128;
  --ink: #e7ebee;
  --muted: #9aa6ad;
  --line: #343c45;
  --accent: #19b3a6;
  --accent-strong: #4fd2c5;
  --signal: #e09a35;
  --danger: #ef7070;
  --sidebar: #121519;
}

/* chrome */
html[data-theme="dark"] .studio-workspace .studio-header {
  background: rgba(23, 26, 32, 0.92);
}

html[data-theme="dark"] .studio-workspace .form-field input,
html[data-theme="dark"] .studio-workspace .form-field textarea,
html[data-theme="dark"] .studio-workspace .form-field select {
  background: var(--page);
}

html[data-theme="dark"] .studio-workspace .form-error {
  border-color: #7a3f3f;
  background: #2c1c1c;
}

html[data-theme="dark"] .studio-workspace .notice-banner {
  border-color: #2a5b53;
  background: #17302b;
}

/* shared marketing-style chips + panels */
html[data-theme="dark"] .studio-workspace .new-game-kicker--dark {
  background: rgba(35, 29, 62, 0.72);
  color: #c9b8f0;
}

html[data-theme="dark"] .studio-workspace .creation-path--templates,
html[data-theme="dark"] .studio-workspace .projects-empty,
html[data-theme="dark"] .studio-workspace .studio-dashboard .work-panel,
html[data-theme="dark"] .studio-workspace .setup-composition-progress {
  border-color: rgba(138, 111, 201, 0.4);
  background:
    radial-gradient(circle at 92% 6%, rgba(255, 209, 113, 0.08), transparent 24%),
    linear-gradient(140deg, #211e33, #241f2e 60%, #1b2622);
  box-shadow: 8px 9px 0 rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .studio-workspace .template-category-pill,
html[data-theme="dark"] .studio-workspace .template-pager-button,
html[data-theme="dark"] .studio-workspace .setup-genre-chip,
html[data-theme="dark"] .studio-workspace .dashboard-view-all,
html[data-theme="dark"] .studio-workspace .projects-page .pill {
  border-color: #4a4168;
  background: rgba(33, 28, 55, 0.7);
  color: #c9b8f0;
}

html[data-theme="dark"] .studio-workspace .template-category-pill:hover,
html[data-theme="dark"] .studio-workspace .template-pager-button:hover:not(:disabled),
html[data-theme="dark"] .studio-workspace .setup-genre-chip:hover,
html[data-theme="dark"] .studio-workspace .dashboard-view-all:hover {
  border-color: #8a6fc9;
  background: #2c2647;
  color: #ded4f7;
}

html[data-theme="dark"] .studio-workspace .template-category-pill.is-active {
  border-color: #8a6fc9;
  background: #7255b6;
  color: #ffffff;
}

html[data-theme="dark"] .studio-workspace .setup-genre-chip--clear {
  border-color: var(--line);
  color: var(--muted);
}

html[data-theme="dark"] .studio-workspace .setup-genre-chip--clear:hover {
  border-color: var(--danger);
  background: #33201f;
  color: var(--danger);
}

html[data-theme="dark"] .studio-workspace .template-search {
  border-color: #4a4168;
  background: var(--surface);
  color: var(--ink);
}

html[data-theme="dark"] .studio-workspace .template-search:focus {
  border-color: #8a6fc9;
  outline-color: rgba(138, 111, 201, 0.35);
}

html[data-theme="dark"] .studio-workspace .template-option,
html[data-theme="dark"] .studio-workspace .studio-dashboard .track-item,
html[data-theme="dark"] .studio-workspace .dashboard-game-row {
  border-color: #3d3654;
  background: #21252d;
}

html[data-theme="dark"] .studio-workspace .template-option:hover,
html[data-theme="dark"] .studio-workspace .studio-dashboard .track-item:hover,
html[data-theme="dark"] .studio-workspace .dashboard-game-row:hover {
  border-color: #8a6fc9;
}

html[data-theme="dark"] .studio-workspace .template-option:has(input:checked) {
  border-color: #8a6fc9;
  background: #272c36;
  box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .studio-workspace .studio-dashboard .panel-heading .status-label {
  color: #c9b8f0;
}

html[data-theme="dark"] .studio-workspace .studio-dashboard .track-item a:hover {
  color: #c9b8f0;
}

html[data-theme="dark"] .studio-workspace .dashboard-game-identity h3 a:hover {
  color: #c9b8f0;
}

html[data-theme="dark"] .studio-workspace .dashboard-game-stat {
  border-left-color: #3d3654;
}

html[data-theme="dark"] .studio-workspace .dashboard-game-action {
  border-color: #4a4168;
  background: rgba(33, 28, 55, 0.7);
  color: #c9b8f0;
}

html[data-theme="dark"] .studio-workspace .dashboard-game-action:hover {
  border-color: #8a6fc9;
  background: #2c2647;
}

html[data-theme="dark"] .studio-workspace .dashboard-game-action--play {
  border-color: #8a6fc9;
  background: #7255b6;
  color: #ffffff;
}

html[data-theme="dark"] .studio-workspace .dashboard-game-action--play:hover {
  background: #61459f;
}

@media (max-width: 900px) {
  .dashboard-game-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .dashboard-game-actions {
    flex-direction: row;
  }
}

@media (max-width: 640px) {
  .dashboard-game-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 14px;
  }
}

html[data-theme="dark"] .studio-workspace .studio-dashboard .status-card:hover {
  box-shadow: 6px 7px 0 rgba(0, 0, 0, 0.3);
}

/* projects index */
html[data-theme="dark"] .studio-workspace .projects-page .record-row {
  border-right-color: #3d3654;
  border-bottom-color: #3d3654;
  border-left-color: #3d3654;
}

html[data-theme="dark"] .studio-workspace .projects-page .record-row:hover {
  box-shadow: 6px 7px 0 rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .studio-workspace .projects-page .record-row h2 a:hover {
  color: #c9b8f0;
}

html[data-theme="dark"] .studio-workspace .projects-empty p {
  color: #b6b0cc;
}

/* AI setup screen */
html[data-theme="dark"] .studio-workspace .setup-input-wrap {
  border-color: #3d3654;
  box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .studio-workspace .setup-input-wrap:focus-within {
  border-color: #8a6fc9;
  box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.36);
}

html[data-theme="dark"] .studio-workspace .setup-composition-stage--completed > span,
html[data-theme="dark"] .studio-workspace .setup-composition-stage--running > span {
  border-color: #8a6fc9;
  background: #8a6fc9;
}

/* asset editor (viewer sidebar) */
html[data-theme="dark"] .studio-workspace .asset-editor-toggle {
  border-color: #4a4168;
  background: rgba(29, 26, 46, 0.85);
  color: #c9b8f0;
}

html[data-theme="dark"] .studio-workspace .asset-editor-toggle:hover {
  border-color: #8a6fc9;
  background: #2c2647;
}

html[data-theme="dark"] .studio-workspace .asset-editor-toggle.is-active {
  border-color: #8a6fc9;
  background: #7255b6;
  color: #ffffff;
}

html[data-theme="dark"] .studio-workspace .asset-editor-chip {
  border-color: #4a4168;
  background: rgba(33, 28, 55, 0.7);
  color: #c9b8f0;
}

html[data-theme="dark"] .studio-workspace .asset-editor-chip:hover:not(:disabled) {
  border-color: #8a6fc9;
  background: #2c2647;
}

html[data-theme="dark"] .studio-workspace .asset-editor-chip.is-active {
  border-color: #8a6fc9;
  background: #7255b6;
  color: #ffffff;
}

html[data-theme="dark"] .studio-workspace .asset-editor-material {
  border-color: #3d3654;
  background: #21252d;
}

html[data-theme="dark"] .studio-workspace .asset-editor-material.is-selected {
  border-color: #8a6fc9;
  box-shadow: 0 0 0 1px #8a6fc9;
}

html[data-theme="dark"] .studio-workspace .asset-editor-tab:hover,
html[data-theme="dark"] .studio-workspace .asset-editor-tab.is-active {
  color: #c9b8f0;
}

html[data-theme="dark"] .studio-workspace .asset-editor-tab.is-active {
  border-bottom-color: #8a6fc9;
}

html[data-theme="dark"] .studio-workspace .asset-editor-icon-button {
  border-color: #4a4168;
  background: rgba(33, 28, 55, 0.7);
  color: #c9b8f0;
}

html[data-theme="dark"] .studio-workspace .asset-editor-icon-button:hover:not(:disabled) {
  border-color: #8a6fc9;
  background: #2c2647;
}

/* ── game editor: three.js asset previews + studio modal ─────────────────── */

.asset-mini-preview {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 150px;
  place-items: center;
}

.asset-mini-preview canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.asset-mini-preview-activate {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.asset-mini-preview-activate[hidden] {
  display: none;
}

.asset-studio-open {
  width: 100%;
  text-align: center;
}

.asset-card-revealed {
  outline: 2px solid #7255b6;
  outline-offset: 2px;
  transition: outline-color 400ms ease;
}

.asset-studio-modal {
  position: fixed;
  z-index: 60;
  inset: 0;
  display: grid;
  place-items: center;
}

.asset-studio-modal[hidden] {
  display: none;
}

.asset-studio-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 18, 0.6);
}

.asset-studio-modal-panel {
  position: relative;
  display: flex;
  width: min(1180px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--page);
  box-shadow: 0 24px 70px rgba(10, 12, 18, 0.45);
}

.asset-studio-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding: 14px 20px;
}

.asset-studio-modal-header h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.asset-studio-modal-body {
  overflow-y: auto;
  padding: 20px;
}

.asset-studio-modal-body .asset-studio {
  align-items: stretch;
}

.asset-studio-modal-body .asset-viewer {
  height: min(56vh, 520px);
}

.asset-studio-modal-body .asset-editor-sidebar {
  max-height: min(56vh, 520px);
}

/* Game cards: cover-image cards for the project's game listing. The cover is
   authored card art, the start-screen background, or the latest capture; the
   fallback is an accent gradient monogram so no card ships blank. */
.game-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}
.game-card {
  border: 1px solid rgba(126, 140, 168, 0.25);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(12, 16, 26, 0.55);
  display: flex;
  flex-direction: column;
}
.game-card-cover {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  text-decoration: none;
}
.game-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}
.game-card-cover:hover img { transform: scale(1.04); }
.game-card-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 120% at 15% 10%, color-mix(in srgb, var(--card-accent, #5ec9f2) 45%, transparent), transparent 60%),
    linear-gradient(150deg, #141a28, #0b0e17);
}
.game-card-fallback span {
  font-size: 3.2rem;
  font-weight: 800;
  color: color-mix(in srgb, var(--card-accent, #5ec9f2) 80%, white);
  opacity: 0.85;
}
.game-card-cover-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(6, 8, 14, 0.85));
  pointer-events: none;
}
.game-card-title {
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.6rem;
  margin: 0;
  font-size: 1.15rem;
  color: #f2f5fa;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.game-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.7rem 0.9rem;
  font-size: 0.85rem;
}
.game-card-meta p { margin: 0; flex: 1 1 auto; }

/* Real cover art replaces the decorative scene on marketplace cards when the
   game has authored card art, start-screen background, or a capture frame. */
.marketplace-scene-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Game cycle timeline: the blueprint's chronological shape as a clickable
   strip at the bottom of the editor stage — start screen, act groups with
   their milestones/encounters/goals, gate transitions, end screen. */
.editor-cycle-timeline {
  border-top: 1px solid rgba(126, 140, 168, 0.25);
  background: rgba(8, 11, 19, 0.92);
  padding: 0.55rem 0.8rem;
  flex: 0 0 auto;
  /* The nav used to be the scroll container; without a width cap it now
     grows to the track's max-content and the viewport clips it scrollbar-less.
     Cap it so .cycle-timeline-scroll is the one thing that scrolls. */
  min-width: 0;
  max-width: 100%;
}
/* Time flows horizontally in the scroll region; the systems dock sits
   OUTSIDE it, stacked vertically — systems are persistent state, not beats,
   and must not inherit position-as-time semantics from the strip. */
.cycle-timeline-body { display: flex; align-items: flex-start; gap: 0.8rem; min-width: 0; }
.cycle-timeline-scroll { overflow-x: auto; flex: 1 1 auto; min-width: 0; }
.cycle-systems-dock {
  flex: 0 0 auto;
  max-width: 230px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  padding-right: 0.8rem;
  border-right: 1px solid rgba(126, 140, 168, 0.2);
}
.cycle-systems-dock .cycle-dock-chip { text-align: left; width: 100%; white-space: normal; }
.cycle-systems-dock .cycle-dock-chip .cycle-node-label { display: block; }
.cycle-systems-dock .cycle-dock-chip .cycle-node-sub { display: block; white-space: normal; overflow-wrap: break-word; }
.cycle-timeline-track {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  min-width: max-content;
}
.cycle-connector {
  flex: 0 0 18px;
  height: 2px;
  margin-top: 1.15rem;
  background: linear-gradient(90deg, rgba(126, 140, 168, 0.5), rgba(126, 140, 168, 0.2));
}
.cycle-connector--insert {
  position: relative;
  flex-basis: 26px;
}
.cycle-connector-add {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  border: 1px dashed rgba(126, 140, 168, 0.55);
  background: rgba(16, 20, 28, 0.95);
  color: #7e8ca8;
  font-size: 0.65rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 120ms ease, border-color 120ms ease, color 120ms ease;
}
.cycle-connector--insert:hover .cycle-connector-add,
.cycle-connector-add:hover,
.cycle-connector-add:focus-visible { opacity: 1; }
.cycle-connector-add:hover { border-color: rgba(94, 201, 242, 0.9); color: #dfe5ee; }
.cycle-node {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  border: 1px solid rgba(126, 140, 168, 0.35);
  background: rgba(20, 26, 40, 0.9);
  color: #dfe5ee;
  font-size: 0.72rem;
  line-height: 1.25;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}
.cycle-node:hover { border-color: rgba(94, 201, 242, 0.8); }
.cycle-node-label { font-weight: 700; }
.cycle-node-sub { font-size: 0.62rem; opacity: 0.65; }
.cycle-node--lobby { border-color: rgba(120, 196, 220, 0.7); }
.cycle-node--start { border-color: rgba(111, 174, 125, 0.7); }
.cycle-node--end { border-color: rgba(208, 106, 92, 0.7); }
.cycle-node--gate { border-color: rgba(178, 121, 255, 0.7); }
.cycle-node--milestone { border-color: rgba(255, 195, 84, 0.6); }
.cycle-node--encounter { border-color: rgba(240, 110, 100, 0.55); }
.cycle-node--goal { border-color: rgba(94, 201, 242, 0.65); }
.cycle-node--pacing { border-color: rgba(255, 158, 199, 0.6); }
.cycle-node--loop { border-color: rgba(255, 195, 84, 0.75); border-style: dashed; }
.cycle-node--cutscene { border-color: rgba(186, 148, 255, 0.7); }
.timeline-form-shot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem 0.5rem; }
.timeline-form-system-rows { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem 0.5rem; }
.timeline-form-system-rows label { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.64rem; color: #9aa6ba; }
.timeline-form-shot label { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.66rem; color: #9aa6ba; }
/* Acts inside the arc loop share a dashed amber roof so the repeating block
   reads as one structure; the ↺ chip after the block carries the details. */
.cycle-group--looped { border-top: 2px dashed rgba(255, 195, 84, 0.55); border-radius: 10px 10px 8px 8px; }

/* Trigger-wire hover: the hovered node, what it feeds, and what feeds it. */
.cycle-node.cycle-wire-focus, .seq-chip.cycle-wire-focus { box-shadow: 0 0 0 2px rgba(94, 201, 242, 0.85); }
.cycle-node.cycle-wire-down, .seq-chip.cycle-wire-down { box-shadow: 0 0 0 2px rgba(111, 226, 149, 0.8); }
.cycle-node.cycle-wire-up, .seq-chip.cycle-wire-up { box-shadow: 0 0 0 2px rgba(255, 195, 84, 0.85); }
.seq-cell.cycle-group--drop { box-shadow: inset 0 0 0 2px rgba(94, 201, 242, 0.7); background: rgba(94, 201, 242, 0.08); }

.cycle-systems-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.09em; color: #6d788c; flex-shrink: 0; }
.cycle-node--module { border-color: rgba(148, 163, 190, 0.55); }
.cycle-node--system { border-color: rgba(148, 163, 190, 0.45); border-style: dotted; opacity: 0.9; }
.cycle-systems-label small { display: block; text-transform: none; letter-spacing: 0; font-size: 0.58rem; color: #55607a; }


/* Observed-run overlay: verdict chip + reach dots on the beats. */
.cycle-timeline-toolbar { display: flex; align-items: center; gap: 0.7rem; }
.cycle-observed-verdict { font-size: 0.68rem; color: #9aa6ba; }
.cycle-observed-verdict.is-good { color: #6fe295; }
.cycle-observed-verdict.is-bad { color: #f0a7ad; }
.cycle-observed-verdict.is-running { color: #ffc354; }
.cycle-observe-button { background: none; border: 1px solid rgba(126, 140, 168, 0.4); border-radius: 7px; color: #c9d0dc; font-size: 0.66rem; padding: 0.2rem 0.55rem; cursor: pointer; }
.cycle-observe-button:hover { border-color: rgba(94, 201, 242, 0.6); color: #eef2f8; }
.cycle-observe-form { margin-left: auto; margin-right: 0.75rem; }
.cycle-observed-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 0.3rem; flex-shrink: 0; }
.cycle-observed-dot--reached { background: #6fe295; }
.cycle-observed-dot--missed { background: #d06a5c; }
.editor-cycle-timeline.is-collapsed .cycle-observe-form { display: none; }
/* Music lanes: each ♪ chip sits directly ABOVE the section it scores so
   track-to-section alignment reads at a glance. Columns stack lane + content;
   spanning chips stretch across their whole section. */
.cycle-column {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.cycle-music-lane {
  display: flex;
  gap: 0.35rem;
  min-height: 1.95rem;
  align-items: stretch;
}
.cycle-lane-chip {
  padding: 0.22rem 0.55rem;
  border-color: rgba(255, 158, 199, 0.5);
  background: rgba(44, 22, 36, 0.75);
  align-items: center;
  flex-direction: row;
}
.cycle-lane-chip:hover { border-color: rgba(255, 158, 199, 0.95); }
.cycle-lane-chip .cycle-node-sub { margin-left: 0.35rem; }
.cycle-lane-chip--span { flex: 1 1 auto; justify-content: flex-start; }
.cycle-region-row {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}
/* Content sits one lane lower when lanes render (two lanes lower when
   per-act lanes stack under the region lane); keep connectors pointing at
   the node row, not the lane rows. */
.cycle-timeline-track.has-music-lanes > .cycle-connector,
.cycle-region-row--laned > .cycle-connector { margin-top: calc(1.15rem + 2.25rem); }
.cycle-timeline-track.has-music-lanes > .cycle-node--add { align-self: flex-start; margin-top: calc(0.7rem + 2.25rem); }
.cycle-timeline-track.has-act-lanes > .cycle-connector { margin-top: calc(1.15rem + 4.5rem); }
.cycle-timeline-track.has-act-lanes > .cycle-node--add { margin-top: calc(0.7rem + 4.5rem); }

.cycle-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.35rem;
  border: 1px dashed rgba(126, 140, 168, 0.35);
  border-radius: 10px;
  background: rgba(13, 17, 28, 0.7);
}
.cycle-group > .cycle-node--act {
  border: none;
  background: transparent;
  padding: 0.1rem 0.25rem;
}
.cycle-group-children {
  display: flex;
  gap: 0.3rem;
}
.editor-preview-stage { display: flex; flex-direction: column; }
.editor-preview-stage > .editor-runtime-frame-wrap,
.editor-preview-stage > div:first-child { flex: 1 1 auto; min-height: 0; }

/* Timeline authoring affordances */
.cycle-node--add {
  border-style: dashed;
  border-color: rgba(126, 140, 168, 0.5);
  color: rgba(200, 210, 226, 0.75);
  align-self: center;
}
.cycle-node--add:hover { border-color: rgba(94, 201, 242, 0.9); color: #dfe5ee; }
.cycle-node--encounter[draggable="true"] { cursor: grab; }
.cycle-group--drop { border-color: rgba(94, 201, 242, 0.9); background: rgba(94, 201, 242, 0.08); }
.cycle-flash { outline: 2px solid #5ec9f2; outline-offset: 2px; transition: outline-color 1.4s ease; }
.cycle-node--drop-before { box-shadow: -3px 0 0 0 #5ec9f2; }

/* Bundled display fonts (same OFL faces the games ship) for faithful
   screen-editor previews. */
@font-face { font-family: "Fusionery Orbitron"; src: url(/assets/orbitron-210125c487d2feae9733e3cd69248af99a7a7cee2c19822141841e2b6008687a.ttf); font-display: swap; }
@font-face { font-family: "Fusionery Cinzel"; src: url(/assets/cinzel-1f9ad9b5045d8a22bfe31b0e13319cca7b1e5b50b8e4fd9623b54e8da2408c5b.ttf); font-display: swap; }
@font-face { font-family: "Fusionery Bangers"; src: url(/assets/bangers-ef22f8e6bd7abec46384e2f774634539441ed88d7dc8576cfaa7e41cc36d1b46.ttf); font-display: swap; }
@font-face { font-family: "Fusionery Creepster"; src: url(/assets/creepster-08c4c18b8ae3398d14f0d3b6b48bc5af5fdbcf42bf1f06bd0fbda234842fe6ed.ttf); font-display: swap; }
@font-face { font-family: "Fusionery Oswald"; src: url(/assets/oswald-f28fa954acf2fd08ea2227efe95c2b52067590b7530b848f8e4d127f7f00a391.ttf); font-display: swap; }
@font-face { font-family: "Fusionery Press Start"; src: url(/assets/press_start-0ccd1adac6c559cc511810ba60de1e30a6b0ee8debc963d7c7acb607a710ee6e.ttf); font-display: swap; }

/* Visual start/end screen editor modal */
.cycle-node--music { border-color: rgba(255, 158, 199, 0.65); }
.cycle-node--music .cycle-node-label { color: #f3c9dd; }

/* Music editor modal (timeline ♪ nodes): track pick, crop, volume. */
.music-editor-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; }
.music-editor-backdrop { position: absolute; inset: 0; background: rgba(4, 6, 10, 0.72); }
.music-editor-panel {
  position: relative;
  width: min(560px, 94vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  background: #10141f;
  border: 1px solid rgba(255, 158, 199, 0.35);
  border-radius: 14px;
  padding: 1rem 1.1rem 1.1rem;
  overflow-y: auto;
  color: #dfe5ee;
}
.music-editor-header { display: flex; align-items: flex-start; justify-content: space-between; }
.music-editor-header h3 { margin: 0.15rem 0 0; font-size: 1.05rem; color: #ffffff; }
.music-editor-field { display: grid; gap: 0.35rem; font-size: 0.82rem; }
.music-editor-field select { padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(126, 140, 168, 0.4); background: #171c2a; color: #dfe5ee; }
.music-editor-preview { display: grid; gap: 0.3rem; }
.music-editor-preview audio { width: 100%; height: 36px; }
.music-editor-duration { font-size: 0.72rem; color: #8b94a8; }
.music-editor-crop { display: grid; gap: 0.5rem; border: 1px solid rgba(126, 140, 168, 0.25); border-radius: 10px; padding: 0.7rem; }
.music-editor-crop label { display: inline-grid; gap: 0.25rem; font-size: 0.78rem; }
.music-editor-crop input { width: 110px; padding: 6px 8px; border-radius: 6px; border: 1px solid rgba(126, 140, 168, 0.4); background: #171c2a; color: #dfe5ee; }
.music-editor-crop { grid-template-columns: repeat(2, max-content); align-items: end; }
.music-editor-crop-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.music-editor-hint { grid-column: 1 / -1; margin: 0; font-size: 0.72rem; color: #8b94a8; }
.music-editor-volume input { width: 100%; }
.music-editor-volume em { font-style: normal; color: #ff9ec7; }
.music-editor-actions { display: flex; align-items: center; gap: 0.5rem; }
.music-editor-spacer { flex: 1; }
/* Submit-in-flight state for the music editor + timeline card actions. */
.music-editor-panel button:disabled,
.timeline-card button:disabled { opacity: 0.55; cursor: progress; }
.is-submitting {
  position: relative;
  animation: music-submit-pulse 1.1s ease-in-out infinite;
}
@keyframes music-submit-pulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  .is-submitting { animation: none; }
}

.screen-editor-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; }
.screen-editor-backdrop { position: absolute; inset: 0; background: rgba(4, 6, 10, 0.72); }
.screen-editor-panel {
  position: relative;
  width: min(1180px, 94vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: #10141f;
  border: 1px solid rgba(126, 140, 168, 0.35);
  border-radius: 14px;
  overflow: hidden;
}
.screen-editor-header { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 1rem; border-bottom: 1px solid rgba(126, 140, 168, 0.25); }
.screen-editor-header > div { display: flex; gap: 0.5rem; }
.screen-editor-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; min-height: 0; }
.screen-preview {
  position: relative;
  aspect-ratio: 16 / 9;
  align-self: center;
  margin: 1rem;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(160deg, #10182b, #070a12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.screen-preview-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.screen-preview-dim { position: absolute; inset: 0; background: #000; opacity: 0.55; }
.screen-preview-card {
  position: relative;
  min-width: 55%;
  max-width: 80%;
  max-height: 90%;
  overflow-y: auto;
  padding: 1rem 1.4rem 1.2rem;
  border: 1px solid var(--screen-accent, #28d5ff);
  border-radius: 10px;
  background: rgba(8, 10, 16, 0.82);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
  color: #e8ecf4;
}
.screen-preview-heading { font-family: var(--screen-font, inherit); color: var(--screen-accent, #28d5ff); font-weight: 700; line-height: 1.15; }
.screen-preview-text { font-size: 0.78rem; color: #d5dae4; max-width: 34ch; }
.screen-preview-section { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.35rem; }
.screen-preview-section-title { font-family: var(--screen-font, inherit); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--screen-accent, #28d5ff); }
.screen-preview-line { font-size: 0.72rem; color: #c9d0dc; }
.screen-preview-divider { width: 70%; height: 1px; background: var(--screen-accent, #28d5ff); opacity: 0.6; margin: 0.3rem 0; }
.screen-preview-cta {
  position: relative;
  margin-top: 0.7rem;
  font-family: var(--screen-font, inherit);
  background: var(--screen-accent, #28d5ff);
  color: #05070c;
  font-weight: 800;
  padding: 0.45rem 1.3rem;
  border-radius: 7px;
  font-size: 0.8rem;
}
.screen-editor-tools { overflow-y: auto; padding: 1rem; border-left: 1px solid rgba(126, 140, 168, 0.25); display: flex; flex-direction: column; gap: 1rem; }
.screen-editor-tools h3 { margin: 0 0 0.4rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: #9aa6ba; }
.screen-editor-tools label { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; font-size: 0.8rem; margin-bottom: 0.4rem; }
.screen-editor-tools input[type="text"], .screen-editor-tools select { flex: 1 1 auto; max-width: 60%; }
.screen-editor-asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 0.4rem; font-size: 0.75rem; color: #9aa6ba; }
.screen-editor-asset { border: 2px solid transparent; border-radius: 8px; overflow: hidden; padding: 0; cursor: pointer; background: none; }
.screen-editor-asset img { display: block; width: 100%; height: 48px; object-fit: cover; }
.screen-editor-asset.is-selected { border-color: #5ec9f2; }
.screen-editor-element-list { display: flex; flex-direction: column; gap: 0.5rem; }
.screen-editor-element-row { border: 1px solid rgba(126, 140, 168, 0.3); border-radius: 8px; padding: 0.45rem; display: flex; flex-direction: column; gap: 0.3rem; }
.screen-editor-element-head { display: flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: #9aa6ba; }
.screen-editor-element-head span { flex: 1 1 auto; }
.screen-editor-element-head button { background: none; border: 1px solid rgba(126, 140, 168, 0.4); border-radius: 5px; color: #c9d0dc; cursor: pointer; font-size: 0.7rem; padding: 0.05rem 0.35rem; }
.screen-editor-element-row input, .screen-editor-element-row textarea { width: 100%; font-size: 0.78rem; }
.screen-editor-element-row textarea { min-height: 3.2em; }
.screen-editor-add-row { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; }

/* Timeline node cards: the focused per-node view (asset preview, facts,
   connections, actions) that opens instead of a generic inspector jump. */
.timeline-card-popover { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 9rem; }
.timeline-card-backdrop { position: absolute; inset: 0; background: rgba(4, 6, 10, 0.45); }
.timeline-card {
  position: relative;
  width: min(430px, 92vw);
  max-height: 60vh;
  overflow-y: auto;
  background: #10141f;
  border: 1px solid rgba(126, 140, 168, 0.4);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
.timeline-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.timeline-card-header h3 { margin: 0.1rem 0 0; font-size: 1.02rem; color: #eef2f8; }
.timeline-card-kind { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.09em; color: #5ec9f2; }
.timeline-card-close { background: none; border: none; color: #9aa6ba; font-size: 1.2rem; cursor: pointer; line-height: 1; }
.timeline-card-asset img { width: 100%; max-height: 150px; object-fit: cover; border-radius: 8px; display: block; }
.timeline-card-asset .asset-mini-preview { height: 150px; border-radius: 8px; overflow: hidden; }
.timeline-card-asset-name { font-size: 0.7rem; color: #9aa6ba; }
.timeline-card-audio { width: 100%; height: 34px; display: block; }
.timeline-card-audio-crop { display: block; margin-top: 0.25rem; font-size: 0.68rem; color: #ff9ec7; }
.timeline-card-facts { margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.timeline-card-facts div { display: flex; justify-content: space-between; gap: 0.8rem; font-size: 0.78rem; }
.timeline-card-facts dt { color: #9aa6ba; }
.timeline-card-facts dd { margin: 0; color: #dfe5ee; text-align: right; }
.timeline-card-connections { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.75rem; color: #c9d0dc; border-top: 1px solid rgba(126, 140, 168, 0.2); padding-top: 0.5rem; }
.timeline-card-connection strong { color: #9aa6ba; font-weight: 600; }
.timeline-card-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; border-top: 1px solid rgba(126, 140, 168, 0.2); padding-top: 0.6rem; }


/* Timeline inline section forms — the card flips from facts to a compact
   editor; while a form is open the descriptive blocks step aside. */
.timeline-card.is-editing .timeline-card-facts,
.timeline-card.is-editing .timeline-card-connections,
.timeline-card.is-editing .timeline-card-asset { display: none; }
.timeline-card-form { border-top: 1px solid rgba(126, 140, 168, 0.2); padding-top: 0.6rem; }
/* Alternative-form cards (a "+" beat, the end card's loss conditions) switch
   between their forms with tabs under the header instead of footer buttons. */
.timeline-card-tabs {
  display: flex;
  gap: 0.15rem;
  border-bottom: 1px solid rgba(126, 140, 168, 0.25);
  margin-top: -0.25rem;
}
.timeline-card-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #9aa6ba;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.35rem 0.6rem 0.45rem;
  cursor: pointer;
}
.timeline-card-tab:hover { color: #dfe5ee; }
.timeline-card-tab.is-active { color: #5ec9f2; border-bottom-color: #5ec9f2; }
/* A tab's form replaces the border the footer strip normally draws. */
.timeline-card-tabs ~ .timeline-card-form { border-top: none; padding-top: 0; }
.timeline-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem 0.6rem; }
.timeline-trigger-summary {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.35rem 0.5rem;
  border-left: 2px solid rgba(94, 201, 242, 0.55);
  background: rgba(94, 201, 242, 0.07);
  border-radius: 0 4px 4px 0;
  font-size: 0.68rem;
  color: #b9c4d6;
  font-style: italic;
}
/* --- First-run editor tour ---------------------------------------------- */
.editor-tour-backdrop {
  position: fixed;
  inset: 0;
  z-index: 400;
}
.editor-tour-highlight {
  position: fixed;
  border-radius: 10px;
  border: 2px solid rgba(94, 201, 242, 0.9);
  /* The giant shadow IS the dimmer: everything outside the cutout darkens. */
  box-shadow: 0 0 0 9999px rgba(6, 9, 14, 0.72);
  pointer-events: none;
  transition: left 200ms ease, top 200ms ease, width 200ms ease, height 200ms ease;
}
.editor-tour-card {
  position: fixed;
  width: 340px;
  padding: 0.9rem 1rem 0.75rem;
  border-radius: 10px;
  border: 1px solid rgba(94, 201, 242, 0.45);
  background: rgba(16, 21, 30, 0.98);
  color: #c6cfdd;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
.editor-tour-card h3 {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  color: #dfe5ee;
}
.editor-tour-card p {
  margin: 0 0 0.7rem;
  font-size: 0.78rem;
  line-height: 1.5;
}
.editor-tour-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.editor-tour-step { font-size: 0.7rem; color: #7e8ca8; }
.editor-tour-actions { display: inline-flex; align-items: center; gap: 0.4rem; }
.editor-tour-skip {
  border: none;
  background: none;
  color: #7e8ca8;
  font-size: 0.7rem;
  cursor: pointer;
  text-decoration: underline;
}
.editor-tour-skip:hover { color: #b9c4d6; }

/* --- Edit⇄play toggle --------------------------------------------------- */
.editor-stage-play-toggle {
  position: absolute;
  top: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(126, 224, 168, 0.55);
  background: rgba(14, 20, 16, 0.92);
  color: #9fe0bb;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.editor-stage-play-toggle:hover { border-color: rgba(126, 224, 168, 0.95); background: rgba(20, 30, 23, 0.96); }
/* Edit mode opens the transform-mode drawer (and maybe the terrain bar) in
   the same top-center slot — the play toggle steps down below whatever is
   open, riding the drawer's own easing. */
.editor-stage-play-toggle { transition: border-color 120ms ease, background 120ms ease, top 0.28s cubic-bezier(0.2, 0.85, 0.3, 1); }
.game-editor-shell.asset-edit-mode .editor-stage-play-toggle { top: 3.2rem; }
.game-editor-shell.asset-edit-mode:has(.editor-terrain-brush:not([hidden])) .editor-stage-play-toggle { top: 5.8rem; }
.editor-stage-play-toggle.is-playing {
  border-color: rgba(240, 138, 120, 0.6);
  background: rgba(24, 13, 11, 0.92);
  color: #f0a898;
}
/* While test-playing, the stage belongs to the game: edit chrome retreats. */
.game-editor-shell.stage-playing .editor-stage-transform-modes,
.game-editor-shell.stage-playing .editor-terrain-brush,
.game-editor-shell.stage-playing .editor-asset-info { display: none !important; }

/* --- Sequencer view: lanes × act columns ------------------------------- */
.cycle-view-toggle {
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(126, 140, 168, 0.45);
  background: rgba(20, 26, 36, 0.9);
  color: #9aa6ba;
  font-size: 0.65rem;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
.cycle-view-toggle:hover,
.cycle-view-toggle[aria-pressed="true"] { border-color: rgba(94, 201, 242, 0.8); color: #dfe5ee; }
.cycle-sequencer {
  display: grid;
  gap: 2px;
  align-items: stretch;
  min-width: min-content;
  padding: 0.4rem 0.5rem 0.55rem;
}
.seq-col-head {
  align-self: end;
  padding: 0 0.3rem 0.15rem;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7e8ca8;
}
.seq-lane-label {
  grid-column: 1;
  align-self: center;
  padding-right: 0.55rem;
  text-align: right;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7e8ca8;
}
.seq-cell {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.25rem;
  min-height: 2.1rem;
  padding: 0.3rem;
  border-radius: 6px;
  background: rgba(126, 140, 168, 0.07);
  position: relative;
}
.seq-cell--looped {
  background: rgba(126, 224, 168, 0.06);
  box-shadow: inset 0 0 0 1px rgba(126, 224, 168, 0.18);
}
.seq-step {
  position: absolute;
  right: 0.35rem;
  bottom: 0.2rem;
  font-size: 0.55rem;
  color: #7e8ca8;
}
.seq-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 100%;
  padding: 0.18rem 0.5rem;
  border-radius: 5px;
  border: 1px solid rgba(126, 140, 168, 0.4);
  background: rgba(20, 26, 36, 0.92);
  color: #c6cfdd;
  font-size: 0.64rem;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease;
}
.seq-chip:hover { border-color: rgba(94, 201, 242, 0.85); }
.seq-chip--wide { width: 100%; font-weight: 600; }
.seq-chip--act { border-color: rgba(94, 201, 242, 0.4); }
.seq-chip--cutscene { border-color: rgba(196, 148, 240, 0.45); }
.seq-chip--encounter { border-color: rgba(240, 138, 120, 0.4); }
.seq-chip--goal { border-color: rgba(126, 224, 168, 0.45); }
.seq-chip--music { border-color: rgba(240, 205, 120, 0.4); }
.seq-chip--gate, .seq-chip--loop { border-style: dashed; }
.seq-chip--warned { border-color: rgba(240, 177, 90, 0.75); }
.seq-chip--bed { border-style: dotted; }
.seq-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seq-chip-sub {
  color: #7e8ca8;
  font-size: 0.58rem;
  white-space: nowrap;
}
.cycle-timeline-toast {
  position: fixed;
  bottom: 4.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 240;
  max-width: 32rem;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  border: 1px solid rgba(126, 224, 168, 0.5);
  background: rgba(14, 20, 16, 0.96);
  color: #9fe0bb;
  font-size: 0.75rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  animation: cycle-toast-in 160ms ease;
}
.cycle-timeline-toast.is-error {
  border-color: rgba(240, 138, 120, 0.6);
  background: rgba(24, 13, 11, 0.96);
  color: #f0a898;
}
@keyframes cycle-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.timeline-recent-triggers {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.65rem;
  color: #9aa6ba;
}
.timeline-recent-triggers-label { color: #7e8ca8; }
.timeline-recent-triggers-list { display: contents; }
.timeline-recent-trigger {
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(126, 224, 168, 0.45);
  background: rgba(126, 224, 168, 0.08);
  color: #9fe0bb;
  font-size: 0.63rem;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.timeline-recent-trigger:hover {
  border-color: rgba(126, 224, 168, 0.9);
  background: rgba(126, 224, 168, 0.16);
}
.timeline-trigger-summary.is-warning {
  border-left-color: rgba(240, 177, 90, 0.8);
  background: rgba(240, 177, 90, 0.08);
  color: #e8c390;
}
.timeline-form-grid select.has-missing-source {
  border-color: rgba(240, 177, 90, 0.75);
  color: #e8c390;
}
.cycle-node--warned { border-color: rgba(240, 177, 90, 0.65); }
.cycle-node-warning {
  color: #f0b15a;
  font-size: 0.62rem;
  line-height: 1;
}
.cycle-timeline-warning-count {
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  border: 1px solid rgba(240, 177, 90, 0.55);
  background: rgba(240, 177, 90, 0.12);
  color: #f0b15a;
  font-size: 0.62rem;
}
.timeline-card-warnings {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.5rem 0;
  padding: 0.45rem 0.55rem;
  border: 1px solid rgba(240, 177, 90, 0.45);
  border-left-width: 3px;
  border-radius: 6px;
  background: rgba(240, 177, 90, 0.08);
}
.timeline-card-warning {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.68rem;
}
.timeline-card-warning strong { color: #f0b15a; font-weight: 600; }
.timeline-card-warning span { color: #b9c4d6; }
/* Grid items default to min-width:auto, so a default-sized input overflows
   its 1fr track and runs under the card edge — pin both to the track. */
.timeline-card.is-editing { width: min(520px, 94vw); }
.timeline-form-grid label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.7rem; color: #9aa6ba; min-width: 0; }
.timeline-form-grid input,
.timeline-form-grid select { width: 100%; }
.timeline-form-grid label small { color: #6d788c; font-size: 0.62rem; }
.timeline-form-grid input,
.timeline-form-grid select {
  background: rgba(10, 14, 22, 0.85);
  border: 1px solid rgba(126, 140, 168, 0.35);
  border-radius: 6px;
  color: #eef2f8;
  font-size: 0.78rem;
  padding: 0.3rem 0.45rem;
  min-width: 0;
}
.timeline-form-grid input[readonly] { color: #8b95a7; border-style: dashed; }
.timeline-form-checks { grid-column: 1 / -1; border: 1px solid rgba(126, 140, 168, 0.25); border-radius: 8px; padding: 0.45rem 0.55rem; display: flex; flex-wrap: wrap; gap: 0.3rem 0.75rem; }
.timeline-form-checks legend { font-size: 0.66rem; color: #9aa6ba; padding: 0 0.25rem; }
.timeline-form-checks legend small { color: #6d788c; }
.timeline-check { display: flex; flex-direction: row !important; align-items: center; gap: 0.35rem !important; font-size: 0.74rem !important; color: #dfe5ee !important; }
.timeline-form-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.6rem; }
.timeline-form-actions .timeline-form-remove { margin-left: auto; }
.danger-button.compact-link {
  background: rgba(178, 48, 58, 0.16);
  border: 1px solid rgba(214, 86, 96, 0.5);
  color: #f0a7ad;
  border-radius: 7px;
  cursor: pointer;
}
.danger-button.compact-link:hover { background: rgba(178, 48, 58, 0.3); }

/* Timeline reveal + collapse */
.editor-cycle-timeline.is-collapsed .cycle-timeline-body { display: none; }
.cycle-timeline-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: none;
  border: none;
  color: #c9d0dc;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  cursor: pointer;
  padding: 0.1rem 0.2rem 0.35rem;
}
.editor-cycle-timeline:not(.is-collapsed) .cycle-timeline-toggle { margin-bottom: 0.3rem; }
.cycle-timeline-toggle-chevron { color: #5ec9f2; }
.cycle-timeline-toggle-count { font-weight: 400; text-transform: none; letter-spacing: 0; color: #8a96ac; }
.editor-cycle-timeline.is-collapsed { padding-bottom: 0.35rem; }

/* Game-creation build overlay: composition progress takes the stage in a
   dedicated modal while the agent builds; clicking outside asks before
   canceling the in-flight build. */
.setup-progress-overlay { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 2rem; }
/* display:flex above would defeat the hidden attribute the server/JS use to
   gate the overlay to building/failed sessions — without this, the build
   popup blocks a fresh conversation before the user ever prompts. */
.setup-progress-overlay[hidden] { display: none; }
.setup-progress-overlay-backdrop { position: absolute; inset: 0; background: rgba(4, 6, 10, 0.7); backdrop-filter: blur(2px); }
.setup-progress-overlay .setup-composition-progress {
  position: relative;
  width: min(680px, 94vw);
  max-height: 86vh;
  overflow-y: auto;
  margin: 0;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

/* ── New-object placement popup ──────────────────────────────────────────────
   Floats over the stage (right of the edit-mode controls). The editor page
   body is runtime-workspace, so the studio's dark tokens never cascade here —
   the popup carries its own theme-scoped palette keyed off html[data-theme]
   (dark is the app default; light applies on the explicit toggle). */
.editor-add-object-popup {
  --popup-surface: #ffffff;
  --popup-field: #f4f6f6;
  --popup-ink: #1c2428;
  --popup-muted: #667278;
  --popup-line: #d8dfe0;
  --popup-accent: #0f766e;
  --popup-accent-ink: #ffffff;
  position: absolute;
  top: 64px;
  right: 16px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: 21.5rem;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 80px);
  overflow: hidden;
  border: 1px solid var(--popup-line);
  border-radius: 14px;
  background: var(--popup-surface);
  color: var(--popup-ink);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
}

html[data-theme="dark"] .editor-add-object-popup {
  --popup-surface: #1d2128;
  --popup-field: #14171d;
  --popup-ink: #e7ebee;
  --popup-muted: #9aa6ad;
  --popup-line: #343c45;
  --popup-accent: #19b3a6;
  --popup-accent-ink: #08211e;
}

.editor-add-object-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  padding: 12px 16px;
  border-bottom: 1px solid var(--popup-line);
  font-size: 13px;
}

.editor-add-object-header strong { color: var(--popup-ink); }

.editor-add-object-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--popup-muted);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.editor-add-object-close:hover { background: var(--popup-field); color: var(--popup-ink); }

/* The body is the scroll container: on short stages the popup clamps to the
   frame height and everything below the fold stays reachable. */
.editor-add-object-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 16px 16px;
}

.editor-add-object-body .editor-create-form { display: grid; gap: 10px; margin: 0; }

.editor-add-object-body .editor-create-form label,
.editor-add-object-body .editor-asset-search > label {
  display: grid;
  gap: 5px;
  color: var(--popup-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.editor-add-object-body input:not([type="hidden"]),
.editor-add-object-body select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--popup-line);
  border-radius: 8px;
  background: var(--popup-field);
  color: var(--popup-ink);
  font: inherit;
  font-size: 13px;
}

.editor-add-object-body input:focus,
.editor-add-object-body select:focus {
  outline: none;
  border-color: var(--popup-accent);
}

.editor-add-object-body .editor-placement-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.editor-add-object-body .editor-asset-search { display: grid; gap: 8px; }

/* Model carousel */
.editor-asset-carousel { display: flex; align-items: stretch; gap: 6px; }

.editor-asset-carousel-nav {
  flex: none;
  width: 28px;
  border: 1px solid var(--popup-line);
  border-radius: 8px;
  background: var(--popup-field);
  color: var(--popup-muted);
  font-size: 18px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.editor-asset-carousel-nav:hover { border-color: var(--popup-accent); color: var(--popup-accent); }

.editor-asset-carousel-stage { min-width: 0; flex: 1; }

.editor-asset-carousel-preview {
  position: relative;
  height: 160px;
  overflow: hidden;
  border: 1px solid var(--popup-line);
  border-radius: 10px;
  background: var(--popup-field);
}

.editor-asset-carousel-frame { position: absolute; inset: 0; }
.editor-asset-carousel-frame canvas { width: 100%; height: 100%; }

.editor-asset-carousel-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--popup-ink);
  min-width: 0;
}

.editor-asset-carousel-caption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.editor-asset-carousel-caption small {
  flex: none;
  color: var(--popup-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.editor-asset-search-selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--popup-accent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--popup-accent) 12%, transparent);
  color: var(--popup-ink);
  font-size: 12px;
  font-weight: 600;
  min-width: 0;
}

.editor-asset-search-selected span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.editor-asset-search-selected button {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--popup-muted);
  font-size: 11px;
  cursor: pointer;
}

.editor-asset-search-selected button:hover { color: var(--popup-ink); }

.editor-asset-search-empty { margin: 0; color: var(--popup-muted); font-size: 12px; }

/* Actions: quiet ghost for placement re-pick and the model editor; the
   accent-filled button is the single primary act — Add to world. */
.editor-add-object-body .editor-create-form > button,
.editor-add-object-body [data-editor-runtime-target="assetEditButton"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--popup-line);
  border-radius: 8px;
  background: transparent;
  color: var(--popup-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.editor-add-object-body .editor-create-form > button:hover,
.editor-add-object-body [data-editor-runtime-target="assetEditButton"]:hover {
  border-color: var(--popup-accent);
  color: var(--popup-accent);
}

.editor-add-object-body .editor-create-form > button[type="submit"] {
  border-color: var(--popup-accent);
  background: var(--popup-accent);
  color: var(--popup-accent-ink);
}

.editor-add-object-body .editor-create-form > button[type="submit"]:hover {
  filter: brightness(1.08);
  color: var(--popup-accent-ink);
}

/* ── Stage overlay theming ──────────────────────────────────────────────────
   Every overlay floating on the game stage (edit toggle, add button, save
   pill, controls help) follows light/dark via shared tokens on the frame
   wrap. Geometry stays in the tailwind layer; these unlayered rules override
   only color so both sets stay in sync. Dark mirrors the original zinc
   shell; light mirrors the studio's light surface palette. */
.editor-runtime-frame-wrap {
  --stage-surface: rgba(255, 255, 255, 0.92);
  --stage-field: #eef1f2;
  --stage-ink: #1c2428;
  --stage-muted: #667278;
  --stage-line: #cfd8da;
  --stage-accent: #0f766e;
  --stage-edit-ink: #9d174d;
  --stage-edit-line: rgba(190, 24, 93, 0.5);
  --stage-edit-fill: rgba(219, 39, 119, 0.08);
  --stage-accent-ink: #ffffff;
}

html[data-theme="dark"] .editor-runtime-frame-wrap {
  --stage-surface: rgba(24, 27, 33, 0.92);
  --stage-field: #262c34;
  --stage-ink: #e7ebee;
  --stage-muted: #9aa6ad;
  --stage-line: #3f4750;
  --stage-accent: #4fd2c5;
  --stage-edit-ink: #fbcfe8;
  --stage-edit-line: rgba(244, 114, 182, 0.7);
  --stage-edit-fill: rgba(244, 114, 182, 0.1);
  --stage-accent-ink: #08211e;
}

.asset-edit-mode-toggle,
.editor-add-object-button,
.editor-controls-help-button {
  border-color: var(--stage-line);
  background: var(--stage-surface);
  color: var(--stage-muted);
}

.asset-edit-mode-toggle:hover { border-color: var(--stage-muted); color: var(--stage-ink); }

.editor-controls-help-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 10px 0;
}
.editor-controls-help-tabs button {
  flex: 1;
  border: 1px solid var(--stage-line);
  border-radius: 7px;
  background: transparent;
  color: var(--stage-muted);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 4px;
}
.editor-controls-help-tabs button.is-active {
  border-color: var(--stage-accent);
  color: var(--stage-ink);
  background: var(--stage-field);
}

.asset-edit-mode-toggle.is-on {
  border-color: var(--stage-edit-line);
  background: linear-gradient(var(--stage-edit-fill), var(--stage-edit-fill)), var(--stage-surface);
  color: var(--stage-edit-ink);
}

.asset-edit-mode-state { border-color: var(--stage-line); color: var(--stage-muted); }
.asset-edit-mode-toggle.is-on .asset-edit-mode-state { border-color: var(--stage-edit-line); color: var(--stage-edit-ink); }

.editor-add-object-button:hover { border-color: var(--stage-accent); color: var(--stage-accent); }

.editor-save-overlay {
  border-color: var(--stage-line);
  background: var(--stage-surface);
  color: var(--stage-ink);
}

.editor-save-overlay-spinner { border-color: var(--stage-line); border-top-color: #f59e0b; }

.editor-controls-help-button:hover,
.editor-controls-help-button[aria-expanded="true"] {
  border-color: var(--stage-accent);
  color: var(--stage-accent);
}

.editor-controls-help-panel {
  border-color: var(--stage-line);
  background: var(--stage-surface);
  color: var(--stage-ink);
}

.editor-controls-help-header { border-bottom-color: var(--stage-line); }

.editor-controls-help-close { color: var(--stage-muted); }
.editor-controls-help-close:hover { background: var(--stage-field); color: var(--stage-ink); }

.editor-controls-help-body h4 { color: var(--stage-accent); }
.editor-controls-help-note { color: var(--stage-muted); }

.editor-controls-help-body kbd {
  border-color: var(--stage-line);
  background: var(--stage-field);
  color: var(--stage-ink);
}

/* While a save drains / the preview rebuilds, the stage is not interactable:
   a theme-aware scrim makes that state visible (the frame's pointer-events
   are already off; this is the visual truth of it). Sits under the save pill
   and the stage controls. */
/* Gizmo mode switcher: a drawer attached to the stage header — slides down
   when edit mode turns on, tucks back up when it turns off. Kept in layout
   (opacity/transform, not display) so the motion can animate. */
.editor-stage-transform-modes {
  display: flex;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -115%);
  opacity: 0;
  pointer-events: none;
  z-index: 8;
  background: rgba(9, 22, 34, 0.86);
  border: 1px solid rgba(120, 180, 220, 0.35);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  padding: 6px 7px 7px;
  backdrop-filter: blur(4px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  transition: transform 0.28s cubic-bezier(0.2, 0.85, 0.3, 1), opacity 0.2s ease;
}
.game-editor-shell.asset-edit-mode .editor-stage-transform-modes {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .editor-stage-transform-modes { transition: none; }
}

/* Read-only click info card: what the clicked model is and how it's used.
   Sits BELOW the top-right stage controls (Edit toggle, add button) — at the
   very top it rendered underneath them and was partly hidden. */
.editor-asset-info {
  position: absolute;
  top: 64px;
  right: 14px;
  z-index: 8;
  width: min(300px, 70%);
  background: rgba(9, 22, 34, 0.88);
  border: 1px solid rgba(120, 180, 220, 0.35);
  border-radius: 10px;
  padding: 10px 12px;
  color: #dcecf7;
  font-size: 12px;
  backdrop-filter: blur(4px);
}
.editor-asset-info header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.editor-asset-info header strong { font-size: 13px; color: #fff; }
.editor-asset-info-close {
  border: 0;
  background: transparent;
  color: #9dbdd4;
  cursor: pointer;
  font: inherit;
  padding: 0 2px;
}
.editor-asset-info p { margin: 3px 0; line-height: 1.35; }
.editor-asset-info p span {
  display: inline-block;
  margin-right: 6px;
  color: #8fb4cc;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.editor-asset-info-hint { color: #9dbdd4; font-size: 11px; margin-top: 7px; }
.editor-asset-info-edit {
  margin-top: 9px;
  width: 100%;
  border: 1px solid rgba(120, 180, 220, 0.45);
  border-radius: 8px;
  background: rgba(43, 146, 197, 0.22);
  color: #dff2ff;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 10px;
}
.editor-asset-info-edit:hover { background: rgba(43, 146, 197, 0.38); }

/* Terrain brush sub-toolbar: slides in under the mode drawer. */
.editor-terrain-brush {
  display: flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  top: 46px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  background: rgba(9, 22, 34, 0.86);
  border: 1px solid rgba(120, 180, 220, 0.35);
  border-radius: 10px;
  padding: 6px 10px;
  color: #cfe6f5;
  font-size: 11px;
  backdrop-filter: blur(4px);
}
.editor-terrain-brush button {
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #bcd8ec;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
}
.editor-terrain-brush button.is-active {
  border-color: #2b92c5;
  background: #e2f7ff;
  color: #116087;
}
.editor-terrain-brush label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
}
.editor-terrain-brush input[type="range"] { width: 70px; }
.editor-terrain-brush-note { color: #8fb4cc; font-size: 10px; }

.editor-stage-transform-modes button {
  flex: 0 0 auto;
  min-width: 58px;
  border-color: transparent;
  background: transparent;
  color: #bcd8ec;
}
.editor-stage-transform-modes button.is-active {
  border-color: #2b92c5;
  background: #e2f7ff;
  color: #116087;
}

.editor-stage-scrim {
  position: absolute;
  inset: 0;
  z-index: 25;
  background: color-mix(in srgb, var(--stage-surface) 45%, transparent);
  backdrop-filter: blur(2.5px);
  cursor: wait;
}

.asset-edit-mode-toggle:disabled,
.editor-add-object-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Save-failure state of the stage pill: sticky (no auto-hide), tinted, no
   spinner — a failed drain must stay readable until the user acts. */
.editor-runtime-frame-wrap { --stage-danger: #b91c1c; }
html[data-theme="dark"] .editor-runtime-frame-wrap { --stage-danger: #ef7070; }

.editor-save-overlay.is-error {
  border-color: var(--stage-danger);
  color: var(--stage-danger);
  max-width: min(40rem, calc(100% - 2rem));
}

.editor-save-overlay.is-error .editor-save-overlay-spinner { display: none; }

/* "Reset to original" inside the instance-scoped studio: a quiet danger-
   leaning ghost next to the save button. */
.asset-editor-reset-instance {
  margin-left: 8px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.asset-editor-reset-instance:hover {
  border-color: var(--danger);
  color: var(--danger);
}

/* ── Placement rail inside the asset studio modal ───────────────────────────
   The coordinate/axis tooling lives with the instance editor now (clicks
   outside edit mode are pure navigation). The rail only renders when the
   modal was opened from a clicked world instance. */
.asset-studio-modal-columns {
  display: flex;
  min-height: 0;
  flex: 1;
  align-items: stretch;
}

.asset-studio-modal-columns .asset-studio-modal-body {
  min-width: 0;
  flex: 1;
}

.asset-studio-transform {
  display: none;
  width: 230px;
  flex: none;
  overflow-y: auto;
  padding: 14px 16px;
  border-left: 1px solid var(--line);
}

.asset-studio-modal[data-instance-scoped] .asset-studio-transform {
  display: block;
}

.asset-studio-transform h3 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.asset-studio-transform .editor-transform-form {
  display: grid;
  gap: 10px;
  margin: 0;
}

.asset-studio-transform fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.asset-studio-transform legend {
  display: none;
}

.asset-studio-transform .editor-transform-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.asset-studio-transform .editor-transform-grid label {
  display: grid;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.asset-studio-transform .editor-transform-grid input {
  width: 100%;
  padding: 5px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--page);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
}

.asset-studio-transform .editor-transform-modes,
.asset-studio-transform .editor-transform-presets,
.asset-studio-transform .editor-scene-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.asset-studio-transform .editor-transform-modes button,
.asset-studio-transform .editor-transform-presets button {
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.asset-studio-transform .editor-transform-modes button.is-active {
  border-color: var(--accent);
  color: var(--accent);
}

.asset-studio-transform .editor-transform-status {
  min-height: 16px;
  margin: 0;
  font-size: 11px;
  color: var(--muted);
}

/* ── Pending-changes review ─────────────────────────────────────────────────
   Shown when leaving edit mode with queued work: confirm the batch, keep
   editing, or discard per item. Theme follows the stage tokens. */
.editor-pending-review-backdrop {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(0, 0, 0, 0.35);
}

.editor-pending-review-panel {
  position: absolute;
  left: 50%;
  top: 48px;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: 26rem;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 96px);
  overflow: hidden;
  border: 1px solid var(--stage-line);
  border-radius: 14px;
  background: var(--stage-surface);
  color: var(--stage-ink);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
}

.editor-pending-review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  padding: 12px 16px;
  border-bottom: 1px solid var(--stage-line);
  font-size: 13px;
}

.editor-pending-review-close {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--stage-muted);
  font-size: 12px;
  cursor: pointer;
}

.editor-pending-review-close:hover { background: var(--stage-field); color: var(--stage-ink); }

.editor-pending-review-list {
  margin: 0;
  padding: 8px 10px;
  overflow-y: auto;
  list-style: none;
  display: grid;
  gap: 4px;
}

.editor-pending-review-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
  background: var(--stage-field);
}

.editor-pending-review-icon { flex: none; font-size: 13px; }

.editor-pending-review-text { display: grid; min-width: 0; flex: 1; }
.editor-pending-review-text strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.editor-pending-review-text small { color: var(--stage-muted); font-size: 10px; }

.editor-pending-review-item-discard {
  flex: none;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--stage-muted);
  font-size: 11px;
  cursor: pointer;
}

.editor-pending-review-item-discard:hover { color: var(--stage-danger); }

.editor-pending-review-empty {
  justify-content: center;
  color: var(--stage-muted);
  font-size: 12px;
}

.editor-pending-review-note {
  margin: 0;
  padding: 0 16px 8px;
  color: var(--stage-muted);
  font-size: 10px;
}

.editor-pending-review-actions {
  display: flex;
  flex: none;
  gap: 8px;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--stage-line);
}

.editor-pending-review-actions button {
  padding: 7px 12px;
  border: 1px solid var(--stage-line);
  border-radius: 8px;
  background: transparent;
  color: var(--stage-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.editor-pending-review-discard:hover { border-color: var(--stage-danger); color: var(--stage-danger); }
.editor-pending-review-keep { margin-left: auto; }

.editor-pending-review-save {
  border-color: var(--stage-accent) !important;
  background: var(--stage-accent) !important;
  color: var(--stage-accent-ink) !important;
}

.editor-asset-categories { display: flex; flex-wrap: wrap; gap: 6px; }

.editor-asset-categories button {
  padding: 5px 10px;
  border: 1px solid var(--popup-line);
  border-radius: 999px;
  background: transparent;
  color: var(--popup-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.editor-asset-categories button:hover { border-color: var(--popup-accent); color: var(--popup-accent); }

.editor-asset-categories button.is-active {
  border-color: var(--popup-accent);
  background: color-mix(in srgb, var(--popup-accent) 12%, transparent);
  color: var(--popup-ink);
}

/* Play preview: the editor topbar's one "go play it" act — purple, with a
   pad, unmistakable against the zinc chrome. */
.editor-play-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid #7c3aed;
  border-radius: 999px;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  color: #f5f3ff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.35);
  transition: filter 0.15s, box-shadow 0.15s;
}

.editor-play-button:hover {
  filter: brightness(1.12);
  box-shadow: 0 3px 14px rgba(124, 58, 237, 0.5);
  color: #ffffff;
}

/* ── In-page prompt-plan review modal ───────────────────────────────────────
   Replaces the navigation to the plan_review page: the plan, its tool
   actions, Cancel, and Implement — all over the current screen. */
.agent-plan-modal {
  --plan-surface: #ffffff;
  --plan-field: #f4f6f6;
  --plan-ink: #1c2428;
  --plan-muted: #667278;
  --plan-line: #d8dfe0;
  --plan-accent: #0f766e;
  --plan-accent-ink: #ffffff;
  position: fixed;
  inset: 0;
  z-index: 90;
}

html[data-theme="dark"] .agent-plan-modal {
  --plan-surface: #1d2128;
  --plan-field: #14171d;
  --plan-ink: #e7ebee;
  --plan-muted: #9aa6ad;
  --plan-line: #343c45;
  --plan-accent: #19b3a6;
  --plan-accent-ink: #08211e;
}

.agent-plan-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.agent-plan-modal-panel {
  position: absolute;
  left: 50%;
  top: 64px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  width: 34rem;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 128px);
  overflow: hidden;
  border: 1px solid var(--plan-line);
  border-radius: 14px;
  background: var(--plan-surface);
  color: var(--plan-ink);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
}

.agent-plan-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex: none;
  padding: 14px 18px;
  border-bottom: 1px solid var(--plan-line);
}

.agent-plan-modal-header strong { font-size: 14px; }

.agent-plan-modal-header p {
  margin: 4px 0 0;
  color: var(--plan-muted);
  font-size: 12px;
  line-height: 1.45;
}

.agent-plan-modal-close {
  flex: none;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--plan-muted);
  font-size: 12px;
  cursor: pointer;
}

.agent-plan-modal-close:hover { background: var(--plan-field); color: var(--plan-ink); }

.agent-plan-modal-list {
  margin: 0;
  padding: 10px 18px;
  overflow-y: auto;
  list-style: none;
  display: grid;
  gap: 6px;
  counter-reset: plan-step;
}

.agent-plan-modal-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--plan-field);
  counter-increment: plan-step;
}

.agent-plan-modal-list li strong { font-size: 12px; }
.agent-plan-modal-list li strong::before { content: counter(plan-step) ". "; color: var(--plan-muted); }
.agent-plan-modal-list li p { grid-column: 1; margin: 0; color: var(--plan-muted); font-size: 11px; line-height: 1.4; }
.agent-plan-modal-list li .tool-chip { grid-row: 1; grid-column: 2; align-self: start; }

.agent-plan-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex: none;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--plan-line);
}

.agent-plan-modal-cancel {
  padding: 8px 14px;
  border: 1px solid var(--plan-line);
  border-radius: 8px;
  background: transparent;
  color: var(--plan-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.agent-plan-modal-implement {
  padding: 8px 16px;
  border: 1px solid var(--plan-accent);
  border-radius: 8px;
  background: var(--plan-accent);
  color: var(--plan-accent-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.agent-plan-modal-implement:hover { filter: brightness(1.08); }

/* Discard ✕ pinned to the plan card's top-right corner. */
.agent-plan-callout { position: relative; }

.agent-plan-dismiss {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
}

.agent-plan-dismiss:hover { background: rgba(127, 127, 127, 0.15); color: var(--danger); }

/* In-flight Meshy generations: a persistent editor notice (not the
   auto-hiding flash) — generated models take minutes and land after a
   rebuild, so absence right now is expected, not broken. */
.meshy-pending-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border: 1px solid rgba(139, 92, 246, 0.5);
  border-radius: 10px;
  background: rgba(139, 92, 246, 0.12);
  color: #ddd6fe;
  font-size: 12.5px;
  line-height: 1.45;
}

.meshy-pending-banner strong { color: #ede9fe; }

.meshy-pending-spinner {
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(139, 92, 246, 0.35);
  border-top-color: #a78bfa;
  border-radius: 999px;
  animation: meshy-pending-spin 1s linear infinite;
}

@keyframes meshy-pending-spin { to { transform: rotate(360deg); } }

/* ── Characters menubar panel ─────────────────────────────────────────────── */
.characters-panel {
  max-height: min(78vh, 860px);
  overflow-y: auto;
  width: min(880px, 92vw);
}

.environment-panel {
  max-height: min(78vh, 820px);
  overflow-y: auto;
  width: min(720px, 92vw);
}

.environment-form {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  margin-top: 12px;
}

.environment-section {
  border: 1px solid #3b3d40;
  border-radius: 12px;
  background: #232528;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 12px;
}

.environment-section legend {
  color: #d7d9dd;
  /* float pulls the legend into the fieldset's own layout flow instead of
     perching it on the border line, where it clips against the panel. */
  float: left;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
  padding: 0;
  text-transform: uppercase;
  width: 100%;
}

.environment-field {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr auto;
}

.environment-field > span {
  color: #b9bcc2;
  font-size: 0.85rem;
}

.environment-field > span small {
  color: #7d8188;
  margin-left: 4px;
}

.environment-field select,
.environment-field input[type="number"] {
  background: #1a1c1f;
  border: 1px solid #3b3d40;
  border-radius: 8px;
  color: #e8eaee;
  font-size: 0.85rem;
  padding: 5px 8px;
  width: 130px;
}

.environment-field--check {
  grid-template-columns: auto 1fr;
}

.environment-actions {
  display: flex;
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.characters-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  margin-top: 12px;
}

.character-card {
  border: 1px solid #3b3d40;
  border-radius: 12px;
  background: #232528;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.character-card-heading {
  align-items: start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.character-card-heading h3 { margin: 0; font-size: 15px; }

.character-card-preview {
  aspect-ratio: 16 / 10;
  background: #1b1d20;
  border: 1px solid #33353a;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.character-card-preview canvas { width: 100%; height: 100%; display: block; }

.character-card-asset {
  color: #9ca3af;
  font-size: 12px;
  margin: 0;
}

.character-anim-row { flex-wrap: wrap; }

.character-anim-chip { cursor: pointer; }
.character-anim-chip:hover { border-color: #a78bfa; color: #ede9fe; }

.character-card-note {
  color: #8b8f98;
  font-size: 11.5px;
  line-height: 1.35;
  margin: 0;
}

.character-regen-form { display: grid; gap: 8px; }

.character-regen-form textarea {
  background: #1b1d20;
  border: 1px solid #3b3d40;
  border-radius: 8px;
  color: inherit;
  font: inherit;
  font-size: 13px;
  padding: 8px 10px;
  resize: vertical;
}

.character-regen-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.character-regen-status { font-size: 12px; margin: 0; color: #a7f3d0; }
.character-regen-status.failed { color: #fda4af; }

.character-regen-pending {
  align-items: center;
  color: #c4b5fd;
  display: flex;
  font-size: 12.5px;
  gap: 8px;
  margin: 0;
}

.characters-empty { color: #9ca3af; margin: 12px 0 0; }

/* Clip preview bar inside any three.js viewer (mini previews + studio).
   The bar itself must not eat brush strokes aimed at the canvas below it —
   only the chips are interactive. */
.asset-viewer-clips {
  bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  left: 8px;
  pointer-events: none;
  position: absolute;
  right: 8px;
  z-index: 3;
}

.asset-viewer-clip { pointer-events: auto; }

.asset-viewer-clip {
  background: rgba(20, 21, 24, 0.82);
  border: 1px solid #4b4d52;
  border-radius: 999px;
  color: #d1d5db;
  cursor: pointer;
  font-size: 11px;
  padding: 3px 10px;
}

.asset-viewer-clip:hover { border-color: #a78bfa; color: #ede9fe; }
.asset-viewer-clip.active { background: #7255b6; border-color: #7255b6; color: #ffffff; }

/* Support is part of the public welcome: warm answers first, then a clear
   human hand-off with visible progress. */
.support-center-page { background: #fffdf7; }
.support-center-hero { position: relative; min-height: 440px; overflow: hidden; color: #fff; background: radial-gradient(circle at 80% 30%, rgba(255, 204, 95, .42), transparent 24%), radial-gradient(circle at 18% 78%, rgba(192, 132, 252, .42), transparent 32%), linear-gradient(135deg, #182a67, #573281 58%, #a15280); }
.support-center-hero--contact { min-height: 390px; background: linear-gradient(135deg, #173a5a, #48528a 56%, #92577f); }
.support-center-hero-copy { width: min(760px, calc(100% - 48px)); margin: 0 auto; padding: 135px 0 72px; text-align: center; }
.support-center-hero-copy .marketing-kicker { color: #ffe399; }
.support-center-hero-copy h1 { margin: 0; color: #fff8dc; font-size: clamp(42px, 6vw, 76px); line-height: .98; letter-spacing: -.065em; }
.support-center-hero-copy > p:last-child { max-width: 650px; margin: 22px auto 0; color: rgba(250,247,255,.91); font-size: 18px; line-height: 1.6; }
.support-faq, .support-request-area, .contact-form-section, .support-contact-cta { width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 100px 0; }
.support-section-heading { max-width: 680px; margin: 0 auto 38px; text-align: center; }
.support-section-heading h2, .support-contact-cta h2 { margin: 8px 0 14px; color: #32204c; font-size: clamp(32px, 4vw, 52px); line-height: 1.03; letter-spacing: -.055em; }
.support-section-heading > p:last-child, .support-contact-cta p:last-child { margin: 0; color: #665873; font-size: 16px; line-height: 1.6; }
.support-faq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.support-faq-grid article { display: flex; min-height: 210px; flex-direction: column; align-items: flex-start; border: 1px solid #ebdff3; border-radius: 24px; background: linear-gradient(145deg, #fffefd, #faf4ff); box-shadow: 0 14px 30px rgba(71,48,96,.09); padding: 26px; }
.support-faq-grid article:nth-child(3n + 2) { background: linear-gradient(145deg, #fffdf6, #fff3d7); }
.support-faq-grid article:nth-child(3n) { background: linear-gradient(145deg, #fbfffe, #e9f9f5); }
.support-faq-grid h3, .support-request-history h3 { margin: 0 0 10px; color: #3d2857; font-size: 20px; line-height: 1.15; }
.support-faq-grid p { margin: 0; color: #665873; font-size: 14px; line-height: 1.55; }
.support-faq-grid a { margin-top: auto; padding-top: 18px; color: #8f3d82; font-size: 13px; font-weight: 850; text-decoration: underline; text-underline-offset: 3px; }
.support-request-area { border-top: 1px solid #eee3ee; }
.support-request-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .8fr); gap: 28px; align-items: start; }
.support-request-form, .support-request-history { border: 1px solid #e5d6f2; border-radius: 26px; background: #fff; box-shadow: 0 16px 34px rgba(74,43,96,.1); padding: 28px; }
.support-request-form { display: grid; gap: 18px; }
.support-request-form label { display: block; margin-bottom: 7px; color: #48325e; font-size: 13px; font-weight: 850; }
.support-request-form input:not([type="submit"]), .support-request-form textarea { box-sizing: border-box; width: 100%; border: 1px solid #d9cde7; border-radius: 12px; background: #fffdfd; color: #392b4a; font: inherit; line-height: 1.45; padding: 11px 12px; }
.support-request-form textarea { resize: vertical; }
.support-request-form input:focus, .support-request-form textarea:focus { outline: 3px solid rgba(185,129,230,.24); outline-offset: 1px; border-color: #9b55b7; }
.support-request-form .marketing-primary-action { justify-self: start; border: 0; cursor: pointer; }
.support-form-errors { border: 1px solid #e7a6a6; border-radius: 12px; background: #fff0f0; color: #9c3333; font-size: 14px; line-height: 1.4; padding: 11px 13px; }
.support-request-history ol { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
.support-request-history li { border-top: 1px solid #eee7f3; padding-top: 14px; }
.support-request-history li:first-child { border-top: 0; padding-top: 0; }
.support-request-history li > div { display: flex; justify-content: space-between; gap: 12px; color: #3d2857; }
.support-request-history time { color: #86768f; font-size: 11px; white-space: nowrap; }
.support-request-history li > p, .support-empty-state { margin: 9px 0 0; color: #665873; font-size: 13px; line-height: 1.45; }
.support-status { display: inline-block; margin-top: 8px; border-radius: 999px; background: #efe6fa; color: #70498d; font-size: 11px; font-weight: 850; padding: 4px 8px; }
.support-status--in-progress { background: #e4f2ff; color: #286492; }.support-status--waiting-on-requester { background: #fff0ca; color: #856117; }.support-status--resolved, .support-status--closed { background: #dbf5e8; color: #1c7951; }
.support-contact-cta { display: flex; gap: 32px; align-items: center; justify-content: space-between; border-top: 1px solid #eee3ee; }.support-contact-cta > div:first-child { max-width: 630px; }.support-contact-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-form-section { max-width: 720px; }.contact-request-form { width: min(100%, 640px); margin: 0 auto; }.support-contact-two-up { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }.bot-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 820px) { .support-faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.support-request-layout { grid-template-columns: 1fr; }.support-contact-cta { display: grid; } }
@media (max-width: 560px) { .support-center-hero-copy { width: min(100% - 32px, 760px); padding: 118px 0 54px; }.support-center-hero-copy > p:last-child { font-size: 16px; }.support-faq, .support-request-area, .contact-form-section, .support-contact-cta { width: min(100% - 32px, 1120px); padding: 72px 0; }.support-faq-grid, .support-contact-two-up { grid-template-columns: 1fr; }.support-faq-grid article, .support-request-form, .support-request-history { border-radius: 20px; padding: 21px; } }

/* The free trial is intentionally easy to understand at the moment a
   creator signs up or checks their account. */
.auth-trial-note,
.account-trial-note {
  border: 1px solid rgba(127, 87, 190, 0.28);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(246, 237, 255, 0.96), rgba(229, 244, 255, 0.94));
  box-shadow: 4px 5px 0 rgba(89, 57, 141, 0.1);
  color: #46316e;
}

.auth-trial-note {
  display: grid;
  gap: 5px;
  margin: 20px 0 2px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.45;
}

.auth-trial-note strong {
  color: #6c3ca0;
  font-size: 14px;
}

.auth-plan-picker {
  display: grid;
  gap: 9px;
  margin: 8px 0 4px;
  border: 0;
  padding: 0;
}

.auth-plan-picker legend {
  color: #4c2f76;
  font-size: 15px;
  font-weight: 800;
}

.auth-plan-picker > p {
  margin: -2px 0 4px;
  color: #706580;
  font-size: 12px;
  line-height: 1.4;
}

.auth-plan-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid #ddd2ec;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  padding: 10px 12px;
  cursor: pointer;
}

.auth-plan-options {
  display: grid;
  gap: 9px;
}

.auth-plan-option:has(input:checked) {
  border-color: #9b4787;
  background: #fff4fb;
  box-shadow: inset 0 0 0 1px rgba(155, 71, 135, 0.12);
}

.auth-plan-option input {
  margin-top: 3px;
  accent-color: #9b4787;
}

.auth-plan-option span {
  display: grid;
  gap: 2px;
}

.auth-plan-option strong { color: #4d2d78; font-size: 13px; }
.auth-plan-option small { color: #706580; font-size: 11px; line-height: 1.35; }

/* Signup asks for a plan before account details. On wide screens the choice
   lives directly on the illustrated welcome panel, while the actual controls
   remain associated with the form on the right via the HTML form attribute. */
.auth-plan-picker--visual {
  position: static;
  width: 100%;
  margin: 0;
  border: 1px solid rgba(255, 239, 184, 0.45);
  border-radius: 20px;
  background: rgba(25, 26, 72, 0.74);
  box-shadow: 0 16px 34px rgba(6, 8, 33, 0.28);
  padding: 16px;
  backdrop-filter: blur(10px);
}

.auth-plan-picker--visual legend,
.auth-plan-picker--visual > p {
  color: #fff7d7;
}

.auth-plan-picker--visual > p {
  color: rgba(239, 244, 255, 0.84);
}

.auth-plan-picker--visual .auth-plan-option {
  border-color: rgba(224, 216, 255, 0.26);
  background: rgba(11, 18, 54, 0.46);
}

.auth-plan-picker--visual .auth-plan-option:hover,
.auth-plan-picker--visual .auth-plan-option:has(input:checked) {
  border-color: #ffd370;
  background: rgba(95, 56, 141, 0.64);
  box-shadow: inset 0 0 0 1px rgba(255, 211, 112, 0.2);
}

.auth-plan-picker--visual .auth-plan-option strong { color: #fff5d0; }
.auth-plan-picker--visual .auth-plan-option small { color: rgba(240, 244, 255, 0.88); }

.auth-plan-pricing-link {
  justify-self: end;
  margin-top: 2px;
  color: #ffe29a;
  font-size: 12px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-plan-pricing-link:hover,
.auth-plan-pricing-link:focus-visible {
  color: #ffffff;
}

.auth-visual-signup-heading {
  width: 100%;
  color: #ffffff;
}

.auth-visual-signup-stack {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 26px;
  padding: 32px;
}

.auth-visual-brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
}

.auth-visual-brand,
.auth-visual-castle-brand { display: inline-flex; }

.auth-visual-brand .fusionery-logo {
  width: 232px;
}

.auth-visual-castle-brand .fusion-castle-logo {
  width: 190px;
}

.auth-free-to-play {
  color: #fff7ce;
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 950;
  letter-spacing: -0.045em;
  line-height: 1;
  text-align: center;
  text-shadow: 0 3px 16px rgba(8, 8, 36, 0.46);
}

.auth-free-to-play span {
  color: #d8b4fe;
  text-shadow: 0 3px 16px rgba(66, 33, 124, 0.68);
}

/* Public support keeps quick answers and the human hand-off in the same
   warm, playful visual system as the marketing pages. */
.support-center-page {
  background: #fffdf7;
}

.support-center-hero {
  position: relative;
  min-height: 450px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 80% 30%, rgba(255, 204, 95, 0.42), transparent 24%),
    radial-gradient(circle at 18% 78%, rgba(192, 132, 252, 0.42), transparent 32%),
    linear-gradient(135deg, #182a67, #573281 58%, #a15280);
}

.support-center-hero::after {
  position: absolute;
  right: -92px;
  bottom: -110px;
  width: 390px;
  height: 390px;
  border: 28px solid rgba(255, 239, 186, 0.3);
  border-radius: 50%;
  content: "";
}

.support-center-hero--contact {
  min-height: 390px;
  background:
    radial-gradient(circle at 78% 25%, rgba(126, 222, 207, 0.35), transparent 24%),
    radial-gradient(circle at 18% 76%, rgba(255, 202, 89, 0.3), transparent 31%),
    linear-gradient(135deg, #173a5a, #48528a 56%, #92577f);
}

.support-center-hero-copy {
  position: relative;
  z-index: 1;
  width: min(760px, calc(100% - 48px));
  margin: 0 auto;
  padding: 135px 0 72px;
  text-align: center;
}

.support-center-hero-copy .marketing-kicker { color: #ffe399; }

.support-center-hero-copy h1 {
  margin: 0;
  color: #fff8dc;
  font-size: clamp(42px, 6vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.065em;
}

.support-center-hero-copy > p:last-child {
  max-width: 650px;
  margin: 22px auto 0;
  color: rgba(250, 247, 255, 0.91);
  font-size: 18px;
  line-height: 1.6;
}

.support-faq,
.support-request-area,
.contact-form-section,
.support-contact-cta {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding: 110px 0;
}

.support-section-heading {
  max-width: 680px;
  margin: 0 auto 38px;
  text-align: center;
}

.support-section-heading h2 {
  margin: 8px 0 14px;
  color: #32204c;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.03;
  letter-spacing: -0.055em;
}

.support-section-heading > p:last-child {
  margin: 0;
  color: #665873;
  font-size: 16px;
  line-height: 1.6;
}

.support-faq-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.support-faq-grid article {
  display: flex;
  min-height: 210px;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid #ebdff3;
  border-radius: 24px;
  background: linear-gradient(145deg, #fffefd, #faf4ff);
  box-shadow: 0 14px 30px rgba(71, 48, 96, 0.09);
  padding: 26px;
}

.support-faq-grid article:nth-child(3n + 2) { background: linear-gradient(145deg, #fffdf6, #fff3d7); }
.support-faq-grid article:nth-child(3n) { background: linear-gradient(145deg, #fbfffe, #e9f9f5); }

.support-faq-grid h3 {
  margin: 0 0 10px;
  color: #3d2857;
  font-size: 20px;
  line-height: 1.15;
}

.support-faq-grid p {
  margin: 0;
  color: #665873;
  font-size: 14px;
  line-height: 1.55;
}

.support-faq-grid a {
  margin-top: auto;
  padding-top: 18px;
  color: #8f3d82;
  font-size: 13px;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.support-request-area {
  border-top: 1px solid #eee3ee;
}

.support-request-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
  gap: 28px;
  align-items: start;
}

.support-request-form,
.support-request-history {
  border: 1px solid #e5d6f2;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(74, 43, 96, 0.1);
  padding: 28px;
}

.support-request-form {
  display: grid;
  gap: 18px;
}

.support-request-form label {
  display: block;
  margin-bottom: 7px;
  color: #48325e;
  font-size: 13px;
  font-weight: 850;
}

.support-request-form input:not([type="submit"]),
.support-request-form textarea {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #d9cde7;
  border-radius: 12px;
  background: #fffdfd;
  color: #392b4a;
  font: inherit;
  line-height: 1.45;
  padding: 11px 12px;
}

.support-request-form textarea { resize: vertical; }

.support-request-form input:focus,
.support-request-form textarea:focus {
  outline: 3px solid rgba(185, 129, 230, 0.24);
  outline-offset: 1px;
  border-color: #9b55b7;
}

.support-request-form .marketing-primary-action {
  justify-self: start;
  border: 0;
  cursor: pointer;
}

.support-form-errors {
  border: 1px solid #e7a6a6;
  border-radius: 12px;
  background: #fff0f0;
  color: #9c3333;
  font-size: 14px;
  line-height: 1.4;
  padding: 11px 13px;
}

.support-request-history h3 {
  margin: 0 0 16px;
  color: #3d2857;
  font-size: 21px;
}

.support-request-history ol {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.support-request-history li {
  border-top: 1px solid #eee7f3;
  padding-top: 14px;
}

.support-request-history li:first-child { border-top: 0; padding-top: 0; }

.support-request-history li > div {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  color: #3d2857;
}

.support-request-history time {
  color: #86768f;
  font-size: 11px;
  white-space: nowrap;
}

.support-request-history li > p,
.support-empty-state {
  margin: 9px 0 0;
  color: #665873;
  font-size: 13px;
  line-height: 1.45;
}

.support-status {
  display: inline-block;
  margin-top: 8px;
  border-radius: 999px;
  background: #efe6fa;
  color: #70498d;
  font-size: 11px;
  font-weight: 850;
  padding: 4px 8px;
}

.support-status--in-progress { background: #e4f2ff; color: #286492; }
.support-status--waiting-on-requester { background: #fff0ca; color: #856117; }
.support-status--resolved,
.support-status--closed { background: #dbf5e8; color: #1c7951; }

.support-contact-cta {
  display: flex;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #eee3ee;
}

.support-contact-cta > div:first-child { max-width: 630px; }
.support-contact-cta h2 { margin: 7px 0 12px; color: #32204c; font-size: clamp(30px, 4vw, 47px); line-height: 1.04; letter-spacing: -0.055em; }
.support-contact-cta p:last-child { margin: 0; color: #665873; line-height: 1.55; }

.support-contact-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.contact-form-section { max-width: 720px; }
.contact-request-form { width: min(100%, 640px); margin: 0 auto; }

.support-contact-two-up {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.bot-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 820px) {
  .support-faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .support-request-layout { grid-template-columns: 1fr; }
  .support-contact-cta { display: grid; }
}

@media (max-width: 560px) {
  .support-center-hero { min-height: 400px; }
  .support-center-hero-copy { width: min(100% - 32px, 760px); padding: 118px 0 54px; }
  .support-center-hero-copy > p:last-child { font-size: 16px; }
  .support-faq,
  .support-request-area,
  .contact-form-section,
  .support-contact-cta { width: min(100% - 32px, 1120px); padding: 72px 0; }
  .support-faq-grid,
  .support-contact-two-up { grid-template-columns: 1fr; }
  .support-faq-grid article,
  .support-request-form,
  .support-request-history { border-radius: 20px; padding: 21px; }
  .support-request-history li > div { display: grid; gap: 4px; }
}

.auth-free-to-play-copy {
  max-width: 560px;
  margin: -4px 0 0;
  color: rgba(239, 244, 255, 0.84);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

@media (min-width: 1180px) {
  .auth-visual-signup-stack {
    grid-template-columns: minmax(0, 680px);
  }

  .auth-plan-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .auth-plan-picker--visual .auth-plan-option {
    min-height: 118px;
    flex-direction: column;
    gap: 7px;
  }

  .auth-plan-picker--visual .auth-plan-option input {
    margin: 0;
  }
}

@media (max-width: 760px) {
  .auth-visual:has(.auth-plan-picker--visual) {
    min-height: 610px;
  }

  .auth-visual-signup-stack { gap: 20px; padding: 20px; }
  .auth-plan-picker--visual { padding: 14px; }

  .auth-visual-brand-row { gap: 12px; }
  .auth-visual-brand .fusionery-logo { width: 188px; }
  .auth-visual-castle-brand .fusion-castle-logo { width: 158px; }
}

.account-trial-note {
  margin: 18px 0 0;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.5;
}

.pricing-card--trial {
  border-color: #9770d0;
  background: linear-gradient(145deg, #fbf5ff, #e7f3ff);
  color: #543887;
}

.pricing-card--trial::after {
  border-color: #bc91f3;
}

/* Flagship showcase: first-party games rendered as the marketplace's marquee
   row — larger cards, an ember accent, and a badge, above the public grid. */
.marketplace-flagships { padding: 4.5rem clamp(1.5rem, 6vw, 6rem) 1rem; }
.marketplace-flagship-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 1.75rem;
  margin-top: 2rem;
}
.marketplace-game-card--flagship {
  /* Each flagship wears its own title-screen accent: ember for the sunless
     RPG, neon for the rescue op, teal for the coastal rally. */
  border: 1.5px solid var(--card-flare, var(--card-accent, rgba(240, 148, 68, 0.55)));
  box-shadow: 0 18px 44px rgba(24, 12, 4, 0.3), 0 0 26px -14px var(--card-flare, var(--card-accent, rgba(240, 148, 68, 0.6)));
  transform: translateZ(0);
}
.marketplace-game-card--flagship .marketplace-game-card-scene { min-height: 220px; }
.marketplace-game-card--flagship h3 { font-size: 1.45rem; }
.marketplace-flagship-badge {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 0.55rem;
  padding: 0.24rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1c1206;
  background: linear-gradient(120deg, var(--card-flare, #f0b429), var(--card-accent, #f08a3c));
}
.marketplace-flagship-tagline {
  font-style: italic;
  font-weight: 600;
  color: var(--card-flare, var(--card-accent, inherit));
  filter: brightness(0.72) saturate(1.15);
}

/* Staged /play flow: dedicated entry and lobby screens over the game's own
   cover art, with the engine iframe mounting only when play begins. */
.public-release--staged {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #0d0b12;
  color: #f4f0ff;
}
.public-release--staged .release-backdrop { position: fixed; inset: 0; z-index: 0; }
.public-release--staged .release-backdrop img { width: 100%; height: 100%; object-fit: cover; filter: blur(6px) brightness(0.55) saturate(1.1); transform: scale(1.04); }
.public-release--staged .release-backdrop-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 35%, rgba(13, 11, 18, 0.25), rgba(13, 11, 18, 0.88) 78%); }
.public-release--staged .release-stage-form { position: relative; z-index: 1; display: contents; }
.public-release--staged .release-screen { position: relative; z-index: 1; }
/* An explicit display on the screens beats the user-agent [hidden] rule, so
   the inactive screen kept its layout box and rendered THROUGH the active
   one — the entry and lobby screens were drawn on top of each other. */
.public-release--staged .release-screen[hidden] { display: none; }
.release-screen--entry, .release-screen--lobby {
  /* Side-rail blocks share one measure so the rail reads as a single column. */
  --release-column: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* NOT justify-content: center — when the stage is taller than the viewport
     that centres the overflow too, putting the title above the top of the
     page where no amount of scrolling reaches it. Auto margins centre only
     when there is spare room and collapse to nothing when there is not. */
  justify-content: flex-start;
  gap: 1.6rem;
  padding: 3rem clamp(1.25rem, 4vw, 3.5rem);
  text-align: center;
}

.release-screen--entry > .release-hero,
.release-screen--lobby > .release-hero { margin-top: auto; }

.release-screen--entry > .release-stage,
.release-screen--lobby > .release-stage { margin-bottom: auto; }

/* Console-style stage: hero band across the top, the setup tiles filling the
   main area, and everything you act on gathered into a right-hand rail. */
.release-hero {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  width: min(1240px, 100%);
}

/* On a wide stage the title belongs with the content, not floating above
   its centre. */
@media (min-width: 900px) {
  .release-hero {
    justify-items: start;
    text-align: left;
  }
  .release-hero .release-entry-meta { justify-content: flex-start; }
}

.release-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  width: min(1240px, 100%);
  text-align: left;
}

.release-stage-main { min-width: 0; }

.release-stage-side {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
}

@media (min-width: 900px) {
  .release-stage {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    align-items: start;
  }
}
.release-screen--entry h1 { font-size: clamp(2.4rem, 6vw, 4rem); margin: 0; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.55); }
.release-tagline { font-style: italic; font-weight: 600; font-size: 1.15rem; color: var(--release-accent, #ffd36a); margin: 0; }
.release-entry-meta { display: flex; gap: 0.6rem; align-items: center; }
.release-name-field { width: 100%; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.9; }
.release-name-field input, .release-join-row input {
  background: rgba(10, 8, 16, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  color: inherit;
  padding: 0.7rem 1rem;
  font-size: 1rem;
  min-width: 240px;
  text-align: center;
}
.release-entry-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 0.4rem; }
.release-stage-side .release-entry-actions,
.release-stage-side .release-lobby-room-actions { flex-direction: column; align-items: stretch; margin-top: 0; }
.release-stage-side .release-entry-actions button,
.release-stage-side .release-lobby-room-actions button { width: 100%; }
.release-entry-actions button, .release-lobby-room-actions button, .release-join-row button {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(16, 13, 24, 0.72);
  color: inherit;
  padding: 0.85rem 1.7rem;
  font-size: 1.02rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.release-entry-actions button:hover, .release-lobby-room-actions button:hover, .release-join-row button:hover {
  transform: translateY(-1px);
  border-color: var(--release-accent, #ffd36a);
}
button.release-primary {
  background: var(--release-accent, #ffd36a);
  border-color: transparent;
  color: #17111f;
  font-size: 1.15rem;
  padding: 0.95rem 2.4rem;
  box-shadow: 0 10px 34px -12px var(--release-accent, #ffd36a);
}
.release-join-row { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 0.8rem; }
.release-lobby-code-display { font-size: clamp(2.6rem, 7vw, 4.2rem); letter-spacing: 0.28em; margin: 0; color: var(--release-accent, #ffd36a); text-shadow: 0 4px 26px rgba(0, 0, 0, 0.6); }
.release-lobby-hint { max-width: 420px; opacity: 0.85; margin: 0; }
.release-lobby-share-row { display: flex; gap: 0.6rem; align-items: stretch; width: 100%; }
.release-lobby-share-row input { flex: 1; min-width: 0; }
/* In the narrow rail the row would squeeze the button until its label wrapped
   onto two lines; stack instead. */
.release-stage-side .release-lobby-share-row { flex-direction: column; }
.release-stage-side .release-lobby-share-row button { white-space: nowrap; }
.release-lobby-share-row input { min-width: 0; text-align: left; background: rgba(10, 8, 16, 0.72); border: 1px solid rgba(255,255,255,0.22); border-radius: 10px; color: inherit; padding: 0.6rem 0.9rem; }
.public-release--staged .release-lobby-roster { width: 100%; background: rgba(12, 10, 18, 0.78); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 14px; padding: 1rem 1.2rem; text-align: left; }
.public-release--staged .release-lobby-roster-heading { display: flex; justify-content: space-between; margin-bottom: 0.6rem; font-weight: 600; }
.public-release--staged .release-lobby-roster ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.public-release--staged .release-lobby-roster li { display: flex; justify-content: space-between; padding: 0.45rem 0.6rem; border-radius: 8px; background: rgba(255, 255, 255, 0.05); }
.public-release--staged .release-lobby-roster li[data-status="active"] { border-left: 3px solid var(--release-accent, #ffd36a); }
.release-lobby-room-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.public-release--staged .release-lobby-launch { width: min(560px, 92vw); background: rgba(12, 10, 18, 0.72); border: 1px dashed rgba(255, 255, 255, 0.25); border-radius: 12px; padding: 0.9rem 1.1rem; font-size: 0.85rem; text-align: left; }
.release-status-toast {
  /* Informational only — it floats near the primary actions and must never
     steal their clicks (it was intercepting Start). */
  pointer-events: none;
  position: fixed;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  z-index: 5;
  background: rgba(14, 11, 20, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 0.5rem 1.2rem;
  font-size: 0.92rem;
  max-width: min(680px, 92vw);
}
.release-status-toast:empty { display: none; }
.release-status-toast[data-status="error"] { border-color: #ff7d7d; color: #ffb9b9; }
.release-status-toast[data-status="success"] { border-color: #7dffb0; }
.public-release--staged .release-screen--game {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  z-index: 3;
  visibility: hidden;
  pointer-events: none;
}
.public-release--staged[data-fusionery-stage="game"] .release-screen--game {
  visibility: visible;
  pointer-events: auto;
}
.release-game-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 1.1rem;
  background: rgba(12, 10, 18, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.release-game-bar-title { font-weight: 700; margin-right: 0.6rem; }
.release-game-exit { color: inherit; opacity: 0.85; text-decoration: none; border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; padding: 0.35rem 1rem; }
.release-game-exit:hover { border-color: var(--release-accent, #ffd36a); }
.release-screen--game .release-runtime-frame-wrap { flex: 1; position: relative; }
.release-screen--game iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.release-open-games { width: 100%; background: rgba(12, 10, 18, 0.72); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 14px; padding: 0.9rem 1.1rem; }
.release-open-games-title { margin: 0 0 0.5rem; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; }
.release-open-games ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.release-open-games li { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; padding: 0.45rem 0.6rem; border-radius: 8px; background: rgba(255, 255, 255, 0.05); }
.release-open-games li button { border: 1px solid var(--release-accent, #ffd36a); border-radius: 999px; background: transparent; color: var(--release-accent, #ffd36a); padding: 0.3rem 1rem; font-weight: 600; cursor: pointer; }
.release-open-games li button:hover { background: var(--release-accent, #ffd36a); color: #17111f; }
.release-join-details { font-size: 0.9rem; opacity: 0.9; }
.release-join-details summary { cursor: pointer; padding: 0.4rem 0.8rem; opacity: 0.75; }
.release-join-details summary:hover { opacity: 1; }
.release-join-details .release-join-row { margin-top: 0.6rem; }

/* ======================================================================
   READY-UP SCREEN IDENTITY
   The lobby is the screen a group stares at longest, and every game's used
   to render identically: one slate card, one accent lifted from the palette,
   the same six words. Games::LobbyScreenStyle resolves a THEME (what the
   screen is made of) and a LAYOUT (how it is arranged) — inherited from the
   game's title screen, and seeded from its variety seed when unauthored —
   and stamps both as classes on <main>, alongside --release-accent,
   --lobby-display-font, --lobby-scrim and --lobby-darken.
   ====================================================================== */
.public-release--staged {
  --lobby-ink: #f4f0ff;
  --lobby-muted: rgba(244, 240, 255, 0.72);
  --lobby-bg: #0d0b12;
  --lobby-panel: rgba(12, 10, 18, 0.78);
  --lobby-border: rgba(255, 255, 255, 0.16);
  --lobby-field: rgba(10, 8, 16, 0.72);
  --lobby-radius: 14px;
  --lobby-glow: 0 18px 50px -30px rgba(0, 0, 0, 0.95);
  --lobby-heading-spacing: 0.01em;
  --lobby-heading-transform: none;
  --lobby-label-transform: none;
  --lobby-vignette: radial-gradient(ellipse at 50% 35%, rgba(13, 11, 18, 0.28), rgba(13, 11, 18, 0.94) 78%);
  background: var(--lobby-bg);
  color: var(--lobby-ink);
}

/* --- themes: the material the screen is made of ---------------------- */
.release-lobby-theme--arcade {
  --lobby-bg: #150f1d;
  --lobby-panel: rgba(42, 24, 14, 0.7);
  --lobby-border: rgba(255, 199, 51, 0.32);
  --lobby-field: rgba(24, 14, 9, 0.75);
  --lobby-radius: 18px;
  --lobby-heading-transform: uppercase;
  --lobby-heading-spacing: 0.05em;
  --lobby-vignette: radial-gradient(ellipse at 50% 28%, rgba(72, 34, 8, 0.24), rgba(15, 10, 21, 0.94) 74%);
}
.release-lobby-theme--sci_fi {
  --lobby-bg: #060b14;
  --lobby-panel: rgba(10, 24, 40, 0.76);
  --lobby-border: rgba(71, 217, 255, 0.3);
  --lobby-field: rgba(6, 16, 28, 0.8);
  --lobby-radius: 4px;
  --lobby-heading-transform: uppercase;
  --lobby-heading-spacing: 0.16em;
  --lobby-label-transform: uppercase;
  --lobby-vignette: linear-gradient(180deg, rgba(6, 11, 20, 0.5), rgba(6, 11, 20, 0.96));
}
.release-lobby-theme--fantasy {
  --lobby-bg: #150e1e;
  --lobby-panel: rgba(32, 19, 47, 0.78);
  --lobby-border: rgba(191, 140, 255, 0.3);
  --lobby-field: rgba(20, 12, 30, 0.78);
  --lobby-radius: 20px;
  --lobby-heading-spacing: 0.04em;
  --lobby-vignette: radial-gradient(ellipse at 50% 30%, rgba(58, 30, 92, 0.3), rgba(15, 9, 22, 0.95) 76%);
}
.release-lobby-theme--horror {
  --lobby-ink: #efe6e6;
  --lobby-muted: rgba(239, 230, 230, 0.62);
  --lobby-bg: #08060a;
  --lobby-panel: rgba(18, 9, 10, 0.86);
  --lobby-border: rgba(230, 63, 56, 0.32);
  --lobby-field: rgba(12, 6, 7, 0.86);
  --lobby-radius: 2px;
  --lobby-heading-transform: uppercase;
  --lobby-heading-spacing: 0.09em;
  --lobby-vignette: radial-gradient(ellipse at 50% 22%, rgba(52, 8, 8, 0.28), rgba(4, 3, 5, 0.98) 68%);
}
.release-lobby-theme--minimal {
  --lobby-ink: #eef1f6;
  --lobby-muted: rgba(238, 241, 246, 0.66);
  --lobby-bg: #14161a;
  --lobby-panel: rgba(255, 255, 255, 0.045);
  --lobby-border: rgba(255, 255, 255, 0.16);
  --lobby-field: rgba(18, 20, 24, 0.72);
  --lobby-radius: 8px;
  --lobby-glow: none;
  --lobby-heading-spacing: 0.02em;
  --lobby-vignette: linear-gradient(180deg, rgba(20, 22, 26, 0.55), rgba(20, 22, 26, 0.95));
}
.release-lobby-theme--neon {
  --lobby-bg: #07040d;
  --lobby-panel: rgba(22, 7, 31, 0.8);
  --lobby-border: rgba(255, 77, 191, 0.38);
  --lobby-field: rgba(14, 5, 20, 0.82);
  --lobby-radius: 12px;
  --lobby-glow: 0 0 34px -12px var(--release-accent, #ff4dbf);
  --lobby-heading-transform: uppercase;
  --lobby-heading-spacing: 0.12em;
  --lobby-vignette: radial-gradient(ellipse at 50% 34%, rgba(58, 8, 66, 0.34), rgba(6, 3, 12, 0.95) 74%);
}

/* --- theme application ----------------------------------------------- */
/* background_darken and background_opacity are authorable, so the backdrop
   is pushed back by exactly as much as the game asked for. */
.public-release--staged .release-backdrop img {
  filter: blur(6px) brightness(calc(1 - var(--lobby-darken, 0.55))) saturate(1.1);
}
.public-release--staged .release-backdrop-shade {
  background: var(--lobby-vignette);
  opacity: var(--lobby-scrim, 0.66);
}

.public-release--staged .release-hero h1,
.public-release--staged .release-lobby-code-display,
.public-release--staged .release-briefing-heading,
.public-release--staged button.release-primary {
  font-family: var(--lobby-display-font, inherit);
  letter-spacing: var(--lobby-heading-spacing);
  text-transform: var(--lobby-heading-transform);
}
/* Faces run at different optical sizes at the same point size (Press Start
   2P especially), matched to theme_fonts.gd FONT_SCALES. */
.public-release--staged .release-screen--entry h1 { font-size: calc(clamp(2.4rem, 6vw, 4rem) * var(--lobby-display-scale, 1)); }
.public-release--staged .release-lobby-code-display { font-size: calc(clamp(2.6rem, 7vw, 4.2rem) * var(--lobby-display-scale, 1)); }

.public-release--staged .eyebrow { color: var(--release-accent, #ffd36a); }
.release-subtitle { margin: 0; font-size: 1.05rem; color: var(--lobby-muted); max-width: 56ch; }
.public-release--staged .release-lobby-hint { color: var(--lobby-muted); }

.public-release--staged .release-loadout,
.public-release--staged .release-lobby-roster,
.public-release--staged .release-open-games,
.public-release--staged .release-lobby-launch,
.public-release--staged .release-briefing {
  background: var(--lobby-panel);
  border: 1px solid var(--lobby-border);
  border-radius: var(--lobby-radius);
  box-shadow: var(--lobby-glow);
}
.public-release--staged .release-loadout-title { color: var(--release-accent, #ffd36a); }
.public-release--staged .release-loadout-label { color: var(--lobby-ink); font-size: 13px; letter-spacing: var(--lobby-heading-spacing); text-transform: var(--lobby-label-transform); }
.release-loadout-sublabel { font-size: 11.5px; color: var(--lobby-muted); margin-top: -2px; }
.public-release--staged .release-loadout-hint { color: var(--lobby-muted); }
.public-release--staged .release-loadout-card,
.public-release--staged .release-loadout-chip {
  background: var(--lobby-field);
  border-color: var(--lobby-border);
  color: var(--lobby-ink);
  border-radius: calc(var(--lobby-radius) * 0.7);
}
.public-release--staged .release-loadout-chip { border-radius: 999px; }
.public-release--staged .release-loadout-card:hover,
.public-release--staged .release-loadout-chip:hover { border-color: var(--release-accent, #ffd36a); }
.public-release--staged .release-loadout-card.is-selected,
.public-release--staged .release-loadout-chip.is-selected {
  border-color: var(--release-accent, #ffd36a);
  background: color-mix(in srgb, var(--release-accent, #ffd36a) 20%, var(--lobby-field));
  color: var(--lobby-ink);
}
.public-release--staged .release-name-field input,
.public-release--staged .release-join-row input,
.public-release--staged .release-lobby-share-row input {
  background: var(--lobby-field);
  border: 1px solid var(--lobby-border);
  border-radius: calc(var(--lobby-radius) * 0.6);
}
.public-release--staged .release-entry-actions button,
.public-release--staged .release-lobby-room-actions button,
.public-release--staged .release-join-row button,
.public-release--staged .release-lobby-share-row button {
  background: var(--lobby-field);
  border: 1px solid var(--lobby-border);
  border-radius: 999px;
  color: inherit;
  padding: 0.6rem 1.2rem;
  font-weight: 600;
  cursor: pointer;
}
.public-release--staged .release-lobby-share-row button:hover { border-color: var(--release-accent, #ffd36a); }
.public-release--staged button.release-primary {
  background: var(--release-accent, #ffd36a);
  border-color: transparent;
  color: #14101c;
}

/* --- briefing: the game's own words above the pickers ---------------- */
.release-briefing {
  display: grid;
  gap: 0.5rem;
  padding: 1rem 1.15rem;
  margin-bottom: 0.9rem;
  font-size: 0.94rem;
}
.release-briefing-heading { margin: 0; font-weight: 700; line-height: 1.15; color: var(--lobby-ink); }
.release-briefing-text { margin: 0; color: var(--lobby-muted); line-height: 1.5; }
.release-briefing-list-title { margin: 0 0 0.3rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--release-accent, #ffd36a); }
.release-briefing-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.28rem; }
.release-briefing-list li { position: relative; padding-left: 0.95rem; color: var(--lobby-muted); }
.release-briefing-list li::before { content: "▸"; position: absolute; left: 0; color: var(--release-accent, #ffd36a); }
.release-briefing-divider { border: 0; border-top: 1px solid var(--lobby-border); margin: 0.25rem 0; }
.release-briefing-image { max-width: 100%; width: auto; object-fit: contain; border-radius: calc(var(--lobby-radius) * 0.6); justify-self: center; }

/* --- layouts: how the screen is arranged ----------------------------- */
/* poster is the baseline console arrangement (hero left, pickers filling
   the stage, actions in a right-hand rail) — the other five move it. */

.release-lobby-layout--centered .release-hero { justify-items: center; text-align: center; width: min(860px, 100%); }
.release-lobby-layout--centered .release-hero .release-entry-meta { justify-content: center; }
.release-lobby-layout--centered .release-stage { grid-template-columns: minmax(0, 1fr); width: min(860px, 100%); }
.release-lobby-layout--centered .release-stage-side { width: 100%; }
.release-lobby-layout--centered .release-subtitle { margin-inline: auto; }

.release-lobby-layout--cinematic .release-hero { width: min(1240px, 100%); }
.release-lobby-layout--cinematic .release-screen--entry h1 {
  font-size: calc(clamp(3rem, 9vw, 6.2rem) * var(--lobby-display-scale, 1));
  line-height: 0.94;
}
/* A single wide band of content under an oversized title, with the actions
   laid along the bottom instead of stacked in a rail. */
.release-lobby-layout--cinematic .release-stage { grid-template-columns: minmax(0, 1fr); }
.release-lobby-layout--cinematic .release-stage-side {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.9rem;
}
.release-lobby-layout--cinematic .release-stage-side > * { flex: 1 1 200px; }
.release-lobby-layout--cinematic .release-stage-side .release-entry-actions,
.release-lobby-layout--cinematic .release-stage-side .release-lobby-room-actions { flex: 3 1 520px; flex-direction: row; flex-wrap: wrap; }
.release-lobby-layout--cinematic .release-stage-side .release-entry-actions button,
.release-lobby-layout--cinematic .release-stage-side .release-lobby-room-actions button { width: auto; flex: 1 1 auto; }

/* A column of type down one side with the world open on the other: here the
   rail leads and the pickers fill the remaining width. */
@media (min-width: 900px) {
  .release-lobby-layout--split .release-stage { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
  .release-lobby-layout--split .release-stage-main { order: 2; }
  .release-lobby-layout--split .release-stage-side { order: 1; }
}
.release-lobby-layout--split .release-hero {
  border-left: 3px solid var(--release-accent, #ffd36a);
  padding-left: 1.1rem;
  justify-items: start;
  text-align: left;
}

/* Centred is a single column, so its controls lie along one band under the
   pickers rather than stacking a second column below an already tall panel
   and pushing the primary action off the fold. */
@media (min-width: 900px) {
  .release-lobby-layout--centered .release-stage-side {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .release-lobby-layout--centered .release-stage-side > * { flex: 1 1 200px; }
  .release-lobby-layout--centered .release-stage-side .release-entry-actions,
  .release-lobby-layout--centered .release-stage-side .release-lobby-room-actions {
    flex: 3 1 520px;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .release-lobby-layout--centered .release-stage-side .release-entry-actions button,
  .release-lobby-layout--centered .release-stage-side .release-lobby-room-actions button { width: auto; flex: 1 1 auto; }
}

/* A crest above a compact centred stack. */
.release-lobby-layout--emblem .release-hero { justify-items: center; text-align: center; width: min(900px, 100%); }
.release-lobby-layout--emblem .release-hero .release-entry-meta { justify-content: center; }
.release-lobby-layout--emblem .release-hero::before {
  content: "";
  width: 38px;
  height: 38px;
  transform: rotate(45deg);
  border: 2px solid var(--release-accent, #ffd36a);
  border-radius: 5px;
  margin-bottom: 0.55rem;
  box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--release-accent, #ffd36a) 22%, transparent);
}
.release-lobby-layout--emblem .release-stage { width: min(1040px, 100%); }
.release-lobby-layout--emblem .release-loadout,
.release-lobby-layout--emblem .release-briefing,
.release-lobby-layout--emblem .release-lobby-roster { border-width: 2px; }
.release-lobby-layout--emblem .release-subtitle { margin-inline: auto; }

/* A bracketed readout panel. */
.release-lobby-layout--terminal .release-hero { justify-items: start; text-align: left; }
.release-lobby-layout--terminal .release-hero .eyebrow::before { content: "> "; }
.release-lobby-layout--terminal .release-loadout,
.release-lobby-layout--terminal .release-briefing,
.release-lobby-layout--terminal .release-lobby-roster,
.release-lobby-layout--terminal .release-open-games {
  border-radius: 0;
  border-left: 2px solid var(--release-accent, #ffd36a);
}
.release-lobby-layout--terminal .release-loadout-title,
.release-lobby-layout--terminal .release-loadout-label,
.release-lobby-layout--terminal .release-briefing-list-title {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.release-lobby-layout--terminal .release-loadout-title::before { content: "[ "; }
.release-lobby-layout--terminal .release-loadout-title::after { content: " ]"; }
.release-lobby-layout--terminal .release-loadout-chip { border-radius: 3px; }

/* On a narrow screen every layout collapses to one readable column; the
   arrangements above are wide-stage decisions. */
@media (max-width: 899px) {
  .public-release--staged .release-stage-side { max-width: none; }
  .release-lobby-layout--cinematic .release-stage-side,
  .release-lobby-layout--centered .release-stage-side { flex-direction: column; }
  .release-lobby-layout--cinematic .release-stage-side > *,
  .release-lobby-layout--centered .release-stage-side > * { flex: 0 1 auto; }
}

/* --- corner navigation ------------------------------------------------
   The ready-up screen renders without the studio chrome, so this is the
   only way off it that isn't "start the game". It sits above both staged
   screens, takes the game's own theme tokens, and is hidden outright once
   the engine takes over. */
.release-topnav {
  position: fixed;
  top: clamp(0.75rem, 2vw, 1.4rem);
  right: clamp(0.75rem, 2vw, 1.4rem);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}
.release-topnav[hidden] { display: none; }
.release-topnav-toggle {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.85rem 0.45rem 0.55rem;
  border: 1px solid var(--lobby-border, rgba(255, 255, 255, 0.16));
  border-radius: 999px;
  background: var(--lobby-panel, rgba(12, 10, 18, 0.78));
  color: var(--lobby-ink, #f4f0ff);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.release-topnav-toggle:hover,
.release-topnav.is-open .release-topnav-toggle { border-color: var(--release-accent, #ffd36a); }
.release-topnav-mark { width: 22px; height: 22px; display: block; flex: none; }
.release-topnav-name {
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.release-topnav-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.75;
  transition: transform 0.12s ease;
}
.release-topnav.is-open .release-topnav-caret { transform: rotate(180deg); }

.release-topnav-menu {
  display: flex;
  flex-direction: column;
  min-width: 216px;
  padding: 0.5rem;
  border: 1px solid var(--lobby-border, rgba(255, 255, 255, 0.16));
  border-radius: var(--lobby-radius, 14px);
  background: var(--lobby-panel, rgba(12, 10, 18, 0.92));
  box-shadow: 0 22px 54px -26px rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(10px);
}
.release-topnav-menu[hidden] { display: none; }
.release-topnav-group {
  margin: 0.45rem 0 0.2rem;
  padding: 0 0.55rem;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--release-accent, #ffd36a);
}
.release-topnav-group:first-child { margin-top: 0.1rem; }
/* button_to wraps its button in a form; the form must not become a row of
   its own or the log-out item would sit inset from every link above it. */
.release-topnav-form { display: contents; }
.public-release--staged .release-topnav-link {
  display: block;
  width: 100%;
  padding: 0.5rem 0.55rem;
  border: 1px solid transparent;
  border-radius: calc(var(--lobby-radius, 14px) * 0.6);
  background: transparent;
  color: var(--lobby-ink, #f4f0ff);
  font: inherit;
  font-size: 0.94rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.public-release--staged .release-topnav-link:hover,
.public-release--staged .release-topnav-link:focus-visible,
.public-release--staged .release-topnav-link.pad-focused {
  background: color-mix(in srgb, var(--release-accent, #ffd36a) 16%, transparent);
  border-color: var(--release-accent, #ffd36a);
}
.public-release--staged .release-topnav-signout { color: var(--lobby-muted, rgba(244, 240, 255, 0.72)); }

.release-topnav-padhint {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.7rem;
  margin: 0.5rem 0 0;
  padding: 0.45rem 0.55rem 0.1rem;
  border-top: 1px solid var(--lobby-border, rgba(255, 255, 255, 0.16));
  font-size: 0.72rem;
  color: var(--lobby-muted, rgba(244, 240, 255, 0.72));
}
.release-topnav-padhint[hidden] { display: none; }
/* The button glyphs pair on one line; the sentence explaining how to open
   the menu gets its own, so the hint never widens the panel. */
.release-topnav-padhint span:last-child { flex-basis: 100%; opacity: 0.8; }

/* On a phone the toggle keeps the mark and drops to an icon button. */
@media (max-width: 599px) {
  .release-topnav-name { display: none; }
  .release-topnav-toggle { padding: 0.45rem 0.6rem; }
  .release-topnav-menu { min-width: 190px; }
}

/* --- gamepad focus, everywhere -----------------------------------------
   A controller player must always be able to see what cross will press.
   Programmatic focus does not reliably trigger :focus-visible, so
   pad_navigator.js stamps .pad-focused itself. Lower specificity than the
   ready-up screen's own themed ring, which keeps its accent colour. */
.pad-focused {
  outline: 3px solid var(--release-accent, #5ec9f2);
  outline-offset: 3px;
}

/* Button hints on the browse surfaces, revealed only once a pad reports in
   (pad_nav_controller adds .pad-active) so keyboard players never see
   instructions for hardware they do not have. */
.pad-hint { display: none; }
.pad-active .pad-hint {
  display: inline-flex;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  opacity: 0.75;
}
.pad-hint span { white-space: nowrap; }

/* --- beta feedback board -------------------------------------------------
   The editor exposes this through one quiet Help menu. The board itself can
   afford more room: its job is to make community demand and Fusionery's
   follow-through legible without borrowing space from game authoring. */
.beta-feedback-page {
  width: min(1280px, 100%);
  margin: 0;
  color: var(--ink);
}

.beta-feedback-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 36px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--signal) 24%, transparent), transparent 28%),
    radial-gradient(circle at 15% 105%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 40%),
    var(--surface);
  box-shadow: 7px 8px 0 color-mix(in srgb, var(--ink) 10%, transparent);
  padding: 34px 38px;
}

.beta-feedback-eyebrow {
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.beta-feedback-hero h1 {
  margin: 7px 0 10px;
  font-size: clamp(31px, 4vw, 48px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.beta-feedback-hero p {
  max-width: 740px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.beta-feedback-primary-action,
.beta-feedback-secondary-action {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  background: var(--accent);
  color: #ffffff;
  padding: 0 17px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.beta-feedback-primary-action:hover { background: var(--accent-strong); }

.beta-feedback-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 24px;
}

.beta-feedback-summary-item {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
  padding: 13px 15px;
  text-decoration: none;
  transition: border-color 120ms ease, transform 120ms ease;
}

.beta-feedback-summary-item:hover,
.beta-feedback-summary-item.is-active {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.beta-feedback-summary-item strong { color: var(--ink); font-size: 20px; }
.beta-feedback-summary-item span { font-size: 11px; font-weight: 750; }

.beta-feedback-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28px;
  align-items: start;
  margin-top: 28px;
}

.beta-feedback-board {
  min-width: 0;
}

.beta-feedback-board-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}

.beta-feedback-board-heading h2 { margin: 0; font-size: 23px; }
.beta-feedback-board-heading p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }

.beta-feedback-filters {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(120px, auto)) auto;
  gap: 8px;
  margin-bottom: 14px;
}

.beta-feedback-filters input,
.beta-feedback-filters select,
.beta-feedback-filters button,
.beta-feedback-filters input[type="submit"] {
  min-width: 0;
  min-height: 39px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 0 10px;
  font-size: 12px;
}

.beta-feedback-filters input[type="submit"] {
  border-color: var(--accent);
  background: transparent;
  color: var(--accent-strong);
  font-weight: 800;
  cursor: pointer;
}

.beta-feedback-filters input:focus,
.beta-feedback-filters select:focus {
  border-color: var(--accent);
  outline: 3px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

.beta-feedback-list { display: grid; gap: 10px; }

.beta-feedback-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 17px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.beta-feedback-card:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 8%, transparent);
}

.beta-feedback-vote-column form { margin: 0; }

.beta-feedback-vote {
  display: grid;
  width: 52px;
  min-height: 58px;
  place-items: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--page);
  color: var(--muted);
  padding: 6px;
  cursor: pointer;
}

.beta-feedback-vote span { font-size: 11px; line-height: 1; }
.beta-feedback-vote strong { color: var(--ink); font-size: 15px; }
.beta-feedback-vote:hover,
.beta-feedback-vote.is-voted { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent-strong); }

.beta-feedback-card-body { min-width: 0; }
.beta-feedback-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; color: var(--muted); font-size: 11px; }

.beta-feedback-category,
.beta-feedback-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
}

.beta-feedback-category { background: color-mix(in srgb, #7255b6 15%, var(--surface)); color: color-mix(in srgb, #8a6fc9 85%, var(--ink)); }
.beta-feedback-category--issue { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); }
.beta-feedback-category--improvement { background: color-mix(in srgb, var(--signal) 14%, var(--surface)); color: var(--signal); }
.beta-feedback-status { border: 1px solid var(--line); background: var(--page); color: var(--muted); }
.beta-feedback-status--planned,
.beta-feedback-status--in-progress { border-color: color-mix(in srgb, var(--signal) 42%, var(--line)); color: var(--signal); }
.beta-feedback-status--shipped { border-color: color-mix(in srgb, var(--accent) 52%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent-strong); }
.beta-feedback-status--declined { opacity: 0.72; }

.beta-feedback-card h3 { margin: 9px 0 5px; font-size: 17px; line-height: 1.28; }
.beta-feedback-card h3 a { color: var(--ink); text-decoration: none; }
.beta-feedback-card h3 a:hover { color: var(--accent-strong); }
.beta-feedback-card-body > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

.beta-feedback-fusionery-preview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-top: 12px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--page));
  padding: 8px 10px;
  font-size: 12px;
}

.beta-feedback-fusionery-preview strong { color: var(--accent-strong); white-space: nowrap; }
.beta-feedback-fusionery-preview p { margin: 0; color: var(--muted); line-height: 1.4; }

.beta-feedback-card footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 11px;
}

.beta-feedback-card footer a { color: var(--accent-strong); font-weight: 750; text-decoration: none; }

.beta-feedback-submit {
  position: sticky;
  top: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 5px 6px 0 color-mix(in srgb, var(--ink) 9%, transparent);
  padding: 22px;
  scroll-margin-top: 20px;
}

.beta-feedback-submit h2 { margin: 6px 0 8px; font-size: 21px; }
.beta-feedback-submit > p { margin: 0 0 18px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.beta-feedback-submit > p a { color: var(--accent-strong); font-weight: 750; }
.beta-feedback-submit form { display: grid; gap: 14px; }
.beta-feedback-submit .form-field { display: grid; gap: 6px; }
.beta-feedback-submit .form-field label,
.beta-feedback-comment-form > label { color: var(--ink); font-size: 12px; font-weight: 800; }

.beta-feedback-submit .form-field input,
.beta-feedback-submit .form-field textarea,
.beta-feedback-submit .form-field select,
.beta-feedback-comment-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--page);
  color: var(--ink);
  padding: 10px 11px;
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
}

.beta-feedback-submit textarea,
.beta-feedback-comment-form textarea { resize: vertical; }
.beta-feedback-submit .form-field :focus,
.beta-feedback-comment-form textarea:focus { border-color: var(--accent); outline: 3px solid color-mix(in srgb, var(--accent) 16%, transparent); }
.beta-feedback-submit .beta-feedback-primary-action { justify-self: start; }

.beta-feedback-context-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--page);
  padding: 10px;
  cursor: pointer;
}

.beta-feedback-context-option input { margin-top: 3px; accent-color: var(--accent); }
.beta-feedback-context-option span { display: grid; gap: 2px; }
.beta-feedback-context-option strong { font-size: 12px; }
.beta-feedback-context-option small,
.beta-feedback-public-note { color: var(--muted); font-size: 11px; line-height: 1.45; }
.beta-feedback-public-note { margin: 0; }

.beta-feedback-empty {
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 40px 24px;
  text-align: center;
}

.beta-feedback-empty p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }

.beta-feedback-board .pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 18px 0 0;
}

.beta-feedback-board .pagination > * {
  display: inline-flex;
  min-width: 32px;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  padding: 0 8px;
  color: var(--muted);
  font-size: 11px;
  text-decoration: none;
}

.beta-feedback-board .pagination .current { border-color: var(--accent); color: var(--accent-strong); font-weight: 800; }
.beta-feedback-board .pagination a { color: inherit; text-decoration: none; }

/* Detail view */
.beta-feedback-detail-page { width: min(1120px, 100%); }
.beta-feedback-back { margin-bottom: 18px; }
.beta-feedback-back a { color: var(--accent-strong); font-size: 13px; font-weight: 800; text-decoration: none; }
.beta-feedback-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 28px; align-items: start; }
.beta-feedback-detail { min-width: 0; }

.beta-feedback-detail > header,
.beta-feedback-description,
.beta-feedback-game-context,
.beta-feedback-official,
.beta-feedback-discussion {
  border-right: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: var(--surface);
  padding: 25px 28px;
}

.beta-feedback-detail > header { border-top: 1px solid var(--line); border-radius: 14px 14px 0 0; }
.beta-feedback-detail > header h1 { margin: 12px 0 9px; font-size: clamp(28px, 4vw, 40px); line-height: 1.08; letter-spacing: -0.035em; }
.beta-feedback-byline { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; color: var(--muted); font-size: 12px; }
.beta-feedback-description { border-top: 1px solid var(--line); color: var(--ink); font-size: 15px; line-height: 1.68; }
.beta-feedback-description p:first-child { margin-top: 0; }
.beta-feedback-description p:last-child { margin-bottom: 0; }

.beta-feedback-game-context { display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--line); color: var(--muted); }
.beta-feedback-game-context > span { font-size: 19px; }
.beta-feedback-game-context div { display: grid; gap: 2px; font-size: 12px; }
.beta-feedback-game-context strong { color: var(--ink); }

.beta-feedback-official { border-top: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.beta-feedback-official-heading { display: flex; gap: 12px; align-items: center; }
.beta-feedback-official-mark { display: grid; width: 38px; height: 38px; border-radius: 10px; background: var(--accent); color: #fff; place-items: center; font-size: 16px; font-weight: 900; }
.beta-feedback-official-heading div > span { color: var(--accent-strong); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.beta-feedback-official-heading h2 { margin: 2px 0 0; font-size: 19px; }
.beta-feedback-official-copy { margin-top: 17px; line-height: 1.6; }
.beta-feedback-official-copy p:last-child { margin-bottom: 0; }
.beta-feedback-official > time { display: block; margin-top: 12px; color: var(--muted); font-size: 10px; }
.beta-feedback-awaiting { margin: 17px 0 0; color: var(--muted); line-height: 1.55; }

.beta-feedback-action-taken { margin-top: 20px; border-top: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); padding-top: 17px; }
.beta-feedback-action-taken h3 { margin: 0 0 7px; font-size: 13px; }
.beta-feedback-action-taken p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

.beta-feedback-discussion { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0 0 14px 14px; }
.beta-feedback-discussion-heading { display: flex; justify-content: space-between; gap: 18px; align-items: end; }
.beta-feedback-discussion-heading h2 { margin: 3px 0 0; font-size: 21px; }
.beta-feedback-discussion-heading > span { color: var(--muted); font-size: 11px; }
.beta-feedback-comments { display: grid; gap: 0; margin: 20px 0 0; padding: 0; list-style: none; }
.beta-feedback-comments li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; border-top: 1px solid var(--line); padding: 16px 0; }
.beta-feedback-comments li:first-child { border-top: 0; padding-top: 0; }
.beta-feedback-avatar { display: grid; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, #7255b6 18%, var(--surface)); color: color-mix(in srgb, #8a6fc9 85%, var(--ink)); place-items: center; font-size: 12px; font-weight: 850; }
.beta-feedback-comments header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.beta-feedback-comments header strong { font-size: 12px; }
.beta-feedback-comments time { color: var(--muted); font-size: 10px; }
.beta-feedback-comments p { margin: 6px 0 0; color: var(--ink); font-size: 13px; line-height: 1.55; }
.beta-feedback-no-comments { margin: 18px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

.beta-feedback-comment-form { display: grid; gap: 8px; margin-top: 21px; border-top: 1px solid var(--line); padding-top: 19px; }
.beta-feedback-comment-form > div:last-child { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.beta-feedback-comment-form > div:last-child span { color: var(--muted); font-size: 10px; }
.beta-feedback-comment-form input[type="submit"] { min-height: 36px; border: 0; border-radius: 7px; background: var(--accent); color: #fff; padding: 0 13px; font-weight: 800; cursor: pointer; }

.beta-feedback-detail-sidebar { position: sticky; top: 20px; display: grid; gap: 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 17px; }
.beta-feedback-detail-sidebar form { margin: 0; }
.beta-feedback-support-button { display: grid; width: 100%; gap: 3px; border: 1px solid var(--accent); border-radius: 9px; background: transparent; color: var(--accent-strong); padding: 11px; cursor: pointer; text-align: left; }
.beta-feedback-support-button:hover,
.beta-feedback-support-button.is-voted { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.beta-feedback-support-button span { font-size: 13px; font-weight: 850; }
.beta-feedback-support-button strong { font-size: 10px; font-weight: 650; }
.beta-feedback-detail-sidebar > p { margin: -2px 0 5px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.beta-feedback-detail-facts { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--line); }
.beta-feedback-detail-facts div { display: grid; gap: 2px; border-bottom: 1px solid var(--line); padding: 10px 0; }
.beta-feedback-detail-facts dt { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.beta-feedback-detail-facts dd { margin: 0; font-size: 12px; font-weight: 750; }
.beta-feedback-secondary-action { min-height: 36px; border: 1px solid var(--line); background: transparent; color: var(--ink); padding: 0 10px; font-size: 11px; }
.beta-feedback-secondary-action:hover { border-color: var(--accent); color: var(--accent-strong); }

@media (max-width: 1100px) {
  .beta-feedback-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; }
  .beta-feedback-filters { grid-template-columns: minmax(180px, 1fr) repeat(2, minmax(120px, auto)); }
  .beta-feedback-filters select[name="sort"] { grid-column: 1 / 2; }
}

@media (max-width: 860px) {
  .beta-feedback-layout,
  .beta-feedback-detail-layout { grid-template-columns: 1fr; }
  .beta-feedback-submit,
  .beta-feedback-detail-sidebar { position: static; }
  .beta-feedback-detail-sidebar { grid-row: 1; }
  .beta-feedback-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .beta-feedback-hero { align-items: flex-start; flex-direction: column; padding: 25px; }
  .beta-feedback-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .beta-feedback-filters { grid-template-columns: 1fr 1fr; }
  .beta-feedback-search { grid-column: 1 / -1; }
  .beta-feedback-filters select[name="sort"] { grid-column: auto; }
  .beta-feedback-card { grid-template-columns: 44px minmax(0, 1fr); gap: 11px; padding: 14px; }
  .beta-feedback-vote { width: 42px; min-height: 53px; }
  .beta-feedback-fusionery-preview { grid-template-columns: 1fr; gap: 4px; }
  .beta-feedback-detail > header,
  .beta-feedback-description,
  .beta-feedback-game-context,
  .beta-feedback-official,
  .beta-feedback-discussion { padding: 21px; }
  .beta-feedback-comment-form > div:last-child { align-items: flex-start; flex-direction: column; }
}