/* ============================================
   CSS Custom Properties - Centralized Design Tokens
   ============================================ */
:root {
  /* Primary Colors */
  --gold: #ffd700;
  --gold-dark: #aa8800;
  --gold-darker: #775500;
  --gold-light: #ddaa00;
  --orange: #ff8c00;
  --orange-red: #ff4500;
  --magenta: #ff00ff;
  --cyan: #00d4ff;
  --cyan-bright: #00ffff;
  --matrix-green: #0f0;
  --neon-pink: #ff0080;

  /* Dark Theme Colors */
  --dark-bg: #0a0a0a;
  --dark-surface: #1a1a1a;
  --dark-deep: #0d0d0d;

  /* Common Gradients */
  --gradient-gold: linear-gradient(180deg, var(--gold) 0%, var(--orange) 50%, var(--orange-red) 100%);
  --gradient-gold-bg: linear-gradient(180deg, #5a4a00 0%, #3a3000 30%, #2a2000 70%, #1a1000 100%);
  --gradient-chrome: linear-gradient(180deg, #b6b6b6 0%, #5f5f5f 20%, #b1b1b1 30%, #fff 64%, #6c6c6c 65%, #373737 66%, #515151 67%, #787878 75%, #d2d2d2 80%, #d2d2d2 100%);

  /* Common Shadows */
  --glow-gold: 0 0 10px rgba(255, 215, 0, 0.5);
  --glow-gold-strong: 0 0 20px rgba(255, 215, 0, 0.7), 0 0 40px rgba(255, 140, 0, 0.4);
  --glow-cyan: 0 0 10px var(--cyan), 0 0 20px var(--cyan);
  --glow-matrix: 0 0 10px var(--matrix-green), 0 0 20px var(--matrix-green);

  /* Common Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;

  /* Button borders */
  --btn-border-raised: #fff #808080 #808080 #fff;
  --btn-border-pressed: #808080 #fff #fff #808080;
  --btn-border-gold: var(--gold) var(--gold-dark) var(--gold-darker) var(--gold-light);
}

/* ============================================
   Utility Patterns - Reusable Base Styles
   ============================================ */

/* Full-screen overlay base - used by many components */
.full-overlay,
#flash-container,
#flash-loader,
#flash-intro,
#flash-site,
#matrix-bg,
#tv-snow,
#chat-window,
.flash-headshot-freakout,
.crt-overlay,
.crt-curvature,
.glitch-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Gradient text base - utility class for future use */
.gradient-text {
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

/* Pseudo-element full coverage */
.crt-overlay::before,
.crt-overlay::after,
#flash-container::before,
.flash-headshot-freakout::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ============================================
   Base Retro Styles
   ============================================ */
.retro { display: inline; }

/* 3D Y-axis rotation for images */
.retro-image-rotate {
  animation: retro-image-rotate-y 4s linear infinite;
  transform-style: preserve-3d;
}

@keyframes retro-image-rotate-y {
  0% { transform: perspective(500px) rotateY(0deg); }
  100% { transform: perspective(500px) rotateY(360deg); }
}

#retro-badges { flex-direction: column; }
.badges { height: 31px; margin: 2px; }

/* ============================================
   Visitor Counter
   ============================================ */
.visitor-container { font-family: 'Courier New', monospace; }

.visitor-display {
  background: #000;
  padding: 4px 15px 0 15px;
  display: inline-block;
  border-radius: 4px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 255, 0, 0.3);
  text-align: center;
}

#visitorLabel {
  font-size: 11px;
  color: #ff0;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0;
  line-height: 1;
}

#visitorCount {
  display: block;
  margin-top: -3px;
  font-size: 32px;
  font-weight: bold;
  color: var(--matrix-green);
  text-shadow: var(--glow-matrix), 0 0 30px var(--matrix-green);
  letter-spacing: 4px;
  font-family: 'Courier New', monospace;
  line-height: 1;
  animation: flicker 3s infinite;
}

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

@keyframes glitch {
  0% { transform: translate(0); opacity: 1; }
  20% { transform: translate(-2px, 1px); opacity: 0.8; }
  40% { transform: translate(2px, -1px); opacity: 1; }
  60% { transform: translate(-1px, 2px); opacity: 0.9; }
  80% { transform: translate(1px, -2px); opacity: 0.8; }
  100% { transform: translate(0); opacity: 1; }
}

.glitch-active { animation: glitch 0.1s linear infinite; }

/* ============================================
   Blink & Marquee Tags (90s revival)
   ============================================ */
blink { animation: blink-animation 1s steps(2, start) infinite; }

@keyframes blink-animation {
  to { visibility: hidden; }
}

marquee {
  display: inline-block;
  white-space: nowrap;
  animation: marquee-scroll 8s linear infinite;
}

@keyframes marquee-scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* ============================================
   WordArt Retro (lazy-loaded from retros/wordart.css)
   ============================================ */

/* ============================================
   Control Panel (lazy-loaded from retros/control-panel.css)
   ============================================ */
/* Control panel styles have been moved to retros/control-panel.css
   and are loaded on-demand when the control panel is needed. */

/* Table mode - 90s table cell look */
.table-cell {
  border: 0.2em double #000;
  background: rgba(128, 128, 128, 0.5);
  padding: 0;
  margin: 0 !important;
}

.table-cell .table-cell { background: transparent; }

/* ============================================
   Chat Window
   ============================================ */
#chat-window {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10001;
}

#chat-window .window {
  width: 600px;
  max-width: 90vw;
  height: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

#chat-window .window-body {
  flex: 1;
  padding: 0;
  display: flex;
}

#chat-window .window-body iframe {
  border: none;
  flex: 1;
}

#chat-confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  padding: 20px;
}

#chat-confirm p { margin: 0 0 12px 0; }

#chat-confirm a {
  color: #000080;
  font-weight: bold;
}

#chat-confirm .chat-confirm-note {
  font-size: 11px;
  color: #444;
}

/* ============================================
   FLASH MODE (lazy-loaded from retros/flash.css)
   ============================================ */
/* Flash theme styles have been moved to retros/flash.css
   and are loaded on-demand when the flash theme is activated. */

/* ============================================
   Matrix Rain Background (retheme)
   ============================================ */
#matrix-bg { background: #000; }

body.retheme-matrix { background-image: none !important; }

body.retheme-matrix main,
body.retheme-matrix #main {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 0 30px rgba(0, 255, 0, 0.2);
}

body.retheme-matrix a { color: var(--matrix-green); }
body.retheme-matrix a:hover { color: var(--matrix-green); text-shadow: var(--glow-matrix); }

body.retheme-matrix,
body.retheme-matrix h1:not(.wordart),
body.retheme-matrix h2,
body.retheme-matrix h3,
body.retheme-matrix p,
body.retheme-matrix li,
body.retheme-matrix span {
  color: var(--matrix-green) !important;
}

body.retheme-matrix h1:not(.wordart) {
  font-family: 'VT323', monospace;
  font-size: 2.5em;
  text-shadow: var(--glow-matrix);
  letter-spacing: 2px;
}

/* Prevent WordArt from rendering behind matrix background overlay */
body.retheme-matrix .wordart-container {
  z-index: 1;
}

/* ============================================
   CRT Monitor Effect (retheme)
   ============================================ */
#tv-snow,
.crt-overlay,
.crt-curvature,
.glitch-overlay {
  pointer-events: none;
}

body.retheme-crt { animation: crt-flicker 0.1s infinite; }

@keyframes crt-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.98; }
}

.crt-overlay {
  z-index: 99998;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0px, rgba(0, 0, 0, 0.15) 1px, transparent 1px, transparent 2px);
}

.crt-overlay::before {
  background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
}

.crt-overlay::after {
  background: linear-gradient(180deg, transparent 0%, rgba(0, 255, 0, 0.03) 50%, transparent 100%);
  animation: crt-scanline 8s linear infinite;
}

@keyframes crt-scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

.crt-curvature {
  z-index: 99997;
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5), inset 0 0 200px rgba(0, 0, 0, 0.3);
  border-radius: 20px;
}

body.retheme-crt main,
body.retheme-crt #main {
  text-shadow: 0.5px 0 0 rgba(255, 0, 0, 0.3), -0.5px 0 0 rgba(0, 255, 255, 0.3);
}

/* ============================================
   Neon Glow - Cyberpunk (retheme)
   ============================================ */
body.retheme-neon { background: var(--dark-bg) !important; }

body.retheme-neon main,
body.retheme-neon #main {
  background: rgba(10, 10, 10, 0.9) !important;
  border: 2px solid var(--magenta);
  box-shadow: 0 0 10px var(--magenta), 0 0 20px var(--magenta), 0 0 40px var(--magenta), inset 0 0 20px rgba(255, 0, 255, 0.1);
}

body.retheme-neon h1 {
  color: var(--cyan-bright) !important;
  text-shadow: 0 0 5px var(--cyan-bright), 0 0 10px var(--cyan-bright), 0 0 20px var(--cyan-bright), 0 0 40px var(--cyan-bright) !important;
  animation: neon-flicker 3s infinite;
}

body.retheme-neon h2,
body.retheme-neon h3 {
  color: var(--magenta) !important;
  text-shadow: 0 0 5px var(--magenta), 0 0 10px var(--magenta) !important;
}

/* Force text readable on dark background */
body.retheme-neon,
body.retheme-neon p,
body.retheme-neon li,
body.retheme-neon span,
body.retheme-neon div,
body.retheme-neon td,
body.retheme-neon th,
body.retheme-neon label {
  color: #e0e0e0 !important;
}

@keyframes neon-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow: 0 0 5px var(--cyan-bright), 0 0 10px var(--cyan-bright), 0 0 20px var(--cyan-bright), 0 0 40px var(--cyan-bright);
  }
  20%, 24%, 55% { text-shadow: none; }
}

body.retheme-neon a { color: var(--neon-pink) !important; text-shadow: 0 0 10px var(--neon-pink); }
body.retheme-neon a:hover { color: #80ff00 !important; text-shadow: 0 0 20px #80ff00; }

.neon-line {
  position: fixed;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--neon-color);
  box-shadow: 0 0 5px var(--neon-color), 0 0 10px var(--neon-color), 0 0 20px var(--neon-color);
  z-index: -1;
  animation: neon-line-pulse 2s ease-in-out infinite;
  opacity: 0.7;
}

@keyframes neon-line-pulse {
  0%, 100% { opacity: 0.4; transform: scaleX(0.8); }
  50% { opacity: 1; transform: scaleX(1); }
}

/* ============================================
   Y2K Chrome (retheme)
   ============================================ */
body.retheme-y2k { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; }

body.retheme-y2k main,
body.retheme-y2k #main {
  background: linear-gradient(135deg, #c0c0c0 0%, #ffffff 25%, #c0c0c0 50%, #ffffff 75%, #c0c0c0 100%) !important;
  background-size: 400% 400%;
  animation: y2k-chrome-shift 5s ease infinite;
  border: 4px solid;
  border-image: linear-gradient(135deg, var(--gold), #ff69b4, #00bfff, var(--gold)) 1;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.8), inset 0 -2px 0 rgba(0, 0, 0, 0.2);
  color: #333 !important;
}

body.retheme-y2k p,
body.retheme-y2k li,
body.retheme-y2k span,
body.retheme-y2k div {
  color: #333 !important;
}

@keyframes y2k-chrome-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

body.retheme-y2k h1 {
  background: linear-gradient(180deg, #e0e0e0 0%, #ffffff 20%, #a0a0a0 40%, #ffffff 60%, #c0c0c0 80%, #808080 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(2px 2px 0 #333) drop-shadow(-1px -1px 0 #fff);
  text-shadow: none !important;
}

/* Prevent WordArt from rendering behind Y2K chrome background */
body.retheme-y2k .wordart-container {
  z-index: 1;
}

.y2k-shape {
  position: fixed;
  z-index: -2;
  animation: y2k-float 10s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
  opacity: 0.6;
}

@keyframes y2k-float {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  25% { transform: translateY(-20px) rotate(90deg) scale(1.1); }
  50% { transform: translateY(-40px) rotate(180deg) scale(1); }
  75% { transform: translateY(-20px) rotate(270deg) scale(1.1); }
}

/* ============================================
   3D Perspective / Tilt Effect
   ============================================ */
.perspective-wrapper {
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out;
  min-height: 100vh;
}

/* ============================================
   VHS Glitch Effect (retheme)
   ============================================ */
body.retheme-vhs { position: relative; }

.glitch-overlay {
  z-index: 99999;
  background: repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0, 0, 0, 0.1) 2px, rgba(0, 0, 0, 0.1) 4px);
  opacity: 0.3;
}

body.retheme-vhs.glitch-active { animation: vhs-glitch 0.1s steps(2) infinite; }

body.retheme-vhs.glitch-active .glitch-overlay {
  opacity: 0.8;
  background:
    repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(255, 0, 0, 0.1) 2px, rgba(255, 0, 0, 0.1) 4px),
    repeating-linear-gradient(90deg, transparent 0px, transparent 3px, rgba(0, 255, 255, 0.1) 3px, rgba(0, 255, 255, 0.1) 6px);
}

@keyframes vhs-glitch {
  0% { transform: translate(0); filter: hue-rotate(0deg); }
  25% { transform: translate(-2px, 1px); filter: hue-rotate(90deg); }
  50% { transform: translate(2px, -1px); filter: hue-rotate(-90deg); }
  75% { transform: translate(1px, 2px); filter: hue-rotate(180deg); }
  100% { transform: translate(0); filter: hue-rotate(0deg); }
}

/* Disable body transform in dark mode - breaks position:fixed backgrounds */
body.retheme-vhs.glitch-active.dark-mode { animation: none; }

body.retheme-vhs.glitch-active main,
body.retheme-vhs.glitch-active #main {
  animation: glitch-text 0.1s steps(2) infinite;
}

/* In dark mode, apply the transform to main content instead */
body.retheme-vhs.glitch-active.dark-mode main,
body.retheme-vhs.glitch-active.dark-mode #main {
  animation: vhs-glitch 0.1s steps(2) infinite, glitch-text 0.1s steps(2) infinite;
}

@keyframes glitch-text {
  0% { text-shadow: 2px 0 #ff0000, -2px 0 var(--cyan-bright); }
  25% { text-shadow: -2px 0 #ff0000, 2px 0 var(--cyan-bright); }
  50% { text-shadow: 2px 2px #ff0000, -2px -2px var(--cyan-bright); }
  75% { text-shadow: -2px 2px #ff0000, 2px -2px var(--cyan-bright); }
  100% { text-shadow: 2px 0 #ff0000, -2px 0 var(--cyan-bright); }
}

/* ============================================
   TV Snow / Static Effect (retheme)
   ============================================ */
#tv-snow { image-rendering: pixelated; }

body.retheme-snow { filter: saturate(0.9); }

/* ============================================
   Comic Sans Mode (retheme) - The Cursed Theme
   ============================================ */
body.retheme-comic-sans,
body.retheme-comic-sans *,
body.retheme-comic-sans *::before,
body.retheme-comic-sans *::after,
body.retheme-comic-sans h1,
body.retheme-comic-sans h2,
body.retheme-comic-sans h3,
body.retheme-comic-sans h4,
body.retheme-comic-sans h5,
body.retheme-comic-sans h6,
body.retheme-comic-sans p,
body.retheme-comic-sans li,
body.retheme-comic-sans span,
body.retheme-comic-sans div,
body.retheme-comic-sans a,
body.retheme-comic-sans button,
body.retheme-comic-sans input,
body.retheme-comic-sans textarea,
body.retheme-comic-sans select,
body.retheme-comic-sans label,
body.retheme-comic-sans td,
body.retheme-comic-sans th,
body.retheme-comic-sans code,
body.retheme-comic-sans pre,
body.retheme-comic-sans blockquote {
  font-family: 'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive !important;
}

/* Give it that authentic early 2000s personal website vibe */
body.retheme-comic-sans {
  background: linear-gradient(180deg, #87ceeb 0%, #98fb98 50%, #ffd700 100%) !important;
}

body.retheme-comic-sans main,
body.retheme-comic-sans #main {
  background: #fffacd !important;
  border: 3px dashed #ff69b4 !important;
  border-radius: 15px;
  box-shadow: 5px 5px 0 #ff69b4, 10px 10px 0 #87ceeb;
}

body.retheme-comic-sans h1 {
  color: #ff1493 !important;
  text-shadow: 2px 2px 0 #ffd700, 4px 4px 0 #ff69b4 !important;
}

body.retheme-comic-sans h2,
body.retheme-comic-sans h3 {
  color: #4169e1 !important;
}

body.retheme-comic-sans a {
  color: #ff00ff !important;
  text-decoration: underline wavy !important;
}

body.retheme-comic-sans a:hover {
  color: #00ff00 !important;
  background: #ffff00 !important;
}