/* Darkpool retro terminal — M11 polish pass.
 * Phosphor-green CRT aesthetic, monospaced, no images.
 * All colors tokenized at :root for easy retheming. */

:root {
  --bg:          #02060a;
  --bg-panel:   #08130c;
  --bg-row-alt: #061008;

  --fg:          #33ff66;   /* primary phosphor */
  --fg-bright:  #99ffbb;    /* highlights, labels */
  --fg-accent:  #66ffaa;    /* headings, links */
  --fg-muted:   #557766;    /* secondary text, inert */
  --fg-dim:     #335544;    /* strikethrough color */

  --line:        #2a8b3a;   /* dashed borders */
  --line-soft:  #1c5a26;    /* table inner lines */

  --warn-bg:    #2a1f0a;
  --warn-line:  #ddaa44;
  --warn-fg:    #ffdd88;
  --warn-link:  #ffee99;

  --err-bg:     #2a0a0a;
  --err-line:   #ff4444;
  --err-fg:     #ff8888;

  --self-bg:    #1a2233;
  --self-fg:    #aaccff;
  --self-tag:   #ffdd88;

  --new-bg:     #15291a;
  --badge-bg:   #ffdd44;

  --glow:       0 0 1px currentColor;
}

* { box-sizing: border-box; }

html, body {
  background: var(--bg);
}

body {
  color: var(--fg);
  font-family: "Menlo", "Consolas", "Courier New", monospace;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 auto;
  padding: 1.5rem 1.75rem 3rem;
  max-width: 1000px;
  text-shadow: var(--glow);                /* subtle phosphor bloom */
}

/* faint scanline overlay — kept very low contrast */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.015) 0,
    rgba(255, 255, 255, 0.015) 1px,
    transparent 1px,
    transparent 3px
  );
  z-index: 1000;
}

a {
  color: var(--fg-accent);
  text-decoration: none;
}
a:hover { text-decoration: underline; }
a:focus-visible { outline: 1px dashed var(--fg-accent); outline-offset: 2px; }

h1, h2, h3 {
  color: var(--fg-accent);
  margin: 1.4em 0 0.5em;
  letter-spacing: 0.04em;
  font-weight: bold;
}
h2 { font-size: 1.05em; }
h3 { font-size: 1em; color: var(--fg-bright); }

p { margin: 0.6em 0; }

pre, code { font-family: inherit; }
pre { margin: 0.6em 0; }

/* ---------- header / banner ---------- */

header { margin-bottom: 0.4em; }

.banner {
  color: var(--fg);
  margin: 0 0 0.6em;
  white-space: pre;
  font-weight: bold;
}

header nav {
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
  padding: 0.5em 0.2em;
  margin-bottom: 1.6em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 1.4em;
  align-items: center;
}

header nav a {
  color: var(--fg-accent);
  padding: 0.05em 0.1em;
}
header nav a.active {
  color: var(--bg);
  background: var(--fg-accent);
  text-decoration: none;
  text-shadow: none;
}
header nav a.active:hover { text-decoration: none; }

.user-tag {
  color: var(--fg-bright);
  margin-left: auto;
}

.inline-form { display: inline; }

/* ---------- buttons ---------- */

button {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--fg);
  padding: 0.3em 0.9em;
  font: inherit;
  text-shadow: var(--glow);
  cursor: pointer;
  transition: background 80ms linear, color 80ms linear;
}
button:hover:not(:disabled) {
  background: var(--fg);
  color: var(--bg);
  text-shadow: none;
}
button:focus-visible {
  outline: 1px dashed var(--fg-accent);
  outline-offset: 2px;
}
button:disabled {
  color: var(--fg-muted);
  border-color: var(--fg-muted);
  cursor: not-allowed;
  text-shadow: none;
}

/* ---------- inputs ---------- */

input[type="text"],
input[type="password"],
input[name="username"],
select {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  color: var(--fg-bright);
  font: inherit;
  padding: 0.35em 0.55em;
  width: 18em;
  text-shadow: var(--glow);
}
input:focus, select:focus {
  outline: none;
  border-color: var(--fg-accent);
  box-shadow: 0 0 0 1px var(--fg-accent) inset;
}

select { width: auto; min-width: 20em; }

fieldset {
  border: 1px dashed var(--line);
  padding: 0.7em 1em;
  margin: 1em 0;
}
legend {
  color: var(--fg-bright);
  padding: 0 0.5em;
  font-weight: bold;
}
.radio { display: inline-block; margin-right: 1.4em; }

.auth-form p { margin: 0.8em 0; }
.auth-form label { display: inline-block; width: 9em; }

/* ---------- callouts ---------- */

.error {
  background: var(--err-bg);
  border: 1px solid var(--err-line);
  color: var(--err-fg);
  padding: 0.55em 0.85em;
  margin: 0 0 1em;
}

.alert {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  color: var(--warn-fg);
  padding: 0.55em 0.85em;
  margin: 0 0 1em;
}
.alert a { color: var(--warn-link); }

/* ---------- panels ---------- */

.stat-block {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  padding: 0.85em 1.1em;
  white-space: pre;
  overflow-x: auto;
}

.legend {
  color: var(--fg-bright);
  background: var(--bg-panel);
  border: 1px dashed var(--line);
  padding: 0.55em 0.85em;
  margin: 0 0 1.2em;
  white-space: pre-wrap;
}

.hint {
  color: var(--fg-muted);
  text-shadow: none;
}
.muted {
  color: var(--fg-muted);
  margin-left: 0.6em;
  text-shadow: none;
}

section { margin-bottom: 1.5em; }

/* ---------- tables ---------- */

table.loadout {
  border-collapse: collapse;
  margin: 0 0 1.2em;
  width: 100%;
}
table.loadout th,
table.loadout td {
  border: 1px solid var(--line-soft);
  padding: 0.35em 0.75em;
  text-align: left;
  vertical-align: middle;
}
table.loadout th {
  color: var(--fg-accent);
  background: var(--bg-panel);
  border-color: var(--line);
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.92em;
}
table.loadout tbody tr:nth-child(even) td { background: var(--bg-row-alt); }
table.loadout tbody tr:hover td { background: #0e1f14; }

/* inert (struck-through) cells */
table.loadout td.inert,
table.loadout th.inert {
  color: var(--fg-muted);
  text-decoration: line-through;
  text-decoration-color: var(--fg-dim);
  text-shadow: none;
}

/* delta cells */
table.loadout td.delta-up   { color: var(--fg-accent); font-weight: bold; }
table.loadout td.delta-down { color: var(--err-fg);    font-weight: bold; }

/* highlighted rows — override striping/hover */
table.loadout tr.row-new td,
table.loadout tr.row-new:hover td,
table.loadout tr.row-new:nth-child(even) td {
  background: var(--new-bg);
}
table.loadout tr.row-self td,
table.loadout tr.row-self:hover td,
table.loadout tr.row-self:nth-child(even) td {
  background: var(--self-bg);
  color: var(--self-fg);
}

.bot-tag  { color: var(--fg-muted); font-size: 0.85em; text-shadow: none; }
.self-tag { color: var(--self-tag); font-size: 0.85em; font-weight: bold; }

.badge-new {
  background: var(--badge-bg);
  color: var(--bg);
  padding: 0 0.35em;
  font-weight: bold;
  border-radius: 2px;
  text-shadow: none;
  margin-left: 0.3em;
}

/* ---------- selection ---------- */

::selection {
  background: var(--fg-accent);
  color: var(--bg);
}