*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#061427;color:#cfe8ff;font-family:Segoe UI,Roboto,system-ui,Arial;min-height:100%}
body{padding:0 16px 40px}

/* ── Background starfield (matches landing page) ──────────────── */
#bg{position:fixed;inset:0;z-index:-1;pointer-events:none;display:block}

/* ── Site header (matches landing page) ───────────────────────── */
.site-head{text-align:center;padding:44px 20px 26px}
.brand{display:inline-block;font-size:clamp(28px,6vw,54px);font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#6ef;text-shadow:0 0 18px #6ef,0 0 48px #3af;line-height:1.1}
.brand:hover{text-decoration:none}
.tagline{margin:10px 0 18px;font-size:clamp(11px,2vw,15px);letter-spacing:.22em;text-transform:uppercase;color:#ffb020}
.site-nav a{display:inline-block;margin:0 5px 6px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#4a7a99;border:1px solid #0e2a45;border-radius:20px;padding:6px 16px;transition:color .14s,border-color .14s,box-shadow .14s}
.site-nav a:hover,.site-nav a.on{color:#6ef;border-color:rgba(102,238,255,.55);box-shadow:0 0 14px rgba(102,238,255,.2);text-decoration:none}

/* ── Content panel: glowing blue frame + LCARS-style console rail ── */
.wrap{max-width:760px;margin:0 auto}
.panel{position:relative;padding:38px 42px 34px 118px;background:rgba(6,20,39,.86);border:2px solid rgba(68,136,255,.8);border-radius:44px 14px 14px 14px;box-shadow:0 0 28px rgba(68,136,255,.35),0 0 72px rgba(68,136,255,.12),inset 0 0 24px rgba(68,136,255,.06);overflow:hidden}

/* console rail: stacked colour blocks with a big elbow curve top-left, LCARS-style.
   Its corners must match .panel's own border-radius exactly (44/0/0/14), or the
   panel's dark background peeks through as a sliver between the two curves. */
.panel::before{
  content:"";position:absolute;left:-2px;top:-2px;bottom:-2px;width:72px;
  border-radius:44px 0 0 14px;
  background:linear-gradient(to bottom,
    #6ef 0%, #6ef 13%,
    #3af 13%, #3af 20%,
    #ffb020 20%, #ffb020 33%,
    #1e4060 33%, #1e4060 58%,
    #3af 58%, #3af 65%,
    #ffb020 65%, #ffb020 80%,
    #6ef 80%, #6ef 100%);
  box-shadow:0 0 16px rgba(102,238,255,.3);
}
@media(max-width:600px){.panel{padding:24px 20px 22px}.panel::before{display:none}}

h1{font-family:'Orbitron',system-ui,sans-serif;font-size:clamp(22px,4.4vw,32px);font-weight:900;letter-spacing:.03em;text-transform:uppercase;color:#6ef;text-shadow:0 0 14px rgba(102,238,255,.7);margin:0 0 10px;line-height:1.3}
h2{display:flex;align-items:center;gap:10px;font-family:'Orbitron',system-ui,sans-serif;font-size:14px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#6ef;margin:34px 0 14px}
h2::before{content:"";flex-shrink:0;width:22px;height:10px;background:#6ef;border-radius:5px 0 0 5px}
h2::after{content:"";flex-grow:1;height:2px;background:linear-gradient(90deg,rgba(102,238,255,.5),transparent)}
h2:nth-of-type(even)::before{background:#ffb020}
h2:nth-of-type(even)::after{background:linear-gradient(90deg,rgba(255,176,32,.5),transparent)}
p,li{font-size:16px;line-height:1.85;color:#a9c9dd;margin:0 0 15px}
ul,ol{padding-left:22px;margin:0 0 15px}
li::marker{color:#ffb020}
a{color:#6ef;text-decoration:none}
a:hover{text-decoration:underline}
strong{color:#dff3ff}
code{background:#0a2136;border:1px solid #0e2a45;border-radius:3px;padding:1px 5px;font-size:.9em;color:#bfe8ff}
pre{background:#040e1c;border:1px solid rgba(255,176,32,.35);border-left:3px solid #ffb020;border-radius:0 6px 6px 0;padding:14px 16px;overflow-x:auto;margin:0 0 18px}
pre code{background:none;border:none;padding:0;font-size:13px;line-height:1.6}
.meta{font-family:'Orbitron',system-ui,sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#4a7a99;margin:0 0 28px}
.lede{font-size:18px;color:#c7e2f2;border-left:3px solid #ffb020;padding-left:16px}
.back{display:inline-block;margin:0 0 18px;font-family:'Orbitron',system-ui,sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#4a7a99}
.back:hover{color:#6ef;text-decoration:none}

/* ── Blog index cards (match landing game cards) ──────────────── */
.intro{text-align:center;max-width:600px;margin:0 auto 28px}
.post-list{list-style:none;padding:0;margin:0}
.post-list li{position:relative;margin:0 0 18px;background:#081c30;border:1px solid #000;border-radius:12px;overflow:hidden;transition:transform .15s,box-shadow .15s}
.post-list li:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(102,238,255,.15)}

/* mini console rail: a condensed echo of the post panel's elbow rail (which sits on
   the left there too), teasing the full-size treatment inside. Flush rectangle (no
   radius of its own) so the li's own overflow:hidden clips it cleanly — no
   corner-radius mismatch to chase. */
.post-list li::after{
  content:"";position:absolute;top:0;left:0;bottom:0;width:9px;
  background:linear-gradient(to bottom,
    #6ef 0%, #6ef 24%,
    #3af 24%, #3af 48%,
    #ffb020 48%, #ffb020 76%,
    #6ef 76%, #6ef 100%);
}

.post-list .card-body{display:flex;flex-direction:column;align-items:flex-start;padding:22px 26px 24px 34px;border-top:3px solid transparent;border-image:linear-gradient(90deg,#6ef 0%,#6ef 72%,#ffb020 72%,#ffb020 100%) 1}
.post-list h2{display:block;margin:0 0 6px;padding:0;font-family:inherit;font-size:18px;font-weight:700;letter-spacing:.06em;text-transform:none;line-height:1.35;color:#6ef}
.post-list h2::before,.post-list h2::after{content:none}
.post-list .meta{margin:0 0 12px}
.post-list p{margin:0 0 14px;font-size:14px;color:#6a8fa8}
.read-btn{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#061427;background:#6ef;border-radius:5px;padding:9px 24px;box-shadow:0 0 14px rgba(102,238,255,.45);transition:background .14s,transform .1s,box-shadow .14s}
.read-btn:hover{background:#fff;transform:scale(1.05);box-shadow:0 0 28px rgba(102,238,255,.8);text-decoration:none}

/* ── Footer (matches landing page) ────────────────────────────── */
.site-foot{text-align:center;margin-top:36px;padding:20px;font-size:11px;letter-spacing:.08em;color:#2a5878;border-top:1px solid #0a1d33}
.site-foot a{color:#2a5878}
.site-foot a:hover{color:#6ef;text-decoration:none}
.post-foot{margin-top:38px;padding-top:16px;border-top:1px solid rgba(68,136,255,.35);font-size:13px;color:#4a7a99}
.intro .lede{border:none;padding:0}

/* ── Ad slots (placeholders until AdSense is live) ────────────── */
.ad-wrap{text-align:center;margin:26px 0}
.ad-slot{display:inline-flex;align-items:center;justify-content:center;width:728px;max-width:100%;height:90px;background:rgba(8,28,48,.45);border:1px dashed rgba(30,64,96,.65);border-radius:4px}
@media(max-width:480px){.ad-slot{height:50px}}
.ad-placeholder{font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#4a7a99;text-align:center}

/* ADS_OFF — ad placeholders hidden while the AdSense review runs. Delete this rule to show the slots again. */
.ad-wrap{display:none}