/* =========================================================
   COMMAND & CONQUER RETRO MODE
   Toggled by the footer link.
   ========================================================= */

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

/* ── C&C palette ────────────────────────────────────────── */
:root {
  --cnc-black:       #05080302;
  --cnc-bg:          #060b04;
  --cnc-dark:        #0d1807;
  --cnc-olive:       #3a4e1a;
  --cnc-olive-light: #5a6e2a;
  --cnc-tan:         #c8b47a;
  --cnc-tan-dim:     #8a7a4a;
  --cnc-tiberium:    #44ff11;
  --cnc-tib-dim:     #1a6600;
  --cnc-tib-glow:    rgba(68,255,17,.35);
  --cnc-red:         #cc2200;
  --cnc-blue:        #4488dd;
  --cnc-border:      #4a6a22;
  --cnc-border-dim:  #2a3a12;
  --cnc-hud-bg:      #080d04;
}

/* ── Global font + background ───────────────────────────── */
body.cnc-mode {
  background-color: var(--cnc-bg) !important;
  color:            var(--cnc-tan) !important;
  font-family:      'VT323', 'Share Tech Mono', monospace !important;
  font-size:        18px !important;
  line-height:      1.7 !important;
  image-rendering:  pixelated;
  /* tactical map grid */
  background-image:
    linear-gradient(rgba(58,78,26,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58,78,26,.18) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
  cursor: crosshair !important;
}

body.cnc-mode * {
  font-family: 'VT323', 'Share Tech Mono', monospace !important;
}

/* ── Radar scanline overlay ─────────────────────────────── */
#cnc-scanlines {
  position:       fixed;
  inset:          0;
  pointer-events: none;
  z-index:        9998;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,.12) 0px,
    rgba(0,0,0,.12) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* ── Radar sweep vignette ───────────────────────────────── */
#cnc-vignette {
  position:       fixed;
  inset:          0;
  pointer-events: none;
  z-index:        9997;
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    rgba(0,0,0,.75) 100%
  );
}

/* ── Typography ─────────────────────────────────────────── */
body.cnc-mode h1,
body.cnc-mode h2,
body.cnc-mode h3,
body.cnc-mode h4,
body.cnc-mode h5,
body.cnc-mode h6 {
  color:          var(--cnc-tiberium) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  text-shadow:    0 0 8px var(--cnc-tib-glow), 1px 1px 0 #000 !important;
}

body.cnc-mode p,
body.cnc-mode li,
body.cnc-mode span,
body.cnc-mode td,
body.cnc-mode th {
  color: var(--cnc-tan) !important;
}

body.cnc-mode a {
  color:           var(--cnc-tiberium) !important;
  text-decoration: none !important;
  text-shadow:     0 0 6px var(--cnc-tib-glow) !important;
}

body.cnc-mode a:hover {
  color:      #aaff88 !important;
  text-shadow: 0 0 12px var(--cnc-tiberium), 0 0 4px var(--cnc-tib-glow) !important;
}

/* ── Site title ─────────────────────────────────────────── */
body.cnc-mode .p-title__link {
  color:       var(--cnc-tiberium) !important;
  text-shadow: 0 0 16px var(--cnc-tib-glow), 1px 1px 0 #000 !important;
  font-size:   1.6em !important;
  letter-spacing: 0.1em !important;
}

/* ── Navigation ─────────────────────────────────────────── */
body.cnc-mode nav,
body.cnc-mode .l-nav,
body.cnc-mode .p-nav {
  border-top:    2px solid var(--cnc-border) !important;
  border-bottom: 2px solid var(--cnc-border) !important;
  background:    rgba(20,35,8,.4) !important;
}

body.cnc-mode nav a,
body.cnc-mode .p-nav__item a {
  color:   var(--cnc-tan) !important;
  padding: 0.2em 0.5em !important;
}

body.cnc-mode nav a:hover,
body.cnc-mode .p-nav__item a:hover {
  color: var(--cnc-tiberium) !important;
}

/* ── Article cards ──────────────────────────────────────── */
body.cnc-mode article,
body.cnc-mode .c-article,
body.cnc-mode .p-article {
  border:        2px solid var(--cnc-border) !important;
  background:    rgba(13,24,7,.65) !important;
  padding:       1em !important;
  margin-bottom: 1.5em !important;
  box-shadow:    3px 3px 0 #000, inset 0 0 40px rgba(20,50,5,.2) !important;
}

body.cnc-mode article:hover,
body.cnc-mode .c-article:hover {
  border-color: var(--cnc-olive-light) !important;
  box-shadow:   3px 3px 0 #000, 0 0 10px var(--cnc-tib-glow), inset 0 0 40px rgba(30,60,5,.25) !important;
}

/* ── Images ─────────────────────────────────────────────── */
body.cnc-mode img {
  image-rendering: pixelated !important;
  filter:          contrast(1.05) saturate(0.75) hue-rotate(10deg) !important;
  border:          2px solid var(--cnc-border) !important;
}

/* ── Tags ───────────────────────────────────────────────── */
body.cnc-mode .c-tag,
body.cnc-mode .p-tag {
  background:    var(--cnc-olive) !important;
  color:         var(--cnc-tan) !important;
  border:        1px solid var(--cnc-border) !important;
  border-radius: 0 !important;
  text-transform: uppercase !important;
}

/* ── Code ───────────────────────────────────────────────── */
body.cnc-mode pre,
body.cnc-mode code {
  background: #030602 !important;
  border:     1px solid var(--cnc-border-dim) !important;
  color:      var(--cnc-tiberium) !important;
}

/* ── Timestamps ─────────────────────────────────────────── */
body.cnc-mode time,
body.cnc-mode .c-time,
body.cnc-mode .p-time {
  color: var(--cnc-tan-dim) !important;
}

/* ── Footer ─────────────────────────────────────────────── */
body.cnc-mode footer,
body.cnc-mode .l-footer,
body.cnc-mode small {
  color:      var(--cnc-tan-dim) !important;
  border-top: 1px solid var(--cnc-border-dim) !important;
}

/* ── C&C HUD bar ────────────────────────────────────────── */
#cnc-hud {
  position:        fixed;
  bottom:          0;
  left:            0;
  right:           0;
  height:          52px;
  background:      var(--cnc-hud-bg);
  border-top:      3px solid var(--cnc-border);
  z-index:         9999;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 12px;
  font-family:     'VT323', monospace;
  box-shadow:      0 -4px 18px rgba(68,255,17,.2);
}

.cnc-hud-block {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  min-width:      90px;
}

.cnc-hud-label {
  font-size: 11px;
  color:     var(--cnc-tan-dim);
  letter-spacing: 0.1em;
}

.cnc-hud-value {
  font-size:  22px;
  line-height: 1;
  color:      var(--cnc-tiberium);
  text-shadow: 0 0 6px var(--cnc-tib-glow);
}

/* Power bar */
#cnc-power-bar-wrap {
  width:       120px;
  height:      10px;
  background:  #111;
  border:      1px solid var(--cnc-border);
  margin-top:  3px;
}

#cnc-power-bar {
  height:     100%;
  width:      85%;
  background: linear-gradient(90deg, #116600, var(--cnc-tiberium));
  transition: width 0.8s ease;
}

/* Commander portrait */
#cnc-portrait-block {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            1px;
  cursor:         pointer;
}

#cnc-portrait {
  font-size:   30px;
  line-height: 1;
  filter:      drop-shadow(0 0 4px var(--cnc-tib-glow));
  transition:  filter 0.15s, transform 0.15s;
}

#cnc-portrait:hover {
  filter:    drop-shadow(0 0 10px var(--cnc-tiberium)) brightness(1.4);
  transform: scale(1.1);
}

#cnc-eva-status {
  font-size:   11px;
  color:       var(--cnc-tiberium);
  text-shadow: 0 0 4px var(--cnc-tib-glow);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Tiberium pips */
#cnc-tib-pips {
  display: flex;
  gap:     3px;
  margin-top: 3px;
}

.cnc-tib-pip {
  width:  8px;
  height: 8px;
  background: var(--cnc-tiberium);
  box-shadow: 0 0 4px var(--cnc-tib-glow);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* diamond */
}

.cnc-tib-pip.empty {
  background: var(--cnc-border-dim);
  box-shadow: none;
}

/* ── Activation flash ───────────────────────────────────── */
#cnc-flash {
  position:        fixed;
  inset:           0;
  background:      rgba(10,30,5,0.88);
  z-index:         10000;
  pointer-events:  none;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-direction:  column;
  gap:             12px;
  border:          4px solid var(--cnc-border);
}

#cnc-flash-text {
  font-family:  'VT323', monospace;
  font-size:    clamp(18px, 5vw, 42px);
  color:        var(--cnc-tiberium);
  text-shadow:  0 0 20px var(--cnc-tiberium), 2px 2px 0 #000;
  text-align:   center;
  letter-spacing: 0.12em;
  padding:      0 12px;
  animation:    cncBlink 0.2s step-end 5;
}

#cnc-flash-sub {
  font-family:  'VT323', monospace;
  font-size:    clamp(12px, 2.5vw, 22px);
  color:        var(--cnc-tan);
  text-shadow:  1px 1px 0 #000;
  text-align:   center;
  letter-spacing: 0.08em;
  padding:      0 12px;
}

@keyframes cncBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.1; }
}

/* ── Make room for HUD ──────────────────────────────────── */
body.cnc-mode #main,
body.cnc-mode .l-main {
  padding-bottom: 66px !important;
}

/* ── Pagination ─────────────────────────────────────────── */
body.cnc-mode .c-pagination a,
body.cnc-mode .p-pagination a {
  border:     2px solid var(--cnc-border) !important;
  background: rgba(20,40,8,.3) !important;
  color:      var(--cnc-tan) !important;
}