/* Manu Arcade — the next-up row on the end-of-round card (nextup.js), and the
   house hint pulse. A NEW _shared sheet linked from the related block that
   scripts/arcade-seo/inject.mjs writes, so it reaches returning readers at
   once where an edit to palette.css would wait out the 31-day cache. Classes
   are mgn- prefixed (shared-kit convention, like mgb-/mgf-/mgt-). No em
   dashes in on-screen copy. */

.mgn {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(122, 104, 80, .28);
  display: grid;
  gap: 6px;
  line-height: 1.4;
  text-align: center;
}
.mgn p { margin: 0; }

.mgn a {
  color: var(--oxblood, #5a1a1f);
  text-decoration: underline;
  text-decoration-color: rgba(90, 26, 31, .35);
  text-underline-offset: 3px;
  /* A comfortable thumb target without shifting the line. */
  display: inline-block;
  padding: 6px 2px;
}
.mgn a:hover { text-decoration-color: currentColor; }
.mgn a:focus-visible { outline: 2px solid var(--gold-deep, #9c7826); outline-offset: 2px; border-radius: 3px; }

.mgn-label {
  font-family: var(--caps);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  color: var(--ink-light, #6b5a48);
}
.mgn-next { font-size: 17px; }
.mgn-go { font-family: var(--display); font-weight: 600; font-size: 19px; }
.mgn-or { color: var(--ink-light, #6b5a48); font-style: italic; }

.mgn-daily {
  font-size: 15px;
  font-style: italic;
  color: var(--ink-light, #6b5a48);
}
.mgn-today { font-style: normal; }

.mgn-lead {
  font-family: var(--hand);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft, #3a2e22);
}

/* The row makes the card taller: on a short screen let the overlay scroll
   rather than push the card's head off the top. */
.overlay:has(.mgn) { overflow-y: auto; place-items: safe center; }

/* .mg-hint: a gentle glow for a help button that has replaced a first-visit
   modal (plan item #3). Put the class on the button; take it off once the
   reader has opened help. Still for anyone who asks for less motion. */
.mg-hint {
  position: relative;
  animation: mg-hint-glow 2.4s var(--ease, ease-in-out) infinite;
}
@keyframes mg-hint-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 156, 58, 0); }
  50% { box-shadow: 0 0 0 4px rgba(200, 156, 58, .45), 0 0 14px 2px rgba(227, 183, 84, .35); }
}
@media (prefers-reduced-motion: reduce) {
  .mg-hint {
    animation: none;
    box-shadow: 0 0 0 2px rgba(200, 156, 58, .55);
  }
}