/* Manu Arcade — the Tideward bridge plate: the one deliberate, measured route
   from a game leaf to the studio's flagship. One link, one line, quiet by
   design; sits between the related-games nav and the colophon. Injected by
   scripts/arcade-bridge/inject.mjs. Classes are mgb- prefixed (the shared-kit
   convention, like mgf-/mgt-) because "bridge" is a likely future game name.
   A NEW file rather than lines in palette.css/related.css: _shared assets are
   edge-cached for 31 days, so a new URL reaches returning readers immediately
   where an edited sheet would not. No em dashes in on-screen copy. */

.mgb {
  width: min(720px, 100%);
  margin: clamp(10px, 2vw, 22px) auto 0;
}

.mgb-plate {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px clamp(14px, 2.6vw, 22px);
  text-align: left;
  text-decoration: none;
  color: var(--ink-soft);
  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-plate:hover,
.mgb-plate:focus-visible {
  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);
}

.mgb-plate: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;
}

@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; }
}