/* nncckkrr v1.0.0 — terminal noir */
:root {
  --bg: #050505;
  --fg: #f3f3f3;
  --dim: #777;
  --green: #00ff66;
  --red: #ff3048;
  --purple: #b45cff;
  --cyan: #66f6ff;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--fg);
  font-family: 'Courier New', ui-monospace, monospace; user-select: none; }
canvas#game { position: fixed; inset: 0; display: block; cursor: crosshair; }
.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; font-size: 14px; letter-spacing: 1px; }
#hud-top { position: absolute; top: 0; left: 0; right: 0; padding: 10px 14px;
  display: flex; justify-content: space-between; align-items: flex-start; }
#hud-meta { color: var(--dim); font-size: 12px; }
#hud-meta .sep { margin: 0 6px; opacity: .5; }
#hud-version { color: var(--fg); }
#hud-mods { color: var(--purple); margin-left: 10px; }
#hud-ping { margin-left: 10px; font-size: 11px; }
#hud-objective { color: var(--fg); font-size: 13px; text-align: right; }
#hud-objective .done { color: var(--green); }

#hud-bottom { position: absolute; left: 14px; right: 14px; bottom: 12px;
  display: flex; justify-content: space-between; align-items: flex-end; }
.bar-wrap { position: relative; width: 240px; height: 16px; border: 1px solid var(--fg);
  margin-bottom: 6px; background: rgba(255,255,255,.04); }
.bar { height: 100%; background: var(--fg); transition: width .12s steps(8); }
.bar-wrap.xp { height: 10px; border-color: var(--dim); }
.bar-wrap.xp .bar { background: var(--green); }
.bar-text { position: absolute; inset: 0; text-align: center; font-size: 10px; line-height: 15px;
  color: var(--bg); mix-blend-mode: difference; color: #999; }
#hud-stats-line span { margin-right: 16px; font-size: 13px; }
#hud-gld { color: var(--fg); }
#hud-install { color: var(--green); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

#dash-pips { text-align: right; margin-bottom: 6px; }
.pip { display: inline-block; width: 12px; height: 12px; border: 1px solid var(--cyan); margin-left: 5px; }
.pip.full { background: var(--cyan); }
#weapon-slots { text-align: right; }
.wslot { display: inline-block; border: 1px solid var(--dim); color: var(--dim);
  padding: 3px 8px; margin-left: 6px; font-size: 12px; }
.wslot.active { border-color: var(--fg); color: var(--fg); background: rgba(255,255,255,.08); }

#hud-prompt { position: absolute; left: 50%; bottom: 130px; transform: translateX(-50%);
  border: 1px solid var(--fg); padding: 5px 14px; font-size: 14px; background: rgba(5,5,5,.85); }
#hud-prompt.deny { color: var(--red); border-color: var(--red); }

#feed { position: absolute; right: 14px; top: 56px; text-align: right; font-size: 12px; color: var(--dim); }
#feed div { margin-bottom: 3px; animation: feedin .15s steps(4); }
#feed .g { color: var(--green); } #feed .r { color: var(--red); }
#feed .p { color: var(--purple); } #feed .c { color: var(--cyan); }
@keyframes feedin { from { transform: translateX(20px); opacity: 0; } }

/* ---------- overlays ---------- */
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(5,5,5,.78); z-index: 10; }
.panel { border: 1px solid var(--fg); background: var(--bg); padding: 22px 28px; min-width: 360px;
  box-shadow: 0 0 0 4px rgba(243,243,243,.06); }
.panel-title { font-size: 18px; letter-spacing: 4px; margin-bottom: 14px; }
.panel-title.green { color: var(--green); }
.panel-title.red { color: var(--red); }
.green-edge { border-color: var(--green); box-shadow: 0 0 24px rgba(0,255,102,.25); }
.red-edge { border-color: var(--red); box-shadow: 0 0 24px rgba(255,48,72,.25); }
.hint { color: var(--dim); font-size: 11px; margin-top: 12px; }

/* TAB */
#tab-panel .panel { min-width: 480px; }
#tab-run { color: var(--dim); font-size: 13px; margin-bottom: 12px; white-space: pre; }
#tab-table { width: 100%; border-collapse: collapse; font-size: 13px; }
#tab-table td, #tab-table th { border-bottom: 1px solid #222; padding: 4px 8px; text-align: left; }
#tab-table th { color: var(--dim); font-weight: normal; }
#tab-table .me { color: var(--green); }
#tab-table .dead { color: var(--red); }

/* install */
#install-choices { display: flex; flex-direction: column; gap: 8px; }
.choice { border: 1px solid var(--fg); padding: 10px 14px; cursor: pointer; pointer-events: auto;
  font-size: 15px; letter-spacing: 1px; background: rgba(255,255,255,.03); }
.choice:hover { background: var(--fg); color: var(--bg); }
.choice .key { color: var(--dim); margin-right: 10px; }
.choice:hover .key { color: var(--bg); }
.choice.cursed { border-color: var(--purple); color: var(--purple); }
.choice.cursed:hover { background: var(--purple); color: var(--bg); }
#install-timer { height: 3px; background: #222; margin-top: 14px; }
#install-timer-bar { height: 100%; width: 100%; background: var(--green); }

/* casino */
#reels { display: flex; gap: 10px; justify-content: center; margin: 10px 0 16px; }
.reel { display: inline-block; width: 74px; height: 58px; border: 1px solid var(--fg);
  font-size: 17px; line-height: 58px; text-align: center; letter-spacing: 2px; background: rgba(255,255,255,.03); }
.reel.spin { animation: reelspin .09s infinite steps(2); color: var(--dim); }
@keyframes reelspin { 50% { transform: translateY(2px); opacity: .4; } }
.reel.win { border-color: var(--green); color: var(--green); box-shadow: 0 0 14px rgba(0,255,102,.5); }
.reel.lose { border-color: var(--red); color: var(--red); }
#casino-result { text-align: center; min-height: 22px; font-size: 15px; margin-bottom: 12px; letter-spacing: 2px; }
#casino-stakes { display: flex; gap: 10px; justify-content: center; }
#casino-stakes button { pointer-events: auto; }

button { font-family: inherit; background: var(--bg); border: 1px solid var(--fg); color: var(--fg);
  padding: 10px 18px; font-size: 14px; letter-spacing: 2px; cursor: pointer; }
button:hover { background: var(--fg); color: var(--bg); }
button:disabled { opacity: .3; cursor: default; }

/* banner */
#banner { position: fixed; left: 50%; top: 34%; transform: translate(-50%, -50%); z-index: 5;
  font-size: 34px; letter-spacing: 10px; color: var(--fg); text-shadow: 0 0 18px rgba(243,243,243,.4);
  pointer-events: none; animation: bannerin .25s steps(6); text-align: center; }
#banner.green { color: var(--green); text-shadow: 0 0 22px rgba(0,255,102,.6); }
#banner.red { color: var(--red); text-shadow: 0 0 22px rgba(255,48,72,.6); }
#banner.purple { color: var(--purple); text-shadow: 0 0 22px rgba(180,92,255,.6); }
#banner .sub { font-size: 14px; letter-spacing: 3px; color: var(--dim); margin-top: 10px; }
@keyframes bannerin { from { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } }

/* menu */
#menu { background: var(--bg); }
.menu-box { display: flex; flex-direction: column; gap: 14px; width: 320px; text-align: center; }
#logo { font-size: 42px; letter-spacing: 8px; animation: logoflick 3s infinite steps(1); }
@keyframes logoflick { 0%,92%,96%,100% { opacity: 1; } 94%,98% { opacity: .55; } }
#menu-sub { color: var(--dim); font-size: 12px; letter-spacing: 3px; margin-bottom: 10px; }
#menu input { background: var(--bg); border: 1px solid var(--fg); color: var(--fg); padding: 10px 12px;
  font-family: inherit; font-size: 15px; letter-spacing: 2px; text-align: center; text-transform: uppercase; width: 100%; }
#menu input:focus { outline: none; border-color: var(--green); }
#join-row { display: flex; gap: 10px; }
#join-row input { width: 110px; }
#join-row button { flex: 1; }
#menu-status { color: var(--dim); font-size: 12px; min-height: 16px; }
#menu-status.err { color: var(--red); }
#menu-status.ok { color: var(--green); }
#menu-controls { color: #444; font-size: 11px; margin-top: 16px; line-height: 1.7; }

/* install pick feedback */
#install-choices .choice.picked { border-color: #00ff66; color: #00ff66; }
#install-choices .choice.dimmed { opacity: 0.25; pointer-events: none; }