/* Base Dark Theme Styles */
.dark {
  background-color: #1a202c;
  color: #e2e8f0;
}

/* Ensure smooth scrolling */
html {
    scroll-behavior: smooth;
}

body {
  font-family: 'Comic Neue', cursive;
  overflow-x: hidden;
  transition: background-color 0.3s, color 0.3s;
}

h1, h2, h3, .comic-button {
  font-family: 'Bangers', cursive;
  letter-spacing: 2px;
}

/* Comic Panel Dark Theme - UPDATED FOR SYMMETRY */
.comic-panel {
  border: 4px solid #e2e8f0;
  border-radius: 8px;
  background-color: #2d3748;
  box-shadow: 8px 8px 0px #e2e8f0;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  /* Ensures all panels in a grid row have the same height */
  height: 100%;
}
.dark #projects .comic-panel:hover {
  transform: translate(-6px, -6px) rotate(2deg) scale(1.02);
  box-shadow: 14px 14px 0px #ef4444; /* Red POW! color on hover */
  border-color: #ef4444;
}


/* Comic Button Dark Theme */
.comic-button-small {
  border: 3px solid #1a202c;
  border-radius: 8px;
  font-family: 'Bangers', cursive;
  transition: all 0.2s;
}
.dark .comic-button-small:hover {
  transform: translateY(-2px);
  box-shadow: 4px 4px 0px #1a202c;
}

/* Speech Bubble Light Theme (for contrast) */
.speech-bubble {
  position: relative;
  background: #fff;
  border: 3px solid #1a202c;
  border-radius: .4em;
}
/* Removed the ::after pseudo-element that created the arrow */
.speech-bubble:after {
  content: none;
}

/* Dots Background Dark Theme */
.dots-bg-dark {
  background-image: radial-gradient(#4a5568 2px, transparent 2px);
  background-size: 30px 30px;
}

.about-clipper {
  clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%);
}

/* --- Hero Section --- */
.bg-skyline {
  background: url('assets/images/skyline.png') no-repeat center bottom;
  background-size: cover;
  animation: parallax 40s linear infinite;
}

/* NEW AVATAR STYLES */
.avatar-container {
    animation: float-bot 6s ease-in-out infinite;
}
.avatar:hover {
    transform: rotate(-5deg) scale(1.1);
    transition: transform 0.3s ease-in-out;
}
.pupil {
    transition: transform 0.1s ease-out;
}

.comic-word {
  position: absolute;
  font-family: 'Bangers', cursive;
  font-size: 4rem;
  color: #ffdd00;
  text-shadow: 3px 3px 0 #000;
  opacity: 0.8;
  animation: float 20s infinite linear;
  user-select: none;
}
.wow { top: 10%; left: -20%; animation-duration: 15s; }
.zap { top: 50%; left: -20%; animation-duration: 18s; animation-delay: 5s; }
.kapow { top: 80%; left: -20%; animation-duration: 22s; animation-delay: 10s; }

/* NEW BOT FLOATING ANIMATION */
@keyframes float-bot {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

@keyframes float {
  from { transform: translateX(0vw) rotate(-10deg); }
  to { transform: translateX(110vw) rotate(10deg); }
}
@keyframes parallax {
  from { background-position: 0% bottom; }
  to { background-position: 200% bottom; }
}

/* Eye blink */
.eye { animation: blink 6s infinite; }
@keyframes blink {
  0%, 90%, 100% { r: 12; }
  95% { r: 1; }
}

/* Typing effect */
#typing-text {
  border-right: 3px solid #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  color: #a0aec0; /* Lighter mono text for dark mode */
}
.dark #typing-text {
    border-right-color: #a0aec0;
}


/* --- About Section --- */
.comic-panel-flip {
  background-color: transparent;
  perspective: 1000px;
  height: 180px;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.7s;
  transform-style: preserve-3d;
  box-shadow: 8px 8px 0px #e2e8f0;
  border: 4px solid #e2e8f0;
  border-radius: 8px;
}
.comic-panel-flip:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 4px;
}
.flip-card-back {
  transform: rotateY(180deg);
}

/* --- Skills Section --- */
.skill-card {
    border: 4px solid #e2e8f0;
    border-radius: 8px;
    background-color: #2d3748;
    box-shadow: 8px 8px 0px #e2e8f0;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.dark .skill-card:hover {
    transform: translateY(-10px) rotate(3deg);
    box-shadow: 12px 12px 0px #f59e0b; /* A splash of orange on hover */
    border-color: #f59e0b;
}
.skill-icon {
    font-size: 3rem;
    margin-bottom: 0.75rem;
}
.skill-title {
    font-size: 1.5rem;
    color: #e2e8f0;
}
.skill-desc {
    margin-top: 0.25rem;
    color: #a0aec0;
}

/* --- Daily Quote Section --- */
#quote-text {
    min-height: 80px;
    transition: opacity 0.5s ease-in-out;
}

/* --- Konami Code Easter Egg --- */
#konami-egg {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-family: 'Bangers', cursive;
    font-size: 10rem;
    color: #ef4444;
    text-shadow: 6px 6px 0 #fff;
    pointer-events: none;
    z-index: 1000;
}
.konami-animation {
    animation: konami-pow 1s ease-out forwards;
}
@keyframes konami-pow {
    0% { transform: translate(-50%, -50%) scale(0) rotate(-15deg); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.2) rotate(5deg); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
}


/* --- Form --- */
.form-input {
    width: 100%;
    border: 3px solid #e2e8f0;
    background-color: #1a202c;
    color: #e2e8f0;
    padding: 0.75rem;
    border-radius: 8px;
}
.form-input::placeholder {
    color: #a0aec0;
}

/* --- Animations & Contact Form Status --- */
.animate-pop-in, .speech-bubble-mini {
  animation: pop-in 0.5s ease-out forwards;
  opacity: 0;
}
@keyframes pop-in {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.speech-bubble-mini {
  position: relative;
  display: inline-block;
  background: #2d3748;
  border: 3px solid #e2e8f0;
  border-radius: .4em;
  padding: 10px 15px;
}
.speech-bubble-mini:after {
  content: '';
  position: absolute;
  left: 20px;
  top: 100%;
  border: 10px solid transparent;
  border-top-color: #e2e8f0;
}
#form-status.success { background: #10B981; border-color: #059669; color: #fff; }
#form-status.success:after { border-top-color: #059669; }
#form-status.error { background: #EF4444; border-color: #DC2626; color: #fff; }
#form-status.error:after { border-top-color: #DC2626; }

/* Styling for the new chess icon */
#chess .fa-chess-knight {
  transform: rotate(-15deg);
  transition: transform 0.3s ease-in-out;
}

#chess .comic-panel:hover .fa-chess-knight {
  transform: rotate(0deg) scale(1.1);
}