: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;}

/* ===== 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:.22em;text-transform:uppercase;font-size:12.5px;
  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;}}

/* =========================================================================
   CAPSTONE - THEME LAYER  (added v11)
   -------------------------------------------------------------------------
   Keeps Capstone's phosphor-green dark identity as the DEFAULT, and adds a
   LIGHT wireframe theme + a user toggle. The engine references CSS variables
   everywhere, so the light theme simply re-points them under
   <html data-theme="light">. theme.js sets data-theme (dark default) and
   persists the choice.
   ========================================================================= */

/* ---- LIGHT wireframe theme (dark green stays the default) ----------------
   Clean light "ops display": near-white paper, deep ink text, green accents
   kept but darkened for contrast on white. */
:root[data-theme="light"]{
  --green:#0b7d33;
  --green-dim:#0a5f27;
  --amber:#9a6400;
  --red:#c62828;
  --cyan:#0a7ea4;
  --bg:#eef4ef;
  --panel:rgba(255,255,255,.88);
  --panel-solid:#ffffff;
  --line:rgba(11,125,51,.26);
  --line-strong:rgba(11,125,51,.52);
  --text:#13331f;
  --muted:#53705d;
}
:root[data-theme="light"] html,
:root[data-theme="light"] body{background:#eef4ef;}
:root[data-theme="light"] body{
  background:
    radial-gradient(1100px 560px at 50% -12%, rgba(11,125,51,.09), transparent 60%),
    linear-gradient(180deg,#eef4ef 0%, #e3ece5 100%);
}
:root[data-theme="light"] body::before{opacity:.16;}
:root[data-theme="light"] body::after{
  background:linear-gradient(rgba(11,125,51,.05) 1px,transparent 1px),
             linear-gradient(90deg,rgba(11,125,51,.05) 1px,transparent 1px);}
:root[data-theme="light"] .panel{box-shadow:0 8px 30px rgba(20,60,34,.10);}
/* Repaint the engine's hardcoded very-dark card fills (e.g. #04100b) for light. */
: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:#0c2b16;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(57,255,20,.16);}
.theme-toggle:hover{border-color:var(--green);box-shadow:0 0 18px rgba(57,255,20,.32);}
.theme-toggle .tt-ico{font-size:13px;line-height:1;}
:root[data-theme="light"] .theme-toggle{box-shadow:0 2px 10px rgba(20,60,34,.14);}
@media print{.theme-toggle{display:none;}}

/* =========================================================================
   RESPONSIVE / DEVICE-ADAPTIVE  (added v11, 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;}
  .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;}
}

/* ---- 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{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 v11)
   -------------------------------------------------------------------------
   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;}

/* 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));}

/* product banner moves under the testing strip */
body.has-identity-badge .product-banner{top:var(--identity-banner-h);}

/* Fixed rails clear whatever chrome is above them. */
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));}

/* Keep the theme toggle clear of the strip (and of the product banner if both). */
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);}