.play-hero { padding-block: var(--space-16); border-bottom: 1px solid var(--color-border); background: radial-gradient(circle at 76% 38%, rgba(155, 93, 229, .16), transparent 27rem), var(--color-bg-secondary); }
.play-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-12); align-items: end; }
.play-hero h1 { margin-block: var(--space-3) var(--space-4); }
.play-hero-copy > p { max-width: 45rem; font-size: var(--step-1); }
.play-provider { min-width: 20rem; display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.play-provider small { color: var(--color-text-subtle); }
.play-server-address { max-width: 37rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; margin-top: var(--space-8); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); }
.play-server-address span { display: block; color: var(--color-text-subtle); font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.play-server-address code { color: var(--color-text-primary); font-family: var(--font-mono); font-size: var(--step-1); font-weight: 800; }

.play-section-heading { display: flex; gap: var(--space-8); align-items: end; justify-content: space-between; margin-bottom: var(--space-8); }
.play-section-heading h2 { margin-bottom: 0; }
.play-section-heading > p { max-width: 33rem; margin-bottom: .35rem; }
.requirement-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.requirement-grid article { min-height: 15rem; display: flex; flex-direction: column; padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.requirement-label { color: var(--color-gold); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.requirement-grid strong { margin-block: auto; font-family: var(--font-display); font-size: var(--step-2); line-height: 1.15; }
.requirement-grid p { margin-bottom: 0; font-size: var(--step--1); }

.join-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.join-steps li { min-height: 16rem; padding: var(--space-6); border-top: 2px solid var(--color-border-strong); background: linear-gradient(180deg, rgba(155, 93, 229, .05), transparent); }
.join-steps li > span { display: block; margin-bottom: var(--space-8); color: var(--color-gold); font-family: var(--font-display); font-size: var(--step-1); font-weight: 800; }
.join-steps code { color: var(--color-text-primary); font-family: var(--font-mono); }
.join-steps p { margin-bottom: 0; }

.play-help-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(24rem, 1.1fr); gap: var(--space-12); align-items: start; }
.play-help-layout h2 { margin-block: var(--space-3) var(--space-4); }
.play-help-layout > div:first-child > p { max-width: 42rem; }
.play-help-list { display: grid; gap: var(--space-3); }
.play-help-list details { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.play-help-list summary { padding: var(--space-4) var(--space-6); color: var(--color-text-primary); font-weight: 800; list-style-position: inside; }
.play-help-list details p { margin: 0; padding: 0 var(--space-6) var(--space-6); }
.play-help-list code { color: var(--color-text-primary); }

.play-trust h2 { margin-block: var(--space-3) var(--space-8); }
.play-trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.play-trust-grid > div { padding-left: var(--space-4); border-left: 2px solid var(--color-border-strong); }
.play-trust-grid strong { display: block; margin-bottom: var(--space-2); }
.play-trust-grid p { margin-bottom: 0; }

@media (max-width: 64rem) {
  .join-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 48rem) {
  .play-hero-grid, .play-help-layout { grid-template-columns: 1fr; }
  .play-provider { min-width: 0; }
  .play-section-heading { align-items: flex-start; flex-direction: column; }
  .requirement-grid, .play-trust-grid { grid-template-columns: 1fr; }
}

@media (max-width: 34rem) {
  .play-server-address, .join-steps { grid-template-columns: 1fr; }
  .play-server-address .button { width: 100%; }
  .play-help-layout .cluster { align-items: stretch; flex-direction: column; }
  .play-help-layout .button { width: 100%; }
}