/* ════════════════════════════════════════════════════════════════
   mobile-gate.css — full-screen block on small viewports.

   Visibility is PURE CSS: hidden by default, shown only ≤768px.
   JS (mobile-gate.js) just injects the element + sets the language text.
   Colours hardcoded to match 404.html (#1A1A18 / #D3D1C7) so the gate
   looks identical and stays theme-independent on every page.
   ════════════════════════════════════════════════════════════════ */
.mgate{display:none;}

@media (max-width:768px){
  .mgate{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    position:fixed;
    inset:0;
    z-index:99999;
    background:#1A1A18;
    color:#D3D1C7;
    gap:28px;
    padding:32px 24px;
    text-align:center;
    font-family:"Rajdhani",sans-serif;
  }
}

/* Duck — reused verbatim from 404.html (.ausarta__duck) */
.mgate__duck{
  width:120px;
  height:120px;
  object-fit:contain;
  animation:mgate-float 3s ease-in-out infinite;
  filter:drop-shadow(0 8px 32px rgba(29,158,117,.2));
}
@keyframes mgate-float{
  0%,100%{transform:translateY(0) rotate(-2deg);}
  50%{transform:translateY(-18px) rotate(2deg);}
}

.mgate__msg{
  font-family:"Share Tech Mono",monospace;
  font-size:.9rem;
  letter-spacing:.06em;
  line-height:1.7;
  color:#D3D1C7;
  max-width:30ch;
  margin:0;
}