/* ==========================================================================
   INTRUSION — page styles. Shared colours, buttons and panels come from
   assets/css/theme.css; board themes (cosmetics.css) recolour .ix-run.
   ========================================================================== */

.ix-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--yellow-dim); padding-bottom: 14px; margin-bottom: 16px; }
.ix-top .eyebrow .badge { margin-left: 8px; vertical-align: middle; }
.ix-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ix-controls .difficulty { display: flex; gap: 6px; }
.notice { margin: 0 0 16px; padding: 8px 12px; border-left: 3px solid var(--yellow); background: var(--yellow-faint); font-size: 0.85rem; }
.notice[hidden] { display: none; }
.notice button { background: none; border: 0; padding: 0; color: var(--cyan); text-decoration: underline; cursor: pointer; font: inherit; }
.panel-body { padding: 16px; display: grid; gap: 12px; min-width: 0; }
.muted-text { color: var(--muted); font-size: 0.82rem; line-height: 1.5; margin: 0; }
.intrusion-page .panel { margin-bottom: 18px; }

/* ---------- briefing ---------- */
.briefing .panel-body { gap: 14px; }
.brief-from { margin: 0; color: var(--cyan); letter-spacing: 0.08em; font-size: 0.85rem; }
.brief-text { margin: 0; line-height: 1.65; max-width: 70ch; padding-left: 12px; border-left: 2px solid var(--cyan-dim); }
.brief-rules { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 0.82rem; color: var(--muted); line-height: 1.5; }
.brief-rules b { color: var(--text); font-weight: normal; }
.brief-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ---------- HUD: the trace bar ---------- */
.ix-hud {
  position: sticky; top: 0; z-index: 6;
  display: grid; grid-template-columns: auto minmax(80px, 1fr) auto auto auto; align-items: center; gap: 4px 12px;
  padding: 8px 12px; margin-bottom: 12px;
  background: rgba(10, 11, 16, 0.95); border: 1px solid var(--yellow-dim);
}
.hud-label { font-size: 0.7rem; letter-spacing: 0.2em; color: var(--yellow); }
.hud-bar { height: 8px; background: var(--yellow-faint); position: relative; overflow: hidden; }
.hud-fill { height: 100%; width: 0; background: var(--yellow); box-shadow: 0 0 8px var(--yellow); transition: width 0.1s linear; }
.hud-val { font-size: 1.1rem; color: var(--yellow); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }
.hud-rate { grid-column: 2 / 4; grid-row: 2; font-size: 0.68rem; color: var(--muted); letter-spacing: 0.04em; }
.hud-rate.watched { color: var(--red); }
.hud-loot { font-size: 0.75rem; color: var(--muted); letter-spacing: 0.1em; }
.hud-loot b { color: var(--cyan); font-weight: normal; }
.ix-hud.warn .hud-fill { background: #ffb347; box-shadow: 0 0 8px #ffb347; }
.ix-hud.warn .hud-val { color: #ffb347; }
.ix-hud.danger .hud-fill { background: var(--red); box-shadow: 0 0 10px var(--red); }
.ix-hud.danger .hud-val, .ix-hud.danger .hud-label { color: var(--red); animation: blink 0.6s steps(2) infinite; }

/* ---------- layout ---------- */
.ix-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.ix-grid .panel { margin-bottom: 0; }
.node-panel { position: sticky; top: 64px; }

/* ---------- the map ---------- */
.map-wrap { padding: 8px; background-image: linear-gradient(var(--cyan-faint) 1px, transparent 1px), linear-gradient(90deg, var(--cyan-faint) 1px, transparent 1px); background-size: 40px 40px; }
.netmap { display: block; width: 100%; height: auto; overflow: visible; }
.lk { stroke-width: 2; }
.lk-on { stroke: var(--cyan); filter: drop-shadow(0 0 3px var(--cyan)); }
.lk-open { stroke: var(--yellow); stroke-dasharray: 6 5; animation: lk-flow 1s linear infinite; }
.lk-dim { stroke: rgba(255, 255, 255, 0.18); }
.lk-ghost { stroke: rgba(255, 255, 255, 0.14); stroke-dasharray: 3 6; }
@keyframes lk-flow { to { stroke-dashoffset: -22; } }

.nd { cursor: pointer; outline: none; }
.nd-shape { fill: rgba(10, 11, 16, 0.92); stroke: var(--yellow); stroke-width: 2; transition: stroke 0.15s, fill 0.15s; }
.nd-icon { fill: var(--yellow); font-size: 26px; text-anchor: middle; pointer-events: none; }
.nd-label { fill: var(--muted); font-size: 13px; letter-spacing: 1.5px; text-anchor: middle; pointer-events: none; }
.nd:hover .nd-shape, .nd:focus-visible .nd-shape { fill: var(--yellow-faint); stroke-width: 3; }
.nd.s-hacked .nd-shape { stroke: var(--cyan); fill: rgba(94, 246, 255, 0.1); }
.nd.s-hacked .nd-icon { fill: var(--cyan); }
.nd.s-hacked .nd-label { fill: var(--cyan); }
.nd.s-active .nd-shape { stroke: var(--cyan); stroke-width: 3; fill: var(--cyan-faint); }
.nd.selected .nd-shape { stroke: #fff; stroke-width: 3; filter: drop-shadow(0 0 6px var(--cyan)); }
.nd.k-unknown .nd-shape { stroke-dasharray: 5 4; }
.nd.k-unknown .nd-icon { fill: var(--muted); }
.nd.k-camera .nd-icon, .nd.k-camera .nd-label { fill: var(--red); }
.nd.k-camera:not(.s-hacked) .nd-shape { stroke: var(--red); }
.nd.k-hub .nd-icon { fill: #c49bff; }
.nd.k-cache .nd-icon { fill: #ffcf6b; }
.nd.k-cache:not(.s-hacked) .nd-shape { stroke: #ffcf6b; }
.nd.k-cache .nd-label { fill: #ffcf6b; }
.nd.k-core .nd-shape { stroke-width: 3; }
.nd.k-core:not(.s-hacked) .nd-icon { fill: #fff; }
.nd.k-entry .nd-shape { stroke: var(--cyan); fill: rgba(94, 246, 255, 0.15); }
.nd.k-entry .nd-icon { fill: var(--cyan); }
.nd-eye { fill: none; stroke: var(--red); stroke-width: 2; opacity: 0.7; animation: nd-eye 1.6s ease-in-out infinite; }
@keyframes nd-eye { 50% { opacity: 0.15; } }
.nd.hint .nd-shape { animation: nd-hint 1s steps(2) infinite; }
@keyframes nd-hint { 50% { stroke: #fff; fill: var(--yellow-faint); } }
@media (prefers-reduced-motion: reduce) { .lk-open, .nd-eye, .nd.hint .nd-shape { animation: none; } }

.map-legend { list-style: none; margin: 0; padding: 0 12px 10px; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.7rem; color: var(--muted); }

/* ---------- node panel ---------- */
.node-flash { margin: 0; min-height: 1.2em; font-size: 0.8rem; color: var(--muted); }
.node-flash.bad { color: var(--red); }
.node-flash.ok { color: var(--cyan); }
.node-head, .hack-head { display: flex; align-items: center; gap: 10px; }
.hack-head .btn { margin-left: auto; }
.node-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--yellow-dim); color: var(--yellow); font-size: 1.1rem; flex: none; }
.node-icon.k-camera { color: var(--red); border-color: var(--red-dim); }
.node-icon.k-hub { color: #c49bff; }
.node-icon.k-cache { color: #ffcf6b; }
.node-icon.k-unknown { color: var(--muted); border-style: dashed; }
.node-name { margin: 0; font-weight: normal; letter-spacing: 0.14em; color: var(--yellow); font-size: 1rem; }
.node-blurb { margin: 0; line-height: 1.55; font-size: 0.88rem; }
.node-blurb b { color: var(--cyan); font-weight: normal; }
.node-loot { margin: 0; color: #ffcf6b; font-size: 0.85rem; }
.node-loot b { font-weight: normal; }
.node-warn { margin: 0; color: var(--red); font-size: 0.85rem; }
.node-done { margin: 0; color: var(--cyan); }
.node-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.howto { font-size: 0.8rem; color: var(--muted); line-height: 1.55; }
.howto summary { cursor: pointer; color: var(--cyan); letter-spacing: 0.06em; }
.howto ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.howto p { margin: 6px 0 0; }
.howto b { color: var(--text); font-weight: normal; }
.mh-label { display: block; font-size: 0.66rem; letter-spacing: 0.16em; color: var(--muted); margin-bottom: 4px; }
.mh-hint { margin: 0; font-size: 0.8rem; color: var(--muted); }
.mh-hint b { color: var(--cyan); font-weight: normal; }

/* ---------- firewall ---------- */
.fw-top { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.fw-target, .fw-buffer { display: flex; flex-wrap: wrap; gap: 4px; }
.fw-code, .fw-slot { width: 34px; height: 30px; display: grid; place-items: center; font-size: 0.85rem; border: 1px solid rgba(255, 255, 255, 0.14); }
.fw-code.on { background: var(--cyan); color: var(--bg); border-color: var(--cyan); }
.fw-slot { border-style: dashed; border-color: var(--yellow-dim); color: var(--yellow); }
.fw-slot.filled { border-style: solid; }
.fw-wrap { display: flex; justify-content: center; padding: 6px 0; }
.fw-grid { --cell: clamp(36px, calc((100vw - 90px) / var(--n, 5)), 54px); display: grid; grid-template-columns: repeat(var(--n, 5), var(--cell)); grid-auto-rows: var(--cell); }
.fw-grid .cell { position: relative; background: transparent; border: 0; color: var(--text); font: inherit; font-size: calc(var(--cell) * 0.34); letter-spacing: 0.05em; cursor: default; }
.fw-grid .cell.active-line { background: var(--cyan-faint); color: #fff; }
.fw-grid .cell.selectable { cursor: pointer; }
.fw-grid .cell.selectable:hover, .fw-grid .cell.selectable:focus-visible { color: var(--cyan); text-shadow: 0 0 8px var(--cyan); outline: 1px solid var(--cyan); outline-offset: -5px; }
.fw-grid .cell.used { color: var(--muted); opacity: 0.5; }

/* ---------- lock ---------- */
.lk-clues { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lk-clue { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 6px 8px; background: rgba(255, 255, 255, 0.025); border-left: 2px solid var(--yellow-dim); }
.lk-digits { display: flex; gap: 4px; }
.lk-d { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.16); font-size: 0.95rem; }
.lk-d.ruled { color: var(--muted); text-decoration: line-through; opacity: 0.55; }
.lk-marks { color: var(--cyan); letter-spacing: 3px; font-size: 0.95rem; min-width: 3.5em; }
.lk-say { font-size: 0.72rem; color: var(--muted); }
.lk-legend { margin: 0; font-size: 0.7rem; color: var(--muted); }
.lk-answer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lk-answer .mh-label { margin: 0; }
.lk-slots { display: flex; gap: 6px; }
.lk-slot { width: 38px; height: 42px; display: grid; place-items: center; border: 1px dashed var(--cyan-dim); color: var(--cyan); font-size: 1.3rem; }
.lk-slot.filled { border-style: solid; text-shadow: 0 0 8px var(--cyan-dim); }
.lk-keys { display: flex; flex-wrap: wrap; gap: 6px; }
.lk-key { min-width: 44px; height: 44px; font: inherit; font-size: 1.1rem; color: var(--text); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--yellow-dim); cursor: pointer; }
.lk-key:hover:not(:disabled) { border-color: var(--cyan); color: var(--cyan); }
.lk-key:disabled { opacity: 0.35; cursor: default; }
.lk-key.ruled { color: var(--muted); text-decoration: line-through; }
.lk-key.wide { min-width: 60px; }
.lk-go { justify-self: start; }
.lk-notes > div { display: flex; flex-wrap: wrap; gap: 4px; }
.lk-note { width: 30px; height: 28px; font: inherit; font-size: 0.85rem; color: var(--text); background: transparent; border: 1px solid rgba(255, 255, 255, 0.14); cursor: pointer; }
.lk-note.ruled { color: var(--red); border-color: var(--red-dim); text-decoration: line-through; }

/* ---------- router ---------- */
.rt-wrap { display: flex; align-items: stretch; justify-content: center; gap: 4px; }
.rt-side { display: grid; grid-auto-rows: var(--tile, 46px); gap: 2px; }
.rt-mark { display: grid; place-items: center; font-size: 0.62rem; color: var(--cyan); letter-spacing: 0.04em; white-space: nowrap; }
.rt-mark:not(.on) { visibility: hidden; }
/* one tile size for the grid AND the IN / OUT markers beside it (--n is set on .rt-wrap) */
.rt-wrap { --tile: clamp(34px, calc((100vw - 150px) / var(--n, 5)), 50px); }
.rt-grid { display: grid; grid-template-columns: repeat(var(--n, 5), var(--tile)); grid-auto-rows: var(--tile); gap: 2px; }
.rt { padding: 0; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.07); cursor: pointer; }
.rt:hover, .rt:focus-visible { border-color: var(--cyan-dim); outline: none; }
.rt svg { display: block; width: 100%; height: 100%; }
.rt-pipe { stroke: rgba(214, 220, 192, 0.55); stroke-width: 7; stroke-linecap: square; fill: none; }
.rt-hubdot { fill: rgba(214, 220, 192, 0.55); }
.rt.lit .rt-pipe { stroke: var(--cyan); filter: drop-shadow(0 0 3px var(--cyan)); }
.rt.lit .rt-hubdot { fill: var(--cyan); }

/* ---------- coach ---------- */
.coach { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 50; width: min(520px, calc(100vw - 24px)); }
.coach[hidden] { display: none; }
.coach-card { padding: 14px 16px; background: rgba(10, 11, 16, 0.98); border: 1px solid var(--cyan); box-shadow: 0 0 24px rgba(94, 246, 255, 0.25), 0 8px 30px rgba(0, 0, 0, 0.8); display: grid; gap: 10px; }
.coach-head { display: flex; gap: 10px; align-items: center; color: var(--cyan); letter-spacing: 0.1em; }
.coach-tag { font-size: 0.62rem; padding: 2px 6px; background: var(--cyan); color: var(--bg); letter-spacing: 0.14em; }
.coach-card p { margin: 0; line-height: 1.6; font-size: 0.9rem; }
.coach-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.coach-opt { font-size: 0.72rem; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.coach-opt[hidden] { display: none; }

/* ---------- result ---------- */
.result { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(5, 6, 10, 0.78); }
.result[hidden] { display: none; }
.result-card { width: min(460px, 100%); background: var(--panel); border: 1px solid var(--yellow-dim); padding: 24px; text-align: center; box-shadow: 0 0 40px rgba(0, 0, 0, 0.7); display: grid; gap: 12px; }
.result-title { margin: 0; font-weight: normal; font-size: clamp(1.5rem, 6vw, 2.1rem); letter-spacing: 0.12em; }
.result.ok .result-title { color: var(--cyan); text-shadow: 0 0 12px var(--cyan-dim); }
.result.partial .result-title { color: var(--yellow); text-shadow: 0 0 12px var(--yellow-dim); }
.result.fail .result-title { color: var(--red); text-shadow: 0 0 12px var(--red-dim); }
.result-reason { margin: 0; color: var(--muted); }
.result-score { display: grid; gap: 2px; }
.score-label { font-size: 0.7rem; color: var(--muted); letter-spacing: 0.2em; }
.score-total { font-size: 2.6rem; color: var(--yellow); text-shadow: 0 0 14px var(--yellow-dim); font-variant-numeric: tabular-nums; }
.score-breakdown { font-size: 0.8rem; color: var(--muted); }
.score-breakdown b { color: var(--text); font-weight: normal; }
.result-post { margin: 0; font-size: 0.85rem; color: var(--muted); min-height: 1.2em; }
.result-post.ok { color: var(--cyan); }
.result-post.error { color: var(--red); }
.result-post.pending { color: var(--yellow); animation: blink 0.8s infinite steps(2); }
.result-post button { background: none; border: 0; padding: 0; color: var(--cyan); text-decoration: underline; cursor: pointer; font: inherit; }
.result-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

.leaderboard .tabs { margin-bottom: 4px; }

/* ---------- phones ---------- */
@media (max-width: 760px) {
  .ix-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .node-panel { position: static; }
  /* while hacking a node, the hack gets the whole screen (the map comes back after) */
  .ix-run.hacking .map-panel { display: none; }
  .ix-hud { grid-template-columns: auto minmax(60px, 1fr) auto auto; padding: 6px 10px; gap: 2px 8px; }
  .hud-loot { grid-column: 3; grid-row: 2; justify-self: end; }
  .hud-rate { grid-column: 1 / 3; }
  #jackOutBtn { grid-column: 4; grid-row: 1 / 3; }
  .map-wrap { padding: 2px; }
  .nd-label { font-size: 17px; }
  .nd-icon { font-size: 30px; }
  .panel-body { padding: 12px; }
  .lk-clue { grid-template-columns: auto auto; }
  .lk-say { grid-column: 1 / -1; }
  .ix-controls { width: 100%; }
}

/* ---------- v2: Black ICE, objectives, archive / honeypot / vault ---------- */
.hud-ice { grid-column: 1 / -1; font-size: 0.7rem; letter-spacing: 0.08em; color: var(--muted); }
.hud-ice[hidden] { display: none; }
.hud-ice.hunting { color: var(--red); }
.hud-ice.hunting.close { animation: blink 0.5s steps(2) infinite; }
.hud-ice.resting { color: #c49bff; }
.ix-obj { margin: -6px 0 12px; padding: 6px 10px; font-size: 0.78rem; line-height: 1.45; border-left: 2px solid #ffcf6b; background: rgba(255, 207, 107, 0.05); }
.ix-obj[hidden] { display: none; }
.obj-tag { font-size: 0.6rem; letter-spacing: 0.14em; padding: 1px 5px; background: #ffcf6b; color: var(--bg); margin-right: 4px; }
.obj-st { font-weight: normal; color: var(--muted); white-space: nowrap; }
.obj-st.ok { color: var(--cyan); }
.obj-st.bad { color: var(--red); }
.brief-obj { color: #ffcf6b; }
.brief-obj b { color: #ffe9a3; }
.daily-btn { border-color: rgba(255, 207, 107, 0.5); color: #ffcf6b; }

.nd.k-archive .nd-icon { fill: #9fd8ff; }
.nd.k-archive:not(.s-hacked) .nd-shape { stroke: #9fd8ff; }
.nd.k-honeypot .nd-icon, .nd.k-honeypot .nd-label { fill: #ff8a3d; }
.nd.k-honeypot:not(.s-hacked) .nd-shape { stroke: #ff8a3d; stroke-dasharray: 2 3; }
.nd.k-vault .nd-icon, .nd.k-vault .nd-label { fill: #ffcf6b; }
.nd.k-vault:not(.s-hacked) .nd-shape { stroke: #ffcf6b; stroke-width: 3; }
.node-icon.k-archive { color: #9fd8ff; }
.node-icon.k-honeypot { color: #ff8a3d; }
.node-icon.k-vault { color: #ffcf6b; }
.ice-mark circle { fill: rgba(40, 0, 6, 0.95); stroke: var(--red); stroke-width: 2; }
.ice-mark text { fill: var(--red); font-size: 18px; text-anchor: middle; }
.ice-mark.hunting circle { animation: ice-pulse 0.9s ease-in-out infinite; }
.ice-mark.resting { opacity: 0.45; }
@keyframes ice-pulse { 50% { stroke-width: 5; } }
@media (prefers-reduced-motion: reduce) { .ice-mark.hunting circle, .hud-ice.hunting.close { animation: none; } }
.lk-cred { margin: 0; padding: 6px 10px; font-size: 0.8rem; color: #9fd8ff; border: 1px solid rgba(159, 216, 255, 0.4); background: rgba(159, 216, 255, 0.05); }
.lk-cred b { color: #fff; font-weight: normal; font-size: 1rem; }

/* ---------- ⚡ Overclocked ---------- */
.mode-switch { display: flex; gap: 6px; }
.oc-btn { border-color: rgba(255, 77, 94, 0.45); color: #ff8a95; }
.oc-btn.active { background: var(--red); color: var(--bg); border-color: var(--red); box-shadow: 0 0 14px var(--red-dim); }
.intrusion-page.overclocked .title { text-shadow: 0 0 8px var(--yellow-dim), 2px 0 0 rgba(255, 77, 94, 0.35); }
.brief-deck { color: #ff8a95; }
.brief-deck b { color: #ffc2c8; font-weight: normal; }
.ix-deckbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -6px 0 12px; padding: 8px 10px; border: 1px solid rgba(255, 77, 94, 0.4); background: rgba(255, 77, 94, 0.04); }
.ix-deckbar[hidden] { display: none; }
.db-ram { font-size: 0.72rem; letter-spacing: 0.12em; color: var(--muted); white-space: nowrap; }
.db-ram b { color: var(--cyan); font-weight: normal; }
.db-progs { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.db-prog { display: grid; gap: 1px; min-width: 74px; padding: 5px 8px; text-align: left; font: inherit; color: var(--text); background: rgba(94, 246, 255, 0.04); border: 1px solid var(--cyan-dim); cursor: pointer; }
.db-prog:hover:not(:disabled), .db-prog:focus-visible { background: var(--cyan-faint); box-shadow: 0 0 10px var(--cyan-dim); outline: none; }
.db-prog:disabled { opacity: 0.38; cursor: default; }
.db-prog.used { text-decoration: line-through; }
.db-name { color: var(--cyan); font-size: 0.74rem; letter-spacing: 0.04em; }
.db-cost { font-size: 0.64rem; color: var(--yellow); }
.fw-slot.extra { border-color: rgba(94, 246, 255, 0.6); }
#lbModeTabs { margin-bottom: 4px; }
@media (max-width: 760px) {
  .mode-switch { width: 100%; }
  .db-prog { min-width: 0; flex: 1 1 70px; }
}