/* ══════════════════════════════════════
   ORIENTATION GATE — "rotate your device"
   Shown whenever a touch/phone-sized viewport is in portrait. iDOS is a
   desktop-OS simulation; it doesn't fit a portrait phone screen (the cat,
   windows, taskbar all assume landscape-ish room to breathe).
══════════════════════════════════════ */
#orientation-gate{
  position:fixed;inset:0;z-index:2147483000;
  display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:#000;
  padding:24px;
  text-align:center;
  /* tiny screens (watches): content is taller than the viewport -- must be
     able to scroll down to the dismiss link or the gate is a dead end */
  overflow-y:auto;
}
#orientation-gate.show{ display:flex; }
@media (max-height: 420px), (max-width: 260px){
  #orientation-gate{ gap:8px; padding:12px; justify-content:flex-start; }
  #orientation-gate-canvas{ width:84px; height:98px; }
  #orientation-gate-title{ font-size:11px; letter-spacing:3px; }
  #orientation-gate-sub{ font-size:10px; }
}

#orientation-gate-canvas{
  width:150px;height:175px;
  image-rendering:pixelated;image-rendering:crisp-edges;
  filter:drop-shadow(0 0 16px rgba(88,219,255,.25));
}

#orientation-gate-title{
  font-family:'Share Tech Mono',monospace;
  font-size:15px;letter-spacing:5px;
  color:#58dbff;
  text-shadow:0 0 10px rgba(88,219,255,.4);
}

#orientation-gate-sub{
  font-family:'Share Tech Mono',monospace;
  font-size:12px;letter-spacing:.5px;line-height:1.5;
  color:rgba(158,238,250,.75);
  max-width:280px;
}

#orientation-gate-dismiss{
  margin-top:6px;
  font-family:'Share Tech Mono',monospace;
  font-size:10px;letter-spacing:1px;
  color:rgba(88,219,255,.4);
  background:none;border:none;
  text-decoration:underline;
  cursor:pointer;
  padding:6px;
}
#orientation-gate-dismiss:hover{ color:rgba(88,219,255,.75); }