/* Homepage only: real gameplay, with installation before the media on mobile. */
.web-play-banner { display: flex; align-items: center; justify-content: space-between; gap: 32px; width: min(calc(100% - 48px), var(--max)); margin: 0 auto 40px; padding: 36px 42px; border: 1px solid #67e8f940; border-radius: 12px; background: radial-gradient(ellipse at right, #22d3ee12, transparent 65%), linear-gradient(115deg, #101c2b, #0b101d); box-shadow: inset 0 1px #ffffff08, 0 18px 60px #0003; }
.web-play-banner h2 { margin: 14px 0 12px; font-size: clamp(26px, 3vw, 38px); line-height: 1.08; }
.web-play-banner p { margin: 0; color: var(--muted); font-size: 13px; }
.button-web-play { flex-shrink: 0; min-height: 76px; padding: 16px 22px; gap: 16px; border: 1px solid #abf6ff90; border-radius: 8px; color: #06212a; background: linear-gradient(120deg, #a0f2fc, #56d7ea); box-shadow: 0 10px 32px #22d3ee20; text-transform: none; letter-spacing: 0; font-size: 16px; }
.button-web-play:hover { box-shadow: 0 12px 38px #22d3ee40; }
.button-web-play svg { width: 34px; height: 34px; flex-shrink: 0; }
.button-web-play .web-play-triangle { fill: currentColor; stroke: none; }
.button-web-play small { display: block; margin-top: 3px; color: #204a56; font-size: 8px; letter-spacing: .18em; }
.web-play-arrow { font-size: 23px; font-weight: 400; }
@media (max-width: 800px) {
  .web-play-banner { flex-direction: column; text-align: center; padding: 28px 22px; }
  .web-play-banner .section-kicker { justify-content: center; font-size: 8px; }
  .button-web-play { width: min(100%, 340px); min-width: 0; justify-content: center; font-size: 14px; padding: 14px; gap: 12px; }
}
.hero-gameplay { min-height: 830px; padding: 138px 0 80px; }
.hero-gameplay .hero-art { opacity: .3; background-position: center; transform: none; }
.hero-gameplay::before { background: linear-gradient(90deg, #070b14 2%, rgba(7,11,20,.72) 50%, rgba(7,11,20,.38)), linear-gradient(0deg, #070b14, transparent 32%); }
.hero-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: center; gap: 56px; width: min(calc(100% - 64px), 1240px); margin: auto; }
.hero-gameplay .hero-content { width: auto; min-width: 0; margin: 0; }
.hero-status { display: flex; align-items: center; gap: 9px; width: fit-content; margin-bottom: 30px; padding: 7px 11px; border: 1px solid #f59e5038; border-radius: 4px; background: #f59e500b; color: #f8bc79; font-size: 9px; font-weight: 750; letter-spacing: .13em; }
.hero-status > span { width: 6px; height: 6px; border-radius: 50%; background: #f8bc79; box-shadow: 0 0 12px #f59e5070; }
.hero-gameplay .eyebrow { font-size: 10px; letter-spacing: .15em; }
.hero-gameplay h1 { margin: 21px 0 24px; font-size: clamp(44px, 4.8vw, 68px); line-height: 1.02; letter-spacing: -.045em; }
.hero-gameplay .hero-copy { max-width: 480px; margin-bottom: 28px; font-size: 17px; line-height: 1.7; color: #bfcbd8; }
.hero-gameplay .hero-actions { gap: 12px; }
.hero-gameplay .button { min-height: 58px; padding: 0 18px; gap: 11px; font-size: 11px; letter-spacing: .035em; text-transform: none; border-radius: 7px; }
.hero-gameplay .button-primary { background: linear-gradient(120deg, #a0f2fc, #56d7ea); font-size: 13px; }
.hero-gameplay .button-discord { background: #171c35; border-color: #8b7aff70; }
.store-icon { flex-shrink: 0; object-fit: contain; }
.hero-features { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 27px; color: #a7b6c8; }
.hero-features > span { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; }
.hero-features img { object-fit: contain; }
.gameplay-showcase { position: relative; min-width: 0; margin: 0; }
.gameplay-showcase::before { position: absolute; z-index: -1; inset: 15% -5% 10%; content: ''; background: radial-gradient(ellipse, #28cbe61c, transparent 70%); }
.showcase-heading { display: flex; justify-content: space-between; margin-bottom: 17px; color: #a6bccb; font-size: 8px; font-weight: 750; letter-spacing: .18em; }
.showcase-heading > span:first-child { display: flex; align-items: center; gap: 8px; }
.showcase-heading i { width: 5px; height: 5px; background: var(--cyan); box-shadow: 0 0 10px #67e8f9; }
.showcase-heading > span:last-child { color: #718498; }
.gameplay-screens { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 15px; align-items: start; }
.gameplay-screen { display: block; min-width: 0; overflow: hidden; padding: 5px; border: 1px solid #51748b77; border-radius: 12px; background: #0d1620; box-shadow: 0 22px 50px #0008, inset 0 1px #c5ebff15; transition: border-color .2s, transform .2s; }
.gameplay-screen:hover { transform: translateY(-4px); border-color: var(--cyan); }
.screen-arena { margin-top: 35px; border-color: #c38a4355; }
.gameplay-screen img { display: block; width: 100%; height: auto; border-radius: 5px; }
.screen-label { display: flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 4px 4px; color: #d2e0ea; font-size: 7px; font-weight: 750; letter-spacing: .06em; white-space: nowrap; }
.screen-label span { color: var(--cyan); font-size: 8px; }
.screen-arena .screen-label span { color: var(--ember); }
.screen-label b { margin-left: auto; color: #92a5b5; font-size: 13px; }
.gameplay-showcase figcaption { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 18px; color: #90a3b7; font-size: 10px; }
.gameplay-showcase figcaption span { color: var(--cyan); font-size: 8px; letter-spacing: .12em; font-weight: 750; }
.hero-gameplay .scroll-cue { display: none; }
.offline-highlight span { max-width: 190px; line-height: 1.6; }
.stat-strip > div { min-width: 0; flex-direction: column; justify-content: center; gap: 7px; text-align: center; }
.stat-strip strong { white-space: nowrap; }
.stat-strip span { white-space: normal; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; }
@media (min-width: 981px) and (max-width: 1180px) { .desktop-nav { gap: 16px; } .hero-layout { gap: 30px; } }
@media (max-width: 980px) {
  .workshop-image::before { right: 0; }
  .hero-gameplay { min-height: auto; padding: 120px 0 64px; }
  .hero-layout { gap: 28px; width: calc(100% - 40px); }
  .hero-gameplay h1 { font-size: clamp(38px, 5.2vw, 52px); }
  .hero-gameplay .hero-copy { font-size: 15px; }
  .hero-gameplay .hero-actions { display: grid; grid-template-columns: 1fr; max-width: 320px; }
  .hero-features { gap: 8px; }
  .gameplay-screens { gap: 8px; }
  .screen-label { font-size: 6px; gap: 4px; }
}
@media (max-width: 700px) {
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-strip strong { font-size: 23px; }
  .hero-gameplay { padding: 101px 0 48px; }
  .hero-layout { grid-template-columns: minmax(0, 1fr); width: calc(100% - 36px); gap: 34px; }
  .hero-gameplay .hero-art { background-size: cover; opacity: .2; }
  .hero-status { margin-bottom: 22px; font-size: 8px; }
  .hero-gameplay .eyebrow { font-size: 8px; }
  .hero-gameplay h1 { max-width: 540px; margin: 17px 0 20px; font-size: clamp(38px, 10.5vw, 62px); line-height: 1.04; }
  .hero-gameplay .hero-copy { margin-bottom: 22px; font-size: 15px; }
  .hero-gameplay .hero-actions { max-width: none; grid-template-columns: 1fr; gap: 10px; }
  .hero-gameplay .button { min-height: 54px; }
  .hero-gameplay .button-discord { min-height: 48px; }
  .hero-features { margin-top: 19px; gap: 8px 14px; }
  .hero-features > span { font-size: 9px; }
  .hero-features img { width: 25px; height: 25px; }
  .gameplay-showcase { width: min(100%, 480px); margin-inline: auto; }
  .gameplay-screens { gap: 10px; }
  .screen-arena { margin-top: 24px; }
  .screen-label { font-size: 6px; min-height: 26px; }
  .gameplay-showcase figcaption { font-size: 9px; }
}