@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Rajdhani:wght@600;700&display=swap');

/* Palette mirrors NetBreaker_Visual.html (spec 6.1) */
:root{
  --nr-bg: #030b14;
  --nr-panel: #060f1c;
  --nr-border: #0a2a4a;
  --nr-cyan: #00e5ff;
  --nr-green: #00ff88;
  --nr-orange: #ff6b35;
  --nr-red: #ff2d55;
  --nr-purple: #bf5fff;
  --nr-text: #c8e6ff;
  --nr-dim: #4a7fa8;
}

*{ box-sizing: border-box; }

body{
  background:
    radial-gradient(ellipse at 50% -10%, #06182b 0%, var(--nr-bg) 55%, #01060c 100%) !important;
  font-family: 'Rajdhani', sans-serif;
  color: var(--nr-text);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow-x: hidden;
}

.main.container.container-fluid{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 32px 16px;
}

.nr-stage{
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---- Minigame container + ambient effects ---- */
.minigame-container.node-router{
  position: relative;
  width: min(94vw, 460px);
  padding: 18px 18px 22px;
  border-radius: 18px;
  background:
    linear-gradient(160deg, #08192b 0%, var(--nr-panel) 45%, #030a13 100%);
  border: 1px solid var(--nr-border);
  box-shadow:
    0 0 0 1px rgba(0,229,255,0.06) inset,
    0 0 40px rgba(0,229,255,0.08),
    0 24px 60px rgba(0,0,0,0.7);
  overflow: hidden;
}

.bg-grid{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 15px, rgba(0,229,255,0.06) 15px 16px),
    repeating-linear-gradient(90deg, transparent 0 15px, rgba(0,229,255,0.06) 15px 16px);
  opacity: 0.6;
  z-index: 0;
}

.bg-scanlines{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.0) 0px,
    rgba(0,0,0,0.0) 2px,
    rgba(0,229,255,0.035) 3px,
    rgba(0,0,0,0.0) 4px
  );
  background-size: 100% 6px;
  animation: nr-scan-drift 8s linear infinite;
}
@keyframes nr-scan-drift{
  from{ background-position-y: 0; }
  to{ background-position-y: 240px; }
}

/* ---- Title bar ---- */
.nr-titlebar{
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 2px 4px 12px;
}
.nr-brand{
  font-family: 'Share Tech Mono', monospace;
  color: var(--nr-cyan);
  letter-spacing: 3px;
  font-size: 18px;
  text-shadow: 0 0 10px rgba(0,229,255,0.5);
}
.nr-brand-sub{
  font-family: 'Share Tech Mono', monospace;
  color: var(--nr-orange);
  font-size: 16px;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(255,107,53,0.4);
}

/* ---- HUD ---- */
.hud{
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 12px;
  border-radius: 10px;
  background: rgba(3,11,20,0.6);
  border: 1px solid var(--nr-border);
  font-family: 'Share Tech Mono', monospace;
}
.hud-cell{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
}
.hud-cell:first-child{ align-items: flex-start; }
.hud-cell:last-child{ align-items: flex-end; }
.hud-label{
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--nr-dim);
}
.hud-timer, .hud-layer, .hud-moves{
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--nr-cyan);
  text-shadow: 0 0 8px rgba(0,229,255,0.45);
}
.hud-layer{
  font-size: 14px;
  color: var(--nr-text);
  text-shadow: none;
  text-align: center;
  line-height: 1.15;
}
.hud-cell{ min-width: 0; }
.hud-cell:nth-child(2){ flex: 1.6; }
/* Timer disabled (TEACH tier) — show a dim, non-alarming placeholder */
.hud-cell.timer-off .hud-timer{
  color: var(--nr-dim);
  text-shadow: none;
}
.hud-timer.timer-critical{
  color: var(--nr-red);
  text-shadow: 0 0 10px rgba(255,45,85,0.7);
  animation: nr-flash 250ms steps(1) infinite;
}
/* rotation-budget HUD states */
.hud-cell.budget-low .hud-moves{ color: var(--nr-orange); text-shadow: 0 0 8px rgba(255,107,53,0.5); }
.hud-cell.budget-flash{ animation: nr-budget-flash 400ms ease-out 1; }
@keyframes nr-budget-flash{
  0%{ background: rgba(255,45,85,0.5); }
  100%{ background: transparent; }
}
@keyframes nr-flash{
  0%, 49%{ opacity: 1; }
  50%, 100%{ opacity: 0.25; }
}

/* ---- Board ---- */
.nr-board-wrap{
  position: relative;
  z-index: 2;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--nr-border);
  box-shadow: 0 6px 20px rgba(0,0,0,0.6) inset;
  background: var(--nr-bg);
}
#node-router-canvas{
  display: block;
  width: 100%;
  height: auto;
  touch-action: manipulation;
  cursor: pointer;
}

/* ---- Glitch overlay ----
   Renders on the existing #glitchOverlay > .glitch-red/.glitch-cyan/.glitch-scan
   markup (see node-router.pug). Previous version used mix-blend-mode:screen
   with a ~4px shift, which just lightens the area — reads as a flat color
   flash, not a glitch. This version uses banded (not solid) color layers with
   mix-blend-mode:difference and much bigger jitter, so the red/cyan bands
   visibly separate and jump instead of just washing the screen. */
.glitch-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
  overflow: hidden;
}
.glitch-overlay.active{
  opacity: 1;
  animation: nr-glitch-flicker 90ms steps(2) infinite;
}
.glitch-overlay > div{
  position: absolute;
  inset: -12px;      /* overscan so the jitter never reveals an edge */
  mix-blend-mode: difference;
  pointer-events: none;
}
.glitch-red{
  background: repeating-linear-gradient(0deg, rgba(255,45,85,0.65) 0 3px, transparent 3px 9px);
  animation: nr-glitch-shift-r 130ms steps(3) infinite;
}
.glitch-cyan{
  background: repeating-linear-gradient(0deg, rgba(0,229,255,0.6) 0 3px, transparent 3px 9px);
  animation: nr-glitch-shift-c 150ms steps(3) infinite;
}
.glitch-scan{
  background: repeating-linear-gradient(0deg, rgba(191,95,255,0.14) 0 2px, transparent 2px 5px);
  mix-blend-mode: screen;
}
@keyframes nr-glitch-flicker{
  0%{ clip-path: inset(0 0 0 0); }
  25%{ clip-path: inset(8% 0 62% 0); }
  50%{ clip-path: inset(58% 0 4% 0); }
  75%{ clip-path: inset(22% 0 44% 0); }
  100%{ clip-path: inset(0 0 0 0); }
}
@keyframes nr-glitch-shift-r{
  0%{ transform: translate(-14px, 0); }
  33%{ transform: translate(10px, -6px); }
  66%{ transform: translate(-8px, 5px); }
  100%{ transform: translate(12px, -4px); }
}
@keyframes nr-glitch-shift-c{
  0%{ transform: translate(14px, 0); }
  33%{ transform: translate(-10px, 6px); }
  66%{ transform: translate(8px, -5px); }
  100%{ transform: translate(-12px, 4px); }
}

/* ---- Result banner ---- */
.result-banner{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 30px;
  border-radius: 12px;
  background: rgba(3,11,20,0.85);
  border: 1px solid var(--nr-cyan);
  box-shadow: 0 0 30px rgba(0,229,255,0.3);
  font-family: 'Share Tech Mono', monospace;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.result-banner.hidden{ display: none; }
.result-banner.show{ opacity: 1; transform: translate(-50%, -50%) scale(1); }
.result-title{
  font-size: 24px;
  letter-spacing: 3px;
}
.result-sub{
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--nr-text);
}
.result-stats{
  display: flex;
  gap: 26px;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,229,255,0.2);
}
.result-stats.hidden{ display: none; }
.result-stat{ display: flex; flex-direction: column; align-items: center; gap: 2px; }
.result-stat-label{ font-size: 10px; letter-spacing: 2px; color: var(--nr-dim); }
.result-stat-value{ font-size: 20px; letter-spacing: 1px; color: var(--nr-text); }
.nr-share{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 7px 16px;
  border-radius: 8px;
  border: 1px solid var(--nr-cyan);
  background: rgba(0,229,255,0.08);
  color: var(--nr-cyan);
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px;
  letter-spacing: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.06s ease;
}
.nr-share:hover{ background: rgba(0,229,255,0.18); }
.nr-share:active{ transform: scale(0.96); }
.nr-share.hidden{ display: none; }
.nr-share img{ filter: brightness(0) saturate(100%) invert(72%) sepia(90%) saturate(1200%) hue-rotate(140deg); }

.result-banner.win{ border-color: var(--nr-green); box-shadow: 0 0 30px rgba(0,255,136,0.35); }
.result-banner.win .result-title{ color: var(--nr-green); text-shadow: 0 0 12px rgba(0,255,136,0.6); }
.result-banner.lose{ border-color: var(--nr-red); box-shadow: 0 0 30px rgba(255,45,85,0.35); }
.result-banner.lose .result-title{ color: var(--nr-red); text-shadow: 0 0 12px rgba(255,45,85,0.6); }

/* ---- Controls ---- */
.nr-controls{
  position: relative;
  z-index: 2;
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 16px;
}
.nr-btn{
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 15px;
  padding: 8px 20px;
  border-radius: 8px;
  border: 1px solid var(--nr-border);
  cursor: pointer;
  color: var(--nr-text);
  background: linear-gradient(180deg, #0c2237, #071626);
  box-shadow: 0 3px 10px rgba(0,0,0,0.5);
  transition: transform 0.05s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.nr-btn:hover{ border-color: var(--nr-cyan); }
.nr-btn:active{ transform: translateY(2px); }
.nr-btn.primary{
  color: var(--nr-bg);
  font-weight: 700;
  border-color: var(--nr-cyan);
  background: linear-gradient(180deg, #4df3ff, var(--nr-cyan));
  box-shadow: 0 3px 12px rgba(0,229,255,0.4);
}
.nr-btn:focus-visible{ outline: 2px solid var(--nr-cyan); outline-offset: 2px; }
.nr-btn:disabled{
  opacity: 0.4;
  cursor: not-allowed;
  border-color: var(--nr-border);
  color: var(--nr-dim);
  background: linear-gradient(180deg, #0a1a2a, #06121e);
  box-shadow: none;
}
.nr-btn.primary.ready{ animation: nr-btn-ready 1.2s ease-in-out infinite; }
@keyframes nr-btn-ready{
  0%, 100%{ box-shadow: 0 3px 12px rgba(0,229,255,0.4); }
  50%{ box-shadow: 0 3px 20px rgba(0,229,255,0.8); }
}

/* ---- Access code panel ---- */
.nr-password-panel{
  position: relative;
  z-index: 2;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--nr-border);
}
.nr-password-label{
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--nr-dim);
  text-align: center;
  margin-bottom: 8px;
}
.nr-password-form{
  display: flex;
  gap: 8px;
  justify-content: center;
}
.nr-password-input{
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--nr-cyan);
  background: var(--nr-bg);
  border: 1px solid var(--nr-border);
  border-radius: 8px;
  padding: 10px 12px;
  width: 130px;
  text-align: center;
  box-shadow: 0 3px 8px rgba(0,0,0,0.6) inset;
}
.nr-password-input::placeholder{ color: var(--nr-dim); letter-spacing: 1px; }
.nr-password-input:focus{ outline: 2px solid var(--nr-cyan); outline-offset: 1px; }
.nr-password-msg{
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px;
  letter-spacing: 1px;
  text-align: center;
  margin-top: 8px;
  min-height: 14px;
  color: var(--nr-dim);
}
.nr-password-msg.ok{ color: var(--nr-green); }
.nr-password-msg.bad{ color: var(--nr-red); }

/* ---- Loading overlay (board generation) ---- */
.nr-loading{
  position: absolute;
  inset: 0;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(3,11,20,0.82);
  backdrop-filter: blur(1px);
}
.nr-loading.hidden{ display: none; }
.nr-loading-spinner{
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid rgba(0,229,255,0.18);
  border-top-color: var(--nr-cyan);
  box-shadow: 0 0 18px rgba(0,229,255,0.4);
  animation: nr-spin 0.8s linear infinite;
}
@keyframes nr-spin{ to{ transform: rotate(360deg); } }
.nr-loading-text{
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--nr-cyan);
  text-shadow: 0 0 10px rgba(0,229,255,0.5);
  animation: nr-loading-blink 1.1s ease-in-out infinite;
}
@keyframes nr-loading-blink{ 0%, 100%{ opacity: 1; } 50%{ opacity: 0.45; } }

/* ---- Timed-level trace gate (signal scramble + Start Trace) ---- */
.nr-trace-gate{
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3,11,20,0.55);
  overflow: hidden;
}
.nr-trace-gate.hidden{ display: none; }
#trace-scramble-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.nr-trace-btn{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 34px;
  border-radius: 12px;
  cursor: pointer;
  font-family: 'Share Tech Mono', monospace;
  color: var(--nr-bg);
  background: linear-gradient(180deg, #4df3ff, var(--nr-cyan));
  border: 1px solid var(--nr-cyan);
  box-shadow: 0 0 30px rgba(0,229,255,0.6), 0 6px 20px rgba(0,0,0,0.6);
  animation: nr-trace-pulse 1.4s ease-in-out infinite;
  transition: transform 0.06s ease;
}
.nr-trace-btn:hover{ filter: brightness(1.08); }
.nr-trace-btn:active{ transform: scale(0.96); }
.nr-trace-btn-label{ font-size: 22px; letter-spacing: 4px; font-weight: 700; }
.nr-trace-btn-sub{ font-size: 11px; letter-spacing: 2px; color: #05202e; opacity: 0.8; }
@keyframes nr-trace-pulse{
  0%, 100%{ box-shadow: 0 0 24px rgba(0,229,255,0.5), 0 6px 20px rgba(0,0,0,0.6); }
  50%{ box-shadow: 0 0 44px rgba(0,229,255,0.9), 0 6px 20px rgba(0,0,0,0.6); }
}

/* ---- Network pan buttons ---- */
.nr-pan{
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(3,11,20,0.82);
  border: 1px solid var(--nr-cyan);
  color: var(--nr-cyan);
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(0,229,255,0.35);
  transition: transform 0.06s ease, background 0.15s ease;
  user-select: none;
}
.nr-pan:hover{ background: rgba(0,229,255,0.18); }
.nr-pan:active{ transform: scale(0.92); }
.nr-pan.hidden{ display: none; }
.nr-pan.dead{ border-color: var(--nr-red); color: var(--nr-red); box-shadow: 0 0 16px rgba(255,45,85,0.35); }
.nr-pan-n{ top: 8px; left: 50%; transform: translateX(-50%); }
.nr-pan-s{ bottom: 8px; left: 50%; transform: translateX(-50%); }
.nr-pan-w{ left: 8px; top: 50%; transform: translateY(-50%); }
.nr-pan-e{ right: 8px; top: 50%; transform: translateY(-50%); }
.nr-pan-n:active{ transform: translateX(-50%) scale(0.92); }
.nr-pan-s:active{ transform: translateX(-50%) scale(0.92); }
.nr-pan-w:active{ transform: translateY(-50%) scale(0.92); }
.nr-pan-e:active{ transform: translateY(-50%) scale(0.92); }

/* ---- Network minimap ---- */
.nr-minimap{
  position: relative;
  z-index: 2;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(3,11,20,0.6);
  border: 1px solid var(--nr-border);
  font-family: 'Share Tech Mono', monospace;
}
.nr-minimap.hidden{ display: none; }
.nr-mini-title{
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--nr-dim);
  text-align: center;
  margin-bottom: 8px;
}
.nr-mini-grid{
  display: grid;
  gap: 6px;
  justify-content: center;
}
.nr-mini-cell{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  border: 1px solid var(--nr-border);
  background: #071626;
  color: var(--nr-dim);
  font-size: 13px;
}
.nr-mini-cell.empty{ border-color: transparent; background: transparent; }
.nr-mini-cell.start{ color: var(--nr-cyan); border-color: var(--nr-cyan); }
.nr-mini-cell.final{ color: var(--nr-orange); border-color: var(--nr-orange); }
.nr-mini-cell.decoy{ color: var(--nr-red); border-color: rgba(255,45,85,0.5); }
.nr-mini-cell.live{ box-shadow: 0 0 12px rgba(0,229,255,0.5) inset; color: var(--nr-cyan); }
.nr-mini-cell.active{ outline: 2px solid var(--nr-cyan); outline-offset: 1px; }

/* ---- Rules ---- */
.nr-rules{
  width: min(94vw, 460px);
  margin-top: 18px;
  color: var(--nr-dim);
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  font-family: 'Rajdhani', sans-serif;
}
.nr-rules b{ color: var(--nr-cyan); }

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}