/* Dark Mage of Mossfen — the Developing phase screen (v1.18, src/ui/dev-gate.js): the first screen, before the sign-in
   card or the choosing screen. The choosing screen's moss-black sky and fireflies, the game's name in gold, a brass
   plaque, and the sign-in card's password box (account.css). */
#devgate {
  position: absolute; inset: 0; z-index: 45;
  display: grid; justify-items: center; align-content: start; align-content: safe center; gap: 22px;
  padding: 28px 16px 22px; overflow-y: auto;
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(64, 104, 58, 0.34), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 110%, rgba(8, 12, 9, 0.9), transparent 60%),
    linear-gradient(#131c16, #0b100d);
}
#devgate > header { position: relative; display: grid; justify-items: center; gap: 12px; text-align: center; }
#devgate h1 {
  margin: 0; padding: 0 0.1em 0.06em; font: 700 clamp(38px, 6vw, 70px)/1.05 var(--f-display); letter-spacing: 0.035em; text-wrap: balance;
  background: linear-gradient(#fff0bf 8%, #f3d68a 40%, #c99d45 78%, #9a7130); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 0 26px rgba(201, 157, 69, 0.28));
}
/* the plaque: brass rules above and below, a rivet each end, faint amber stripes behind the words */
.dg-phase {
  display: inline-flex; align-items: center; gap: 14px; margin: 0; padding: 9px 20px 10px;
  font: 700 clamp(15px, 2vw, 20px)/1 var(--f-display); letter-spacing: 0.3em; text-transform: uppercase; color: #ffd68a;
  text-shadow: 0 0 14px rgba(255, 170, 60, 0.5), 0 1px 0 rgba(0, 0, 0, 0.7);
  border-block: 1px solid var(--edge-strong);
  background: repeating-linear-gradient(-45deg, rgba(232, 179, 58, 0.11) 0 9px, transparent 9px 18px), rgba(0, 0, 0, 0.38);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 10px 26px rgba(0, 0, 0, 0.35);
}
.dg-phase span { margin-right: -0.3em; }      /* the letter-spacing after the last letter */
.dg-phase::before, .dg-phase::after {
  content: ''; flex: none; width: 7px; height: 7px; transform: rotate(45deg);
  background: linear-gradient(135deg, #f3d68a, #9a7130); box-shadow: 0 0 6px rgba(255, 190, 90, 0.6);
}
.dg-note { margin: 0; max-width: 46ch; font-size: 16px; line-height: 1.45; color: var(--ink-dim); text-wrap: balance; }
#devgate .acct { position: relative; }
.dg-card .pick-go { justify-self: center; margin-top: 4px; }
.dg-card.is-wrong { animation: dg-shake 0.36s ease-in-out; }
@keyframes dg-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}
#devgate.is-leaving { opacity: 0; transition: opacity 0.22s ease-out; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .dg-card.is-wrong { animation: none; }
  #devgate .select-sky { display: none; }
}