/* WordWefter drive-in road-sign wordmark — SINGLE SOURCE OF TRUTH.
   Linked by public/index.html (the app) AND public/privacy.html + terms.html
   so the sign can never drift between pages. Uses theme tokens (--coral,
   --gold-deep, --glow-strength, etc.) provided by each host page's own token
   blocks. App-only masthead placement/sizing lives in src/styles.css. */

.brand {
  --brand-scale: clamp(2.2rem, 8.4vw, 4.4rem);
  position: relative;
  display: grid;
  justify-items: start;
  justify-self: start;
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: 0.2em 0.3em 0.35em;
  color: var(--ink);
  font: inherit;
  letter-spacing: 0;
  text-align: left;
  text-decoration: none; /* .brand is an <a> on privacy/terms — no underline */
}

/* Twin six-pointed sputnik stars mounted ON the sign (per the ELM ROAD
   photo): taller and wider than the letter boxes, upright, each on its own
   vertical pole dropping behind the letter row. Bulb-lit at night. */
.brand-star {
  position: absolute;
  top: calc(var(--brand-scale) * -0.19); /* nearly touching the letter tops, per photo */
  z-index: 1;
  color: var(--gold-deep);
  /* floor keeps the stars legible at the small in-game logo scale */
  font-size: max(1.5rem, var(--brand-scale));
  line-height: 1;
  text-shadow: 0 0 calc(7px * var(--glow-strength)) var(--gold-glow);
}

html[data-theme="dark"] .brand-star {
  color: var(--gold);
  text-shadow:
    0 0 calc(4px * var(--glow-strength)) var(--gold),
    0 0 calc(13px * var(--glow-strength)) var(--gold-glow),
    0 0 calc(24px * var(--glow-strength)) var(--gold-glow);
}

.brand-star::after {
  content: "";
  position: absolute;
  top: 68%;
  left: 50%;
  transform: translateX(-50%);
  width: max(2px, calc(var(--brand-scale) * 0.05));
  width: max(2px, round(calc(var(--brand-scale) * 0.05), 1px));
  /* masts end hidden inside the banner — only the six letter pipes continue
     to the ground below it */
  height: calc(var(--brand-scale) * 1.5);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--coral-deep), var(--coral) 45%, var(--coral-deep));
  z-index: -1;
}

/* Stars center exactly over the O (2nd panel) and far-right E (10th panel).
   Anchor positioning pins them to the real panel boxes (the calc() lines are
   geometry-derived fallbacks for browsers without anchor support). The star
   spans sit AFTER the wordmark in the DOM so the panels are valid anchors. */
.brand-panel:nth-child(2) {
  anchor-name: --brand-panel-o;
}

.brand-panel:nth-child(10) {
  anchor-name: --brand-panel-e;
}

.brand-star-left,
.brand-star-right {
  transform: translateX(-50%);
}

.brand-star-left {
  left: calc(0.3em + var(--brand-scale) * 0.89);
  left: anchor(--brand-panel-o center);
}

.brand-star-right {
  left: calc(0.3em + var(--brand-scale) * 5.77);
  left: anchor(--brand-panel-e center);
}

/* Drive-in road sign (ELM ROAD anatomy): each letter is a backlit ribbed
   panel riding its own mounting stick, letters staggered up/down along the
   rail; the tagline is the red DRIVE-IN THEATRE banner spanning the full
   sign width, and on the welcome screen two ground poles drop below it.
   Panels stay cream at night (backlit boxes) and glow. */
.brand-wordmark {
  display: inline-flex;
  /* flex-start: stagger margins displace panels 1:1 (centered items only
     move by half their margin, which broke the stick-bottom leveling) */
  align-items: flex-start;
  gap: calc(var(--brand-scale) * 0.05);
  margin-top: calc(var(--brand-scale) * 0.39); /* headroom for the mounted stars */
  padding-bottom: calc(var(--brand-scale) * 0.06);
  line-height: 1;
  /* Panels above the star poles (stars follow the wordmark in the DOM so the
     panels can be anchors; without this their poles would paint over the
     letter boxes they connect to). */
  position: relative;
  z-index: 2;
}

.brand-panel {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: calc(var(--brand-scale) * 0.56);
  height: calc(var(--brand-scale) * 0.8);
  /* white frame around each box, per the reference photo (theme-stable white) */
  border: max(1.5px, calc(var(--brand-scale) * 0.028)) solid var(--on-accent-ink);
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, var(--tile-top-sheen) 0 2px, transparent 2px 5px),
    var(--tile-face);
  box-shadow:
    0 2px 3px var(--shadow-soft),
    0 0 calc(9px * var(--glow-strength)) var(--tile-glow);
  font-family: "Righteous", "Trebuchet MS", sans-serif;
  font-size: calc(var(--brand-scale) * 0.58); /* letters fill their boxes like the photo */
  text-shadow: 0 0 calc(5px * var(--glow-strength)) currentColor;
}

/* Mounting stick behind every panel, running down toward the banner.
   IMPORTANT: the stagger must NOT use transform — a transform makes each
   panel a stacking context, which traps this z-index:-1 pole ABOVE the
   panel's own background. Margin offsets keep the poles genuinely behind. */
.brand-panel::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  /* round() to whole pixels — fractional widths rasterize as visibly
     different stick thicknesses at different x positions */
  width: max(2px, calc(var(--brand-scale) * 0.05));
  width: max(2px, round(calc(var(--brand-scale) * 0.05), 1px));
  height: calc(var(--brand-scale) * 0.85);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--coral-deep), var(--coral) 45%, var(--coral-deep));
  z-index: -1;
}

/* Hand-hung stagger along the rail, like the photo (margins, not transforms;
   all non-negative because the row is top-aligned — same relative pattern). */
.brand-panel:nth-child(4n + 1) { margin-top: calc(var(--brand-scale) * 0.05); }
.brand-panel:nth-child(4n + 2) { margin-top: calc(var(--brand-scale) * 0.3); }
.brand-panel:nth-child(4n + 3) { margin-top: calc(var(--brand-scale) * 0.19); }
.brand-panel:nth-child(4n) { margin-top: 0; }

/* Stick lengths compensate the stagger so every stick bottom lands on a flat
   line, as if standing on something. Short (even) sticks level at 1.39 from
   the rail top; ground pipes (odd) level at 1.98:
   height = line - stagger offset - half panel (0.4). */
.brand-panel:nth-child(4n + 2)::after { height: calc(var(--brand-scale) * 0.85); }
.brand-panel:nth-child(4n)::after { height: calc(var(--brand-scale) * 1.15); }
.brand-panel:nth-child(4n + 1)::after { height: calc(var(--brand-scale) * 1.69); }
.brand-panel:nth-child(4n + 3)::after { height: calc(var(--brand-scale) * 1.55); }

/* Letter color cycle, roughly the ELM ROAD pastel rotation in our palette */
.brand-panel:nth-child(5n + 1) { color: var(--coral); }
.brand-panel:nth-child(5n + 2) { color: var(--teal-deep); }
.brand-panel:nth-child(5n + 3) { color: var(--orange-deep); }
.brand-panel:nth-child(5n + 4) { color: var(--rainbow-4); }
.brand-panel:nth-child(5n) { color: var(--rainbow-5); }

.brand-panel-star {
  color: var(--gold-deep) !important;
  font-size: calc(var(--brand-scale) * 0.38);
}

/* The red DRIVE-IN THEATRE banner: spans the full sign over the pipework,
   single gold trim ring, chunky cream letters with a hard painted offset. */
.brand-tagline {
  justify-self: stretch;
  position: relative;
  z-index: 3; /* banner mounts in front of the sticks and star poles */
  margin-top: calc(var(--brand-scale) * 0.12);
  /* banner extends past the letter row so the letters sit well inside its
     edges, like the photo */
  margin-inline: calc(var(--brand-scale) * -0.42);
  padding: 0.38em 0.8em 0.42em;
  background: var(--coral);
  color: var(--ink-on-dark);
  font-size: calc(var(--brand-scale) * 0.305); /* text spans the banner (~95% fill, measured) */
  letter-spacing: 0.3em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0.05em 0.05em 0 var(--coral-deep);
  /* single-angle ends, wider at the top — the photo's banner shape */
  clip-path: polygon(0 0, 100% 0, 96.5% 100%, 3.5% 100%);
  box-shadow:
    inset 0 0 0 max(2px, calc(var(--brand-scale) * 0.022)) var(--gold-deep),
    0 0 calc(12px * var(--glow-strength)) var(--coral-glow);
}

html:not(.has-stored-player) body:not(.has-player):not(.screen-play) .brand {
  margin-bottom: calc(var(--brand-scale) * 0.5);
}

/* Compact header sign: keep the stagger + short sticks, lose the banner and
   the full-height ground pipes. :nth-child(n) bumps specificity above the
   2n+1 full-height rule without !important. */
html.has-stored-player body .brand-tagline,
body.has-player .brand-tagline,
body.screen-play .brand-tagline {
  display: none;
}

/* Compact sticks level on one line at 1.09 from the rail top (no banner or
   ground pipes to reach), same stagger-compensation formula as above. */
:is(html.has-stored-player body, body.has-player, body.screen-play) .brand-panel:nth-child(4n + 1)::after {
  height: calc(var(--brand-scale) * 0.8);
}

:is(html.has-stored-player body, body.has-player, body.screen-play) .brand-panel:nth-child(4n + 2)::after {
  height: calc(var(--brand-scale) * 0.55);
}

:is(html.has-stored-player body, body.has-player, body.screen-play) .brand-panel:nth-child(4n + 3)::after {
  height: calc(var(--brand-scale) * 0.66);
}

:is(html.has-stored-player body, body.has-player, body.screen-play) .brand-panel:nth-child(4n)::after {
  height: calc(var(--brand-scale) * 0.85);
}

/* Compact star masts end on the stick baseline. Slightly over the pure
   1.15 ratio because the star's max(1.5rem, ...) size floor breaks strict
   proportionality at header scale (measured: 1.15 fell 3px short). */
:is(html.has-stored-player body, body.has-player, body.screen-play) .brand-star::after {
  height: calc(var(--brand-scale) * 1.27);
}

@media (max-width: 360px) {
  .brand-tagline {
    display: none;
  }

  .brand-panel:nth-child(4n + 1)::after { height: calc(var(--brand-scale) * 0.8); }
  .brand-panel:nth-child(4n + 2)::after { height: calc(var(--brand-scale) * 0.55); }
  .brand-panel:nth-child(4n + 3)::after { height: calc(var(--brand-scale) * 0.66); }
  .brand-panel:nth-child(4n)::after { height: calc(var(--brand-scale) * 0.85); }

  .brand-star::after { height: calc(var(--brand-scale) * 1.15); }
}