/* ==========================================================================
   Chip Vortex — Interactive Simulators page (page-simulators.php)
   Loaded only on the /simulators/ page. Namespaced with "sim-" so nothing
   here can leak into or clash with the rest of the theme.

   The simulator cards themselves reuse the site's existing article-grid
   classes (.post-grid / .pcard / .poster-art / .tag from style.css) so this
   page feels native — everything here is just the hero/livebar chrome
   around that grid, plus the empty state for a brand-new install.
   ========================================================================== */

.sim-accent{ --simc:#00FF9C; }

/* ---- Hero ---- */
.sim-hero .hero-tag{background:rgba(0,255,156,.08);border-color:rgba(0,255,156,.32);color:var(--simc)}
.sim-hero .hero-tag::before{background:var(--simc)}
.sim-hero h1 .s{color:var(--green)}
.sim-hero-glow{position:absolute;top:-10%;right:-6%;width:46%;height:120%;background:radial-gradient(circle,rgba(0,255,156,.16),transparent 65%);filter:blur(30px);pointer-events:none}

.sim-console{position:relative;z-index:1;width:100%;max-width:380px;margin:0 auto;border:1px solid var(--line2);border-radius:14px;background:linear-gradient(150deg,var(--bg2),#0F1626);padding:1.4rem 1.5rem;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.sim-console-top{display:flex;align-items:center;gap:.5rem;margin-bottom:1.1rem;font-family:var(--display);font-size:.7rem;letter-spacing:2px;color:var(--simc);text-transform:uppercase}
.sim-console-top .dot{width:8px;height:8px;border-radius:50%;background:var(--simc);animation:pulse 1.6s infinite;display:inline-block}
.sim-console-rows{display:grid;gap:.35rem}
.sim-console-row{display:flex;justify-content:space-between;font-size:.62rem;color:var(--muted3);text-transform:uppercase;letter-spacing:1px}
.sim-console-row b{color:var(--cyan);font-weight:700}

/* ---- Live stat strip ---- */
.sim-livebar{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;max-width:var(--maxw);margin:0 auto;padding:0 1.5rem 1.5rem}
.sim-livepill{display:flex;align-items:center;gap:.5rem;background:var(--bg2);border:1px solid var(--line2);border-radius:999px;padding:.5rem 1rem;font-size:.72rem;letter-spacing:.5px;color:var(--muted2)}
.sim-livepill b{color:var(--simc);font-family:var(--display);font-weight:700}
.sim-livepill .dot{width:6px;height:6px;border-radius:50%;background:var(--simc);animation:pulse 1.6s infinite;display:inline-block}

/* ---- Card grid ---- */
.sim-stage{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:1rem 1.5rem 4.5rem}
.sim-grid{max-width:1200px;margin:0 auto}

/* Simulator cards reuse .pcard exactly; this only adds the "Launch"
   call-to-action row and a slightly livelier hover than a plain article. */
.sim-pcard .meta.sim-play{margin-top:auto;padding-top:.6rem}
.sim-pcard .meta.sim-play span{display:inline-flex;align-items:center;gap:.4rem;font-size:.7rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--accent,var(--cyan))}
.sim-pcard:hover{box-shadow:0 16px 34px -18px rgba(0,0,0,.6)}
.sim-pcard:hover .poster-icon{transform:scale(1.08)}
.poster-icon{transition:transform .2s ease}

/* Reusable mini progress bar (hero console preview only) */
.sim-bar{height:5px;background:#0a1020;border-radius:3px;margin:.25rem 0 .55rem;overflow:hidden}
.sim-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--simc));width:0%}

/* ---- Empty state (no simulators added yet) ---- */
.sim-empty{position:relative;z-index:1;text-align:center;max-width:460px;margin:2rem auto;border:1px dashed var(--line2);border-radius:14px;padding:3rem 2rem;background:var(--bg2)}
.sim-empty-ic{font-size:2.6rem;margin-bottom:1rem}
.sim-empty h2{font-family:var(--display);font-size:1.15rem;color:var(--text);margin-bottom:.6rem}
.sim-empty p{color:var(--muted2);font-size:.9rem;line-height:1.6;margin-bottom:1.4rem}
.sim-empty-hint{font-size:.76rem;color:var(--muted3);margin-top:1rem;margin-bottom:0}

/* ==========================================================================
   Single simulator page (single-cv_simulator.php) — the branded wrapper
   that every card on /simulators/ links to. Reuses .pagepad/.reader/
   .back-link/.crumbs/.tag from style.css (the same shell as an article).
   ========================================================================== */
.sim-single-pad{padding-bottom:2rem}
.sim-single-head{display:flex;align-items:flex-start;gap:1.1rem;margin:.4rem 0 1.6rem}
.sim-single-icon{flex:none;font-size:2.6rem;line-height:1;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}
.sim-single-head h1{margin:.5rem 0 .5rem;font-size:1.7rem}
.sim-single-desc{color:var(--muted2);font-size:.95rem;line-height:1.65;max-width:640px}

.sim-single-frame-wrap{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#0a0f1c repeating-linear-gradient(135deg,rgba(0,212,255,.04) 0 12px,transparent 12px 24px);box-shadow:0 30px 60px -34px rgba(0,0,0,.7)}
.sim-single-frame-wrap iframe{display:block;width:100%;border:0;background:#0A0E1A;height:clamp(480px,78vh,880px)}

.sim-frame-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;margin-top:.9rem;font-size:.8rem}
.sim-frame-foot a{color:var(--cyan);font-weight:600;border-bottom:1px dashed rgba(0,212,255,.4)}
.sim-frame-foot a:hover{color:var(--simc);border-color:rgba(0,255,156,.5)}
.sim-frame-foot .sim-edit-link{color:var(--muted3);border-bottom:1px dashed var(--line2)}
.sim-frame-foot .sim-edit-link:hover{color:var(--muted2)}

@media(max-width:640px){
  .sim-single-head{flex-direction:column;gap:.6rem}
}