* {
  box-sizing: border-box;
}

:root {
  --bg: #050806;
  --panel: #08100b;
  --panel-2: #0b160f;
  --line: #173d24;
  --text: #9dffb5;
  --muted: #5f9a6c;
  --bright: #d5ffdf;
  --warning: #ffd36f;
  --danger: #ff6b6b;

  --shadow:
    0 0 25px
    rgba(70, 255, 120, 0.06);
}

body {
  margin: 0;
  min-height: 100vh;

  background:
    radial-gradient(
      circle at top,
      rgba(26, 85, 45, 0.14),
      transparent 34rem
    ),
    var(--bg);

  color: var(--text);

  font-family:
    "Courier New",
    Courier,
    monospace;
}

button {
  font: inherit;
}

.scanlines {
  pointer-events: none;

  position: fixed;

  inset: 0;

  z-index: 99;

  opacity: 0.12;

  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 3px,
      rgba(255,255,255,0.04) 4px
    );
}

.game-shell {
  width:
    min(
      1500px,
      calc(100% - 28px)
    );

  margin:
    14px auto 40px;
}

.panel {
  background:
    linear-gradient(
      180deg,
      rgba(11, 22, 15, 0.98),
      rgba(6, 14, 9, 0.98)
    );

  border:
    1px solid
    var(--line);

  box-shadow:
    var(--shadow);
}

/* HEADER */

.topbar {
  min-height: 100px;

  padding:
    18px 22px;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 20px;

  margin-bottom:
    14px;
}

.eyebrow {
  margin:
    0 0 6px;

  color:
    var(--muted);

  font-size:
    0.78rem;

  letter-spacing:
    0.14em;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;

  font-size:
    clamp(
      1.55rem,
      3vw,
      2.5rem
    );

  letter-spacing:
    0.08em;

  text-shadow:
    0 0 16px
    rgba(
      108,
      255,
      147,
      0.3
    );
}

.status-badge {
  border:
    1px solid
    var(--line);

  padding:
    10px 14px;

  display: flex;

  align-items: center;

  gap: 9px;

  color:
    var(--bright);
}

.status-dot {
  width: 10px;
  height: 10px;

  background:
    var(--text);

  border-radius:
    50%;

  box-shadow:
    0 0 12px
    var(--text);
}

/* MAIN GRID */

.grid {
  display: grid;

  grid-template-columns:
    minmax(230px, 0.8fr)
    minmax(360px, 1.6fr)
    minmax(280px, 1fr);

  gap: 14px;
}

.stats-panel,
.hardware-panel,
.terminal-panel {
  min-height:
    590px;
}

.panel-title {
  padding:
    11px 14px;

  border-bottom:
    1px solid
    var(--line);

  color:
    var(--bright);

  font-size:
    0.82rem;

  letter-spacing:
    0.12em;
}

/* STATS */

.stats-panel {
  padding-bottom:
    18px;
}

.stat-row {
  display: flex;

  justify-content:
    space-between;

  gap: 14px;

  padding:
    13px 14px 7px;

  font-size:
    0.86rem;
}

.stat-row span {
  color:
    var(--muted);
}

.stat-row strong {
  color:
    var(--bright);
}

.bar {
  height:
    8px;

  background:
    #020504;

  border:
    1px solid
    #12331d;

  margin:
    0 14px 6px;

  overflow:
    hidden;
}

.bar-fill {
  width: 0%;
  height: 100%;

  background:
    var(--text);

  box-shadow:
    0 0 10px
    rgba(
      157,
      255,
      181,
      0.55
    );

  transition:
    width
    0.25s ease;
}

/* TERMINAL */

.terminal-title {
  display: flex;

  justify-content:
    space-between;
}

.terminal {
  height:
    545px;

  overflow-y:
    auto;

  padding:
    14px;

  font-size:
    0.88rem;

  line-height:
    1.55;

  scrollbar-width:
    thin;

  scrollbar-color:
    var(--line)
    transparent;
}

.log-line {
  margin-bottom:
    6px;

  color:
    var(--text);
}

.log-line .time {
  color:
    var(--muted);
}

.log-line.warning {
  color:
    var(--warning);
}

.log-line.danger {
  color:
    var(--danger);
}

.log-line.good {
  color:
    var(--bright);
}

.blink {
  animation:
    blink
    0.8s
    steps(1)
    infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* HARDWARE */

.hardware-panel {
  padding-bottom:
    12px;
}

.upgrade-card {
  padding:
    14px;

  border-bottom:
    1px solid
    rgba(
      23,
      61,
      36,
      0.75
    );
}

.upgrade-card h3 {
  margin-bottom:
    5px;

  font-size:
    0.95rem;

  color:
    var(--bright);
}

.upgrade-card h3 span {
  color:
    var(--muted);

  font-size:
    0.72rem;

  font-weight:
    normal;
}

.upgrade-card p {
  margin-bottom:
    12px;

  color:
    var(--muted);

  font-size:
    0.77rem;

  line-height:
    1.4;
}

/* BUTTONS */

button {
  cursor: pointer;

  border:
    1px solid
    #245834;

  background:
    #0b2112;

  color:
    var(--text);

  padding:
    9px 11px;

  transition:
    0.15s ease;
}

button:hover:not(:disabled) {
  background:
    #12341d;

  color:
    var(--bright);

  box-shadow:
    0 0 14px
    rgba(
      101,
      255,
      140,
      0.11
    );
}

button:disabled {
  cursor:
    not-allowed;

  opacity:
    0.35;
}

/* CONTROL PANEL */

.control-panel {
  margin-top:
    14px;

  padding:
    14px;

  display: flex;

  justify-content:
    space-between;

  align-items:
    flex-end;

  gap: 18px;

  flex-wrap:
    wrap;
}

.control-panel .panel-title {
  padding:
    0 0 10px;

  border: 0;
}

.mode-buttons,
.actions,
.event-choices {
  display: flex;

  gap: 8px;

  flex-wrap:
    wrap;
}

.mode.active {
  background:
    var(--text);

  color:
    #061009;

  border-color:
    var(--text);
}

.danger {
  color:
    var(--danger);

  border-color:
    #6e2424;
}

/* NETWORK */

.network-panel {
  margin-top:
    14px;

  padding:
    18px;
}

.network-header {
  display: flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap: 20px;

  margin-bottom:
    8px;
}

.network-header h2 {
  margin:
    0;

  color:
    var(--bright);
}

.network-info {
  color:
    var(--muted);

  max-width:
    850px;

  line-height:
    1.5;
}

.network-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        250px,
        1fr
      )
    );

  gap:
    12px;

  margin-top:
    18px;
}

.node-card {
  border:
    1px solid
    var(--line);

  background:
    rgba(
      2,
      8,
      4,
      0.75
    );

  padding:
    15px;

  position:
    relative;
}

.node-card::before {
  content:
    "";

  position:
    absolute;

  left: 0;
  top: 0;

  width:
    3px;

  height:
    100%;

  background:
    var(--text);
}

.node-card.high-risk::before {
  background:
    var(--warning);
}

.node-card.extreme-risk::before {
  background:
    var(--danger);
}

.node-title {
  display: flex;

  justify-content:
    space-between;

  gap:
    12px;

  margin-bottom:
    12px;
}

.node-title h3 {
  color:
    var(--bright);

  margin:
    0;

  font-size:
    0.95rem;
}

.node-type {
  color:
    var(--muted);

  font-size:
    0.75rem;
}

.node-stat {
  display: flex;

  justify-content:
    space-between;

  gap:
    10px;

  margin:
    7px 0;

  font-size:
    0.8rem;
}

.node-stat span {
  color:
    var(--muted);
}

.node-actions {
  display: flex;

  gap: 8px;

  margin-top:
    14px;
}

.node-actions button {
  flex: 1;
}

.node-compromised {
  opacity:
    0.45;
}

.node-compromised::after {
  content:
    "COMPROMISED";

  position:
    absolute;

  top:
    50%;

  left:
    50%;

  transform:
    translate(
      -50%,
      -50%
    )
    rotate(-8deg);

  font-size:
    1.2rem;

  color:
    var(--bright);

  border:
    1px solid
    var(--bright);

  padding:
    6px 10px;

  background:
    rgba(
      0,
      0,
      0,
      0.8
    );
}

/* EVENT */

.event-panel {
  margin-top:
    14px;

  padding:
    18px;

  border-color:
    #745f24;
}

.event-header {
  display: flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  gap: 20px;
}

.event-header h2 {
  margin-bottom:
    10px;

  color:
    var(--warning);
}

.event-header > span {
  color:
    var(--warning);

  font-size:
    2rem;
}

.event-panel > p {
  color:
    #e9d9a3;

  line-height:
    1.55;
}

/* GAME OVER */

.game-over {
  position:
    fixed;

  inset:
    0;

  z-index:
    120;

  background:
    rgba(
      0,
      0,
      0,
      0.88
    );

  display:
    grid;

  place-items:
    center;

  padding:
    20px;
}

.game-over-card {
  width:
    min(
      500px,
      100%
    );

  padding:
    30px;

  text-align:
    center;

  border-color:
    #6e2424;
}

.game-over-card h2 {
  color:
    var(--danger);

  font-size:
    2rem;
}

.hidden {
  display:
    none !important;
}

/* RESPONSIVE */

@media
(max-width: 1050px) {

  .grid {
    grid-template-columns:
      1fr 1fr;
  }

  .terminal-panel {
    grid-column:
      1 / -1;

    grid-row:
      1;
  }
}

@media
(max-width: 700px) {

  .game-shell {
    width:
      min(
        100% - 16px,
        1500px
      );

    margin-top:
      8px;
  }

  .grid {
    grid-template-columns:
      1fr;
  }

  .terminal-panel {
    grid-column:
      auto;
  }

  .stats-panel,
  .hardware-panel,
  .terminal-panel {
    min-height:
      auto;
  }

  .terminal {
    height:
      360px;
  }

  .topbar {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .network-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .control-panel {
    align-items:
      stretch;
  }
}