/* =========================================================
   DOOM 1993 EASTER EGG MODE
   Activated by typing:  IDDQD
   Deactivated by typing: IDCLIP
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* ── Core Doom palette ──────────────────────────────────── */
:root {
  --doom-black:    #0a0000;
  --doom-red:      #cc0000;
  --doom-red-dim:  #660000;
  --doom-blood:    #8b0000;
  --doom-gold:     #c8a000;
  --doom-grey:     #909090;
  --doom-light:    #d0c090;
  --doom-green:    #00aa00;
  --doom-hud-bg:   #1a0000;
  --doom-border:   #880000;
  --pixel-size:    4px;
}

/* ── Global font + background ──────────────────────────── */
body.doom-mode {
  background-color: var(--doom-black) !important;
  color:            var(--doom-light) !important;
  font-family:      'Press Start 2P', monospace !important;
  font-size:        11px !important;
  line-height:      2 !important;
  image-rendering:  pixelated;
  image-rendering:  crisp-edges;
  /* red tiled pixel grid background */
  background-image:
    linear-gradient(rgba(100,0,0,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100,0,0,.07) 1px, transparent 1px) !important;
  background-size: 8px 8px !important;
}

body.doom-mode * {
  font-family: 'Press Start 2P', monospace !important;
  box-sizing: border-box;
}

/* ── Scanlines overlay ─────────────────────────────────── */
#doom-scanlines {
  position:       fixed;
  inset:          0;
  pointer-events: none;
  z-index:        9998;
  background:     repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.18) 0px,
    rgba(0,0,0,0.18) 1px,
    transparent 1px,
    transparent 4px
  );
  animation: scanroll 8s linear infinite;
}

@keyframes scanroll {
  from { background-position: 0 0; }
  to   { background-position: 0 32px; }
}

/* ── CRT vignette ──────────────────────────────────────── */
#doom-vignette {
  position:       fixed;
  inset:          0;
  pointer-events: none;
  z-index:        9997;
  background:     radial-gradient(
    ellipse at center,
    transparent 55%,
    rgba(0,0,0,.85) 100%
  );
}

/* ── Typography ────────────────────────────────────────── */
body.doom-mode h1,
body.doom-mode h2,
body.doom-mode h3,
body.doom-mode h4,
body.doom-mode h5,
body.doom-mode h6 {
  color:          var(--doom-red) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  text-shadow:    2px 2px 0 #000, 0 0 12px rgba(200,0,0,.5) !important;
}

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

body.doom-mode a {
  color:           var(--doom-gold) !important;
  text-decoration: none !important;
  text-shadow:     1px 1px 0 #000 !important;
}

body.doom-mode a:hover {
  color:      var(--doom-red) !important;
  text-shadow: 0 0 8px var(--doom-red), 1px 1px 0 #000 !important;
}

/* ── Site title ─────────────────────────────────────────── */
body.doom-mode .p-title__link {
  color:       var(--doom-red) !important;
  text-shadow: 3px 3px 0 #000, 0 0 20px rgba(255,0,0,.6) !important;
  font-size:   1.4em !important;
}

/* ── Navigation ─────────────────────────────────────────── */
body.doom-mode nav,
body.doom-mode .l-nav,
body.doom-mode .p-nav {
  border-top:    2px solid var(--doom-red-dim) !important;
  border-bottom: 2px solid var(--doom-red-dim) !important;
  background:    rgba(80,0,0,.2) !important;
}

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

/* ── Article cards / list ───────────────────────────────── */
body.doom-mode article,
body.doom-mode .c-article,
body.doom-mode .p-article {
  border:           2px solid var(--doom-border) !important;
  background:       rgba(30,0,0,.6) !important;
  padding:          1em !important;
  margin-bottom:    1.5em !important;
  image-rendering:  pixelated;
  box-shadow:       4px 4px 0 #000, inset 0 0 30px rgba(100,0,0,.1) !important;
}

body.doom-mode article:hover,
body.doom-mode .c-article:hover {
  border-color: var(--doom-red) !important;
  box-shadow:   4px 4px 0 #000, 0 0 12px rgba(200,0,0,.4), inset 0 0 30px rgba(100,0,0,.2) !important;
}

/* ── Images ─────────────────────────────────────────────── */
body.doom-mode img {
  image-rendering: pixelated !important;
  filter:          contrast(1.1) saturate(0.85) sepia(0.15) !important;
  border:          2px solid var(--doom-border) !important;
}

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

/* ── Pagination ─────────────────────────────────────────── */
body.doom-mode .c-pagination a,
body.doom-mode .p-pagination a {
  border:     2px solid var(--doom-red-dim) !important;
  background: rgba(100,0,0,.2) !important;
  color:      var(--doom-gold) !important;
}

/* ── Code blocks ────────────────────────────────────────── */
body.doom-mode pre,
body.doom-mode code {
  background:  #130000 !important;
  border:      1px solid var(--doom-red-dim) !important;
  color:       var(--doom-green) !important;
}

/* ── Timestamps / meta ──────────────────────────────────── */
body.doom-mode time,
body.doom-mode .c-time,
body.doom-mode .p-time {
  color: var(--doom-grey) !important;
}

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

/* ── Doom HUD ───────────────────────────────────────────── */
#doom-hud {
  position:        fixed;
  bottom:          0;
  left:            0;
  right:           0;
  height:          56px;
  background:      var(--doom-hud-bg);
  border-top:      3px solid var(--doom-red);
  z-index:         9999;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 12px;
  font-family:     'Press Start 2P', monospace;
  image-rendering: pixelated;
  box-shadow:      0 -4px 20px rgba(200,0,0,.4);
}

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

.doom-hud-label {
  font-size:   7px;
  color:       var(--doom-grey);
  font-family: 'Press Start 2P', monospace;
}

.doom-hud-value {
  font-size:   18px;
  font-weight: bold;
  font-family: 'Press Start 2P', monospace;
  margin-top:  2px;
}

#doom-ammo-val   { color: var(--doom-gold); }
#doom-health-val { color: var(--doom-green); }
#doom-armor-val  { color: #5555ff; }

/* Doomguy face */
#doom-face-block {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            2px;
}

#doom-face {
  font-size:       28px;
  line-height:     1;
  image-rendering: pixelated;
  filter:          drop-shadow(0 0 4px rgba(255,50,50,.6));
  transition:      filter 0.1s;
  cursor:          pointer;
}

#doom-face:hover {
  filter: drop-shadow(0 0 8px rgba(255,100,100,1)) brightness(1.3);
  transform: scale(1.1);
}

#doom-face-status {
  font-size:  6px;
  color:      var(--doom-green);
  text-align: center;
  font-family: 'Press Start 2P', monospace;
}

/* Keycard pips */
#doom-keys {
  display:   flex;
  flex-wrap: wrap;
  gap:       3px;
  width:     30px;
}

.doom-key {
  width:        10px;
  height:       10px;
  border-radius:50%;
  border:       1px solid rgba(255,255,255,.3);
}

.doom-key.blue   { background: #5555ff; }
.doom-key.yellow { background: var(--doom-gold); }
.doom-key.red    { background: var(--doom-red); }

/* ── Activation flash ───────────────────────────────────── */
#doom-flash {
  position:       fixed;
  inset:          0;
  background:     rgba(180,0,0,0.7);
  z-index:        10000;
  pointer-events: none;
  display:        flex;
  align-items:    center;
  justify-content:center;
  flex-direction: column;
  gap:            16px;
}

#doom-flash-text {
  font-family:  'Press Start 2P', monospace;
  font-size:    clamp(14px, 4vw, 32px);
  color:        #fff;
  text-shadow:  3px 3px 0 #000;
  text-align:   center;
  padding:      0 12px;
  animation:    doomBlink 0.15s step-end 6;
}

#doom-flash-sub {
  font-family: 'Press Start 2P', monospace;
  font-size:   clamp(8px, 2vw, 14px);
  color:       var(--doom-gold);
  text-shadow: 2px 2px 0 #000;
  text-align:  center;
  padding:     0 12px;
}

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

/* ── Cheat code input hint (bottom-left, fades) ─────────── */
#doom-input-hint {
  position:    fixed;
  bottom:      64px;
  left:        8px;
  font-family: 'Press Start 2P', monospace;
  font-size:   8px;
  color:       rgba(180,180,0,.6);
  z-index:     9999;
  pointer-events: none;
  text-shadow: 1px 1px 0 #000;
  transition:  opacity 0.5s;
}

/* Make room for HUD at the bottom when active */
body.doom-mode #main,
body.doom-mode .l-main {
  padding-bottom: 70px !important;
}

/* ── Blood-drip cursor ──────────────────────────────────── */
body.doom-mode {
  cursor: crosshair !important;
}