:root{
  --bg:#0b0b10; --fg:#eaecef; --muted:#9aa0a6; --accent:#6cf; --card:rgba(20,20,28,.85);
  --adCap: 90px; --navH: 44px;
}
@media (max-width: 991px){ :root{ --adCap: 60px; } }
@media (max-width: 599px){ :root{ --adCap: 50px; } }

*{ box-sizing:border-box }
html, body { height:100%; margin:0; background:var(--bg); color:var(--fg);
  font:14px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial;
}
a{ color:#b9ddff }
main{ min-height:60vh }
.container{ max-width:960px; margin:0 auto; padding:16px 20px; }

/* Top Ad (hard-capped) */
#ad-top-wrapper{ position:fixed; top:0; left:0; right:0; z-index:30; background:rgba(0,0,0,.15); backdrop-filter:blur(3px); border-bottom:1px dashed #2a2f3a; display:flex; justify-content:center; padding:4px 8px 0; max-height:var(--adCap); overflow:hidden; }
#ad-top-unit{ display:block !important; text-align:center; width:100% !important; height:var(--adCap) !important; line-height:0; }
#ad-spacer{ height:var(--adH, var(--adCap)); }

/* Fixed Header Nav */
#site-nav{ position:fixed; top:var(--adH, var(--adCap)); left:0; right:0; z-index:29;
  display:flex; gap:14px; align-items:center; justify-content:center;
  height:var(--navH); padding:0 12px; background:rgba(0,0,0,.35); backdrop-filter:blur(6px);
  border-bottom:1px dashed #2a2f3a; }
#site-nav a, #site-nav .brand{ color:#e6edf3; text-decoration:none; font-weight:600; letter-spacing:.2px; }
#site-nav a{ opacity:.9; }
#site-nav a:hover{ opacity:1; text-decoration:underline; }
#site-nav .brand{ margin-right:8px; opacity:1; }
@media (max-width: 480px){ #site-nav{ gap:10px; font-size:13px; } }

footer{ text-align:center; padding:20px; opacity:.75; border-top:1px solid #232634; max-width:960px; margin:0 auto 18px; }
footer a{ margin:0 .25rem; }

/* UI elements used on index */
canvas{ display:block; width:100vw; height:calc(100vh - var(--adH, var(--adCap)) - var(--navH, 0px)); image-rendering:crisp-edges; }
#ui{ position:fixed; inset:0; pointer-events:none; }
.hud{ position:absolute; left:12px; top:calc(var(--adH, var(--adCap)) + 12px); display:flex; gap:12px; align-items:center; }
.pill{ background:#111826; border:1px solid #2e3240; padding:6px 10px; border-radius:999px; font-weight:600; letter-spacing:.3px; color:#c9d1d9; }
.cta{ pointer-events:auto; border:0; border-radius:14px; padding:.6rem .9rem; font-weight:800; display:inline-flex; align-items:center; gap:10px; letter-spacing:.3px; user-select:none; -webkit-tap-highlight-color:transparent; box-shadow:0 2px 8px rgba(0,0,0,.2); }
.cta--primary{ background:linear-gradient(135deg,#2c7cf7,#7cfdd6 120%); color:#06101a; border:1px solid rgba(124,253,214,.25); }
.cta--secondary{ background:linear-gradient(135deg,#ff7ab6,#ffd277 120%); color:#1a0b0f; border:1px solid rgba(255,210,119,.25); }

.modal { pointer-events:auto; position: fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:28; }
.modal.show { display:flex; }
.sheet { width:min(560px, 92vw); background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); border:1px solid rgba(255,255,255,0.1); border-radius:16px; padding:16px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.row { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
table { width:100%; border-collapse: collapse; }
th, td { text-align:left; padding:8px; border-bottom: 1px solid rgba(255,255,255,0.08); font-size:14px; }

/* Page hero blocks */
.hero{ background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0)); border:1px solid rgba(255,255,255,0.08); border-radius:16px; padding:16px; margin:12px 0 18px; }
.hero h1{ margin:0 0 8px; font-size:22px; }
.hero p{ margin:0; opacity:.9; }

.alert{ background:#111826; border:1px solid #2e3240; border-radius:12px; padding:12px; }