/* ═══════════════════════════════════════════════════════════
   CYBERSTRIKE ARENA — OPS DECK theme layer
   Loaded AFTER each page's own <style>, so it wins on cascade.
   Retheme only: no markup or behaviour depends on this file.
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;900&family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;600;800&display=swap');

/* ── 1. TOKENS ─────────────────────────────────────────── */
:root{
  --void:#06090F; --bg:#06090F;
  --surface:#0C1420; --raised:#101B2B;
  --b1:#16283C; --b2:#22384F;
  --t1:#E8F0F8; --t2:#8FA9C4; --t3:#54718F;
  --cyan:#38BDF8; --gold:#E8C15A; --cti:#A78BFA;
  --ok:#34D399; --warn:#E8C15A; --err:#F87171;
  --r:0px;
  --mono:'JetBrains Mono','Cascadia Code',Consolas,monospace;
  --sans:'Space Grotesk',system-ui,sans-serif;
  --disp:'Unbounded',sans-serif;
  --lock:14px;
}

body{
  font-family:var(--sans);
  background:var(--void);
  background-image:
    linear-gradient(var(--b1) 1px,transparent 1px),
    linear-gradient(90deg,var(--b1) 1px,transparent 1px);
  background-size:56px 56px;
  background-attachment:fixed;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,transparent 0%,var(--void) 78%);
}
body > *{position:relative;z-index:1}

/* ── 2. TYPE ───────────────────────────────────────────── */
.auth-title,.modal-title,.panel-title,.card-title,.cc-title,.rc-title,
.hero h1,.section-title,.cta-title,.sc-name,.dept-name,.cat-name,
.scores-title,.cheat-feed-title,.id-name,.brand,.nav-logo-text,
.adm-sidebar-logo,.cs-logo,.auth-hdr-name{
  font-family:var(--disp)!important;
  letter-spacing:-.01em;
}
.hero h1,.section-title,.cta-title,.auth-title{text-transform:uppercase}
.hero h1{font-weight:900!important;line-height:1.02!important}
.section-eyebrow,.hero-badge,.auth-hdr-badge,.auth-badge-tag,
.panel-sub,.modal-sub,.tele-k,.meta-k,.fb-lbl,.kpi-lbl,
label,.field label{
  font-family:var(--mono)!important;
  letter-spacing:.22em!important;
  text-transform:uppercase;
}
.badge,.chip,.tab,.tn-badge,.ioc-type-badge,.attack-tactic{
  font-family:var(--mono)!important;letter-spacing:.16em!important;
  border-radius:0!important;
}

/* ── 3. GEOMETRY — everything squares off ──────────────── */
.card,.modal,.auth-card,.panel,.adm-panel,.cti-panel,.tab-panel,
.kpi,.player-card,.cheat-feed,.scores-panel,.sc-card,.cat-card,
.q-row,.fb,.meta-item,.tool-card,.ac-item,.attack-card,.report-card,
.sandbox-card,.ioc-result,.field input,.field select,.field textarea,
input,select,textarea,.empty-state,.story-box,.ans-box,.err-box{
  border-radius:0!important;
}
.avatar,.player-av,.tn-av,.pulse,.star,.prog-pill,.cur-tag,
.session-row .cur-tag,.pill{border-radius:0!important}
.avatar,.player-av,.tn-av{
  clip-path:polygon(0 0,100% 0,100% 72%,72% 100%,0 100%);
}

/* ── 4. SIGNATURE: target-lock brackets ────────────────── */
.card,.kpi,.player-card,.sc-card,.cat-card,.tool-card,.ac-item,
.meta-item,.attack-card,.report-card,.sandbox-card,.q-builder-item,
.stat,.scoring-attempt{
  position:relative;
  transition:border-color .25s cubic-bezier(.2,.8,.2,1),background .25s;
}
.card::before,.card::after,
.kpi::before,.kpi::after,
.player-card::before,.player-card::after,
.sc-card::before,.sc-card::after,
.cat-card::before,.cat-card::after,
.tool-card::before,.tool-card::after,
.ac-item::before,.ac-item::after,
.meta-item::before,.meta-item::after,
.attack-card::before,.attack-card::after,
.report-card::before,.report-card::after,
.sandbox-card::before,.sandbox-card::after,
.stat::before,.stat::after,
.scoring-attempt::before,.scoring-attempt::after{
  content:"";position:absolute;width:var(--lock);height:var(--lock);
  border:2px solid var(--cyan);opacity:0;transform:scale(1.7);
  transition:opacity .25s,transform .25s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;z-index:2;
}
.card::before,.kpi::before,.player-card::before,.sc-card::before,
.cat-card::before,.tool-card::before,.ac-item::before,.meta-item::before,
.attack-card::before,.report-card::before,.sandbox-card::before,
.stat::before,.scoring-attempt::before{
  top:-2px;left:-2px;border-right:none;border-bottom:none;
}
.card::after,.kpi::after,.player-card::after,.sc-card::after,
.cat-card::after,.tool-card::after,.ac-item::after,.meta-item::after,
.attack-card::after,.report-card::after,.sandbox-card::after,
.stat::after,.scoring-attempt::after{
  bottom:-2px;right:-2px;border-left:none;border-top:none;
}
.card:hover::before,.card:hover::after,
.kpi:hover::before,.kpi:hover::after,
.player-card:hover::before,.player-card:hover::after,
.sc-card:hover::before,.sc-card:hover::after,
.cat-card:hover::before,.cat-card:hover::after,
.tool-card:hover::before,.tool-card:hover::after,
.ac-item:hover::before,.ac-item:hover::after,
.meta-item:hover::before,.meta-item:hover::after,
.attack-card:hover::before,.attack-card:hover::after,
.report-card:hover::before,.report-card:hover::after,
.sandbox-card:hover::before,.sandbox-card:hover::after,
.stat:hover::before,.stat:hover::after,
.scoring-attempt:hover::before,.scoring-attempt:hover::after{
  opacity:1;transform:scale(1);
}
.card:hover,.kpi:hover,.player-card:hover,.sc-card:hover,
.tool-card:hover,.ac-item:hover,.meta-item:hover,.attack-card:hover{
  border-color:var(--b2)!important;background:var(--raised)!important;
  transform:none!important;
}

/* ── 5. BUTTONS — clipped corner, gold on hover ────────── */
.btn,.btn-primary,.auth-btn,.auth-btn-big,.sub-btn,.ioc-search-btn,
button.primary,.cta-actions .btn-primary{
  border-radius:0!important;
  font-family:var(--mono)!important;
  font-weight:700!important;
  letter-spacing:.14em!important;
  text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
  transition:background .2s,color .2s,letter-spacing .2s!important;
}
.btn-primary:hover,.auth-btn:hover,.auth-btn-big:hover,
.sub-btn:hover,.ioc-search-btn:hover{
  background:var(--gold)!important;color:var(--void)!important;
  letter-spacing:.2em!important;
}
.btn-sm,.bsm,.btn-secondary,.btn-ghost,.theme-btn,.theme-b,.tactic-btn{
  border-radius:0!important;
  font-family:var(--mono)!important;
  letter-spacing:.12em!important;
  transition:.2s;
}
.btn-sm:hover,.bsm:hover,.btn-secondary:hover,.tactic-btn:hover{
  color:var(--cyan)!important;border-color:var(--cyan)!important;
}

/* ── 6. INPUTS — left signal bar on focus ──────────────── */
input:not([type=radio]):not([type=checkbox]),select,textarea,
.field input:not([type=radio]):not([type=checkbox]),.field select,.field textarea,.ioc-input{
  font-family:var(--mono)!important;
  border-left:3px solid transparent!important;
  transition:border-color .2s,box-shadow .2s!important;
}
input:not([type=radio]):not([type=checkbox]):focus,select:focus,textarea:focus,.ioc-input:focus{
  border-color:var(--b2)!important;
  border-left-color:var(--cyan)!important;
  box-shadow:0 0 0 3px rgba(56,189,248,.10)!important;
  outline:none!important;
}

/* Checkboxes get a proper square control instead of the browser default */
input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  width:16px;height:16px;flex-shrink:0;padding:0;margin:0;
  border:1px solid var(--b2);background:var(--void);
  cursor:pointer;transition:.15s;position:relative;
}
input[type=checkbox]:hover{border-color:var(--cyan)}
input[type=checkbox]:checked{background:var(--cyan);border-color:var(--cyan)}
input[type=checkbox]:checked::after{
  content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid var(--void);border-width:0 2px 2px 0;transform:rotate(42deg);
}

/* ── 7. ACCENT REASSIGNMENT — gold carries alerts/luxury ─ */
.cheat-sev,.flag-row,.badge.warn,.tn-badge.lead,.tn-badge.admin{color:var(--gold)!important}
.prog-bar-fill,.bar i{background:linear-gradient(90deg,var(--cyan),var(--gold))!important}
.section-eyebrow,.hero-badge{color:var(--gold)!important}
.star.on{color:var(--gold)!important}
.q-idx,.qidx{
  font-family:var(--disp)!important;font-weight:900!important;
  color:transparent!important;-webkit-text-stroke:1.2px var(--cyan);
}

/* ── 8. MOTION ─────────────────────────────────────────── */
@keyframes ops-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes ops-sweep{0%{transform:translateX(-105%)}100%{transform:translateX(105%)}}
@keyframes ops-pulse{0%,100%{box-shadow:0 0 0 0 rgba(56,189,248,.4)}55%{box-shadow:0 0 0 12px rgba(56,189,248,0)}}
@keyframes ops-tick{from{transform:translateY(80%);opacity:0}to{transform:none;opacity:1}}

.screen.on,.adm-panel.on,.cti-panel.on,.tab-panel.on{
  animation:ops-rise .55s cubic-bezier(.2,.8,.2,1) both;
}
.card,.kpi,.player-card,.sc-card,.cat-card,.tool-card,.meta-item{
  animation:ops-rise .5s cubic-bezier(.2,.8,.2,1) both;
}
.card:nth-child(2),.kpi:nth-child(2),.player-card:nth-child(2),
.sc-card:nth-child(2),.tool-card:nth-child(2),.meta-item:nth-child(2){animation-delay:.07s}
.card:nth-child(3),.kpi:nth-child(3),.player-card:nth-child(3),
.sc-card:nth-child(3),.tool-card:nth-child(3),.meta-item:nth-child(3){animation-delay:.14s}
.card:nth-child(4),.kpi:nth-child(4),.player-card:nth-child(4),
.tool-card:nth-child(4),.meta-item:nth-child(4){animation-delay:.21s}

.kpi-val,.stat-val,.tv,.threat-score-num{
  display:inline-block;
  animation:ops-tick .7s cubic-bezier(.2,.8,.2,1) both;
}
.pulse,.pulse-tag .pulse{animation:ops-pulse 1.8s infinite!important}

/* ambient scan on hero + auth surfaces */
.hero,.auth-card,.cc{position:relative;overflow:hidden}
.hero::after,.auth-card::after,.cc::after{
  content:"";position:absolute;top:0;bottom:0;width:40%;left:0;
  background:linear-gradient(90deg,transparent,rgba(56,189,248,.05),rgba(56,189,248,.12),rgba(56,189,248,.05),transparent);
  animation:ops-sweep 6s cubic-bezier(.6,0,.4,1) infinite;
  pointer-events:none;z-index:0;
}
.auth-card > *,.cc > *,.hero > *{position:relative;z-index:1}

/* timer bar reads as a depleting instrument */
.timer-bar,.tb{background:var(--b1)!important;border-radius:0!important}
.timer-bar > *,.tb > *{
  background:linear-gradient(90deg,var(--cyan),var(--gold))!important;
  border-radius:0!important;
}

/* nav / sidebar / topbar get the void treatment */
nav,.topbar,.adm-sidebar,.cti-sidebar,.sb,.tool-bar{
  background:var(--void)!important;
  border-color:var(--b1)!important;
  backdrop-filter:blur(10px);
}
.adm-nav-item.active,.cti-nav-item.active,.tab.active{
  color:var(--cyan)!important;
  border-left:2px solid var(--cyan)!important;
  background:rgba(56,189,248,.06)!important;
}

/* modal overlay = console blackout */
.overlay,.ov,.modal-overlay{
  background:rgba(6,9,15,.88)!important;
  backdrop-filter:blur(6px);
}
.modal{
  border:1px solid var(--b2)!important;
  box-shadow:0 0 0 1px rgba(56,189,248,.08),0 30px 80px rgba(0,0,0,.7)!important;
  animation:ops-rise .35s cubic-bezier(.2,.8,.2,1) both;
}

/* toast = HUD alert strip */
.toast{
  border-radius:0!important;
  border-left-width:3px!important;
  font-family:var(--mono)!important;
  letter-spacing:.06em;
}

/* tables read as telemetry */
th{
  font-family:var(--mono)!important;
  letter-spacing:.2em!important;
  color:var(--t3)!important;
}
tbody tr{transition:background .18s}
tbody tr:hover{background:var(--raised)!important}

/* ── 9. ACCESSIBILITY FLOOR ────────────────────────────── */
:focus-visible{outline:2px solid var(--cyan)!important;outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  body{background-image:none}
  .hero::after,.auth-card::after,.cc::after{display:none}
}

/* ── 10. LANDING HERO — the front door ─────────────────── */
.hero-outline{
  display:block;
  color:transparent;
  -webkit-text-stroke:1.5px var(--cyan);
}
.hero h1{font-size:clamp(38px,6.4vw,76px)!important}
.hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  background:transparent!important;border:none!important;
  padding:0!important;font-size:10px!important;
}
.hero-badge::before{content:"";width:34px;height:1px;background:var(--gold)}
.hero-glow{display:none}
.hero-stats .stat{
  border:1px solid var(--b1);background:var(--surface);
  padding:16px 18px;
}
.stat-val{
  font-family:var(--mono)!important;font-weight:800!important;
  color:var(--cyan)!important;
}
.hero-stats .stat:nth-child(2) .stat-val{color:var(--gold)!important}
.stat-lbl{
  font-family:var(--mono)!important;font-size:9px!important;
  letter-spacing:.2em!important;text-transform:uppercase;
}
.btn-secondary{
  background:transparent!important;color:var(--t2)!important;
  border:1px solid var(--b2)!important;
}
.nav-link.primary{
  background:var(--cyan)!important;color:var(--void)!important;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);
}
.nav-link.primary:hover{background:var(--gold)!important}

/* ── 11. LOGO SYSTEM ───────────────────────────────────── */
.cs-mark{
  width:26px;height:26px;flex-shrink:0;vertical-align:-6px;
  margin-right:9px;
}
.cs-logo{width:26px;height:26px;flex-shrink:0}
.auth-logo,.brand,.adm-sidebar-logo,.nav-logo,.topbar .brand{
  display:flex;align-items:center;gap:0;
}
.auth-logo .cs-mark{width:24px;height:24px}
.adm-sidebar-logo .cs-mark{width:22px;height:22px;margin-right:8px}
.topbar .brand .cs-mark{width:22px;height:22px;margin-right:8px}
/* mark reacts to the target-lock language on hover of its nav */
nav:hover .cs-mark path:first-child,
.topbar:hover .cs-mark path:first-child,
.adm-sidebar:hover .cs-mark path:first-child{stroke:#E8C15A;transition:stroke .3s}
.cs-mark path{transition:stroke .3s}

/* ── 12. BUGFIXES on the theme layer ───────────────────── */
/* q-idx: only stroke it where it's a large display numeral (platform),
   never on the review page's small inline "1." index — that was illegible. */
.q-idx{
  color:var(--t3)!important;
  -webkit-text-stroke:0!important;
  font-family:var(--mono)!important;
  font-weight:600!important;
}
.qidx{
  font-family:var(--disp)!important;font-weight:900!important;
  color:transparent!important;-webkit-text-stroke:1.2px var(--cyan);
}
/* Cards inside modals must not re-run the rise animation (caused a flash) */
.modal .card,.overlay .card,.ov .card{animation:none!important}
/* Target-lock brackets must never sit above an open modal */
.card::before,.card::after{z-index:1!important}
/* Sticky topbars: keep them above the boot-rise transform context */
.topbar,nav{z-index:60!important}
/* Inputs inside toolbars keep their left signal bar from doubling a border */
.ioc-search-bar input{border-left:3px solid var(--cyan)!important}
/* Long scenario/question text must wrap, never overflow the card */
.q-title,.qtext,.cat-desc,.ans-box,.sc-desc,.story-box{overflow-wrap:anywhere}

/* ── 13. RESPONSIVE — every page, every device ──────────── */
@media(max-width:1024px){
  .adm-sidebar,.cti-sidebar{position:static!important;width:100%!important;height:auto!important;
    display:flex!important;flex-wrap:wrap;gap:4px;border-right:none!important;
    border-bottom:1px solid var(--b1)!important;padding:10px!important}
  .adm-content,.cti-main{margin-left:0!important;padding:16px!important}
  .adm-nav-sec,.cti-nav-sec{display:none}
  .adm-nav-item,.cti-nav-item{flex:1;min-width:110px;text-align:center;justify-content:center}
}
@media(max-width:860px){
  .form-grid,.grid2,.player-grid,.kpi-strip,.tools-grid,.ac-grid,
  .scoring-grid,.reports-grid,.attack-grid,.ioc-details-grid,.meta-grid{
    grid-template-columns:1fr!important;
  }
  .hero h1{font-size:clamp(30px,8vw,44px)!important}
  .section-title{font-size:26px!important}
  .modal{max-width:94vw!important;margin:0 auto}
  table{display:block;overflow-x:auto;white-space:nowrap}
}
@media(max-width:600px){
  .kpi-strip{grid-template-columns:1fr 1fr!important}
  .sb,.tool-bar{flex-wrap:wrap;gap:8px}
  .modal{padding:18px 16px!important}
  .modal-actions{flex-direction:column}
  .modal-actions button{width:100%}
  nav{padding:0 14px!important}
  .nav-links{gap:6px}
  .btn:not(.inline),.btn-primary:not(.inline){width:100%;text-align:center}
  .hero-actions{flex-direction:column;gap:10px}
  .hero-actions .btn{width:100%}
}
/* Touch: no hover-only affordances, bigger targets */
@media(pointer:coarse){
  .card::before,.card::after,.kpi::before,.kpi::after,
  .sc-card::before,.sc-card::after,.tool-card::before,.tool-card::after{opacity:1;transform:scale(1)}
  button,.btn,.bsm,.btn-sm,.nav-link,.tab,a.bsm{min-height:42px}
  input:not([type=radio]):not([type=checkbox]),select,textarea{font-size:16px!important} /* stops iOS zoom-on-focus */
}
/* Never let a container force a horizontal scrollbar */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto}