/* Base + layout */
:root{
  --bg-deep:#060912;
  --bg-space:#0a0f1e;
  --panel:#101836;
  --panel-alt:#0e1530;
  --text:#e8f3ff;
  --muted:#a7b6d9;
  --accent:#00e5ff;       /* cyan */
  --accent-2:#ff00a8;     /* magenta */
  --accent-3:#5ec0ff;     /* electric blue */
  --accent-4:#ffd166;     /* yellow */
  --ok:#42f57b;
  --danger:#ff5656;
  --shadow:rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  font:14px/1.6 Verdana, Tahoma, "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(2px 2px at 12% 28%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1px 1px at 32% 78%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.2px 1.2px at 76% 20%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 58% 8%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1.6px 1.6px at 85% 62%, rgba(255,255,255,.5), transparent 60%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-space) 55%, var(--bg-deep) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

.container{
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 16px;
}

/* System bar */
.system-bar{
  height: 24px;
  background: linear-gradient(180deg,#1a2550,#0c1230);
  border-bottom: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 6px var(--shadow);
  display:flex; align-items:center; gap:10px; padding:0 10px;
  position: sticky; top:0; z-index: 50;
}
.sys-buttons{display:flex; gap:6px}
.sys-btn{width:12px; height:12px; display:inline-block; border:1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 0 rgba(0,0,0,.4)}
.sys-btn.close{background:#ff5f57}
.sys-btn.max{background:#28c940}
.sys-btn.min{background:#ffbd2e}
.sys-title{font-weight:bold; color:#d7e6ff; letter-spacing:.3px; font-size:12px}

/* Header */
.site-header{
  margin-top: 18px;
  padding: 22px 18px 10px;
  background: linear-gradient(180deg, rgba(16,24,54,.96), rgba(10,18,44,.96));
  border: 1px solid #1a2a66;
  border-radius: 10px;
  box-shadow:
    0 0 0 2px rgba(0,230,255,.08),
    0 10px 28px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.35);
}
.site-title{
  margin: 0;
  font-size: 36px;
  letter-spacing: .5px;
  line-height:1.2;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip:text;
  color: transparent;
  text-shadow: 0 0 10px rgba(0,229,255,.25), 0 0 18px rgba(255,0,168,.15);
}
.site-subtitle{
  margin: 6px 0 2px;
  font-weight: bold;
  color: #d2e6ff;
}
.site-tagline{
  margin: 0 0 12px;
  color: var(--muted);
}

/* Faux nav */
.faux-nav{
  display:flex; flex-wrap:wrap; gap:8px;
  margin: 6px 0 8px;
}
.faux-nav a{
  padding: 6px 10px;
  color:#eaf3ff;
  text-decoration:none;
  border: 1px solid #223a88;
  border-radius: 5px;
  background:
    linear-gradient(180deg, #18306e, #0c1b4e);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 3px 10px rgba(0,0,0,.35);
}
.faux-nav a:hover{
  color:#fff;
  border-color:#2e64ff;
  text-decoration: underline;
  box-shadow: 0 0 10px rgba(94,192,255,.35), inset 0 1px 0 rgba(255,255,255,.2);
}

.tip-marquee{
  margin-top:8px;
  color:#d8f7ff;
  background: linear-gradient(180deg, #0b1a40, #0a183b);
  border:1px solid #19307d;
  border-radius:6px;
  padding:4px 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

/* Hero */
.hero{
  margin-top: 18px;
  padding: 18px;
  background: radial-gradient(1200px 500px at 10% 0%, rgba(0,229,255,.06), transparent 60%),
              linear-gradient(180deg, rgba(12,20,46,.98), rgba(9,15,34,.98));
  border: 1px solid #1a2a66;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
.hero .hero-intro{margin:0; color:#d7e6ff}
.hero-badges{display:flex; gap:8px; margin-bottom:10px}
/* Hide the mid-page hero to avoid duplicate intro */
.hero{display:none}
/* Slim intro above archive */
.intro-box{margin-top:12px}
.intro-box .hero-intro{margin:0; color:#d7e6ff}

/* Press & Praise */
.press{margin-top:14px}
.press h2{margin:0 0 8px; font-size:20px}
.quotes{display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:12px}
.quote-card{margin:0;}
.quote-text{margin:0 0 6px; font-style:italic; color:#e9f2ff}
.quote-source{margin:0; color:#b7c6e6; font-size:13px}
.quote-note{margin:4px 0 0; color:#a8b8da; font-size:12px}
.source-site{opacity:.8}

/* Story */
.story{margin-top:18px}
.story h2{margin:0 0 8px; font-size:22px; color:#e9f2ff}
.story h3{margin:12px 0 6px; font-size:18px; color:#e9f2ff}
.story h4{margin:8px 0 4px; font-size:16px; color:#e9f2ff}
.story p{margin:6px 0; color:#d7e6ff}
.story ul{margin:6px 0 10px 18px}
.story li{margin:4px 0; color:#cfe0ff}
.story blockquote{margin:8px 0; padding:8px 10px; border-left:3px solid #2a4bd8; background:linear-gradient(180deg,#0f1f4c,#0b193d); border-radius:6px}
.story hr{border:0; height:1px; background:linear-gradient(90deg, transparent, rgba(94,192,255,.35), transparent); margin:10px 0}

/* Overview */
.overview{margin-top:18px}
.overview h2{margin:0 0 8px; font-size:22px; color:#e9f2ff}
.lead{color:#d7e6ff; margin:6px 0 12px}
.bio-mission{display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:12px}
.mission.cardish p:nth-of-type(2){display:none}
.cardish{
  padding:14px; border:1px solid #1a2a66; border-radius:10px;
  background: linear-gradient(180deg, rgba(16,24,54,.96), rgba(10,18,44,.96));
  box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
.system-specs ul{margin:6px 0 10px 18px}
.dx-row{display:flex; gap:8px; flex-wrap:wrap}
.dx-badge{background:linear-gradient(180deg,#223e8e,#183273); border:1px solid #2a4bd8; color:#eaf3ff; padding:2px 8px; border-radius:6px; font-size:12px}
.timeline{margin-top:12px}
.timeline-list{list-style:none; margin:6px 0 0; padding:0}
.timeline-list li{margin:6px 0; color:#cfe0ff}
.tl-date{display:inline-block; min-width:64px; color:#ffd166}
/* Hide timeline per request */
.timeline{display:none !important}

/* Info box */
.info-box{
  margin-top: 18px;
  padding: 16px;
  background: linear-gradient(180deg, #0e1a45, #0b1638);
  border: 3px double #2a4bd8;
  border-radius: 10px;
  box-shadow:
    0 0 0 2px rgba(46,100,255,.15),
    0 8px 20px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.07);
}
.info-box h2{
  margin: 0 0 8px;
  font-size: 20px;
  color:#e9f2ff;
  text-shadow: 0 0 10px rgba(94,192,255,.25);
}
.info-box p{margin:0 0 8px; color:#d7e6ff}
.info-box ul{margin:0 0 12px 18px; padding:0}
.info-box li{margin:4px 0; color:#c7d6ff}

/* Archive */
.archive{
  margin-top: 18px;
  padding: 18px 0 8px;
}
.archive h2{
  margin:0 0 6px;
  font-size: 22px;
  color:#e9f2ff;
  text-shadow: 0 0 12px rgba(0,229,255,.25);
}
.archive-intro{margin:0 0 12px; color:var(--muted)}
.legend{margin:0 0 12px}
.grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.screensaver-card{
  background: linear-gradient(180deg, var(--panel), var(--panel-alt));
  border: 1px solid #1c2f77;
  border-radius: 10px;
  padding: 14px;
  box-shadow:
    0 0 0 2px rgba(0,229,255,.05),
    0 8px 18px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.05);
  display:flex; flex-direction:column; gap:8px;
}
.card-thumb{
  position: relative;
  height: 160px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #1e3a86;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 2px rgba(0,229,255,.05);
  background:
    radial-gradient(600px 260px at 0% 0%, rgba(0,229,255,.08), transparent 60%),
    linear-gradient(180deg, #0f1a40, #0c1533);
}
.card-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter: saturate(1.05) contrast(1.02);
}
.thumb-placeholder{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  color:#bfe9ff; font-weight:bold; letter-spacing:.4px;
  background:
    linear-gradient(45deg, rgba(0,229,255,.12) 0 50%, rgba(255,0,168,.12) 50% 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, #122055, #0d183f);
}
.card-title{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
}
.card-title h3{
  margin:0;
  font-size: 16px;
  color:#f2f7ff;
}
.card-title .version{color:var(--muted); font-size:12px; font-weight:normal}
.card-desc{margin:0; color:#d5e4ff}
.card-meta{margin:0; font-size:12px; color:#a9b9db}
.card-actions{margin-top:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.card-actions .ghost{background:transparent; color:#d7e6ff; border-color:#2a4bd8}

/* Badges */
.badge{
  display:inline-block;
  font-size:11px;
  font-weight:bold;
  letter-spacing:.3px;
  color:#001129;
  padding:2px 6px;
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 10px rgba(255,255,255,.08);
}
.badge.accel{background: linear-gradient(180deg, #00e5ff, #2aa8ff); color:#00111c}
.badge.new{background: linear-gradient(180deg, #ff00a8, #ff4fd8); color:#2a0020}
.badge.reco{background: linear-gradient(180deg, #ffd166, #ffbb33); color:#2a1600}
.badge.classic{background: linear-gradient(180deg, #b4f5ff, #72e6ff); color:#00121f}

/* Badges row tweak */
.badges-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:4px;
}

/* Compat */
.compat{margin-top:18px}
.compat h2{margin:0 0 8px; font-size:22px}
.os-badges{display:flex; gap:8px; flex-wrap:wrap; margin:6px 0}
.os-badge{padding:2px 8px; border-radius:6px; border:1px solid #1f386f; background:linear-gradient(180deg,#132457,#0e1a44)}
.os-badge.ok{box-shadow:0 0 10px rgba(66,245,123,.15); border-color:#2d7f55}
.os-badge.warn{box-shadow:0 0 10px rgba(255,209,102,.15); border-color:#7f6a2d}
.walk-img{width:100%; height:auto; display:block; border-radius:8px; border:1px solid #1a2a66; margin-top:8px}
.faq details{margin:6px 0}
.faq summary{cursor:pointer}

/* Compact the D3DRM walkthrough box */
.d3drm-walk{padding:10px 12px}
.d3drm-walk h3{margin:0 0 6px; font-size:18px}
.d3drm-walk ol{margin:4px 0 0 18px}
.d3drm-walk ol li{margin:2px 0}
.d3drm-walk .walk-img{float:right; width:220px; height:auto; margin:0 0 6px 12px}
@media (max-width: 700px){
  .d3drm-walk .walk-img{display:none}
}

/* Modal */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.6); z-index:200}
.modal[aria-hidden="false"]{display:flex}
.modal-window{width:min(520px, calc(100% - 24px)); border:2px solid #1a2a66; border-radius:10px; background:linear-gradient(180deg,#102052,#0b163a); box-shadow:0 16px 36px rgba(0,0,0,.5)}
.modal-titlebar{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-bottom:1px solid #1a2a66; background:linear-gradient(180deg,#1a2550,#0c1230)}
.modal-titlebar .modal-close{background:transparent; border:1px solid #223a88; color:#eaf3ff; padding:4px 8px; border-radius:6px}
.modal-body{padding:12px}
.modal-actions{padding:8px 12px; border-top:1px solid #1a2a66; display:flex; justify-content:flex-end}

/* Lightbox */
.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.86); display:none; align-items:center; justify-content:center; z-index:300}
.lightbox[aria-hidden="false"]{display:flex}
.lb-figure{max-width:min(90vw,1100px); max-height:80vh; text-align:center}
.lb-figure img{max-width:100%; max-height:70vh; border:1px solid #1c2f77; border-radius:8px; box-shadow:0 10px 28px rgba(0,0,0,.5)}
.lb-figure figcaption{color:#cfe0ff; margin-top:8px}
.lb-btn{position:fixed; top:14px; background:linear-gradient(180deg,#18306e,#0c1b4e); color:#eaf3ff; border:1px solid #223a88; border-radius:8px; padding:6px 10px}
.lb-prev{left:14px}
.lb-next{left:64px}
.lb-close{right:14px}

/* Retro button */
.retro-button{
  --glow: rgba(0,229,255,.45);
  display:inline-block;
  padding:8px 14px;
  color:#041018;
  font-weight:bold;
  text-decoration:none;
  border:2px solid #2e64ff;
  border-radius: 8px;
  background: linear-gradient(180deg, #a6f3ff, #5ec0ff);
  box-shadow:
    0 0 0 2px rgba(94,192,255,.25),
    0 0 18px var(--glow),
    inset 0 1px 0 rgba(255,255,255,.6);
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
  position:relative;
}
.retro-button:hover{
  filter: brightness(1.05);
  box-shadow:
    0 0 0 2px rgba(94,192,255,.35),
    0 0 24px rgba(0,229,255,.65),
    inset 0 1px 0 rgba(255,255,255,.7);
}
.retro-button:active{transform: translateY(1px)}

/* Footer */
.site-footer{
  margin: 20px auto 28px;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(16,24,54,.96), rgba(10,18,44,.96));
  border: 1px solid #1a2a66;
  border-radius: 10px;
  text-align:center;
  color:#cfe0ff;
  box-shadow: 0 10px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
.site-footer p{margin:6px 0}

/* Responsive */
@media (max-width: 600px){
  .site-title{font-size:28px}
  .hero .hero-intro{font-size:13px}
  .faux-nav a{padding:5px 8px}
}