:root{
  --green:#39ff14;
  --green-dim:#2bbf10;
  --amber:#ffb300;
  --red:#ff2a2a;
  --cyan:#00e6ff;
  --bg:#03080a;
  --panel:rgba(10,20,26,.72);
  --panel-solid:#0a141a;
  --line:rgba(57,255,20,.22);
  --line-strong:rgba(57,255,20,.5);
  --text:#d7e6dc;
  --muted:#7d99a0;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{min-height:100%;background:#000;color:var(--text);
  font-family:'Segoe UI','Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;}
body{
  min-height:100vh;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(0,90,60,.20), transparent 60%),
    radial-gradient(900px 500px at 90% 110%, rgba(0,60,120,.18), transparent 55%),
    linear-gradient(180deg,#03080a 0%, #010405 100%);
}
/* scanlines + fine grid, very subtle */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.16) 3px,rgba(0,0,0,0) 4px);}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(rgba(57,255,20,.02) 1px,transparent 1px),
             linear-gradient(90deg,rgba(57,255,20,.02) 1px,transparent 1px);
  background-size:40px 40px;mask-image:radial-gradient(circle at 50% 30%,#000,transparent 80%);}
.wrap{position:relative;z-index:2;max-width:1000px;margin:0 auto;padding:5vh 22px 70px;}

/* headings */
.brand{letter-spacing:.42em;color:var(--amber);font-size:12px;text-transform:uppercase;font-weight:600;
  text-shadow:0 0 14px rgba(255,179,0,.45);}
h1{color:#f2fff6;font-size:clamp(28px,5vw,48px);letter-spacing:.04em;margin:.15em 0 .12em;font-weight:800;
  text-shadow:0 0 26px rgba(57,255,20,.28);}
.sub{color:var(--green);opacity:.82;letter-spacing:.28em;font-size:12.5px;text-transform:uppercase;}

/* panels: glass with a top accent line */
.panel{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:24px;margin-top:22px;backdrop-filter:blur(6px);
  box-shadow:0 10px 40px rgba(0,0,0,.55), inset 0 0 60px rgba(0,20,10,.25);}
.panel::before{content:"";position:absolute;left:16px;right:16px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-strong),transparent);}
.panel h2{color:var(--amber);letter-spacing:.24em;font-size:14px;text-transform:uppercase;font-weight:700;
  border-bottom:1px solid rgba(255,179,0,.28);padding-bottom:11px;margin-bottom:16px;display:flex;align-items:center;gap:8px;}

label{display:block;color:var(--green);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;margin:16px 0 6px;font-weight:600;}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  width:100%;background:#04100b;border:1px solid var(--line);color:var(--text);
  font-family:inherit;font-size:16px;padding:12px 14px;border-radius:6px;letter-spacing:.03em;transition:all .15s;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(57,255,20,.14),0 0 16px rgba(57,255,20,.2);}
select{cursor:pointer;}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(180deg,rgba(57,255,20,.08),rgba(57,255,20,.02));
  border:1px solid var(--green);color:var(--green);font-family:inherit;font-size:13.5px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;padding:12px 22px;border-radius:6px;cursor:pointer;transition:all .15s;margin-top:18px;}
.btn:hover:not(:disabled){background:var(--green);color:#021;box-shadow:0 0 22px rgba(57,255,20,.5);transform:translateY(-1px);}
.btn:disabled{opacity:.35;cursor:not-allowed;}
.btn.ghost{border-color:var(--amber);color:var(--amber);background:linear-gradient(180deg,rgba(255,179,0,.08),rgba(255,179,0,.02));}
.btn.ghost:hover:not(:disabled){background:var(--amber);color:#210;box-shadow:0 0 22px rgba(255,179,0,.5);}
.btn.danger{border-color:var(--red);color:var(--red);background:linear-gradient(180deg,rgba(255,42,42,.08),rgba(255,42,42,.02));}
.btn.danger:hover:not(:disabled){background:var(--red);color:#210;box-shadow:0 0 22px rgba(255,42,42,.5);}

.msg{margin-top:14px;font-size:13px;letter-spacing:.03em;min-height:18px;}
.msg.err{color:var(--red);text-shadow:0 0 8px rgba(255,42,42,.4);}
.msg.ok{color:var(--green);}
.hidden{display:none !important;}

/* header row (team / clock) */
.teamhead{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:14px;}
.teamhead .slot{color:var(--amber);letter-spacing:.2em;font-size:12.5px;margin-top:3px;}
.presence{color:var(--green);font-size:12px;letter-spacing:.14em;opacity:.9;}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 10px var(--green);margin-right:6px;vertical-align:middle;animation:pulse 2s infinite;}
@keyframes pulse{50%{opacity:.4}}

.name-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;}
.name-row input{flex:1;min-width:200px;}
.name-row .btn{margin-top:0;}

/* roles grid */
.roles{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px;margin-top:8px;}
.role{position:relative;border:1px solid var(--line);border-radius:9px;padding:16px 16px 18px;background:#04100b;
  transition:all .15s;overflow:hidden;}
.role::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(57,255,20,.06),transparent 60%);opacity:0;transition:opacity .15s;}
.role .rname{color:#eafff0;font-size:16px;font-weight:700;letter-spacing:.02em;}
.role .rmod{color:var(--amber);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;margin-top:3px;}
.role .rstatus{margin-top:12px;font-size:13px;letter-spacing:.03em;}
.role.free{cursor:pointer;}
.role.free:hover{border-color:var(--green);box-shadow:0 0 18px rgba(57,255,20,.28);transform:translateY(-2px);}
.role.free:hover::after{opacity:1;}
.role.taken{opacity:.9;border-color:rgba(255,179,0,.4);}
.role.mine{border-color:var(--green);box-shadow:0 0 20px rgba(57,255,20,.4);}
.role .lock{position:absolute;top:14px;right:15px;font-size:15px;}
.role .taker{color:var(--green);}

/* member list */
.members{list-style:none;margin-top:10px;}
.members li{padding:9px 0;border-bottom:1px dashed rgba(57,255,20,.13);display:flex;justify-content:space-between;gap:10px;}
.members .who{color:var(--text);}
.members .whorole{color:var(--amber);font-size:12px;letter-spacing:.09em;}
.members .online{color:var(--green);}
.members .offline{color:#48606a;}

.footer{margin-top:26px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.small{color:var(--muted);font-size:11.5px;letter-spacing:.06em;}
a.link{color:var(--amber);text-decoration:none;border-bottom:1px dotted var(--amber);}
a.link:hover{color:#ffd166;}

/* tables */
table{width:100%;border-collapse:collapse;margin-top:10px;font-size:13px;}
th,td{text-align:left;padding:9px 11px;border-bottom:1px solid rgba(57,255,20,.13);}
th{color:var(--amber);letter-spacing:.11em;text-transform:uppercase;font-size:10.5px;}
tbody tr:hover{background:rgba(57,255,20,.04);}

/* clock display */
.clock-big{font-size:clamp(28px,6vw,56px);font-weight:800;letter-spacing:.08em;color:var(--green);
  text-shadow:0 0 22px rgba(57,255,20,.5);font-variant-numeric:tabular-nums;}
.clock-big.warn{color:var(--red);text-shadow:0 0 22px rgba(255,42,42,.55);}

/* phase chips */
.phasebar{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;}
.phasebar .chip{flex:1;min-width:96px;text-align:center;padding:10px 6px;border:1px solid var(--line);
  border-radius:7px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8fdca0;background:#04100b;
  cursor:pointer;transition:all .15s;}
.phasebar .chip:hover{border-color:var(--line-strong);}
.phasebar .chip.active{border-color:var(--green);color:var(--green);box-shadow:0 0 14px rgba(57,255,20,.35);}
.phasebar .chip.done{border-color:var(--amber);color:var(--amber);}
.phasebar .chip .tick{color:var(--amber);}

/* leaderboard */
.lb{list-style:none;counter-reset:rank;}
.lb li{display:flex;align-items:center;gap:14px;padding:12px 14px;margin:8px 0;border:1px solid var(--line);
  border-radius:8px;background:#04100b;}
.lb li .rank{font-size:20px;font-weight:800;color:var(--amber);min-width:34px;text-align:center;}
.lb li.top1{border-color:var(--amber);box-shadow:0 0 18px rgba(255,179,0,.28);}
.lb li.top1 .rank{color:#ffd166;}
.lb li.mine-lb{border-color:var(--green);box-shadow:0 0 16px rgba(57,255,20,.3);}
.lb li .lbname{flex:1;color:#eafff0;font-weight:600;}
.lb li .lbscore{color:var(--green);font-weight:700;font-variant-numeric:tabular-nums;}
.lb li .lbband{color:var(--muted);font-size:11px;letter-spacing:.1em;text-transform:uppercase;}

/* at-a-glance monitoring grid */
.glance-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:10px;}
.gcard{border:1px solid var(--line);border-radius:9px;padding:14px;background:#04100b;cursor:pointer;transition:all .15s;position:relative;}
.gcard:hover{border-color:var(--green);box-shadow:0 0 16px rgba(57,255,20,.25);transform:translateY(-2px);}
.gcard .gtop{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.gcard .gname{color:#eafff0;font-weight:700;font-size:15px;}
.gcard .gonline{font-size:11px;letter-spacing:.08em;color:var(--muted);}
.gcard .gonline.live{color:var(--green);}
.gcard .gphase{margin-top:8px;color:var(--amber);font-size:12px;letter-spacing:.08em;text-transform:uppercase;}
.gcard .gstatus{margin-top:8px;font-size:12px;letter-spacing:.06em;display:flex;align-items:center;gap:7px;font-weight:600;}
.gcard .gstatus .stdot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
.gcard .gstatus.st-off{color:#6b7f86;}
.gcard .gstatus.st-off .stdot{background:#48606a;}
.gcard .gstatus.st-wait{color:var(--amber);}
.gcard .gstatus.st-wait .stdot{background:var(--amber);box-shadow:0 0 8px rgba(255,179,0,.6);}
.gcard .gstatus.st-live{color:var(--green);}
.gcard .gstatus.st-live .stdot{background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 2s infinite;}
.gcard .gstatus.st-done{color:var(--cyan);}
.gcard .gstatus.st-done .stdot{background:var(--cyan);box-shadow:0 0 8px var(--cyan);}
.gcard .gbar{height:7px;border-radius:4px;background:rgba(255,255,255,.08);margin-top:8px;overflow:hidden;}
.gcard .gbar > i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--cyan));}
.gcard .grow{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:var(--text);}
.gcard .gscore{color:var(--green);font-weight:700;font-variant-numeric:tabular-nums;}
.gcard .gband{color:var(--muted);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;}
.gcard .gchat{margin-top:9px;padding-top:8px;border-top:1px dashed rgba(57,255,20,.13);font-size:11.5px;color:var(--muted);}
.gcard .gchat b{color:var(--cyan);}
.gcard .gchat-title{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin-bottom:4px;}
.gcard .gchat-line{line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gcard.idle{opacity:.6;}
.gcard .gclock{position:absolute;top:12px;right:14px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;}

/* team chat */
.chat-log{height:280px;overflow-y:auto;border:1px solid var(--line);border-radius:8px;padding:12px;
  background:#04100b;margin-bottom:12px;display:flex;flex-direction:column;gap:8px;}
.chat-msg{padding:8px 11px;border-radius:7px;background:rgba(57,255,20,.05);border:1px solid rgba(57,255,20,.12);}
.chat-msg .meta{font-size:11px;letter-spacing:.06em;color:var(--amber);margin-bottom:3px;}
.chat-msg .meta .who{color:var(--green);font-weight:700;}
/* Inline role tag inside a chat line. Reset the big .role CARD styling (border,
   padding, background, radius) that would otherwise apply, so it stays small. */
.chat-msg .meta .role{display:inline;position:static;border:0;background:none;box-shadow:none;
  padding:0;margin:0 0 0 4px;border-radius:0;font-size:11px;font-weight:400;letter-spacing:.06em;
  color:var(--muted);text-transform:none;transform:none;}
.chat-msg .meta .role::after{content:none;}
.chat-msg .meta .time{color:var(--muted);float:right;}
.chat-msg.mine{background:rgba(0,230,255,.06);border-color:rgba(0,230,255,.2);}
.chat-msg.mine .meta .who{color:var(--cyan);}
.chat-body{color:var(--text);font-size:14px;word-wrap:break-word;}
.chat-empty{color:var(--muted);font-size:12px;text-align:center;padding:20px;}
.chat-input-row{display:flex;gap:10px;}
.chat-input-row input{flex:1;}

/* countdown-to-next-phase banner */
.nextphase{margin-top:16px;border:1px solid rgba(255,179,0,.45);border-radius:9px;padding:16px;background:#0a0800;
  text-align:center;}
.nextphase .lbl{color:var(--amber);letter-spacing:.2em;text-transform:uppercase;font-size:11px;}
.nextphase .cd{font-size:clamp(24px,5vw,42px);font-weight:800;color:var(--amber);letter-spacing:.08em;
  text-shadow:0 0 18px rgba(255,179,0,.45);font-variant-numeric:tabular-nums;margin-top:4px;}
.nextphase .nm{color:var(--text);font-size:13px;margin-top:4px;}

/* ===== Facilitator always-visible left control rail ===================== */
/* The rail is fixed to the left edge and stays visible no matter which panel
   the facilitator has open. The dashboard content is pushed right to clear it. */
.ctrl-rail{position:fixed;top:0;left:0;bottom:0;width:236px;z-index:40;
  background:linear-gradient(180deg,#04120c,#020a07);border-right:1px solid var(--line-strong);
  box-shadow:4px 0 26px rgba(0,0,0,.5);padding:18px 16px 22px;overflow-y:auto;
  display:flex;flex-direction:column;gap:14px;}
.ctrl-rail .rail-brand{letter-spacing:.34em;color:var(--amber);font-size:11px;text-transform:uppercase;
  font-weight:700;text-shadow:0 0 14px rgba(255,179,0,.45);text-align:center;}
.ctrl-rail .rail-clock{font-size:44px;font-weight:800;color:var(--green);letter-spacing:.04em;
  font-variant-numeric:tabular-nums;text-align:center;text-shadow:0 0 20px rgba(57,255,20,.4);line-height:1;}
.ctrl-rail .rail-clock.warn{color:var(--amber);text-shadow:0 0 20px rgba(255,179,0,.5);}
.ctrl-rail .rail-clock.paused{color:var(--muted);text-shadow:none;}
.ctrl-rail .rail-clock-state{text-align:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-top:-6px;}
.ctrl-rail .rail-group{display:flex;flex-direction:column;gap:8px;padding-top:6px;
  border-top:1px dashed rgba(57,255,20,.16);}
.ctrl-rail .rail-label{color:var(--green);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;opacity:.85;}
.ctrl-rail .btn{margin:0;width:100%;padding:11px 10px;font-size:12px;}
.ctrl-rail .rail-stat{color:#eafff0;font-size:13px;letter-spacing:.04em;}
.ctrl-rail .rail-msg{min-height:16px;font-size:11px;letter-spacing:.05em;}
.ctrl-rail .rail-msg.ok{color:var(--green);}
.ctrl-rail .rail-msg.err{color:var(--red);}
.ctrl-rail .rail-note{margin-top:auto;color:var(--muted);font-size:10.5px;line-height:1.5;letter-spacing:.03em;
  border-top:1px dashed rgba(57,255,20,.16);padding-top:12px;}

/* Push the dashboard content right so the rail never overlaps it. */
/* When the facilitator dashboard is open, the whole content column is pushed
   right so it clears the fixed left rail. The page header ("Mission Control")
   and the panels below all sit in this cleared, centered content area rather
   than hiding behind the rail. Login stays centered (this class isn't applied). */
.wrap.admin-mode{max-width:none;margin:0;padding:24px 40px 70px 276px;}
/* content already cleared by the wrap padding; no extra offset on admin-main */
.admin-main{padding-left:0;max-width:1040px;margin:0 auto;}
/* center the dashboard header within the cleared content area too */
.wrap.admin-mode > .brand,
.wrap.admin-mode > h1,
.wrap.admin-mode > .sub{text-align:center;max-width:1040px;margin-left:auto;margin-right:auto;}

/* Narrow screens: the rail becomes a horizontal top strip and content flows below. */
@media (max-width:820px){
  .ctrl-rail{position:relative;top:auto;left:auto;bottom:auto;width:auto;flex-direction:row;
    flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px;border-right:none;
    border-bottom:1px solid var(--line-strong);box-shadow:none;}
  .ctrl-rail .rail-brand{width:100%;}
  .ctrl-rail .rail-clock{font-size:30px;}
  .ctrl-rail .rail-clock-state{margin-top:0;}
  .ctrl-rail .rail-group{border-top:none;padding-top:0;flex-direction:row;flex-wrap:wrap;align-items:center;}
  .ctrl-rail .rail-label{width:100%;}
  .ctrl-rail .btn{width:auto;}
  .ctrl-rail .rail-note{display:none;}
  .admin-main{padding-left:0;}
  .wrap.admin-mode{padding:16px 16px 60px;}
}

/* ===== Game Setup panel + session code ================================== */
.setup-current{border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin:12px 0 16px;
  background:#04100b;display:flex;flex-direction:column;gap:8px;}
.setup-current .sc-row{display:flex;justify-content:space-between;align-items:center;gap:12px;}
.setup-current .sc-lbl{color:var(--green);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;}
.setup-current .sc-val{color:#eafff0;font-size:15px;letter-spacing:.04em;}
.setup-current .sc-code{color:var(--amber);font-size:26px;font-weight:800;letter-spacing:.28em;
  font-variant-numeric:tabular-nums;text-shadow:0 0 16px rgba(255,179,0,.4);}

/* Session code block on the left rail. */
.ctrl-rail .rail-session{text-align:center;padding-bottom:6px;border-bottom:1px dashed rgba(57,255,20,.16);}
.ctrl-rail .rail-code{color:var(--amber);font-size:26px;font-weight:800;letter-spacing:.26em;
  text-shadow:0 0 16px rgba(255,179,0,.45);font-variant-numeric:tabular-nums;line-height:1.1;margin-top:2px;}
@media (max-width:820px){
  .ctrl-rail .rail-session{width:auto;border-bottom:none;}
  .ctrl-rail .rail-code{font-size:20px;}
}

/* ===== Scenario injects ================================================= */
/* Student: live-injects panel (amber accent so it stands apart from phases). */
.inject-panel{border-color:rgba(255,179,0,.5);box-shadow:0 10px 40px rgba(0,0,0,.55),inset 0 0 60px rgba(40,26,0,.35);}
.inject-panel h2{color:var(--amber);border-bottom-color:rgba(255,179,0,.4);}
.inject-panel .team-q{border-color:rgba(255,179,0,.35);}
@keyframes injectFlash{
  0%{box-shadow:0 0 0 0 rgba(255,179,0,.0);}
  20%{box-shadow:0 0 0 4px rgba(255,179,0,.55);}
  100%{box-shadow:0 10px 40px rgba(0,0,0,.55),inset 0 0 60px rgba(40,26,0,.35);}
}
.inject-panel.inject-flash{animation:injectFlash 1.1s ease-out 1;}

/* Inject alert banner: a fixed red flashing strip at the very top of the
   screen so teams immediately know new scenario information has arrived. */
/* In-flow block (not fixed) so it never overlaps the header/testing banner and
   reflows on any screen. It sits at the top of the game content and pushes the
   rest down while it's showing. */
.inject-banner{position:relative;z-index:20;text-align:center;margin:0 0 14px;border-radius:8px;
  background:#2a0000;border:2px solid var(--red);padding:10px 44px 12px;
  box-shadow:0 6px 30px rgba(255,42,42,.35);}
.inject-banner .ib-head{color:var(--red);font-weight:800;letter-spacing:.28em;
  font-size:15px;text-transform:uppercase;text-shadow:0 0 12px rgba(255,42,42,.7);
  animation:injectBlink 1s steps(1) infinite;}
.inject-banner .ib-body{color:#ffd9d9;font-size:13.5px;line-height:1.5;margin-top:4px;
  max-width:900px;margin-left:auto;margin-right:auto;}
.inject-banner .ib-dismiss{position:absolute;top:8px;right:14px;background:transparent;
  border:none;color:#ff9a9a;font-size:22px;line-height:1;cursor:pointer;}
.inject-banner .ib-dismiss:hover{color:#fff;}
@keyframes injectBlink{50%{opacity:.25;}}

/* Facilitator lines in the team chat (broadcasts + injects) stand out. */
.chat-msg.fac{background:rgba(255,42,42,.08);border-color:rgba(255,42,42,.4);}
.chat-msg.fac .who{color:var(--red);font-weight:800;letter-spacing:.06em;}
.chat-msg.fac .chat-body{color:#ffe0e0;}

/* Facilitator: inject bank list. */
.inj-cat{color:var(--green);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  margin:18px 0 8px;border-bottom:1px dashed rgba(57,255,20,.18);padding-bottom:5px;}
.inj-card{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:8px;
  padding:11px 13px;margin:8px 0;background:#04100b;}
.inj-card .inj-main{flex:1;min-width:0;}
.inj-card .inj-prompt{color:#eafff0;font-size:13.5px;line-height:1.35;}
.inj-card .inj-meta{color:var(--muted);font-size:11px;letter-spacing:.04em;margin-top:3px;}
.inj-card .inj-fire{margin:0;padding:8px 14px;font-size:12px;white-space:nowrap;}
.inj-card.fired{border-color:rgba(255,179,0,.4);background:#0a0800;opacity:.8;}
.inj-card .inj-fired{color:var(--amber);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;white-space:nowrap;}

/* Rail inject picker. */
.ctrl-rail #railInjectSelect{font-size:12px;padding:9px 10px;}

/* ===== Ready-to-deploy (lobby) ========================================== */
.deploy-panel{border-color:rgba(57,255,20,.4);}
.deploy-check{list-style:none;margin:10px 0;padding:0;display:flex;flex-direction:column;gap:6px;}
.deploy-check li{font-size:13px;letter-spacing:.03em;padding:7px 11px;border:1px solid var(--line);border-radius:6px;background:#04100b;}
.deploy-check li.ok{color:var(--green);border-color:rgba(57,255,20,.4);}
.deploy-check li.todo{color:var(--muted);}
.deploy-status{margin-top:8px;font-size:13px;}
.deploy-status .dep-ready{color:var(--green);font-weight:700;letter-spacing:.06em;}
#readyBtn{margin-top:0;}

/* ===== Facilitator flash (broadcast) modal ============================== */
.flash-card{max-width:520px;width:100%;background:linear-gradient(180deg,#0a1420,#050b12);
  border:1px solid var(--cyan);border-radius:12px;padding:26px 28px;text-align:center;
  box-shadow:0 20px 70px rgba(0,0,0,.7),0 0 40px rgba(0,230,255,.25);}
.flash-card .flash-head{color:var(--cyan);letter-spacing:.3em;text-transform:uppercase;font-size:12px;font-weight:700;}
.flash-card .flash-body{color:#f2fff6;font-size:18px;line-height:1.5;margin:16px 0;}
.flash-card .flash-countdown{color:var(--amber);font-size:15px;letter-spacing:.1em;margin-bottom:14px;font-variant-numeric:tabular-nums;}
.flash-card .btn{margin:0;}

/* ===== Facilitator roster panel ========================================= */
.roster-tbl{width:100%;border-collapse:collapse;font-size:13px;}
.roster-tbl th,.roster-tbl td{text-align:left;padding:7px 10px;border-bottom:1px solid rgba(57,255,20,.13);}
.roster-tbl th{color:var(--amber);letter-spacing:.1em;text-transform:uppercase;font-size:10.5px;}
.roster-tbl .ros-email{color:var(--muted);font-size:12px;}
.roster-tbl .ros-online{color:var(--green);font-weight:700;}
.roster-tbl .ros-in{color:var(--cyan);}
.roster-tbl .ros-out{color:#6b7f86;}

/* ===== Rail: not-ready teams list ======================================= */
.ctrl-rail .rail-unready{margin-top:6px;font-size:11px;line-height:1.5;}
.ctrl-rail .ru-title{color:var(--amber);font-weight:700;letter-spacing:.04em;margin-bottom:3px;}
.ctrl-rail .ru-team{color:var(--text);}
.ctrl-rail .ru-why{color:var(--muted);}
.ctrl-rail .ru-allready{color:var(--green);font-weight:700;}
.ctrl-rail .ru-acks{color:var(--cyan);margin-top:4px;}
.ctrl-rail #railFlashMsg{font-size:12px;padding:9px 10px;}

/* ===== In-app mission debrief (end screen box) ========================== */
#debriefBox .db-band{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  border:1px solid var(--amber);border-radius:8px;padding:12px 14px;background:#0a0800;color:#eafff0;font-size:15px;}
#debriefBox .db-band .db-lbl{color:var(--green);font-size:10px;letter-spacing:.16em;text-transform:uppercase;}
#debriefBox .db-band .db-rank{color:var(--amber);font-weight:800;}
#debriefBox .db-h{color:var(--amber);letter-spacing:.14em;text-transform:uppercase;font-size:12px;margin:18px 0 8px;
  border-bottom:1px solid rgba(255,179,0,.28);padding-bottom:5px;}
#debriefBox .db-roster{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;}
#debriefBox .db-roster li{display:flex;justify-content:space-between;gap:10px;padding:6px 10px;border:1px solid var(--line);
  border-radius:6px;background:#04100b;font-size:13px;}
#debriefBox .db-roster .db-role{color:var(--amber);}
#debriefBox .db-phase{color:#8fdca0;letter-spacing:.06em;font-size:12px;text-transform:uppercase;margin:12px 0 5px;}
#debriefBox .db-phase .db-prole{color:var(--muted);text-transform:none;}
#debriefBox .db-q{border-left:3px solid var(--line-strong);padding:7px 0 7px 11px;margin:6px 0;background:#04100b;border-radius:0 6px 6px 0;}
#debriefBox .db-q.ok{border-left-color:var(--green);}
#debriefBox .db-q.no{border-left-color:var(--red);}
#debriefBox .db-q.txt{border-left-color:var(--amber);}
#debriefBox .db-q.inject{background:#0a0800;}
#debriefBox .db-q-top{color:#eafff0;font-size:13px;}
#debriefBox .db-v{float:right;font-weight:700;font-size:12px;color:var(--amber);}
#debriefBox .db-q.ok .db-v{color:var(--green);}
#debriefBox .db-q.no .db-v{color:#ff8a8a;}
#debriefBox .db-chosen{font-size:12.5px;color:var(--text);margin-top:4px;}
#debriefBox .db-correct{font-size:11.5px;color:var(--green);margin-top:2px;}
#debriefBox .db-times{font-size:11px;color:var(--amber);margin-top:2px;opacity:.85;}
#debriefBox .db-split{font-size:11px;color:var(--muted);margin-top:2px;}
#debriefBox .db-rubric{display:flex;flex-direction:column;gap:6px;}
#debriefBox .db-rub{display:flex;align-items:center;gap:10px;font-size:12px;}
#debriefBox .db-rub-name{flex:0 0 170px;color:var(--text);}
#debriefBox .db-rub-bar{flex:1;height:9px;background:#0a1a12;border-radius:5px;overflow:hidden;}
#debriefBox .db-rub-bar i{display:block;height:100%;background:var(--green);}
#debriefBox .db-rub-val{flex:0 0 66px;text-align:right;color:var(--green);font-weight:700;}

/* ===== Lobby setup countdown ============================================ */
.lobby-timer{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px;margin-bottom:16px;
  border:1px solid var(--amber);border-radius:9px;padding:12px 16px;background:#0a0800;}
.lobby-timer .lt-label{color:var(--amber);letter-spacing:.2em;text-transform:uppercase;font-size:11px;font-weight:700;}
.lobby-timer .lt-clock{color:var(--amber);font-size:clamp(22px,4vw,34px);font-weight:800;letter-spacing:.08em;
  font-variant-numeric:tabular-nums;text-shadow:0 0 16px rgba(255,179,0,.45);line-height:1;}
.lobby-timer .lt-hint{color:var(--text);font-size:12.5px;letter-spacing:.03em;flex:1;min-width:220px;}
.lobby-timer.up{border-color:var(--red);background:#100404;}
.lobby-timer.up .lt-label,.lobby-timer.up .lt-clock{color:#ff6a6a;text-shadow:none;}
.lobby-timer.warn .lt-clock{color:#ffd166;}

/* Rail: all-teams-ready checkmark indicator. */
.ctrl-rail #railReadyStat{font-size:12px;letter-spacing:.03em;margin-top:2px;}
.ctrl-rail .rr-all{color:var(--green);font-weight:700;}
.ctrl-rail .rr-wait{color:var(--amber);}
.ctrl-rail .rr-none{color:var(--muted);}
.ctrl-rail #railLobbyMins{font-size:12px;padding:8px 8px;}

/* =========================================================================
   STUDENT GAME LAYOUT - mobile-first / responsive.
   Default (phones, tablets, small laptops): everything is a normal in-flow
   panel that stacks vertically and fits ANY width - phase checklist above the
   phase panel, team chat below it. NOTHING is fixed, so nothing is clipped.
   Only on WIDE screens (>=1200px) do the checklist + chat pin as side columns.
   ========================================================================= */

/* Student phase checklist - in-flow panel by default. */
.phase-rail{position:static;width:auto;z-index:auto;margin:0 0 16px;
  background:linear-gradient(180deg,#04120c,#020a07);border:1px solid var(--line);
  border-radius:10px;box-shadow:none;padding:16px 15px;overflow:visible;
  display:flex;flex-direction:column;gap:10px;}
.phase-rail .pr-title{color:var(--amber);letter-spacing:.24em;text-transform:uppercase;font-size:11px;
  font-weight:700;text-align:center;text-shadow:0 0 14px rgba(255,179,0,.4);}
.phase-rail .pr-phase{color:#eafff0;font-size:13px;text-align:center;letter-spacing:.03em;
  border-bottom:1px dashed rgba(57,255,20,.18);padding-bottom:9px;}
.phase-rail .pr-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;}
.phase-rail .pr-item{font-size:12px;line-height:1.4;letter-spacing:.02em;padding:8px 10px;border:1px solid var(--line);
  border-radius:6px;background:#04100b;}
.phase-rail .pr-item.ok{color:var(--green);border-color:rgba(57,255,20,.4);}
.phase-rail .pr-item.todo{color:var(--muted);}
.phase-rail .pr-foot{margin-top:8px;font-size:11.5px;line-height:1.5;border-top:1px dashed rgba(57,255,20,.18);padding-top:10px;}
.phase-rail .pr-ok{color:var(--green);font-weight:700;}
.phase-rail .pr-wait{color:var(--amber);}

/* Team chat - in-flow panel by default (a normal stacked block). */
.chat-dock{position:static;width:auto;z-index:auto;margin:22px 0 0;border-radius:12px;
  border:1px solid var(--line);box-shadow:none;padding:20px;overflow:visible;display:block;
  background:var(--panel);}
.chat-dock h2{font-size:15px;margin-bottom:4px;}
.chat-dock .small{margin-bottom:10px;}
.chat-dock .chat-log{height:280px;margin-bottom:10px;}

/* The game wrap: a comfortable centred column on phone/tablet/laptop. */
.wrap.game-wrap{max-width:1000px;margin:0 auto;padding-left:18px;padding-right:18px;}

/* WIDE screens only: pin the chat (left) + checklist (right) as fixed side
   columns and give the centre its own scrollable middle. Below 1200px the
   layout above (stacked, in-flow) applies and always fits. */
@media (min-width:1200px){
  .wrap.game-wrap{max-width:none;margin:0;padding-left:300px;padding-right:280px;}
  .phase-rail{position:fixed;top:0;right:0;bottom:0;width:260px;margin:0;border:none;
    border-left:1px solid var(--line-strong);border-radius:0;
    box-shadow:-4px 0 26px rgba(0,0,0,.5);padding:18px 15px 22px;overflow-y:auto;z-index:40;}
  .phase-rail .pr-foot{margin-top:auto;}
  .chat-dock{position:fixed;top:0;left:0;bottom:0;width:280px;margin:0;border:none;
    border-right:1px solid var(--line-strong);border-radius:0;
    box-shadow:4px 0 26px rgba(0,0,0,.5);padding:18px 15px 18px;overflow:hidden;
    display:flex;flex-direction:column;z-index:40;background:linear-gradient(180deg,#04120c,#020a07);}
  .chat-dock .chat-log{flex:1;height:auto;min-height:0;}
  .chat-dock .chat-input-row{margin-top:auto;}
}

/* ===== Per-teammate ready indicator (lobby) ============================= */
.members li .rdy{font-size:11px;letter-spacing:.08em;white-space:nowrap;}
.members li .rdy.ok{color:var(--green);font-weight:700;}
.members li .rdy.todo{color:#48606a;}
#myReadyBtn.on{border-color:var(--green);color:var(--green);background:rgba(57,255,20,.08);font-weight:700;}

/* ===== Per-role scenario briefing insert (student game page) ============= */
.role-insert{border:1px solid rgba(0,230,255,.4);border-left:3px solid var(--cyan,#00e6ff);
  border-radius:6px;background:rgba(0,230,255,.06);padding:11px 13px;margin:10px 0 14px;}
.role-insert .ri-head{color:var(--cyan,#00e6ff);font-weight:700;letter-spacing:.04em;font-size:13px;margin-bottom:4px;}
.role-insert .ri-body{color:var(--text);font-size:13.5px;line-height:1.55;}

/* Executive / observer seats (optional, not scored) - distinct amber accent. */
.role.observer{background:#0f0c04;border-color:rgba(255,179,0,.35);}
.role.observer .rname{color:#ffe7ad;}
.role.observer .rmod{color:var(--muted);}
.role.observer.free:hover{border-color:var(--amber);box-shadow:0 0 18px rgba(255,179,0,.28);}
.role.observer.mine{border-color:var(--amber);box-shadow:0 0 20px rgba(255,179,0,.4);}
.role-section-head{grid-column:1/-1;}

/* Chat channel switch (Team / Exec war room) - only rendered for observer seats. */
.chat-channels{display:flex;gap:6px;margin:0 0 8px;}
.chat-channels .chan-tab{flex:0 0 auto;padding:5px 12px;border:1px solid var(--line);border-radius:6px;
  background:#04100b;color:var(--muted);font-size:12px;letter-spacing:.04em;cursor:pointer;transition:all .15s;}
.chat-channels .chan-tab:hover{border-color:var(--line-strong,#2a5);}
.chat-channels .chan-tab.active{border-color:var(--amber);color:var(--amber);box-shadow:0 0 10px rgba(255,179,0,.25);}

/* ===== Product branding: fixed top banner + bottom version footer ======== */
/* Injected by brand.js on every screen so the product name is always at the
   top and the version is always at the bottom. */
.product-banner{position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:center;
  height:34px;padding:0 14px;
  background:linear-gradient(180deg,#061410 0%, #04100b 100%);
  border-bottom:1px solid var(--line-strong,#16351f);
  box-shadow:0 2px 18px rgba(0,0,0,.5);}
.product-banner-name{color:var(--amber,#ffb300);font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;font-size:12px;
  text-shadow:0 0 14px rgba(255,179,0,.45);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:96vw;}
.product-footer{position:fixed;bottom:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:center;
  height:22px;padding:0 14px;
  background:linear-gradient(0deg,#061410 0%, rgba(4,16,11,.85) 100%);
  border-top:1px solid var(--line,#0f2a18);}
.product-footer-version{color:var(--muted,#6f8a78);font-size:11px;
  letter-spacing:.18em;text-transform:lowercase;font-variant-numeric:tabular-nums;}
/* Keep fixed chrome clear of page content (banner ~34px, footer ~22px). */
body.has-product-chrome{padding-top:34px;padding-bottom:22px;}
@media print{.product-banner,.product-footer{position:static;box-shadow:none;}}

/* =========================================================================
   HACKER RUNNER // DATA CENTER DEFENSE - THEME LAYER
   -------------------------------------------------------------------------
   This layer sits ON TOP of the inherited engine styles. The whole engine
   references CSS variables (--green/--amber/--cyan/--line/--text/--bg/...), so
   re-pointing those variables here re-skins every screen at once, no markup
   change needed. We give Hacker Runner its own identity:
     - a colder, more "computer terminal in a data center" palette (ice-blue +
       teal accents on near-black), distinct from Tabletop's phosphor green;
     - a LIGHT wireframe theme via :root[data-theme="light"] (toggle in the UI);
     - components for the command console, quick-action buttons, and the
       server-rack / threat-feed status panels.
   The theme toggle sets data-theme on <html>; theme.js persists the choice.
   ========================================================================= */

/* ---- DARK (default): data-center terminal --------------------------------
   Keep --green as the PRIMARY accent name (the engine uses it everywhere) but
   repoint it to an ice/cyan so the product reads as "cold server room" rather
   than "matrix green". --cyan stays the secondary. --amber = alerts/roles. */
:root{
  --green:#38e1ff;        /* primary accent: ice-cyan (was phosphor green) */
  --green-dim:#1f9fc4;
  --amber:#ffb347;        /* warnings / role accents */
  --red:#ff4d5e;          /* threat / danger */
  --cyan:#7c9dff;         /* secondary accent: cool indigo */
  --bg:#050a12;
  --panel:rgba(12,20,34,.74);
  --panel-solid:#0b1526;
  --line:rgba(56,225,255,.20);
  --line-strong:rgba(56,225,255,.5);
  --text:#cfe0f2;
  --muted:#7f93ad;
  /* console-specific */
  --console-bg:#05101d;
  --console-fg:#c9e9ff;
  --console-prompt:#38e1ff;
  --grid:rgba(56,225,255,.05);
}
html,body{
  font-family:'Consolas','SFMono-Regular','JetBrains Mono','Cascadia Mono',
    'Courier New',ui-monospace,monospace;
}
body{
  background:
    radial-gradient(1200px 600px at 50% -12%, rgba(20,90,140,.24), transparent 60%),
    radial-gradient(900px 520px at 92% 112%, rgba(60,60,150,.16), transparent 55%),
    linear-gradient(180deg,#050a12 0%, #02060c 100%);
}
/* re-tint the fine grid overlay to the new accent */
body::after{
  background:linear-gradient(var(--grid) 1px,transparent 1px),
             linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:36px 36px;
  mask-image:radial-gradient(circle at 50% 26%,#000,transparent 82%);
}

/* ---- LIGHT wireframe theme ----------------------------------------------
   A clean "console on a light NOC display": near-white paper, ink-blue text,
   blueprint grid. Triggered by <html data-theme="light">. */
:root[data-theme="light"]{
  --green:#0a6e8f;
  --green-dim:#0a5266;
  --amber:#b5730a;
  --red:#c62839;
  --cyan:#3a53c0;
  --bg:#eef3f8;
  --panel:rgba(255,255,255,.86);
  --panel-solid:#ffffff;
  --line:rgba(10,110,143,.28);
  --line-strong:rgba(10,110,143,.55);
  --text:#12324a;
  --muted:#5c728a;
  --console-bg:#f4f8fc;
  --console-fg:#12324a;
  --console-prompt:#0a6e8f;
  --grid:rgba(10,110,143,.07);
}
:root[data-theme="light"] html,
:root[data-theme="light"] body{background:#eef3f8;}
:root[data-theme="light"] body{
  background:
    radial-gradient(1100px 560px at 50% -12%, rgba(10,110,143,.10), transparent 60%),
    linear-gradient(180deg,#eef3f8 0%, #e4ecf4 100%);
}
:root[data-theme="light"] body::before{opacity:.18;}
/* Panels/cards use lighter fills in light mode. The engine hardcodes some very
   dark card backgrounds (e.g. #04100b); repaint the common ones for light. */
:root[data-theme="light"] .panel{box-shadow:0 8px 30px rgba(20,50,74,.10);}
:root[data-theme="light"] .qcard,
:root[data-theme="light"] .vote-opt,
:root[data-theme="light"] .opt,
:root[data-theme="light"] .team-readonly,
:root[data-theme="light"] .role,
:root[data-theme="light"] .gcard,
:root[data-theme="light"] .chat-log,
:root[data-theme="light"] .chat-msg,
:root[data-theme="light"] .phasebar .chip,
:root[data-theme="light"] .phase-rail .pr-item,
:root[data-theme="light"] input[type=text],
:root[data-theme="light"] input[type=email],
:root[data-theme="light"] input[type=password],
:root[data-theme="light"] input[type=number],
:root[data-theme="light"] select,
:root[data-theme="light"] textarea{
  background:#ffffff;color:var(--text);
}
:root[data-theme="light"] h1,
:root[data-theme="light"] .role .rname,
:root[data-theme="light"] .qprompt,
:root[data-theme="light"] .lb li .lbname,
:root[data-theme="light"] .gcard .gname{color:#0c2338;text-shadow:none;}
:root[data-theme="light"] .clock-big{text-shadow:none;}

/* ---- Theme toggle button (injected by theme.js) -------------------------- */
.theme-toggle{position:fixed;top:6px;right:14px;z-index:70;
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:var(--panel-solid);border:1px solid var(--line-strong);
  color:var(--green);border-radius:20px;padding:4px 12px;margin:0;
  font-family:inherit;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;box-shadow:0 0 14px rgba(56,225,255,.18);}
.theme-toggle:hover{border-color:var(--green);box-shadow:0 0 18px rgba(56,225,255,.35);}
.theme-toggle .tt-ico{font-size:13px;line-height:1;}
@media print{.theme-toggle{display:none;}}

/* =========================================================================
   COMMAND CONSOLE - the core Hacker Runner interaction surface
   ========================================================================= */
.console-panel{border-color:var(--line-strong);}
.console-panel h2{color:var(--green);border-bottom-color:var(--line);}

/* The scrollback log: a monospace terminal window. */
.console-log{height:300px;overflow-y:auto;border:1px solid var(--line);border-radius:8px;
  padding:12px 14px;background:var(--console-bg);color:var(--console-fg);
  font-family:inherit;font-size:13px;line-height:1.55;letter-spacing:.01em;
  white-space:pre-wrap;word-break:break-word;
  box-shadow:inset 0 0 40px rgba(0,0,0,.35);}
.console-log .cl-line{margin:1px 0;}
.console-log .cl-cmd{color:var(--green);}          /* echoed user command */
.console-log .cl-cmd::before{content:"defender@datacenter:~$ ";color:var(--console-prompt);opacity:.8;}
.console-log .cl-out{color:var(--console-fg);}      /* normal output */
.console-log .cl-info{color:var(--cyan);}           /* hints / info */
.console-log .cl-ok{color:var(--green);}            /* success */
.console-log .cl-warn{color:var(--amber);}          /* warnings */
.console-log .cl-err{color:var(--red);}             /* errors */
.console-log .cl-evidence{color:#e7f4ff;border-left:2px solid var(--cyan);
  padding-left:9px;margin:3px 0 3px 2px;opacity:.96;}
.console-log .cl-head{color:var(--amber);letter-spacing:.1em;text-transform:uppercase;font-weight:700;}

/* The prompt input row. */
.console-input-row{display:flex;align-items:center;gap:0;margin-top:10px;
  border:1px solid var(--line);border-radius:8px;background:var(--console-bg);
  padding:0 10px;transition:border-color .15s,box-shadow .15s;}
.console-input-row:focus-within{border-color:var(--green);
  box-shadow:0 0 0 3px rgba(56,225,255,.14),0 0 16px rgba(56,225,255,.2);}
.console-input-row .cprompt{color:var(--console-prompt);font-weight:700;font-size:13px;
  white-space:nowrap;user-select:none;padding-right:6px;}
.console-input-row input{flex:1;border:none;background:transparent;color:var(--console-fg);
  font-family:inherit;font-size:14px;padding:11px 4px;letter-spacing:.02em;}
.console-input-row input:focus{outline:none;box-shadow:none;}
.console-input-row .cgo{margin:0;padding:8px 16px;font-size:12px;}

/* Quick-action command buttons (chips that type a command for you). */
.cmd-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;}
.cmd-actions .cmd-chip{cursor:pointer;border:1px solid var(--line);border-radius:6px;
  background:linear-gradient(180deg,rgba(56,225,255,.07),rgba(56,225,255,.02));
  color:var(--green);font-family:inherit;font-size:11.5px;letter-spacing:.06em;
  padding:7px 12px;transition:all .13s;white-space:nowrap;}
.cmd-actions .cmd-chip:hover{border-color:var(--green);background:var(--green);color:#04121b;
  box-shadow:0 0 14px rgba(56,225,255,.4);transform:translateY(-1px);}
.cmd-actions .cmd-chip.danger{color:var(--red);border-color:rgba(255,77,94,.4);
  background:linear-gradient(180deg,rgba(255,77,94,.08),rgba(255,77,94,.02));}
.cmd-actions .cmd-chip.danger:hover{background:var(--red);color:#1a0206;box-shadow:0 0 14px rgba(255,77,94,.4);}
.cmd-actions .cmd-chip.ghost{color:var(--amber);border-color:rgba(255,179,71,.4);
  background:linear-gradient(180deg,rgba(255,179,71,.08),rgba(255,179,71,.02));}
.cmd-actions .cmd-chip.ghost:hover{background:var(--amber);color:#1a1000;box-shadow:0 0 14px rgba(255,179,71,.4);}
.cmd-actions .cmd-sep{width:1px;align-self:stretch;background:var(--line);margin:2px 3px;}

/* =========================================================================
   STATUS PANELS - server rack + threat feed (right-side ops readout)
   ========================================================================= */
.ops-grid{display:grid;grid-template-columns:1fr;gap:14px;}
@media (min-width:720px){.ops-grid{grid-template-columns:1fr 1fr;}}

.rack-panel h2,.threat-panel h2{font-size:13px;}

/* Server rack: a column of "server" bars with a live status dot + load meter. */
.rack{display:flex;flex-direction:column;gap:7px;margin-top:6px;}
.rack .srv{display:flex;align-items:center;gap:10px;border:1px solid var(--line);
  border-radius:7px;background:var(--console-bg);padding:9px 11px;font-size:12.5px;}
.rack .srv .srv-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--muted);}
.rack .srv .srv-name{flex:0 0 auto;color:var(--text);font-weight:700;min-width:96px;letter-spacing:.03em;}
.rack .srv .srv-meter{flex:1;height:7px;border-radius:4px;background:rgba(127,147,173,.18);overflow:hidden;}
.rack .srv .srv-meter > i{display:block;height:100%;width:20%;
  background:linear-gradient(90deg,var(--green),var(--cyan));transition:width .5s ease;}
.rack .srv .srv-state{flex:0 0 auto;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);min-width:78px;text-align:right;font-weight:700;}
/* states */
.rack .srv.ok .srv-dot{background:var(--green);box-shadow:0 0 8px var(--green);}
.rack .srv.ok .srv-state{color:var(--green);}
.rack .srv.warn .srv-dot{background:var(--amber);box-shadow:0 0 8px var(--amber);animation:pulse 2s infinite;}
.rack .srv.warn .srv-state{color:var(--amber);}
.rack .srv.warn .srv-meter > i{background:linear-gradient(90deg,var(--amber),#ffd27a);width:66%;}
.rack .srv.breach .srv-dot{background:var(--red);box-shadow:0 0 10px var(--red);animation:pulse 1s infinite;}
.rack .srv.breach .srv-state{color:var(--red);}
.rack .srv.breach .srv-meter > i{background:linear-gradient(90deg,var(--red),#ff9aa5);width:94%;}
.rack .srv.isolated{opacity:.62;}
.rack .srv.isolated .srv-dot{background:#5c728a;box-shadow:none;animation:none;}
.rack .srv.isolated .srv-state{color:var(--muted);}
.rack .srv.isolated .srv-meter > i{background:#5c728a;width:4%;}

/* Threat feed: a scrolling log of intruder activity for flavor + evidence. */
.threat-feed{list-style:none;margin:6px 0 0;padding:0;max-height:206px;overflow-y:auto;
  display:flex;flex-direction:column;gap:5px;}
.threat-feed li{border-left:2px solid var(--line-strong);padding:5px 0 5px 9px;font-size:12px;
  line-height:1.45;color:var(--text);}
.threat-feed li .tf-time{color:var(--muted);font-size:10.5px;letter-spacing:.06em;margin-right:6px;}
.threat-feed li.sev-info{border-left-color:var(--cyan);}
.threat-feed li.sev-warn{border-left-color:var(--amber);color:#ffe7c4;}
.threat-feed li.sev-crit{border-left-color:var(--red);color:#ffd9dd;}

/* On WIDE screens, the ops readout pins to the right as its own rail alongside
   the console. Below that it stacks in-flow (mobile-first, nothing clipped). */
.ops-dock{margin-top:22px;}

/* v2: Investigation (recon) readout in the debrief - reuses the rubric row look. */
#debriefBox .db-recon{display:flex;flex-direction:column;gap:6px;}
#debriefBox .db-recon .db-rub-bar i{background:var(--cyan);}

/* =========================================================================
   v2: EXECUTIVE PRESSURE - exec "Apply Pressure" panel + crew pressure banner
   ========================================================================= */
/* Exec control panel (shown in the chat dock for observer/exec seats). */
.pressure-panel{margin-top:14px;border:1px solid rgba(255,179,71,.5);border-radius:9px;
  background:rgba(40,26,0,.35);padding:12px 13px;}
.pressure-panel .pp-head{color:var(--amber);font-weight:700;letter-spacing:.06em;font-size:13px;margin-bottom:9px;}
.pressure-panel .pp-note{color:var(--muted);font-weight:400;letter-spacing:.02em;font-size:11px;}
.pressure-panel .pp-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.pressure-panel .pp-cat{flex:0 0 auto;max-width:180px;}
.pressure-panel .pp-line{flex:1;min-width:220px;}
.pressure-panel .pp-msg{font-size:12px;letter-spacing:.03em;margin-top:8px;min-height:14px;}
.pressure-panel .pp-msg.ok{color:var(--green);}
.pressure-panel .pp-msg.err{color:var(--red);}

/* Crew-side pressure banner (distinct from the red facilitator inject banner:
   amber, "boardroom" tone). */
.pressure-banner{position:relative;z-index:20;text-align:center;margin:0 0 14px;border-radius:8px;
  background:#241800;border:2px solid var(--amber);padding:10px 44px 12px;
  box-shadow:0 6px 30px rgba(255,179,71,.3);}
.pressure-banner .pb2-head{color:var(--amber);font-weight:800;letter-spacing:.24em;font-size:14px;
  text-transform:uppercase;text-shadow:0 0 12px rgba(255,179,71,.6);animation:injectBlink 1.1s steps(1) infinite;}
.pressure-banner .pb2-body{color:#ffe7c4;font-size:13.5px;line-height:1.5;margin-top:4px;
  max-width:900px;margin-left:auto;margin-right:auto;}
.pressure-banner .pb2-hint{color:var(--muted);font-size:11.5px;letter-spacing:.03em;margin-top:6px;font-style:italic;}
.pressure-banner .pb2-dismiss{position:absolute;top:8px;right:14px;background:transparent;border:none;
  color:#ffcf99;font-size:22px;line-height:1;cursor:pointer;}
.pressure-banner .pb2-dismiss:hover{color:#fff;}
/* Executive-pressure chat lines stand apart from normal team chat. */
.chat-msg.pressure{background:rgba(255,179,71,.09);border-color:rgba(255,179,71,.45);}
.chat-msg.pressure .who{color:var(--amber);font-weight:800;}

/* =========================================================================
   v2 (round 2): exec pressure responses + tally, under-attack rack state,
   targeting, and the facilitator pressure/ops log.
   ========================================================================= */
/* Server rack: UNDER ATTACK state - hard pulsing red, distinct from 'breach'. */
.rack .srv.attack .srv-dot{background:var(--red);box-shadow:0 0 12px var(--red);animation:pulse 0.7s infinite;}
.rack .srv.attack .srv-state{color:var(--red);font-weight:800;}
.rack .srv.attack .srv-meter > i{background:linear-gradient(90deg,var(--red),#ff2a2a);width:100%;
  animation:attackbar 1.2s ease-in-out infinite;}
@keyframes attackbar{50%{opacity:.55;}}

/* Crew pressure banner: response buttons + live tally. */
.pressure-banner .pb2-actions{display:flex;gap:10px;justify-content:center;margin-top:10px;flex-wrap:wrap;}
.pressure-banner .pb2-btn{cursor:pointer;border-radius:6px;padding:8px 16px;font-family:inherit;font-size:12.5px;
  letter-spacing:.04em;font-weight:700;border:1px solid var(--line);background:var(--console-bg);color:var(--text);transition:all .13s;}
.pressure-banner .pb2-btn.hold{border-color:var(--green);color:var(--green);}
.pressure-banner .pb2-btn.hold:hover,.pressure-banner .pb2-btn.hold.chosen{background:var(--green);color:#04121b;box-shadow:0 0 14px rgba(56,225,255,.4);}
.pressure-banner .pb2-btn.comply{border-color:var(--amber);color:var(--amber);}
.pressure-banner .pb2-btn.comply:hover,.pressure-banner .pb2-btn.comply.chosen{background:var(--amber);color:#1a1000;box-shadow:0 0 14px rgba(255,179,71,.4);}
.pressure-banner .pb2-tally{margin-top:8px;font-size:12px;letter-spacing:.05em;color:var(--muted);}
.pressure-banner .pb2-target{color:var(--amber);font-weight:700;}
.pressure-banner .pb2-observe{color:var(--muted);font-size:12px;font-style:italic;}
.pp-hold{color:var(--green);} .pp-comply{color:var(--amber);}

/* Exec panel: target dropdown + response tally readout. */
.pressure-panel .pp-tally{margin-top:8px;font-size:12px;letter-spacing:.04em;color:var(--muted);min-height:14px;}

/* Facilitator pressure & ops log (left rail). */
.ctrl-rail .rail-log{margin-top:8px;max-height:220px;overflow-y:auto;border:1px solid var(--line);border-radius:6px;
  background:var(--console-bg,#05101d);padding:8px 9px;font-size:11px;line-height:1.5;}
.ctrl-rail .rail-log .rl-h{color:var(--amber);letter-spacing:.12em;text-transform:uppercase;font-size:10px;
  font-weight:700;margin:6px 0 3px;border-bottom:1px dashed rgba(255,179,71,.25);padding-bottom:2px;}
.ctrl-rail .rail-log .rl-h:first-child{margin-top:0;}
.ctrl-rail .rail-log .rl-row{color:var(--text);padding:2px 0;word-break:break-word;}
.ctrl-rail .rail-log .rl-empty{color:var(--muted);font-style:italic;padding:2px 0;}

/* =========================================================================
   RESPONSIVE / DEVICE-ADAPTIVE  (added v5, level-b)
   Mobile-first base already stacks; these tune the phone + tablet bands and
   keep fixed chrome (banner/footer/toggle) clear of content.
   ========================================================================= */

/* The toggle sits just under the fixed product banner so they never overlap. */
body.has-product-chrome .theme-toggle{top:40px;}

/* ---- Tablet band: <=1024 ------------------------------------------------- */
@media (max-width:1024px){
  .wrap{padding-left:18px;padding-right:18px;}
  .roles{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
}

/* ---- Phone band: <=560 --------------------------------------------------- */
@media (max-width:560px){
  .wrap{padding:4vh 14px 64px;}
  h1{font-size:clamp(24px,8vw,34px);}
  .brand{letter-spacing:.3em;font-size:11px;}
  .panel{padding:18px 15px;}
  .roles{grid-template-columns:1fr;}
  .ops-grid{grid-template-columns:1fr;}         /* rack + threat feed stack */
  .teamhead{flex-direction:column;align-items:stretch;}
  .name-row{flex-direction:column;align-items:stretch;}
  .name-row .btn{width:100%;justify-content:center;}
  .footer{flex-direction:column;align-items:flex-start;gap:8px;}
  .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .table-scroll table{min-width:460px;}
  table{font-size:12px;}
  th,td{padding:7px 8px;word-break:break-word;}
  .theme-toggle{font-size:10px;padding:3px 10px;right:10px;}
  /* command console: keep usable on a phone */
  .console-log{height:220px;}
  .console-input-row{flex-wrap:wrap;}
  .console-input-row .cgo{width:100%;margin-top:6px;}
  .cmd-actions{gap:6px;}
  .rack .srv{flex-wrap:wrap;}
  .rack .srv .srv-name{min-width:0;}
}

/* ---- Very small phones: <=380 -------------------------------------------- */
@media (max-width:380px){
  .wrap{padding:3vh 10px 60px;}
  .panel{padding:15px 12px;}
  .btn{width:100%;justify-content:center;}
}

/* ---- Touch devices: larger hit targets ----------------------------------- */
@media (hover:none) and (pointer:coarse){
  .btn,.role.free,.theme-toggle,select,input,.cmd-chip,.console-input-row input{min-height:44px;}
  .role.free{padding-top:18px;padding-bottom:18px;}
}

/* ---- Respect reduced-motion ---------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
}

/* =========================================================================
   TESTING IDENTITY BANNER - keep it from covering the fixed left comms rail
   and the exec channel-switch tabs.  (added v5)
   -------------------------------------------------------------------------
   game.js injects a fixed red "TESTING - logged in as ..." strip at top:0
   (z-index 200) when a facilitator opens a student view, and adds
   .has-identity-badge to <body>. body padding-top clears IN-FLOW content, but
   the left comms dock (.chat-dock), facilitator rail (.ctrl-rail) and right
   phase rail (.phase-rail) are position:fixed at top:0 on desktop, so the
   banner would sit on top of the Team Comms header and the Team / Exec war
   room switch tabs. Push every top-anchored fixed element below the banner.
   ========================================================================= */
:root{--identity-banner-h:26px;--product-banner-h:34px;}

/* The testing strip sits at the very top (top:0, z-200). The brand.js product
   banner (34px) pins to top:0 too, so when the testing strip is present we
   restack: testing strip at 0, product banner just below it, and the fixed
   left comms dock / rails below BOTH so nothing covers the Team Comms header
   or the Team / Exec war-room switch tabs. */

/* In-flow content clearance (replaces the old inline padding on body). */
body.has-identity-badge{padding-top:var(--identity-banner-h);}
body.has-identity-badge.has-product-chrome{
  padding-top:calc(var(--identity-banner-h) + var(--product-banner-h));}

body.has-identity-badge .product-banner{top:var(--identity-banner-h);}

body.has-identity-badge .ctrl-rail,
body.has-identity-badge .chat-dock,
body.has-identity-badge .phase-rail{top:var(--identity-banner-h);}
body.has-identity-badge.has-product-chrome .ctrl-rail,
body.has-identity-badge.has-product-chrome .chat-dock,
body.has-identity-badge.has-product-chrome .phase-rail{
  top:calc(var(--identity-banner-h) + var(--product-banner-h));}

body.has-identity-badge .theme-toggle{top:calc(var(--identity-banner-h) + 4px);}
body.has-identity-badge.has-product-chrome .theme-toggle{
  top:calc(var(--identity-banner-h) + var(--product-banner-h) + 6px);}