/* Structural atmosphere only: component surfaces retain their own styles. */
body.fdplay-site-design {
  --fdplay-midnight:#030e19;
  --fdplay-navy:#061421;
  --fdplay-deep:#020c16;
  background-color:var(--fdplay-midnight);
  background-image:radial-gradient(ellipse at 0 52%,#0c2435a6,transparent 45%),radial-gradient(ellipse at 100% 80%,#102d4280,transparent 48%),linear-gradient(#030e19,#061421 65%,#020c16);
  background-repeat:no-repeat;
  background-attachment:scroll;
}
body.fdplay-site-design #main { background:transparent; }
/* Both form and success states share this template's opaque outer main.
   Keep panel/notice/input surfaces intact; expose the existing body atmosphere. */
body.fdplay-site-design.fdplay-highlight-submission-route main.fdplay-highlight-submission {
  background:transparent;
}
/* No text or component backgrounds are overridden. */
body.fdplay-site-design #header > [data-device] > [data-row="bottom"] {
  position:relative;
  background-size:cover;
  background-position:50% 20%;
  background-repeat:no-repeat;
  background-attachment:scroll;
}
body.fdplay-site-design #header > [data-device] > [data-row="bottom"]::after {
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 65%,#030e19);
}
body.fdplay-site-design #header [data-row="bottom"] .fdplay-banner-spacer {display:block;height:0;}
/* Mobile uses the original proportions so all three characters remain visible. */
@media(max-width:999.98px) {
  body.fdplay-site-design #header > [data-device="mobile"] > [data-row="bottom"] {
    --height:calc(100vw * 809 / 1942);
    background-size:cover;background-position:50% 50%;
  }
}

/* Keep desktop header centering stable between short and scrolling pages.
   Blocksy owns scrollbar compensation while an account/offcanvas panel is open. */
@media (min-width:1000px) {
  @supports (scrollbar-gutter:stable) {
    html { scrollbar-gutter:stable; }
    html:has(body[data-panel]) { scrollbar-gutter:auto; }
  }
  /* Older gutter implementations with :has support retain the same usable width. */
  @supports not (scrollbar-gutter:stable) {
    @supports selector(html:has(body)) {
      html:has(body.fdplay-site-design:not([data-panel])) { overflow-y:scroll; }
    }
  }
}