/* The note for phones (js/mobile-note.js), in the front page's look: the dark glass of the star cards and the ship's
   log. It sits above the log's black hole and the credits (the script lifts it clear), and under the log's panel. */
.zg-mnote {
  z-index: 20; padding: 12px 12px 12px 16px;
  background: rgba(10, 13, 26, .94); border: 1px solid rgba(239, 226, 196, .22); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55); color: var(--cream);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.zg-mnote-text { font: 400 15px/1.4 "IM Fell English", Georgia, serif; color: rgba(239, 226, 196, .9); }
.zg-mnote-ok {
  padding: 7px 14px; border: 1px solid rgba(231, 194, 122, .55); border-radius: 999px; background: transparent;
  font: 400 14px/1 "IM Fell English SC", Georgia, serif; letter-spacing: .06em; color: var(--brass-hi);
  -webkit-tap-highlight-color: transparent; transition: background .2s ease, border-color .2s ease;
}
.zg-mnote-ok:hover, .zg-mnote-ok:focus-visible { background: rgba(231, 194, 122, .12); border-color: var(--brass-hi); }
.zg-mnote-ok:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 2px; }