/* CyberOps Terminal - Styles */
:root{
  --bg:#02060a;
  --bg-2:#071318;
  --text:#d1ffe8;
  --muted:#6ad7b1;
  --neon:#00ff9c;
  --neon-2:#16c9ff;
  --danger:#ff3b6b;
  --warn:#ffa600;
  --good:#00ffaa;
  --shadow:0 0 24px rgba(0,255,156,0.2);
}

/* Utilities */
.hidden{ display:none !important }

/* Help panel */
.help-panel{
  background: linear-gradient(180deg,#06161a,#041014);
  border:1px solid #0f3333;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 0 24px rgba(0,255,156,.08);
  max-height: 45vh;
  overflow: auto;
  overflow-x: hidden;
  margin-bottom: 8px;
}
.help-panel h3{ margin: 4px 0 8px 0; font-family:'Orbitron', sans-serif }
.help-panel h4{ margin: 10px 0 6px 0 }
.help-panel p{ margin: 6px 0 10px 0; color: var(--muted) }
.help-panel ul{ margin: 0 0 10px 18px; padding:0; color:#bff7e4 }
.help-grid{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px }
@media (max-width: 720px){ .help-grid{ grid-template-columns: 1fr } }
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 800px at 70% -10%, rgba(0,255,156,0.08), transparent 60%),
              radial-gradient(900px 600px at -10% 110%, rgba(22,201,255,0.07), transparent 60%),
              linear-gradient(180deg, #000 0%, #041116 100%);
  color:var(--text);
  font-family:'Fira Code', monospace;
  overflow:hidden; /* constant page, no scrolling */
  /* Respect safe area on mobile and give breathing room on live site headers */
  padding-top: env(safe-area-inset-top, 0px);
}

/* Neon grid overlay */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image: repeating-linear-gradient(0deg, rgba(0,255,156,.04) 0 1px, transparent 1px 40px),
                    repeating-linear-gradient(90deg, rgba(22,201,255,.035) 0 1px, transparent 1px 40px);
  mask-image: radial-gradient(ellipse at 50% 0%, rgba(0,0,0,.75), transparent 70%);
  animation: gridFloat 22s linear infinite;
}
@keyframes gridFloat{ from{ transform: translateY(0) } to{ transform: translateY(-40px) } }

/* Matrix background canvas */
.matrix-bg{ position:fixed; inset:0; z-index:0; opacity:.38; filter: blur(0.3px) contrast(1.05); }

/* CRT + noise overlays */
.crt-overlay{
  pointer-events:none; position:fixed; inset:0; mix-blend-mode:soft-light;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,0.25) 0px, rgba(0,0,0,0.25) 2px, rgba(0,0,0,0.1) 3px, rgba(0,0,0,0.1) 4px);
  animation: none !important;
}
.noise-overlay{
  pointer-events:none; position:fixed; inset:0; opacity:.03; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
  animation: none !important;
}
@keyframes flicker{ 0%,100%{opacity:.9} 50%{opacity:1}}
@keyframes noise{ 0%{transform:translate(0,0)} 50%{transform:translate(-10px,10px)} 100%{transform:translate(0,0)} }

.viewport{max-width:1100px; margin:16px auto; padding:10px 14px; height:calc(100% - 36px); display:flex; flex-direction:column; gap:10px; position:relative; z-index:1;
  /* Add extra top padding that adapts to device safe area */
  padding-top: clamp(12px, calc(env(safe-area-inset-top, 0px) + 16px), 40px);
}

/* HUD */
.hud{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.brand{display:flex; align-items:center; gap:10px}
.brand .logo{color:var(--neon); text-shadow:0 0 12px rgba(0,255,156,.8); font-size:20px}
.hud h1{font-family:'Orbitron', sans-serif; margin:0; font-size:18px; letter-spacing:.8px}
.controls{display:flex; gap:8px; align-items:center}
/* Slightly smaller HUD controls to give the title more room */
.hud .btn{ padding:6px 10px; font-size:13px }
.hud .btn.tiny{ padding:3px 6px; font-size:10px }
.hud .select-wrap span{ font-size:10px }
.hud .select-wrap select{ font-size:13px; padding:6px 26px 6px 8px }
/* Tighten Mission Code input height (inline style requires !important to override) */
.hud #seedInput{ height:32px !important; padding:6px 8px !important; font-size:13px !important }
@media (max-width: 860px){ .hud h1{font-size:16px} }
@media (max-width: 600px){ .hud h1{font-size:14px} }
.select-wrap{display:flex; flex-direction:column; gap:4px; position:relative}
.select-wrap span{font-size:11px; color:var(--muted)}
.select-wrap select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:#051012; color:var(--text); border:1px solid #0f3333;
  border-radius:10px; padding:8px 28px 8px 10px; font-family:'Fira Code', monospace; font-size:14px;
  color-scheme: dark;
  font-weight:500;
}
.select-wrap select:focus{outline:2px solid rgba(0,255,156,.35); outline-offset:2px}
.select-wrap::after{
  content:""; position:absolute; right:10px; top:32px; width:0; height:0;
  border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid #84e7c9; pointer-events:none; opacity:.85
}
/* Dropdown list colors (where supported) */
select option{background:#06161a; color:#c8ffea; font-weight:500}
select option:checked{background:#0b2a2a; color:#eafff7}
select option:hover{background:#0b2a2a; color:#eafff7}

.btn{background:#09343a; border:1px solid #135b5b; color:var(--text); padding:8px 12px; border-radius:10px; cursor:pointer; text-shadow:0 1px 0 rgba(0,0,0,.4);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease }
.btn:hover{box-shadow:0 0 16px rgba(0,255,156,.38), inset 0 0 0 1px rgba(0,255,156,.12)}
.btn:focus-visible{ outline:2px solid rgba(0,255,156,.45); outline-offset:2px }
.btn.primary{
  background: linear-gradient(180deg, #12b78a, #0a5f56);
  border-color: #18c8a0;
  color: #eafff7;
  box-shadow: 0 0 14px rgba(0,255,156,.22), inset 0 0 0 1px rgba(0,255,156,.18);
}
.btn.primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,255,156,.28), 0 0 18px rgba(22,201,255,.12), inset 0 0 0 1px rgba(0,255,156,.22);
}
.btn.primary:active{
  transform: translateY(0);
  box-shadow: 0 0 10px rgba(0,255,156,.22), inset 0 0 0 1px rgba(0,255,156,.28);
}
.btn.ghost{background:rgba(6,34,38,.5); border-color:#1a7777}
.btn.ghost:hover{box-shadow:0 0 16px rgba(0,255,156,.45), inset 0 0 0 1px rgba(0,255,156,.2)}
.btn.ghost.active{background:linear-gradient(180deg,#0e3b3f,#0a2a2e); border-color:#17a7a7; box-shadow:0 0 18px rgba(0,255,156,.5), inset 0 0 0 1px rgba(0,255,156,.28)}
.btn.tiny{padding:4px 8px; font-size:11px; margin-left:8px}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* Make Start button slightly more prominent without layout changes */
.hud #btnStart{
  /* smaller padding to be less prominent */
  padding:3px 8px; /* was 4px 8px */
  font-weight:600;
  letter-spacing:.2px;
  background: linear-gradient(180deg, #0fb086, #0a5f56); /* slightly dimmer */
  border-color:#18c8a0;
  /* push Start to far right and be last */
  order: 999;
  margin-left: auto;
}
.hud #btnStart:hover{ box-shadow: 0 6px 16px rgba(0,255,156,.28), inset 0 0 0 1px rgba(0,255,156,.2) }
.hud #btnStart:active{ box-shadow: 0 0 10px rgba(0,255,156,.22), inset 0 0 0 1px rgba(0,255,156,.28) }

/* Stats */
.stats{display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap:10px}
.stat{background:linear-gradient(180deg,#06161a,#041014); border:1px solid #0f3333; padding:8px 10px; border-radius:10px; display:flex; flex-direction:column; gap:4px; position:relative; overflow:visible}
.stat.wide{grid-column: span 3}
.stat label{font-size:11px; color:var(--muted)}
.stat span{font-family:'Orbitron', sans-serif; font-size:18px}
.meter{height:14px; background:#051012; border:1px solid #0f3333; border-radius:8px; overflow:hidden}
.bar{height:100%; width:0%; background:linear-gradient(90deg, var(--good), var(--warn) 60%, var(--danger)); box-shadow:0 0 14px rgba(255,59,107,.35); animation: barGlow 3.4s ease-in-out infinite}
@keyframes barGlow{ 0%{ filter:saturate(100%); } 50%{ filter:saturate(130%); } 100%{ filter:saturate(100%); } }

/* Terminal */
.terminal-wrap{flex:1 1 auto; min-height:0; margin-top:8px; margin-bottom:10px}
.terminal{height:100%; background: radial-gradient(800px 600px at 50% 0%, rgba(0,255,156,0.06), transparent 40%), #02090d; border:1px solid #0f3333; border-radius:12px; overflow:hidden; position:relative}
.terminal::before{content:""; position:absolute; inset:0; pointer-events:none; box-shadow: inset 0 0 0 1px rgba(0,255,156,0.12), inset 0 0 80px rgba(0,255,156,0.06)}
.terminal-inner::after{content:""; position:absolute; left:-40%; right:-40%; height:110%; top:-5%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.03), transparent); transform: skewX(-20deg); animation: sweep 7s linear infinite; pointer-events:none}
@keyframes sweep{ 0%{ transform: translateX(-30%) skewX(-20deg)} 100%{ transform: translateX(30%) skewX(-20deg)} }
.mac-titlebar{height:34px; display:flex; align-items:center; justify-content:center; gap:8px; padding:0 10px; background:linear-gradient(180deg, rgba(8,20,22,0.6), rgba(4,12,14,0.6)); border-bottom:1px solid #0f3333; position:sticky; top:0; z-index:2; backdrop-filter: blur(8px) saturate(140%);
  overflow:hidden}
.mac-titlebar::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(0,255,156,.12), transparent); transform: translateX(-120%); animation: shimmer 6s infinite}
@keyframes shimmer{ 0%{ transform: translateX(-120%) } 50%{ transform: translateX(120%) } 100%{ transform: translateX(120%) } }
.traffic-lights{position:absolute; left:10px; display:flex; gap:8px}
.traffic-lights .light{width:12px; height:12px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.35), 0 0 6px rgba(0,0,0,.2); cursor:pointer; transition: transform .12s ease, box-shadow .12s ease}
.traffic-lights .light:hover{transform:translateY(-1px)}
.traffic-lights .light{animation: breathe 3.2s ease-in-out infinite}
@keyframes breathe{ 0%{ filter: drop-shadow(0 0 0 rgba(0,255,156,.0)) } 50%{ filter: drop-shadow(0 0 8px rgba(0,255,156,.5)) } 100%{ filter: drop-shadow(0 0 0 rgba(0,255,156,.0)) } }
.traffic-lights .red{background:#ff5f56}
.traffic-lights .yellow{background:#ffbd2e}
.traffic-lights .green{background:#27c93f}
.traffic-lights .red:hover{box-shadow:0 0 8px rgba(255,95,86,.7)}
.traffic-lights .yellow:hover{box-shadow:0 0 8px rgba(255,189,46,.7)}
.traffic-lights .green:hover{box-shadow:0 0 8px rgba(39,201,63,.7)}
.window-title{font-family:'Fira Code', monospace; font-size:12px; color:#84e7c9; opacity:.85}
.terminal-inner{height:calc(100% - 34px); overflow:auto; padding:18px}
.log{margin:0; white-space:pre-wrap; font-size:14px; line-height:1.4}
.input-line{display:flex; flex-direction:column; gap:6px; margin-top:12px; padding-bottom:4px}
.ref-line, .type-line{display:flex; align-items:center; gap:6px; overflow-x:auto; white-space:nowrap}
.type-line{gap:0}
.prompt{color:var(--neon); margin-right:8px}
.prompt-dim{opacity:.5; margin-right:8px}
.ghost{color:#4fbf97; opacity:.5; white-space:pre}
.typed{color:var(--text); white-space:pre}
.typed .good{color:var(--text)}
.typed .bad{color:var(--danger)}
.caret{width:6px; height:1em; background:var(--neon); margin-left:0; display:inline-block; animation: blink .85s step-end infinite; box-shadow:0 0 6px rgba(0,255,156,.6); border-radius:1px}
@keyframes blink{50%{opacity:0}}

/* Keypress spark particles */
.spark{ position:fixed; width:6px; height:6px; border-radius:50%; pointer-events:none; z-index:1500; mix-blend-mode:screen; animation: sparkPop .5s ease-out forwards }
.spark.good{ background: radial-gradient(circle, #79ffd6, transparent 70%) }
.spark.bad{ background: radial-gradient(circle, #ff3b6b, transparent 70%) }
@keyframes sparkPop{ 0%{ transform: scale(.6); opacity:.9 } 60%{ transform: translateY(-12px) scale(1.1); opacity:.8 } 100%{ transform: translateY(-24px) scale(.2); opacity:0 } }

/* IDS alert wave pulse on detection bar */
.meter .bar.ids-wave{animation: idsPulse 0.9s ease-in-out infinite alternate; filter:saturate(130%)}
@keyframes idsPulse{0%{box-shadow:0 0 14px rgba(255,59,107,.35)}100%{box-shadow:0 0 28px rgba(255,59,107,.7)}}

/* Fullscreen terminal */
.terminal.fullscreen{position:fixed; inset:12px; z-index:999; border-color:#0fe3b6; box-shadow:0 0 0 2px rgba(0,255,156,.25), 0 20px 60px rgba(0,0,0,.6)}

/* Minimized window */
.terminal.minimized{height:auto}
.terminal.minimized .terminal-inner{display:none}

/* Busted red flash */
.busted-flash::after{content:""; position:fixed; inset:0; background:rgba(255,0,60,.25); pointer-events:none; animation: busted .6s ease; z-index:1000}
@keyframes busted{0%{opacity:.9} 100%{opacity:0}}

.bottom-hint{display:flex; align-items:flex-start; justify-content:space-between; color:var(--muted); font-size:12px; padding:8px 0}
.chips{display:flex; gap:10px; flex-wrap:wrap; max-width:70%}
.chip{border:1px solid #0f3333; border-radius:999px; padding:6px 10px; background:#07181b; line-height:1.2}
.chip:hover{ box-shadow: 0 0 12px rgba(0,255,156,.22); border-color:#0fe3b6 }

/* Vertical history list */
.history-list{ display:flex; flex-direction:column; gap:8px; max-height:36vh; overflow:auto; padding-right:6px }
.history-item{ background:linear-gradient(180deg,#06161a,#041014); border:1px solid #0f3333; border-radius:10px; padding:8px 10px; box-shadow: 0 0 14px rgba(0,255,156,.08) }
.history-item .line1{ font-family:'Fira Code', monospace; font-size:14px; color:#d1ffe8 }
.history-item .line2{ font-size:12px; color: var(--muted); margin-top:2px }
.history-item.win{ border-color: rgba(0,255,156,.35) }
.history-item.fail{ border-color: rgba(255,59,107,.4) }
.history-item.abort{ border-color: rgba(255,166,0,.35) }

/* Overlay summary */
.overlay{position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.6); backdrop-filter: blur(3px); z-index:2000}
.overlay .panel{z-index:2001}
.overlay.hidden{display:none}
.panel{width:min(680px, 92vw); background:linear-gradient(180deg,#06161a,#041014); border:1px solid #0f3333; border-radius:14px; padding:18px 18px 14px; box-shadow:0 0 40px rgba(0,255,156,.15)}
.panel h2{margin:4px 0 12px 0}
.summary{display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-bottom:12px}
.summary > div{background:#061317; border:1px solid #0f3333; border-radius:10px; padding:10px}
.summary label{display:block; font-size:11px; color:var(--muted)}
.summary span{font-family:'Orbitron', sans-serif; font-size:18px}
.panel-actions{display:flex; justify-content:flex-end; gap:8px}

/* Glitch text */
.glitch{position:relative; z-index:5}
.glitch{ position:relative; color:var(--text); text-shadow: 0 0 8px rgba(0,255,156,.6); font-family:'Orbitron', sans-serif}
.glitch::before, .glitch::after{
  content:attr(data-text); position:absolute; left:0; top:0; width:100%; clip-path: inset(0 0 0 0);
}
.glitch::before{ text-shadow: -2px 0 var(--neon-2); animation: none !important }
.glitch::after{ text-shadow: 2px 0 var(--neon); animation: none !important }
@keyframes glitch1{0%{clip-path: inset(0 0 90% 0)} 20%{clip-path: inset(10% 0 70% 0)} 40%{clip-path: inset(80% 0 5% 0)} 60%{clip-path: inset(30% 0 40% 0)} 80%{clip-path: inset(60% 0 15% 0)} 100%{clip-path: inset(0 0 90% 0)}}
@keyframes glitch2{0%{clip-path: inset(80% 0 5% 0)} 25%{clip-path: inset(20% 0 60% 0)} 50%{clip-path: inset(70% 0 15% 0)} 75%{clip-path: inset(5% 0 85% 0)} 100%{clip-path: inset(80% 0 5% 0)}}

/* Scrollbar */
.terminal-inner::-webkit-scrollbar{ width:10px }
.terminal-inner::-webkit-scrollbar-thumb{ background:linear-gradient(180deg, var(--neon), var(--neon-2)); border-radius:6px }

/* Site Footer */
.site-footer{ position:fixed; left:0; right:0; bottom:0; z-index:10; padding:8px 12px; border-top:1px solid rgba(0,255,156,.15); background:rgba(0,0,0,.35); backdrop-filter: blur(4px) saturate(120%); }
.site-footer-inner{ max-width:1100px; margin:0 auto; display:flex; align-items:center; gap:10px; color:#bff7e4; font-size:12px; opacity:.9 }
.site-footer .sep{ opacity:.4 }
.site-footer a{ color:var(--neon-2); text-decoration:none }
.site-footer a:hover{ text-decoration:underline }