:root {
  --green: #00ff41;
  --pink: #ff0066;
  --blue: #00d4ff;
  --red: #ff3333;
  --amber: #ffb000;
  --bg: #0a0a0a;
  --panel-bg: #111111;
  --border: #333333;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--green);
  font-family: 'Share Tech Mono', monospace;
  min-height: 100vh;
  overflow-x: hidden;
}

#scanlines {
  pointer-events: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
}

@keyframes glitch1 {
  0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
  20% { clip-path: inset(20% 0 60% 0); transform: translate(-3px, 0); }
  40% { clip-path: inset(60% 0 10% 0); transform: translate(3px, 0); }
  60% { clip-path: inset(40% 0 40% 0); transform: translate(-2px, 0); }
  80% { clip-path: inset(80% 0 5% 0); transform: translate(1px, 0); }
}

@keyframes glitch2 {
  0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
  25% { clip-path: inset(10% 0 70% 0); transform: translate(2px, 0); }
  50% { clip-path: inset(50% 0 20% 0); transform: translate(-4px, 0); }
  75% { clip-path: inset(70% 0 10% 0); transform: translate(1px, 0); }
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  3% { opacity: 0.4; }
  6% { opacity: 1; }
  7% { opacity: 0.7; }
  9% { opacity: 1; }
  50% { opacity: 1; }
  52% { opacity: 0.8; }
  53% { opacity: 1; }
}

@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 51, 51, 0.5), 0 0 20px rgba(255, 51, 51, 0.3); }
  50% { box-shadow: 0 0 20px rgba(255, 51, 51, 0.8), 0 0 40px rgba(255, 51, 51, 0.5), 0 0 60px rgba(255, 51, 51, 0.3); }
}

@keyframes countUp {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-8px) rotate(-1deg); }
  20% { transform: translateX(8px) rotate(1deg); }
  30% { transform: translateX(-6px) rotate(-0.5deg); }
  40% { transform: translateX(6px) rotate(0.5deg); }
  50% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  70% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
  90% { transform: translateX(-1px); }
}

@keyframes rgbShift {
  0%, 100% { text-shadow: -2px 0 #ff0066, 2px 0 #00d4ff; }
  33% { text-shadow: -3px 0 #ff0066, 3px 0 #00d4ff, 0 2px #00ff41; }
  66% { text-shadow: 2px 0 #ff0066, -2px 0 #00d4ff, 0 -1px #00ff41; }
}

.glitch-title {
  font-family: 'VT323', monospace;
  animation: flicker 4s infinite, rgbShift 3s infinite;
  text-shadow: -2px 0 var(--pink), 2px 0 var(--blue);
  position: relative;
}

.glitch-title::before,
.glitch-title::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch-title::before {
  color: var(--pink);
  animation: glitch1 5s infinite;
  z-index: -1;
}

.glitch-title::after {
  color: var(--blue);
  animation: glitch2 3s infinite;
  z-index: -1;
}

.win98-panel {
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
  background: var(--panel-bg);
}

.win98-titlebar {
  background: linear-gradient(90deg, #000080, #1084d0);
  padding: 2px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}

.win98-titlebar-text {
  color: white;
  font-family: 'VT323', monospace;
  font-size: 14px;
  font-weight: bold;
}

.win98-btn {
  width: 16px;
  height: 14px;
  background: #c0c0c0;
  border: 1px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
  font-size: 8px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  color: black;
}

.corrupt-btn {
  animation: pulse-red 2s infinite;
  transition: all 0.15s;
}

.corrupt-btn:hover {
  transform: scale(1.05);
  filter: brightness(1.2);
}

.corrupt-btn:active {
  transform: scale(0.98);
}

.shaking {
  animation: shake 0.5s ease-in-out;
}

.hex-view {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  line-height: 1.4;
  white-space: pre;
  overflow: auto;
}

.hex-changed {
  color: var(--red);
  text-shadow: 0 0 6px rgba(255, 51, 51, 0.6);
}

.hex-original {
  color: #555;
}

.slider-container input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg, var(--green), var(--amber), var(--red));
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}

.slider-container input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--green);
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
}

.slider-container input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--green);
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
}

.drop-zone {
  border: 3px dashed var(--border);
  transition: all 0.3s;
  cursor: pointer;
}

.drop-zone:hover, .drop-zone.drag-over {
  border-color: var(--green);
  background: rgba(0, 255, 65, 0.05);
  box-shadow: 0 0 30px rgba(0, 255, 65, 0.1) inset;
}

.crt-screen {
  border-radius: 15px;
  box-shadow: 
    0 0 100px rgba(0, 255, 65, 0.03) inset,
    0 0 50px rgba(0, 0, 0, 0.5);
}

select, input[type="number"] {
  background: #1a1a1a;
  color: var(--green);
  border: 1px solid var(--border);
  font-family: 'Share Tech Mono', monospace;
  padding: 6px 10px;
  outline: none;
}

select:focus, input[type="number"]:focus {
  border-color: var(--green);
  box-shadow: 0 0 8px rgba(0, 255, 65, 0.3);
}

canvas {
  image-rendering: pixelated;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #111;
}

::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}