/* Manu Arcade — the Tideward bridge plate, two doors. The measured route from
   a game leaf to the studio's flagship; sits between the related-games nav and
   the colophon. Injected by scripts/arcade-bridge/inject.mjs.

   Successor to bridge.css (2026-10-11). That sheet styled a plate that was one
   big link; this plate is a framed container (.mgb) holding two sibling
   anchors, never nested: .mgb-plate (icon, line, CTA) to the open beta, and
   .mgb-pre, a small line under it, to the bare App Store pre-order. A NEW
   file rather than a rewrite of bridge.css: _shared assets are edge-cached for
   31 days, so a new URL reaches returning readers immediately, and any stale
   page still referencing bridge.css keeps the sheet its markup was written
   for. bridge.css can go once no page has linked it for 31 days.

   Classes are mgb- prefixed (the shared-kit convention, like mgf-/mgt-)
   because "bridge" is a likely future game name. No em dashes in copy. */

.mgb {
  width: min(720px, 100%);
  margin: clamp(10px, 2vw, 22px) auto 0;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .02)), var(--parchment);
  box-shadow:
    inset 0 0 0 1px rgba(200, 156, 58, .38),
    inset 0 0 0 3px rgba(122, 104, 80, .14),
    0 8px 22px rgba(58, 46, 34, .14);
}

.mgb:hover,
.mgb:focus-within {
  box-shadow:
    inset 0 0 0 1px rgba(200, 156, 58, .62),
    inset 0 0 0 3px rgba(122, 104, 80, .14),
    0 10px 26px rgba(58, 46, 34, .18);
}

/* The big door. It keeps the frame's full top padding and most of its side
   padding as tap area; the bottom is short because the pre-order line sits
   under it inside the same frame. */
.mgb-plate {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px clamp(14px, 2.6vw, 22px) 6px;
  text-align: left;
  text-decoration: none;
  color: var(--ink-soft);
  border-radius: 12px 12px 0 0;
}

.mgb-plate:focus-visible,
.mgb-pre:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
}

.mgb-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  /* The Apple-squircle read at this size, without shipping a second asset. */
  border-radius: 22.37%;
  box-shadow: 0 0 0 1px rgba(122, 104, 80, .28), 0 4px 10px rgba(58, 46, 34, .22);
}

.mgb-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.mgb-eyebrow {
  display: block;
  font-family: var(--caps);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  color: var(--gold-deep);
  margin-bottom: 2px;
}

.mgb-line {
  display: block;
  font-family: var(--body);
  font-size: 15.5px;
  line-height: 1.4;
}

.mgb-line strong {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
}

.mgb-cta {
  flex: 0 0 auto;
  font-family: var(--caps);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 13px;
  color: var(--oxblood);
  white-space: nowrap;
  border-bottom: 1px solid rgba(90, 26, 31, .3);
}

.mgb-plate:hover .mgb-cta,
.mgb-plate:focus-visible .mgb-cta {
  color: var(--oxblood-bright);
  border-bottom-color: currentColor;
}

/* The second door: a quiet line, right-aligned under the CTA. width
   max-content + auto left margin keeps its tap area to its own words, so
   the rest of the row is not a surprise App Store link. Padding brings the
   hit box to about 30px tall. */
.mgb-pre {
  display: block;
  width: max-content;
  max-width: calc(100% - 2 * clamp(14px, 2.6vw, 22px));
  margin: 0 clamp(14px, 2.6vw, 22px) 0 auto;
  padding: 4px 0 12px;
  font-family: var(--body);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.3;
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: rgba(122, 104, 80, .4);
  text-underline-offset: 3px;
}

.mgb-pre:hover,
.mgb-pre:focus-visible {
  color: var(--oxblood-bright);
  text-decoration-color: currentColor;
}

/* Off Apple devices _shared/nextup.js turns .mgb-plate into the Discord door
   (it rewrites the href, the line and the CTA). An Apple-only pre-order is no
   door there, so the second line goes and the plate takes its padding back.
   Keyed on the swapped href so nextup.js needs no change; with no script, or
   on an Apple device, the plate is unchanged. */
.mgb-plate[href*="/go/discord"] {
  padding-bottom: 14px;
  border-radius: 12px;
}
.mgb-plate[href*="/go/discord"] + .mgb-pre {
  display: none;
}

@media (max-width: 560px) {
  .mgb-plate { flex-wrap: wrap; }
  /* Basis 0 keeps the copy beside the icon (an auto basis is the full
     sentence width, which shoved the copy onto its own row); basis 100%
     drops the CTA to a row of its own, aligned under the copy text. */
  .mgb-copy { flex: 1 1 0; }
  /* Basis + margin = exactly one row (a bare 100% plus the margin pokes
     past the plate and hands the page a sideways scroll). The full-row item
     would carry its hairline clear across the plate, so the rule comes off;
     the caps, colour and arrow still read as the act. */
  .mgb-cta { flex: 0 0 calc(100% - 70px); margin-left: 70px; border-bottom: none; }
  /* The pre-order line lines up under the CTA: frame padding + the 70px
     icon column, and it may wrap within what is left of the row. */
  .mgb-pre {
    max-width: calc(100% - 2 * clamp(14px, 2.6vw, 22px) - 70px);
    margin-left: calc(clamp(14px, 2.6vw, 22px) + 70px);
    margin-right: 0;
    padding-top: 6px;
  }
}