/* Wall of Shame — splash dashboard
   "Index of /" edition. Pairs with theme.css (reuses its palette). Turns the
   copyparty splash into: centered login bar (native #lf reparented) on top,
   then a live dashboard — stats, world map of attack origins, top offenders,
   and the newest 200 attacks. Live upsert every 15s with sonar pulses.
   Namespaced under #wos-* so it never collides with copyparty internals. */
:root {
  --wos-bg:#161616; --wos-panel2:#191919;
  --wos-fg:#cfcfcf; --wos-fg-max:#e9e9e9; --wos-muted:#8a8a8a; --wos-dim:#4a4a4a;
  --wos-border:#2a2a2a; --wos-hairline:#1f1f1f;
  --wos-link:#7ea6d6; --wos-accent:#b85450;
  --wos-red:#b85450; --wos-amber:#b8853d; --wos-gold:#c9a86a; --wos-green:#6b9b7a;
  --wos-blue:#5a8cc7; --wos-purple:#9a7ab5; --wos-gray:#8a8a8a;
}

/* the splash #wrap is hidden by JS after we reparent the login form out of it */

/* ---------------------------------------------------------- login bar */
#wos-login {
  display:flex; flex-direction:column; align-items:center; gap:.45rem; text-align:center;
  padding:1rem 1rem .9rem; border-bottom:1px solid var(--wos-border);
  font-family:var(--font-main, "JetBrainsMono Nerd Font", monospace);
}
#wos-login .wos-brand { color:var(--wos-fg-max); font-size:1.05rem; }
#wos-login .wos-brand::before { content:">_ "; color:var(--wos-link); }
#wos-login #b { margin:0; color:var(--wos-muted); font-size:.72rem; }
#wos-login #lf { display:flex; gap:.5rem; align-items:center; justify-content:center; flex-wrap:wrap; margin:.2rem 0; }
#wos-login #lf .wos-hide { display:none; }
#wos-login .wos-nav { display:flex; gap:.9rem; flex-wrap:wrap; justify-content:center; font-size:.7rem; }
#wos-login .wos-nav a { margin:0 !important; }
#wos-login ul, #wos-login .agr { display:contents; }
#wos-login h1 { display:none; }

/* ---------------------------------------------------------- layout */
#wos-dash { max-width:1180px; margin:0 auto; padding:0 1rem 3rem;
  font-family:var(--font-main, "JetBrainsMono Nerd Font", monospace); color:var(--wos-fg); }

#wos-cfg {
  display:flex; gap:1rem; flex-wrap:wrap; align-items:baseline;
  padding:.55rem 0; border-bottom:1px solid var(--wos-hairline);
  font-size:.72rem; color:var(--wos-muted);
}
#wos-cfg .tgl { cursor:pointer; user-select:none; color:var(--wos-muted); }
#wos-cfg .tgl b { color:var(--wos-green); font-weight:400; }
#wos-cfg .tgl.off b { color:var(--wos-dim); }
#wos-cfg .tgl:hover { color:var(--wos-fg); }
#wos-cfg .src { margin-left:auto; }

.wos-grid { display:grid; grid-template-columns:3fr 2fr; gap:1rem; margin-top:1rem; }
@media (max-width:900px){ .wos-grid { grid-template-columns:1fr; } }

.wos-panel { border-top:1px solid var(--wos-border); }
.wos-pt { padding:.5rem 0; border-bottom:1px solid var(--wos-hairline); }
.wos-pt h3 { margin:0; font-size:.9rem; font-weight:400; color:var(--wos-fg-max);
  display:flex; align-items:baseline; gap:.5rem; }
.wos-pt h3::before { content:">"; color:var(--wos-accent); }
.wos-pt .sub { font-size:.68rem; color:var(--wos-muted); margin-left:auto; font-weight:400; }
.wos-pb { padding:.6rem 0; }

/* ---------------------------------------------------------- stats */
#wos-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin-top:1rem; }
.wos-stat { padding:.7rem 0; border-top:1px solid var(--wos-border); }
.wos-stat .num { font-size:1.55rem; color:var(--wos-fg-max); line-height:1.2; }
.wos-stat .num.red { color:var(--wos-red); }
.wos-stat .num.blue { color:var(--wos-blue); }
.wos-stat .num.amber { color:var(--wos-amber); }
.wos-stat .num.green { color:var(--wos-green); }
.wos-stat .lbl { font-size:.66rem; color:var(--wos-muted); margin-top:.15rem; }
.wos-stat .det { font-size:.62rem; color:var(--wos-dim); margin-top:.1rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------------------------------------------------------- map */
#wos-mapwrap { position:relative; }
#wos-map { display:block; width:100%; height:auto; }
#wos-mapfx { position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
#wos-maptip {
  position:absolute; display:none; z-index:10; pointer-events:none;
  background:var(--wos-bg); border:1px solid var(--wos-border); padding:.35rem .5rem;
  font-size:.66rem; color:var(--wos-fg); max-width:240px;
}
#wos-maptip .ip { color:var(--wos-fg-max); }

/* ---------------------------------------------------------- group bars */
#wos-gtabs { display:flex; gap:.6rem; font-size:.7rem; margin-bottom:.5rem; flex-wrap:wrap; }
#wos-gtabs a { cursor:pointer; text-decoration:none; color:var(--wos-muted); }
#wos-gtabs a::before { content:"["; color:var(--wos-dim); }
#wos-gtabs a::after  { content:"]"; color:var(--wos-dim); }
#wos-gtabs a.on { color:var(--wos-fg-max); }
#wos-gtabs a.on::before, #wos-gtabs a.on::after { color:var(--wos-accent); }
.wos-bar { display:grid; grid-template-columns:minmax(0,1fr) 3.5em; gap:.5rem; align-items:center; font-size:.7rem; padding:.18rem 0; }
.wos-bar .track { grid-column:1; grid-row:1; height:100%; position:relative; }
.wos-bar .fill { position:absolute; inset:0 auto 0 0; background:var(--wos-panel2); border-right:2px solid var(--wos-blue); }
.wos-bar .lbl { grid-column:1; grid-row:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:var(--wos-fg); position:relative; z-index:1; padding:.1rem .3rem; }
.wos-bar .n { text-align:right; color:var(--wos-muted); }
.wos-bar:nth-child(2n) .fill { border-right-color:var(--wos-red); }

/* ---------------------------------------------------------- feed */
#wos-feedlist { max-height:72vh; overflow-y:auto; border-top:1px solid #222; }
#wos-feedlist::-webkit-scrollbar { width:6px; }
#wos-feedlist::-webkit-scrollbar-track { background:transparent; }
#wos-feedlist::-webkit-scrollbar-thumb { background:#3a3a3a; }
.wos-entry { display:grid; grid-template-columns:1fr auto; gap:.5rem;
  padding:.35rem .5rem; border-bottom:1px solid var(--wos-hairline); font-size:.75rem; }
.wos-entry:nth-child(2n) { background:var(--wos-panel2); }
.wos-entry:hover { background:#1c1c1c; }
.wos-ip { color:var(--wos-fg-max); }
.wos-meta { display:flex; flex-wrap:wrap; gap:.5rem; color:var(--wos-muted); font-size:.68rem; margin-top:.15rem; }
.wos-right { text-align:right; font-size:.62rem; color:var(--wos-muted); white-space:nowrap; }
.wos-tag { font-size:.65rem; letter-spacing:.05em; }
.wos-tag::before { content:"["; color:var(--wos-dim); }
.wos-tag::after  { content:"]"; color:var(--wos-dim); }
.wos-tag.src { color:var(--wos-blue); }
.wos-empty, .wos-err { padding:1rem 0; font-size:.75rem; }
.wos-empty { color:var(--wos-muted); font-style:italic; }
.wos-err { color:var(--wos-red); }

/* live upsert cues */
@keyframes wosFlash { 0% { background:rgba(184,84,80,.30); } 100% { background:transparent; } }
.wos-entry.new { animation:wosFlash 2.5s ease-out; }
#wos-livedot { color:var(--wos-green); animation:wosBlink 1.6s infinite; }
@keyframes wosBlink { 50% { opacity:.2; } }

.b-BRUTEFORCE,.b-EXPLOIT,.b-WAF,.b-DDOS { color:var(--wos-red); }
.b-SCANNER,.b-RATELIMIT { color:var(--wos-amber); }
.b-ABUSE { color:var(--wos-gold); }
.b-BOT { color:var(--wos-purple); }
.b-FIREWALL { color:var(--wos-blue); }
.b-CHALLENGE { color:var(--wos-green); }
.b-BANNED,.b-BLOCKED { color:var(--wos-gray); }

@media (max-width:600px) {
  .wos-entry { grid-template-columns:1fr; }
}