.play-page { background: #000; color: #fff; min-height: 100svh; }
.play-header { position: absolute; inset: 0 0 auto; width: auto; padding: 41px 39px 0; display: flex; align-items: center; justify-content: space-between; }
.play-header img { display: block; width: 220px; height: auto; }
.play-language { color: #fff; font-weight: bold; font-size: 16px; }
.play-layout { max-width: 1440px; min-height: 840px; min-height: max(840px, 100svh); margin: auto; display: grid; grid-template-columns: 54.2% 45.8%; align-items: start; }
.play-art { position: relative; margin-top: 120.67px; aspect-ratio: 780 / 583.113; }
.play-glow { position: absolute; left: -31.4%; top: -48.7%; width: 161.9%; height: auto; pointer-events: none; }
.play-card { position: absolute; width: 30.341%; height: auto; border-radius: 15px; box-shadow: 0 4px 64px 10px #00000059; }
.play-card-tempo { left: 8%; top: 20.65%; transform: rotate(-5.98deg); }
.play-card-emotion { left: 35.8%; top: 11.84%; }
.play-card-experience { left: 63.6%; top: 27.2%; transform: rotate(5.53deg); }
.play-content { position: relative; width: 488px; max-width: calc(100% - 70px); margin: 169.73px 0 80px 42px; }
.play-content h1 { font-size: 64px; line-height: 65px; font-weight: 700; margin: 0 0 35px; letter-spacing: -1.5px; }
.play-form { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; }
.play-field-establishment, .play-field-email { grid-column: 1 / -1; }
.play-field input { margin: 0; box-sizing: border-box; display: block; width: 100%; height: 2.76rem; border: 2px solid #fff; border-radius: 2rem; padding: 0 2rem; background: transparent; color: #fff; font: inherit; font-size: 0.8rem; line-height: 1.2; }
.play-field input::placeholder { color: #fff; opacity: 1; }
.play-submit { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: 2.76rem; justify-self: start; border: 0; border-radius: 2rem; background: #fff; color: #000; font: inherit; font-weight: 600; font-size: 0.8rem; line-height: 1.2; text-transform: uppercase; cursor: pointer; padding: 0 2rem; transition: background-color 0.2s ease, color 0.2s ease; }
.play-submit:hover { background: #0006e3; color: #fff; }
.play-page a:focus-visible, .play-page button:focus-visible { outline: 3px solid #a8caff; outline-offset: 5px; }
.play-sr-only, .play-trap { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.play-error { line-height: 1.5; margin-bottom: 22px; }
@media (min-width: 768px) and (max-width: 1200px) {
  .play-content { margin-left: 24px; max-width: calc(100% - 55px); }
  .play-content h1 { font-size: 54px; line-height: 56px; }
  .play-field input { padding-inline: 18px; }
}
@media (max-width: 767px) {
  .play-header { padding: 25px 24px 0; }
  .play-header img { width: 176px; }
  .play-layout { display: flex; flex-direction: column; min-height: 100svh; overflow: hidden; }
  .play-art { width: 100%; max-width: 500px; align-self: center; margin-top: 95px; }
  .play-content { width: auto; max-width: none; align-self: stretch; margin: 24px 24px 48px; }
  .play-content h1 { font-size: 46px; line-height: 48px; margin-bottom: 30px; }
  .play-form { gap: 18px 12px; }
  .play-field input { padding-inline: 18px; }
}

.play-field input:focus { outline: none; }

@media (min-width: 768px) {
  html:has(body.play-page) { height: 100%; overflow: clip; }
  .play-page { height: 100svh; min-height: 0; overflow: clip; box-sizing: border-box; }
}