*{
    margin: 0;
    padding: 0;
    text-decoration: none;
}
.handjet-title {
    font-family: "Handjet", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:
        "ELGR" 1.7,
        "ELSH" 9.6;
}
.handjet-instructions {
    font-family: "Handjet", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-variation-settings:
        "ELGR" 1.5,
        "ELSH" 4.5;
}
header, #instructions{
    text-align: center;
}
header>h1{
    font-weight: 800;
    font-size: 3em;
    display: inline-block;
    margin: 5px auto 10px;
}
main{
    width: 100vw;
    height: 90vh;
    position: relative;
}
#playSpace {
    width: 600px;
    height: 600px;
    position: relative;
    border: 4px solid black;
    margin: 20px auto;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;   /* force the ground to the bottom */
}



/* Hero */
#hero {
     width: 64px;
    height: 90px;
    left: 0px;
    top: 50px;
    /* background: url("./visuals/HeroJames2.svg") center/cover no-repeat; */
    position: absolute;
}  

body {
  margin: 0;
  padding: 0;
  background: #202020;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#instructions>p{
    font-size: 2em;
    color: blue;
} 



.obstacle {
    width: 90px;
    height: auto;
    pointer-events: none;
} 

#gameOverScreen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 10, 0.95);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Press Start 2P', monospace;
    color: #ff003c; /* neon red */
    text-align: center;
    z-index: 9999;
    border: 4px solid #ff003c;
    box-shadow: 0 0 25px #ff003c, inset 0 0 25px #ff003c;
    animation: screenFlicker 1.1s infinite alternate;
}

/* hide class */
#gameOverScreen.hidden {
    display: none;
}

/* GAME OVER title */
#gameOverScreen h2 {
    font-size: 38px;
    margin-bottom: 25px;
    text-shadow: 0px 0px 10px #ff003c, 0px 0px 20px #ff003c;
    animation: gameOverPulse 1.4s infinite;
}

/* ===== RETRO BUTTON ===== */
#restartBtn {
    margin-top: 15px;
    padding: 14px 26px;
    font-size: 18px;
    font-family: 'Press Start 2P', monospace;
    background: black;
    color: #ffe600; /* neon yellow */
    border: 3px solid #ffe600;
    cursor: pointer;
    box-shadow: 0px 0px 12px #ffe600;
    transition: 0.15s ease-in-out;
    text-transform: uppercase;
}

#restartBtn:hover {
    background: #ffe600;
    color: black;
    box-shadow: 0px 0px 20px #ffe600;
    transform: scale(1.1);
}

#restartBtn:active {
    transform: scale(0.97);
}

/* ===== SCANLINES CRT EFFECT ===== */
#gameOverScreen::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        transparent 0px,
        transparent 2px,
        rgba(255,255,255,0.04) 3px
    );
    pointer-events: none;
    opacity: 0.5;
}

/* ===== ANIMATIONS ===== */
@keyframes gameOverPulse {
    0% { text-shadow: 0 0 10px #ff003c; }
    50% { text-shadow: 0 0 30px #ff003c; }
    100% { text-shadow: 0 0 10px #ff003c; }
}

@keyframes screenFlicker {
    0% { opacity: 0.97; }
    50% { opacity: 0.92; }
    100% { opacity: 0.98; }
}

.platform {
  position: absolute;
  width: 80px;
  height: 20px;
  background: #8b5a2b;
  border: 2px solid #5c3a18;
  border-radius: 4px;
} 

.block {
    position: absolute;
    width: 64px;
    height: 64px;
} 





.goblin {
    width: 64px;
    height: 64px;
    /* background-image: url("visuals/Goblin-2.svg"); */
    background-size: cover;
    position: absolute;
} 

#heroHearts {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 9999;
    display: flex;
    gap: 4px;
} 

.heart {
    width: 32px;
    height: 32px;
    /* background-image: url("visuals/hearts.png"); */
    background-size: cover;
} 

.goblin.hit {
  filter: brightness(2);
  transform: scale(1.1);
}

.goblin.dead {
  opacity: 0;
  transform: scale(0);
  transition: 0.2s ease;
} 



.hidden {
  display: none; 
} 

#goalTracker {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ffe9a6;
    padding: 8px 16px;
    border: 3px solid #3b2f00;
    border-radius: 4px;
    font-family: "Press Start 2P", monospace;
    font-size: 14px;
    color: #2c2100;
    text-shadow: 1px 1px 0px #fff;
} 

/* WIN SCREEN OVERLAY */
#winScreen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(20, 20, 20, 0.9); /* dark but not harsh */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  opacity: 1;
  transition: opacity 0.3s ease;
  z-index: 999;
}

#winScreen.hidden {
  opacity: 0;
  pointer-events: none;
}

/* WIN TEXT */
#winScreen h1 {
  font-family: "Handjet", sans-serif;
  font-size: 64px;
  color: white;
  margin-bottom: 25px;
  letter-spacing: 3px;
  border: 4px solid white;
  padding: 10px 25px;
  background: #222; /* matte retro box */
}

/* RESTART BUTTON */
.btn-restart {
 font-family: "Press Start 2P", monospace; /* Retro pixel font */
    font-size: 14px;
    padding: 18px 32px;
    color: #fff;
    background: #00ff15;
    border: 4px solid #000;
    cursor: pointer;
    text-transform: uppercase;

    /* Pixelated look */
    image-rendering: pixelated;

    /* Glow */
    box-shadow: 
        0px 0px 0px 4px #000,
        0px 0px 15px #39915b,
        inset 0px 0px 6px #000;

    border-radius: 4px;

    transition: 
        transform 0.15s ease-out,
        box-shadow 0.15s ease-out,
        background 0.15s ease-out;
}  


#winRestartBtn {
  font-family: "Press Start 2P", monospace; /* Retro pixel font */
    font-size: 14px;
    padding: 18px 32px;
    color: #fff;
    background: #ff0000;
    border: 4px solid #000;
    cursor: pointer;
    text-transform: uppercase; 
    margin: 20px;

    /* Pixelated look */
    image-rendering: pixelated;

    /* Glow */
    box-shadow: 
        0px 0px 0px 4px #000,
        0px 0px 15px #39915b,
        inset 0px 0px 6px #000;

    border-radius: 4px;

    transition: 
        transform 0.15s ease-out,
        box-shadow 0.15s ease-out,
        background 0.15s ease-out;
}

/* Hover glow */
#winRestart:hover {
    background: #ecd314;
    box-shadow:
        0px 0px 0px 4px #000,
        0px 0px 25px #ff6b6b,
        inset 0px 0px 10px #000;
    transform: translateY(-3px);
}

/* Retro "press down" effect */
#winRestart:active {
    transform: translateY(2px);
    background: #9e1c1c;
    box-shadow:
        0px 0px 0px 4px #000,
        0px 0px 8px #ff4d4d,
        inset 0px 0px 4px #000;
}





#nextLevelBtn {
    font-family: "Press Start 2P", monospace; /* Retro pixel font */
    font-size: 14px;
    padding: 18px 32px;
    color: #fff;
    background: #00ff15;
    border: 4px solid #000;
    cursor: pointer;
    text-transform: uppercase;

    /* Pixelated look */
    image-rendering: pixelated;

    /* Glow */
    box-shadow: 
        0px 0px 0px 4px #000,
        0px 0px 15px #39915b,
        inset 0px 0px 6px #000;

    border-radius: 4px;

    transition: 
        transform 0.15s ease-out,
        box-shadow 0.15s ease-out,
        background 0.15s ease-out;
}

/* Hover glow */
#nextLevelBtn:hover {
    background: #f94144;
    box-shadow:
        0px 0px 0px 4px #000,
        0px 0px 25px #ff6b6b,
        inset 0px 0px 10px #000;
    transform: translateY(-3px);
}

/* Retro "press down" effect */
#nextLevelBtn:active {
    transform: translateY(2px);
    background: #9e1c1c;
    box-shadow:
        0px 0px 0px 4px #000,
        0px 0px 8px #ff4d4d,
        inset 0px 0px 4px #000;
} 


.screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 10, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 25px;
  color: #39ff14; /* neon retro green */
  font-family: 'Press Start 2P', monospace;
  text-align: center;
  z-index: 999;
  padding: 20px;
  border: 4px solid #39ff14;
  box-shadow:
    0 0 20px #39ff14,
    inset 0 0 20px #39ff14;
  animation: flicker 1.2s infinite alternate;
}


.hidden {
  display: none;
}

/* ===== TITLES ===== */
.screen h1,
.screen h2 {
  font-size: 24px;
  text-shadow: 0px 0px 6px #39ff14;
  animation: glowPulse 1.5s infinite linear;
}

/* Paragraph text */
.screen p {
  font-size: 14px;
  line-height: 20px;
}

/* ===== RETRO BUTTONS ===== */
.screen button {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  padding: 14px 22px;
  background: black;
  color: #ffe600; /* yellow */
  border: 3px solid #ffe600;
  cursor: pointer;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0px 0px 10px #ffe600;
  transition: 0.15s ease-in-out;
}

.screen button:hover {
  color: black;
  background: #ffe600;
  box-shadow: 0px 0px 20px #ffe600;
  transform: scale(1.1);
}

.screen button:active {
  transform: scale(0.97);
}

/* ===== CRT SCANLINE EFFECT ===== */
.screen::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(255,255,255,0.03) 3px
  );
  pointer-events: none;
  opacity: 0.4;
}

/* ===== ANIMATIONS ===== */
@keyframes flicker {
  0% { opacity: 0.96; }
  50% { opacity: 0.93; }
  100% { opacity: 0.98; }
}

@keyframes glowPulse {
  0% { text-shadow: 0 0 6px #39ff14; }
  50% { text-shadow: 0 0 18px #39ff14; }
  100% { text-shadow: 0 0 6px #39ff14; }
} 


#gameCompleteScreen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 10, 0.95);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Press Start 2P', monospace;
    color: #ffe600; /* neon gold */
    text-align: center;
    z-index: 9999;
    border: 4px solid #ffe600;
    box-shadow: 
        0 0 25px #ffe600,
        inset 0 0 25px #ffe600;
    animation: completeFlicker 1.1s infinite alternate;
}

#gameCompleteScreen.hidden {
    display: none;
}

/* Victory Title */
#gameCompleteScreen h2 {
    font-size: 32px;
    margin-bottom: 15px;
    text-shadow: 
        0px 0px 12px #ffe600,
        0px 0px 22px #ffe600;
    animation: victoryPulse 1.6s infinite;
}


#gameCompleteScreen p {
    font-size: 16px;
    margin-bottom: 25px;
    text-shadow: 0px 0px 8px #ffe600;
}


#completeRestartBtn {
    padding: 14px 28px;
    font-size: 16px;
    font-family: 'Press Start 2P', monospace;
    background: black;
    color: #39ff14; /* neon green */
    border: 3px solid #39ff14;
    cursor: pointer;
    box-shadow: 0px 0px 12px #39ff14;
    text-transform: uppercase;
    transition: 0.15s ease-in-out;
}

#completeRestartBtn:hover {
    background: #39ff14;
    color: black;
    box-shadow: 0px 0px 20px #39ff14;
    transform: scale(1.08);
}

#completeRestartBtn:active {
    transform: scale(0.97);
}


#gameCompleteScreen::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        transparent 0px,
        transparent 2px,
        rgba(255,255,255,0.03) 3px
    );
    pointer-events: none;
    opacity: 0.4;
}

/* Animations */
@keyframes victoryPulse {
    0% { text-shadow: 0 0 10px #ffe600; }
    50% { text-shadow: 0 0 30px #ffe600; }
    100% { text-shadow: 0 0 10px #ffe600; }
}

@keyframes completeFlicker {
    0% { opacity: 0.98; }
    50% { opacity: 0.92; }
    100% { opacity: 0.97; }
}