/* ============================================================ RUNGS.SH — cyberpunk arcology */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#08040f; --bg-2:#0f0620; --fg:#f0e8ff; --muted:#8b7da4;
  --line:rgba(255,255,255,.08); --card:rgba(120,60,180,.06);
  --accent:#7dffbe;
  --neon-mag:#ff2e88; --neon-cyan:#00e0ff; --neon-yel:#ffd166; --neon-vio:#c084ff;
  --danger:#ff5566;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
}
html,body{background:var(--bg);color:var(--fg);font-family:var(--sans);min-height:100vh;overflow-x:hidden}
body{
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(255,46,136,.08), transparent 60%),
    radial-gradient(ellipse 60% 30% at 20% 100%, rgba(0,224,255,.05), transparent 60%),
    var(--bg);
}
a{color:inherit;text-decoration:none}
code{font-family:var(--mono);font-size:.9em}
img,canvas{image-rendering:pixelated;image-rendering:crisp-edges}

/* ============================================================ HEADER */
.hdr{position:sticky;top:0;z-index:20;backdrop-filter:blur(12px);background:rgba(8,4,15,.82);border-bottom:1px solid rgba(255,46,136,.15);box-shadow:0 1px 0 rgba(0,224,255,.05)}
.hdr-inner{max-width:1240px;margin:0 auto;padding:14px 24px;display:flex;justify-content:space-between;align-items:center;gap:24px}
.brand{font-family:var(--mono);font-weight:700;letter-spacing:.06em;font-size:15px;color:var(--accent);display:flex;align-items:center;gap:6px}
.brand-mark{color:var(--neon-mag);text-shadow:0 0 6px rgba(255,46,136,.6)}
.hdr-nav{display:flex;gap:22px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hdr-nav a:hover{color:var(--fg)}
.hdr-right{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.hdr-mc{color:var(--fg)}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);transition:all .3s}
.live-dot.live{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.live-dot.stale{background:var(--neon-yel);box-shadow:0 0 6px var(--neon-yel)}
.live-dot.err{background:var(--danger);box-shadow:0 0 6px var(--danger)}
@media (max-width:820px){.hdr-nav{display:none}}

/* ============================================================ MAIN */
main{max-width:1240px;margin:0 auto;padding:0 24px}
main>section{padding-block:96px}
main>section:first-child{padding-top:56px}

/* ============================================================ HERO */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.15em;color:var(--neon-cyan);margin-bottom:16px;text-shadow:0 0 6px rgba(0,224,255,.35)}
h1{font-size:clamp(44px,6vw,80px);font-weight:800;line-height:.95;letter-spacing:-.035em;margin-bottom:24px}
h1 .accent{color:var(--neon-mag);text-shadow:0 0 24px rgba(255,46,136,.35)}
.lede{font-size:18px;line-height:1.6;color:var(--muted);max-width:52ch;margin-bottom:32px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px}
.btn{font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:12px 20px;border:1px solid var(--line);background:transparent;color:var(--fg);cursor:pointer;border-radius:2px;transition:all .15s;display:inline-block}
.btn:hover:not(:disabled){border-color:var(--fg)}
.btn.primary{background:var(--neon-mag);color:#0a0210;border-color:var(--neon-mag);box-shadow:0 0 24px rgba(255,46,136,.25)}
.btn.primary:hover{background:var(--neon-cyan);border-color:var(--neon-cyan);box-shadow:0 0 24px rgba(0,224,255,.35)}
.btn.big{font-size:14px;padding:14px 24px}
.btn.ghost{background:transparent}

.ca-box{padding:14px 16px;background:var(--card);border:1px solid rgba(255,46,136,.2);border-radius:2px;font-family:var(--mono);font-size:12px;cursor:pointer;transition:all .15s;max-width:520px}
.ca-box:hover{border-color:var(--neon-mag);box-shadow:0 0 20px rgba(255,46,136,.15)}
.ca-k{color:var(--neon-cyan);letter-spacing:.15em;font-size:10px;margin-bottom:6px}
.ca-v{color:var(--fg);word-break:break-all;line-height:1.4}

/* ============================================================ SCENE (canvas) */
.hero-right{display:flex;justify-content:center;align-items:flex-start}
.scene-wrap{
  position:relative;
  width:min(360px, 88vw);
  aspect-ratio: 320 / 640;
  background:#000;
  border:1px solid rgba(255,46,136,.25);
  border-radius:2px;
  overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(0,224,255,.08),
    0 0 40px rgba(255,46,136,.15),
    0 20px 60px rgba(0,0,0,.6);
}
.scene-wrap canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}
/* CRT scanlines overlay */
.scene-scanlines{
  position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0.18) 3px,
      rgba(0,0,0,0.18) 3px
    );
  mix-blend-mode:multiply;
}
/* vignette */
.scene-vignette{
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.6) 100%);
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:40px}
  .hero-right{order:-1}
  .scene-wrap{width:min(300px, 78vw)}
}

/* ============================================================ STATS STRIP */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,46,136,.15);
  border-block:1px solid rgba(255,46,136,.15);
  padding:0 !important;margin:0 -24px;max-width:none
}
.stat{background:var(--bg);padding:32px 24px;text-align:center;position:relative}
.stat-n{font-family:var(--mono);font-size:clamp(24px,3vw,36px);font-weight:700;color:var(--neon-cyan);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-shadow:0 0 8px rgba(0,224,255,.3)}
.stat:nth-child(1) .stat-n{color:var(--accent);text-shadow:0 0 8px rgba(125,255,190,.3)}
.stat:nth-child(3) .stat-n{color:var(--neon-mag);text-shadow:0 0 8px rgba(255,46,136,.3)}
.stat:nth-child(4) .stat-n{color:var(--neon-yel);text-shadow:0 0 8px rgba(255,209,102,.3)}
.stat-l{margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
@media (max-width:720px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ============================================================ SECTION HEADS */
.section-head{max-width:720px;margin:0 auto 48px;text-align:center}
.section-head h2{font-size:clamp(28px,3.4vw,44px);font-weight:800;letter-spacing:-.02em;margin-bottom:12px}
.section-sub{color:var(--muted);font-size:16px;line-height:1.6}

/* ============================================================ DIRECTORY */
.dir-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:800px){.dir-list{grid-template-columns:1fr}}
.dir-row{display:grid;grid-template-columns:36px 1fr auto;gap:16px;align-items:center;padding:14px 18px;border:1px solid var(--line);background:var(--card);border-radius:2px;transition:all .15s;position:relative;overflow:hidden}
.dir-row:hover{border-color:rgba(255,255,255,.16)}
.dir-row.active{border-color:rgba(0,224,255,.35);background:rgba(0,224,255,.04)}
.dir-row.active::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--neon-cyan);box-shadow:0 0 8px var(--neon-cyan)
}
.dir-num{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--muted);letter-spacing:.05em}
.dir-row.active .dir-num{color:var(--neon-cyan)}
.dir-body{min-width:0}
.dir-name{font-size:14px;font-weight:700;letter-spacing:-.01em;margin-bottom:2px}
.dir-job{font-family:var(--mono);font-size:11px;color:var(--muted);line-height:1.45;letter-spacing:.02em}
.dir-status{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:5px 8px;border:1px solid var(--line);border-radius:2px;color:var(--muted);white-space:nowrap;text-align:right}
.dir-row.active .dir-status{color:#0a0210;background:var(--neon-cyan);border-color:var(--neon-cyan);box-shadow:0 0 12px rgba(0,224,255,.35)}
.dir-thr{font-family:var(--mono);font-size:10px;color:#5a4d74;margin-top:2px;letter-spacing:.05em}
.dir-progress{grid-column:1 / -1;height:3px;background:rgba(255,255,255,.05);overflow:hidden;border-radius:1px;margin-top:8px}
.dir-progress > span{display:block;height:100%;background:var(--neon-cyan);transition:width .8s}
.dir-row.active .dir-progress > span{background:var(--neon-mag);box-shadow:0 0 6px rgba(255,46,136,.5)}

.dir-row.new-unlock{animation:unlockflash 1.4s ease-out}
@keyframes unlockflash{
  0%{border-color:var(--neon-mag);background:rgba(255,46,136,.15);box-shadow:0 0 30px rgba(255,46,136,.5)}
  100%{border-color:rgba(0,224,255,.35);background:rgba(0,224,255,.04);box-shadow:none}
}

/* ============================================================ LOG */
.log{max-width:820px;margin:0 auto;font-family:var(--mono);font-size:12px;line-height:1.6;border:1px solid rgba(0,224,255,.15);background:rgba(0,224,255,.02);border-radius:2px;padding:16px 18px;max-height:420px;overflow-y:auto}
.log-empty{color:var(--muted);text-align:center;padding:24px}
.log-row{display:grid;grid-template-columns:80px 70px 1fr;gap:10px;padding:4px 0;border-bottom:1px dashed rgba(255,255,255,.05)}
.log-row:last-child{border-bottom:none}
.log-t{color:var(--muted)}
.log-kind{letter-spacing:.1em;text-transform:uppercase;font-size:10px;padding-top:2px}
.log-kind.unlock{color:var(--neon-cyan)}
.log-kind.dormant{color:var(--neon-yel)}
.log-kind.admin{color:var(--muted)}
.log-msg{color:var(--fg)}

/* ============================================================ HOW */
.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,46,136,.12);border:1px solid rgba(255,46,136,.12)}
.how-step{background:var(--bg);padding:28px 24px}
.how-num{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--neon-mag);margin-bottom:16px}
.how-step h3{font-size:18px;font-weight:700;margin-bottom:6px;letter-spacing:-.01em}
.how-step p{font-size:13px;line-height:1.6;color:var(--muted)}
@media (max-width:900px){.how-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:500px){.how-grid{grid-template-columns:1fr}}

/* ============================================================ FOOTER */
footer{max-width:1240px;margin:0 auto;padding:40px 24px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--muted);text-align:center;letter-spacing:.1em;text-transform:uppercase}
footer a:hover{color:var(--fg)}

/* ============================================================ ADMIN (unchanged from before) */
.admin-wrap{max-width:900px;margin:0 auto;padding:24px}
.admin-wrap h1{font-size:28px;font-weight:800;margin-bottom:8px}
.admin-wrap .lede{font-size:14px;margin-bottom:24px}
.admin-row{display:grid;grid-template-columns:160px 1fr;gap:14px;align-items:center;margin-bottom:10px}
.admin-row label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.admin-row input,.admin-row textarea{font-family:var(--mono);font-size:13px;padding:10px 12px;background:var(--card);border:1px solid var(--line);color:var(--fg);border-radius:2px;width:100%}
.admin-row input:focus,.admin-row textarea:focus{outline:none;border-color:var(--neon-mag)}
.tenant-editor{margin-top:24px;border:1px solid var(--line);background:var(--card);border-radius:2px}
.tenant-hd,.tenant-row{display:grid;grid-template-columns:50px 1.4fr 2fr 130px;gap:10px;padding:10px 14px;align-items:center;border-bottom:1px solid var(--line)}
.tenant-hd{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:rgba(0,0,0,.25)}
.tenant-row:last-child{border-bottom:none}
.tenant-row input{font-family:var(--mono);font-size:12px;padding:8px 10px;background:transparent;border:1px solid var(--line);color:var(--fg);border-radius:2px;width:100%}
.tenant-row input:focus{outline:none;border-color:var(--neon-cyan)}
.admin-msg{margin-top:16px;font-family:var(--mono);font-size:12px;color:var(--muted);min-height:20px}
.admin-msg.ok{color:var(--accent)}
.admin-msg.err{color:var(--danger)}