* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html, body {

    margin: 0;

    padding: 0;

    width: 100%;

    height: 100%;

    overflow: hidden;

}

body {

    font-family: 'Press Start 2P', cursive;

    background-color: #0f380f;

    margin: 0;

    padding: 0;

    width: 100vw;

    height: 100vh;

    overflow: hidden;

}



/* Start Screen */

.start-screen {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(180deg, #0f380f 0%, #306230 100%);

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 1000;

    animation: fadeIn 1s ease-in;

}



.start-screen.hidden {

    display: none;

}



.start-content {

    text-align: center;

    color: #9bbc0f;

}



.game-title {

    font-size: 48px;

    margin-bottom: 20px;

    text-shadow: 

        4px 4px 0 #0f380f,

        6px 6px 0 #000;

    animation: titlePulse 2s ease-in-out infinite;

}



.subtitle {

    font-size: 16px;

    color: #8bac0f;

    margin-bottom: 40px;

    letter-spacing: 2px;

}



.start-button {

    font-family: 'Press Start 2P', cursive;

    font-size: 14px;

    padding: 15px 30px;

    background-color: #306230;

    border: 4px solid #8bac0f;

    color: #9bbc0f;

    cursor: pointer;

    text-transform: uppercase;

    box-shadow: 

        0 0 0 2px #0f380f,

        4px 4px 0 #0f380f;

    animation: buttonBlink 1.5s infinite;

    transition: all 0.1s;

}



.start-button:hover {

    background-color: #8bac0f;

    color: #0f380f;

    transform: translate(2px, 2px);

    box-shadow: 

        0 0 0 2px #0f380f,

        2px 2px 0 #0f380f;

}



.start-button:active {

    transform: translate(4px, 4px);

    box-shadow: 0 0 0 2px #0f380f;

}



.music-toggle {

    margin-top: 30px;

    font-size: 10px;

    color: #8bac0f;

    cursor: pointer;

    opacity: 0.7;

    transition: opacity 0.2s;

}



.music-toggle:hover {

    opacity: 1;

}



.music-icon {

    display: inline-block;

    margin-right: 8px;

    font-size: 14px;

}



@keyframes fadeIn {

    from { opacity: 0; }

    to { opacity: 1; }

}



@keyframes titlePulse {

    0%, 100% { transform: scale(1); }

    50% { transform: scale(1.05); }

}



@keyframes buttonBlink {

    0%, 50% { opacity: 1; }

    51%, 100% { opacity: 0.6; }

}



/* Game Container */

#game-container {

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    margin: 0;

    padding: 0;

    image-rendering: pixelated;

    image-rendering: crisp-edges;

    background-color: #0f380f;

}



#game-container.hidden {

    display: none;

}



#game-canvas {

    position: absolute;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    display: block;

    margin: 0;

    padding: 0;

    border: none;

    background-color: #9bbc0f;

    image-rendering: pixelated;

    image-rendering: crisp-edges;

    image-rendering: -moz-crisp-edges;

    image-rendering: -webkit-crisp-edges;

}



/* Mute Button */

.mute-button {

    position: absolute;

    top: 10px;

    right: 10px;

    width: 40px;

    height: 40px;

    background-color: #306230;

    border: 3px solid #8bac0f;

    color: #9bbc0f;

    font-size: 20px;

    cursor: pointer;

    z-index: 300;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 

        0 0 0 2px #0f380f,

        2px 2px 0 #0f380f;

    transition: all 0.1s;

    image-rendering: pixelated;

}



.mute-button:hover {

    background-color: #8bac0f;

    color: #0f380f;

    transform: translate(1px, 1px);

    box-shadow: 

        0 0 0 2px #0f380f,

        1px 1px 0 #0f380f;

}



.mute-button:active {

    transform: translate(2px, 2px);

    box-shadow: 0 0 0 2px #0f380f;

}



/* Quest Tracker */

.quest-tracker {

    position: absolute;

    top: 10px;

    left: 10px;

    background-color: #0f380f;

    border: 3px solid #306230;

    padding: 8px 12px;

    color: #9bbc0f;

    font-size: 10px;

    z-index: 300;

    display: flex;

    align-items: center;

    gap: 8px;

    box-shadow: 

        0 0 0 2px #000,

        2px 2px 0 #8bac0f;

    image-rendering: pixelated;

}



.quest-icon {

    font-size: 14px;

    animation: questPulse 2s ease-in-out infinite;

}



.quest-text {

    font-family: 'Press Start 2P', cursive;

    line-height: 1.5;

}



#collectible-count {

    color: #8bac0f;

}



.reset-quest-btn {

    background-color: #306230;

    border: 2px solid #8bac0f;

    color: #9bbc0f;

    font-size: 12px;

    width: 24px;

    height: 24px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.1s;

    margin-left: 4px;

}



.reset-quest-btn:hover {

    background-color: #8bac0f;

    color: #0f380f;

}



@keyframes questPulse {

    0%, 100% { transform: scale(1); }

    50% { transform: scale(1.1); }

}



/* Collection Popup */

.collection-popup {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    background-color: #0f380f;

    border: 4px solid #306230;

    padding: 20px 30px;

    color: #9bbc0f;

    font-size: 12px;

    z-index: 400;

    box-shadow: 

        0 0 0 2px #000,

        4px 4px 0 #8bac0f;

    animation: popupSlide 0.3s ease-out;

    pointer-events: none;

}



.collection-popup.hidden {

    display: none;

}



.popup-content {

    font-family: 'Press Start 2P', cursive;

    text-align: center;

    line-height: 1.8;

}



#popup-item-name {

    color: #8bac0f;

    font-weight: bold;

}



#popup-count {

    color: #ffd700;

}



@keyframes popupSlide {

    from {

        opacity: 0;

        transform: translate(-50%, -60%);

    }

    to {

        opacity: 1;

        transform: translate(-50%, -50%);

    }

}



/* Interaction Indicator */

.interaction-indicator {

    position: absolute;

    top: 30%;

    left: 50%;

    transform: translate(-50%, -50%);

    font-size: 32px;

    color: #ff0000;

    text-shadow: 

        2px 2px 0 #0f380f,

        4px 4px 0 #000,

        0 0 10px #ff0000;

    animation: bounce 0.5s ease-in-out infinite;

    pointer-events: none;

    z-index: 100;

    font-weight: bold;

}



.interaction-indicator.hidden {

    display: none;

}



@keyframes bounce {

    0%, 100% { transform: translate(-50%, -80px); }

    50% { transform: translate(-50%, -90px); }

}



/* Screen Transition */

.screen-transition {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: #0f380f;

    z-index: 200;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.3s ease;

}



.screen-transition.active {

    opacity: 1;

    pointer-events: all;

}



.dialogue-box {

    position: absolute;

    bottom: 20px;

    left: 50%;

    transform: translateX(-50%);

    width: 90%;

    max-width: 800px;

    background-color: #0f380f;

    border: 4px solid #306230;

    padding: 20px;

    color: #9bbc0f;

    font-size: 12px;

    line-height: 1.8;

    box-shadow: 

        inset -2px -2px 0 #000,

        inset 2px 2px 0 #8bac0f;

    z-index: 200;

}



.dialogue-box.hidden {

    display: none;

}



.dialogue-close-btn {

    position: absolute;

    top: 10px;

    right: 10px;

    width: 30px;

    height: 30px;

    background-color: #306230;

    border: 2px solid #9bbc0f;

    color: #9bbc0f;

    font-family: 'Press Start 2P', monospace;

    font-size: 16px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 10;

}



.dialogue-close-btn:active {

    background-color: #9bbc0f;

    color: #0f380f;

}



/* Hide on desktop, show on mobile */

@media (hover: hover) and (pointer: fine) {

    .dialogue-close-btn {

        display: none;

    }

}



.dialogue-content {

    margin-bottom: 15px;

    min-height: 60px;

}



/* Clickable links in dialogue */

.dialogue-content a.dialogue-link {

    color: #9bbc0f;

    text-decoration: underline;

    cursor: pointer;

    transition: color 0.2s ease;

}



.dialogue-content a.dialogue-link:hover {

    color: #8bac0f;

    animation: linkBlink 0.5s ease-in-out;

}



@keyframes linkBlink {

    0%, 100% { opacity: 1; }

    50% { opacity: 0.7; }

}



.dialogue-prompt {

    text-align: right;

    font-size: 10px;

    color: #8bac0f;

    animation: blink 1s infinite;

}



@keyframes blink {

    0%, 50% { opacity: 1; }

    51%, 100% { opacity: 0; }

}



/* Scanline effect */

#game-container::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: repeating-linear-gradient(

        0deg,

        rgba(0, 0, 0, 0.1) 0px,

        rgba(0, 0, 0, 0.1) 1px,

        transparent 1px,

        transparent 2px

    );

    pointer-events: none;

}



/* Arcade Game Overlay */

.arcade-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    background-color: rgba(15, 56, 15, 0.95);

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 1000;

    animation: fadeIn 0.3s ease-in;

}



.arcade-overlay.hidden {

    display: none;

}



.arcade-container {

    background-color: #0f380f;

    border: 4px solid #306230;

    padding: 20px;

    box-shadow: 

        0 0 0 2px #000,

        6px 6px 0 #8bac0f;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 15px;

    max-width: 500px;

    width: 90%;

    image-rendering: pixelated;

}



.arcade-title {

    font-family: 'Press Start 2P', cursive;

    font-size: 24px;

    color: #9bbc0f;

    text-shadow: 

        2px 2px 0 #0f380f,

        4px 4px 0 #000;

    margin: 0;

    letter-spacing: 3px;

    animation: titlePulse 2s ease-in-out infinite;

}



.arcade-score {

    display: flex;

    gap: 30px;

    font-family: 'Press Start 2P', cursive;

    font-size: 10px;

    color: #9bbc0f;

    text-align: center;

}



.arcade-score div {

    display: flex;

    flex-direction: column;

    gap: 5px;

}



.arcade-score span {

    color: #8bac0f;

    font-size: 14px;

}



#arcade-high-score {

    color: #ffd700;

}



#arcade-canvas {

    border: 3px solid #306230;

    background-color: #9bbc0f;

    image-rendering: pixelated;

    image-rendering: crisp-edges;

    box-shadow: 

        inset 2px 2px 0 #8bac0f,

        inset -2px -2px 0 #0f380f;

    width: 400px;

    height: 400px;

}



.arcade-instructions {

    display: flex;

    flex-direction: column;

    gap: 8px;

    font-family: 'Press Start 2P', cursive;

    font-size: 9px;

    color: #8bac0f;

    text-align: center;

    line-height: 1.6;

}



.arcade-instructions div:last-child {

    color: #ff6b6b;

    margin-top: 5px;

    animation: blink 1s infinite;

}



.arcade-close-btn {

    position: absolute;

    top: 15px;

    right: 15px;

    padding: 10px 20px;

    background-color: #0f380f;

    border: 3px solid #306230;

    color: #9bbc0f;

    font-family: 'Press Start 2P', monospace;

    font-size: 12px;

    cursor: pointer;

    z-index: 1000;

    display: flex;

    align-items: center;

    gap: 10px;

}



.arcade-close-btn:active {

    background-color: #306230;

    border-color: #9bbc0f;

}



/* Responsive Design */

@media (max-width: 768px) {

    .game-title {

        font-size: 32px;

    }

    

    .subtitle {

        font-size: 12px;

    }

    

    .start-button {

        font-size: 12px;

        padding: 12px 24px;

    }

    

    #game-canvas {

        width: 100vw;

        height: auto;

    }

}

/* Mobile Controls */

.mobile-controls {

    display: none;

    position: fixed;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 200px;

    pointer-events: none;

    z-index: 1000;

}

/* Show on touch devices */

@media (hover: none) and (pointer: coarse) {

    .mobile-controls {

        display: block;

    }

}

/* D-Pad Container */

.dpad {

    position: absolute;

    bottom: 20px;

    left: 20px;

    width: 140px;

    height: 140px;

    pointer-events: all;

}

/* D-Pad Buttons */

.dpad-btn {

    position: absolute;

    width: 45px;

    height: 45px;

    background-color: rgba(15, 56, 15, 0.8);

    border: 3px solid #306230;

    color: #9bbc0f;

    font-size: 20px;

    font-family: 'Press Start 2P', monospace;

    cursor: pointer;

    user-select: none;

    -webkit-user-select: none;

    touch-action: manipulation;

    display: flex;

    align-items: center;

    justify-content: center;

}

.dpad-btn:active {

    background-color: rgba(48, 98, 48, 0.9);

    border-color: #9bbc0f;

}

.dpad-up {

    top: 0;

    left: 47.5px;

}

.dpad-down {

    bottom: 0;

    left: 47.5px;

}

.dpad-left {

    left: 0;

    top: 47.5px;

}

.dpad-right {

    right: 0;

    top: 47.5px;

}

.dpad-center {

    position: absolute;

    width: 35px;

    height: 35px;

    background-color: rgba(15, 56, 15, 0.6);

    border: 2px solid #306230;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

}

/* Action Buttons */

.action-buttons {

    position: absolute;

    bottom: 40px;

    right: 30px;

    pointer-events: all;

}

.action-btn {

    width: 60px;

    height: 60px;

    background-color: rgba(15, 56, 15, 0.8);

    border: 3px solid #306230;

    border-radius: 50%;

    color: #9bbc0f;

    font-size: 24px;

    font-family: 'Press Start 2P', monospace;

    cursor: pointer;

    user-select: none;

    -webkit-user-select: none;

    touch-action: manipulation;

    display: flex;

    align-items: center;

    justify-content: center;

}

.action-btn:active {

    background-color: rgba(48, 98, 48, 0.9);

    border-color: #9bbc0f;

}