Update styles.css

Author: omarakhmedov-web

styles.css

@@ -358,3 +358,87 @@ figure.screen{max-width:780px !important;margin:0 auto !important}
 /* keep images fluid */
 .mdx-frame .mdx-stage{display:block !important;line-height:0}
 .mdx-frame .mdx-stage img{display:block !important;width:100% !important;height:auto !important}
+
+
+/* === AURUM-DELTA • Screens & Lightbox FIX • 2025-10-02 === */
+:root{
+  --mdx-lb-bg: rgba(0,0,0,.88);
+}
+/* In-page screen cards: keep them compact on desktop */
+.screen{ max-width: 560px; margin: 0 auto; }
+.screen .mdx-frame{
+  position: relative;
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid var(--stroke);
+  background: rgba(255,255,255,.02);
+  aspect-ratio: 16 / 10;
+}
+.screen .mdx-frame .mdx-stage img{
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.screen .mdx-nav{
+  position: absolute;
+  inset: auto 10px 10px 10px;
+  display: flex;
+  justify-content: space-between;
+  pointer-events: none;
+}
+.screen .mdx-btn{
+  pointer-events: all;
+  border: 1px solid var(--stroke);
+  background: rgba(0,0,0,.35);
+  color: var(--ink);
+  border-radius: 10px;
+  padding: 6px 10px;
+  cursor: pointer;
+  backdrop-filter: blur(6px);
+}
+
+/* Lightbox — proper sizing + working close button */
+.mdx-lightbox{
+  position: fixed;
+  inset: 0;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  background: var(--mdx-lb-bg);
+  z-index: 9999;
+}
+.mdx-lightbox.open{ display: flex; }
+
+.mdx-lb-img{
+  max-width: min(96vw, 1400px);
+  max-height: 90vh;
+  width: auto;
+  height: auto;
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(0,0,0,.6);
+}
+
+.mdx-lb-close, .mdx-lb-prev, .mdx-lb-next{
+  position: absolute;
+  border: 1px solid var(--stroke);
+  background: rgba(0,0,0,.45);
+  color: #fff;
+  border-radius: 10px;
+  padding: 8px 12px;
+  cursor: pointer;
+  user-select: none;
+}
+.mdx-lb-close{ top: 16px; right: 16px; }
+.mdx-lb-prev{ left: 16px; top: 50%; transform: translateY(-50%); }
+.mdx-lb-next{ right: 16px; top: 50%; transform: translateY(-50%); }
+
+/* Prevent page scroll while lightbox is open */
+body.mdx-no-scroll{ overflow: hidden; }
+
+/* Mobile tweaks */
+@media (max-width: 720px){
+  .screen{ max-width: 100%; }
+  .screen .mdx-frame{ aspect-ratio: 16 / 9; }
+  .mdx-lb-img{ max-width: 96vw; max-height: 86vh; }
+}