/* ============================================================
   COBOL RPG — INTRO CUTSCENE ("why you're here")
   Shown after SELECT YOUR ROLE, before the payroll hub. Green
   phosphor incident-archive aesthetic, typewriter narration.
   Scoped under #cobolStory / .cst-.
   ============================================================ */
#cobolStory{
  position: fixed; inset: 0; z-index: 9400;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; padding: 6vh 24px; box-sizing: border-box; overflow: hidden;
  background:
    radial-gradient(ellipse 130% 100% at 50% 40%, #0a3f20 0%, #06301a 34%, #041f10 64%, #010805 100%);
  color: #b8ffcf; text-align: center;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  animation: cstIn .35s ease;
}
#cobolStory.cst-out{ animation: cstOut .5s ease forwards; }
@keyframes cstIn{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes cstOut{ from{ opacity: 1; } to{ opacity: 0; } }

.cst-head{
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 14px;
  font-size: 12px; letter-spacing: 3px; color: #2b9e52;
}
.cst-head .cst-dot{ width: 9px; height: 9px; border-radius: 50%; background: #2ee465;
  box-shadow: 0 0 10px #2ee465; animation: cstBlink 1.1s steps(2) infinite; }
@keyframes cstBlink{ 50%{ opacity: .25; } }

.cst-frame{
  position: relative; z-index: 3;
  width: min(760px, 92vw); min-height: 260px;
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
  padding: 30px 34px; box-sizing: border-box;
  border: 1px solid #1d7a38; border-radius: 6px;
  background: rgba(2, 18, 8, .55);
  box-shadow: 0 0 26px rgba(46,228,101,.12), inset 0 0 40px rgba(46,228,101,.05);
}
.cst-title{
  font-size: clamp(15px, 2.3vw, 20px); font-weight: 700; letter-spacing: 3px;
  color: #eafff0; text-shadow: 0 0 12px rgba(46,228,101,.6);
}
.cst-body{
  font-size: clamp(14px, 1.9vw, 17px); line-height: 1.85; letter-spacing: .4px;
  color: #b8ffcf; text-shadow: 0 0 6px rgba(46,228,101,.35);
  min-height: 6.5em; white-space: pre-wrap;
}
.cst-body b{ color: #eafff0; font-weight: 400; }
.cst-body .cst-warn{ color: #ffd36b; text-shadow: 0 0 8px rgba(255,180,60,.5); }
.cst-caret{ display: inline-block; width: .6ch; background: #2ee465; animation: cstBlink .9s steps(2) infinite; }

.cst-foot{
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 26px; font-size: 12px; letter-spacing: 1px; color: #2b6e3e;
}
.cst-prompt{ color: #b8ffcf; }
.cst-prompt.cst-dim{ opacity: .35; }
.cst-skip{
  background: transparent; border: 1px solid #1d7a38; color: #2b9e52;
  font: inherit; font-size: 11px; letter-spacing: 1px; padding: 5px 12px;
  border-radius: 4px; cursor: pointer;
}
.cst-skip:hover{ color: #b8ffcf; border-color: #2ee465; }
.cst-dots{ display: flex; gap: 6px; }
.cst-dots i{ width: 7px; height: 7px; border-radius: 50%; background: #123c22; }
.cst-dots i.on{ background: #2ee465; box-shadow: 0 0 8px #2ee465; }

@media (max-width: 640px){
  .cst-frame{ padding: 22px 18px; }
  .cst-foot{ gap: 14px; flex-wrap: wrap; justify-content: center; }
}

/* ============================================================
   DOS / WINDOWS 95 BOOT THEME  (#cobolStory.cst-dos)
   The mainframe→Windows bridge is a machine booting, not a green
   COBOL screen: black background, monochrome light-gray text,
   left-aligned command-prompt titles, square edges, white caret.
   ============================================================ */
#cobolStory.cst-dos{
  background: #000;
  color: #c9c9c9;
  text-align: left;
}
#cobolStory.cst-dos .cst-head{
  color: #8a8a8a; letter-spacing: 2px;
  align-self: center; width: min(760px, 92vw);
}
#cobolStory.cst-dos .cst-head .cst-dot{
  background: #c9c9c9; box-shadow: none; border-radius: 0;
  width: 8px; height: 14px;                      /* blinking block cursor */
}
#cobolStory.cst-dos .cst-frame{
  border: 1px solid #333; border-radius: 0;
  background: #050505; box-shadow: none;
  align-items: flex-start; text-align: left;
}
#cobolStory.cst-dos .cst-title{
  color: #fff; text-shadow: none; letter-spacing: 1px; font-weight: 700;
}
#cobolStory.cst-dos .cst-body{
  color: #c9c9c9; text-shadow: none; text-align: left;
}
#cobolStory.cst-dos .cst-body b{ color: #fff; font-weight: 700; }
#cobolStory.cst-dos .cst-caret{ background: #c9c9c9; }
#cobolStory.cst-dos .cst-foot{
  color: #6a6a6a; align-self: center; width: min(760px, 92vw);
}
#cobolStory.cst-dos .cst-prompt{ color: #c9c9c9; }
#cobolStory.cst-dos .cst-skip{
  border: 1px solid #333; color: #9a9a9a; border-radius: 0;
}
#cobolStory.cst-dos .cst-skip:hover{ color: #fff; border-color: #8a8a8a; }
#cobolStory.cst-dos .cst-dots i{ background: #2a2a2a; border-radius: 0; }
#cobolStory.cst-dos .cst-dots i.on{ background: #c9c9c9; box-shadow: none; }

/* Modern Mac command-desk story: the exact same player and pacing, shifted
   into the blue glass language of the live Apple workspace that follows it. */
#cobolStory.cst-mac{
  background:
    radial-gradient(ellipse 90% 80% at 72% 18%, rgba(35,122,255,.26), transparent 58%),
    radial-gradient(ellipse 80% 85% at 18% 88%, rgba(36,216,255,.11), transparent 64%),
    #030912;
  color:#c8dcf5;
}
#cobolStory.cst-mac .cst-head{color:#5b97d9}
#cobolStory.cst-mac .cst-head .cst-dot{background:#3c8cff;box-shadow:0 0 13px #3c8cff}
#cobolStory.cst-mac .cst-frame{border-color:#285f9d;background:rgba(5,16,31,.72);box-shadow:0 0 36px rgba(47,126,255,.14),inset 0 0 44px rgba(28,103,210,.06)}
#cobolStory.cst-mac .cst-title{color:#f3f8ff;text-shadow:0 0 14px rgba(67,147,255,.48)}
#cobolStory.cst-mac .cst-body{color:#c8dcf5;text-shadow:0 0 7px rgba(67,147,255,.25)}
#cobolStory.cst-mac .cst-body b{color:#fff}
#cobolStory.cst-mac .cst-caret{background:#45a0ff}
#cobolStory.cst-mac .cst-prompt{color:#b9d8ff}
#cobolStory.cst-mac .cst-skip{border-color:#285f9d;color:#6da4df}
#cobolStory.cst-mac .cst-skip:hover{border-color:#45a0ff;color:#eef7ff}
#cobolStory.cst-mac .cst-dots i{background:#102946}
#cobolStory.cst-mac .cst-dots i.on{background:#45a0ff;box-shadow:0 0 9px #45a0ff}

/* GhostBridge story: violet transport energy with cyan proof signals. */
#cobolStory.cst-ghost{
  background:
    linear-gradient(rgba(141,76,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(141,76,255,.035) 1px,transparent 1px),
    radial-gradient(ellipse 105% 90% at 50% 48%,#24123d 0%,#0d0920 54%,#03020a 100%);
  background-size:42px 42px,42px 42px,auto;
  color:#ded2ff;
}
#cobolStory.cst-ghost .cst-head{color:#9c72e8}
#cobolStory.cst-ghost .cst-head .cst-dot{background:#c15cff;box-shadow:0 0 14px #c15cff}
#cobolStory.cst-ghost .cst-frame{border-color:#7341aa;background:rgba(13,6,27,.72);box-shadow:0 0 38px rgba(190,77,255,.14),inset 0 0 44px rgba(79,206,255,.04)}
#cobolStory.cst-ghost .cst-title{color:#fff;text-shadow:0 0 14px rgba(190,77,255,.5)}
#cobolStory.cst-ghost .cst-body{color:#ded2ff;text-shadow:0 0 7px rgba(190,77,255,.25)}
#cobolStory.cst-ghost .cst-body b{color:#78e7ff}
#cobolStory.cst-ghost .cst-caret{background:#c15cff}
#cobolStory.cst-ghost .cst-prompt{color:#e2ccff}
#cobolStory.cst-ghost .cst-skip{border-color:#7341aa;color:#a57cda}
#cobolStory.cst-ghost .cst-skip:hover{border-color:#c15cff;color:#fff}
#cobolStory.cst-ghost .cst-dots i{background:#2e1746}
#cobolStory.cst-ghost .cst-dots i.on{background:#c15cff;box-shadow:0 0 9px #c15cff}

/* Mainframe cinematic between the archive story and the playable room. */
#cobolIntroVideo{
  position:fixed;z-index:10020;inset:0;display:grid;place-items:center;overflow:hidden;
  background:#000;opacity:1;transition:opacity .42s ease;
}
#cobolIntroVideo.civ-out{opacity:0;pointer-events:none}
#cobolIntroVideo video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
.civ-chrome{position:absolute;z-index:2;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;padding:18px 22px;background:linear-gradient(180deg,rgba(0,0,0,.82),transparent);font:10px 'JetBrains Mono',monospace;letter-spacing:.16em;color:rgba(184,255,207,.64);pointer-events:none}
.civ-chrome button{pointer-events:auto;padding:7px 11px;border:1px solid rgba(46,228,101,.38);border-radius:4px;background:rgba(0,12,4,.58);color:#b8ffcf;font:9px 'JetBrains Mono',monospace;letter-spacing:.1em;cursor:pointer}
.civ-play{position:absolute;z-index:3;display:none;padding:14px 20px;border:1px solid #2ee465;border-radius:5px;background:rgba(0,12,4,.88);box-shadow:0 0 34px rgba(46,228,101,.22);color:#eafff0;font:700 12px 'JetBrains Mono',monospace;letter-spacing:.13em;cursor:pointer}
#cobolIntroVideo.awaiting-play .civ-play{display:block}
#cobolIntroVideo.awaiting-play video{opacity:.36}