:root{
  --bg:#071019;
  --neon-cyan:#00f6ff;
  --neon-mag:#ff00f6;
  --neon-green:#39ff14;
  --muted:#9aa6b2;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui, "Courier New", monospace;background:
  radial-gradient(800px 400px at 10% 10%, rgba(0,246,255,0.03), transparent),
  radial-gradient(700px 350px at 90% 90%, rgba(255,0,246,0.03), transparent),
  var(--bg);
  color:#e6f7ff;
  -webkit-font-smoothing:antialiased}

.wrap{
  max-width:1100px;
  margin:28px auto;
  padding:22px;
  border-radius:14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.05));
  box-shadow: 0 6px 40px rgba(2,8,23,0.7), inset 0 1px 0 rgba(255,255,255,0.02);
  border: 1px solid rgba(0,246,255,0.06);
}

/* header */
.header{display:flex;flex-direction:column;align-items:center;gap:6px}
.title{
  font-size:28px;
  letter-spacing:1px;
  color:var(--neon-cyan);
  text-shadow:0 0 6px rgba(0,246,255,0.5), 0 0 18px rgba(0,246,255,0.15);
  margin:0;
}
.sub{color:var(--muted);font-size:13px;}

/* controls */
.controls{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  margin:18px 0;
  flex-wrap:wrap;
}
.controls input{
  width:360px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.04);
  background:rgba(255,255,255,0.01);
  color:#e6f7ff;
  outline:none;
}
.controls button{
  padding:10px 14px;
  border-radius:10px;
  border:1px solid rgba(0,246,255,0.12);
  background:transparent;
  color:var(--neon-cyan);
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:0.6px;
  transition:all .16s ease;
  box-shadow:0 6px 18px rgba(0,246,255,0.03);
}
.controls button:hover{transform:translateY(-2px); background:rgba(0,246,255,0.04)}
.toggle{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.toggle input{width:18px;height:18px;transform:translateY(2px)}

/* stage layout */
.stage{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:18px;
  margin-top:6px;
  position:relative;
  min-height:360px;
}

/* nodes */
.node{
  border-radius:12px;
  padding:14px;
  height:320px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.06));
  box-shadow:0 8px 30px rgba(2,8,23,0.6), inset 0 0 30px rgba(0,0,0,0.2);
  border:1px solid rgba(255,255,255,0.02);
}
.node h2{
  margin:0 0 8px 0;
  font-size:16px;
  color:var(--neon-mag);
  text-shadow:0 0 8px rgba(255,0,246,0.15);
}
.log{
  font-size:13px;
  color:#bfefff;
  height:240px;
  overflow:auto;
  padding-right:6px;
}

/* logs color by role */
#clientLog p{color:#90e0ff}
#attackerLog p{color:#ffb3b3}
#serverLog p{color:#b6ffb3}

/* packet layer absolute */
#packetLayer{
  position:absolute;
  left:0;top:0;right:0;bottom:0;
  pointer-events:none;
}

/* packet style */
.packet{
  position:absolute;
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  color:#071019;
  background:linear-gradient(90deg, rgba(0,246,255,0.95), rgba(255,0,246,0.95));
  box-shadow:0 10px 30px rgba(0,0,0,0.5), 0 0 20px rgba(0,246,255,0.12);
  transform:translate(-50%,-50%) scale(1);
  transition:transform 0.25s linear, opacity .25s linear;
  white-space:nowrap;
}

/* packet modified style */
.packet.modified{
  background:linear-gradient(90deg, rgba(255,120,120,0.98), rgba(255,40,40,0.92));
  color:white;
  text-decoration:underline;
  text-decoration-style:wavy;
}

/* footer */
.footer{display:flex;justify-content:space-between;align-items:center;margin-top:14px;color:var(--muted);font-size:13px}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px}
.dot.red{background:linear-gradient(180deg,#ff4d4d,#ff0000);box-shadow:0 0 10px rgba(255,0,0,0.25)}
.dot.green{background:linear-gradient(180deg,#9fff8f,#39ff14);box-shadow:0 0 10px rgba(57,255,20,0.15)}

.hint{opacity:0.85}
code{background:rgba(255,255,255,0.03);padding:4px;border-radius:6px;color:var(--neon-cyan)}