/* Base body styles - Lighter Theme */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f0f2f5; /* Light Gray background */
    color: #333; /* Darker text for contrast */
    overflow-x: hidden;
}

/* Class to apply the pixelated font */
.font-pixel {
    font-family: 'Press Start 2P', cursive;
}

/* Styling for content blocks - Adjusted for lighter theme */
.pixel-border {
    border: 4px solid #a0aec0; /* Medium-light Gray border */
    box-shadow: 4px 4px 0px 0px #a0aec0; /* Pixel-style shadow */
    border-radius: 0px;
}

/* Styling for pixel-style buttons - Adjusted for lighter theme */
.pixel-button {
    font-family: 'Press Start 2P', cursive;
    padding: 12px 24px;
    text-decoration: none;
    display: inline-block;
    border-style: solid;
    border-width: 3px;
    box-shadow: 3px 3px 0px 0px;
    transition: all 0.1s ease-in-out;
    border-radius: 0px;
    text-transform: uppercase;
}

.pixel-button-green {
    background-color: #68d391; /* Lighter Green */
    border-color: #38a169; /* Darker Green for border/shadow */
    box-shadow-color: #38a169; /* Ensure this is targeted by box-shadow if needed, though Tailwind handles color implicitly */
    color: #1a202c; /* Dark text */
}

.pixel-button-green:hover {
    background-color: #48bb78;
    box-shadow: 1px 1px 0px 0px #38a169; /* Re-specify color for clarity if needed */
    transform: translate(2px, 2px);
}

.pixel-button-orange {
    background-color: #f6ad55; /* Lighter Orange */
    border-color: #dd6b20; /* Darker Orange for border/shadow */
    box-shadow-color: #dd6b20; /* As above */
    color: #1a202c; /* Dark text */
}

.pixel-button-orange:hover {
    background-color: #ed8936;
    box-shadow: 1px 1px 0px 0px #dd6b20; /* As above */
    transform: translate(2px, 2px);
}

/* Glitch animation for the main header text - Colors adjusted */
.header-glitch {
    animation: glitch 1s linear infinite;
}

@keyframes glitch{
  2%,64%{ transform: translate(2px,0) skew(0deg); }
  4%,60%{ transform: translate(-2px,0) skew(0deg); }
  62%{ transform: translate(0,0) skew(5deg); }
}

.header-glitch:before,
.header-glitch:after{
  content: attr(data-text);
  position: absolute;
  left: 0;
  right: 0;
  /* Ensure text color matches for glitch layers if not inheriting properly */
  color: #4ade80; /* Tailwind green-400 / or match the header text-green-600 which is #16a34a */
}
/* If the header text is text-green-600 (#16a34a), then glitch layers should match */
.header-glitch:before, .header-glitch:after {
    color: #16a34a; /* Matching the text-green-600 */
}


@keyframes glitchTop{
  2%,64%{ transform: translate(2px,-2px); }
  4%,60%{ transform: translate(-2px,2px); }
  62%{ transform: translate(13px,-1px) skew(-13deg); }
}

.header-glitch:before{
  animation: glitchTop 1s linear infinite;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

@keyframes glitchBottom{
  2%,64%{ transform: translate(-2px,0); }
  4%,60%{ transform: translate(-2px,0); }
  62%{ transform: translate(-22px,5px) skew(21deg); }
}

.header-glitch:after{
  animation: glitchBottom 1.5s linear infinite;
  clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

/* Custom scrollbar - Adjusted for lighter theme */
::-webkit-scrollbar {
    width: 12px;
    background-color: #e2e8f0; /* Lighter track */
}
::-webkit-scrollbar-thumb {
    background-color: #a0aec0; /* Medium gray thumb */
    border: 2px solid #e2e8f0;
    border-radius: 0px;
}
::-webkit-scrollbar-track {
    background-color: #cbd5e0; /* Slightly darker track background */
}

/* Text shadow - Adjusted for lighter theme */
.text-shadow-pixel {
    text-shadow: 2px 2px #a0aec0; /* Lighter shadow color */
}
.text-shadow-pixel-sm {
    text-shadow: 1px 1px #a0aec0;
}

/* Section divider - Adjusted for lighter theme */
.section-divider {
    height: 4px;
    background: repeating-linear-gradient(
        45deg,
        #cbd5e0, /* Light gray */
        #cbd5e0 10px,
        #a0aec0 10px, /* Medium gray */
        #a0aec0 20px
    );
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

/* Custom selection color */
::selection {
    background-color: #f6ad55; /* Orange selection */
    color: #1a202c;
}

/* Mini-game specific styles */
.game-container {
    width: 100%;
    height: 300px; /* Fixed height for the container */
    position: relative; /* Make this the positioning context */
    overflow: hidden; /* To keep elements contained */
    background-color: #e2e8f0; /* Light background for game area */
    border: 3px solid #a0aec0; /* Pixel border */
    margin-top: 1rem;
}

#gameArea {
    width: 100%;
    height: 100%; /* Use full height of container */
    position: relative; /* Make this the positioning context */
}

.game-character, .game-dino {
    font-size: 2.5rem; /* Adjust size as needed */
    position: absolute;
    bottom: 10px; /* Positioned at the "ground" */
    width: 50px; /* Explicit width for collision */
    height: 50px; /* Explicit height for collision */
    text-align: center; /* Center the emoji */
    line-height: 50px; /* Vertically center the emoji if height is 50px */
}

#player {
    /* Using an emoji or simple text as placeholder */
    /* content: "🧑‍💻";  -- Emojis as content don't work reliably in CSS, use HTML for this */
    color: #2d3748; /* Darker color for character */
}

@keyframes run-char {
    0% { transform: translateY(0); }
    50% { transform: translateY(-5px); } /* Simple up-down bobbing */
    100% { transform: translateY(0); }
}

.dinosaur {
    position: absolute;
    width: 50px;
    height: 50px;
    font-size: 2.5rem;
    line-height: 50px;
    text-align: center;
    color: #48bb78; /* Green, like the original .game-dino */
}

.game-dino {
    /* Using an emoji or simple text as placeholder */
    /* content: "🦖"; -- Emojis as content don't work reliably in CSS, use HTML for this */
    right: 20%;
    color: #48bb78; /* Green for dino */
    animation-name: run-dino;
    animation-duration: 0.5s; /* Match character animation speed */
    animation-timing-function: steps(2, end); /* Choppy animation for pixel feel */
    animation-iteration-count: infinite;
}

@keyframes run-dino {
    0% { transform: translateY(0) scaleX(-1); } /* Facing left */
    50% { transform: translateY(-3px) scaleX(-1); }
    100% { transform: translateY(0) scaleX(-1); }
}

.game-ground {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background: repeating-linear-gradient(
        -45deg,
        #cbd5e0,
        #cbd5e0 5px,
        #a0aec0 5px,
        #a0aec0 10px
    );
}

/* Score display */
#scoreDisplay {
    position: absolute;
    top: 10px;
    right: 10px;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.75rem;
    color: #1a202c;
    z-index: 10;
}

/* Ensure custom alert modal opacity transition works */
#customAlertModal.hidden {
    opacity: 0;
}
#customAlertModal {
    /* Initial state for transition - opacity-0 is handled by Tailwind on hidden */
    /* Tailwind handles the base opacity in the class list, this ensures transition works */
}