/* Custom styles for RetroQuest */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

.pixelated {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;
}

.retro-button {
    font-family: 'Press Start 2P', monospace;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8);
    box-shadow: 
        2px 2px 0px rgba(0, 0, 0, 0.5),
        inset -1px -1px 0px rgba(0, 0, 0, 0.3),
        inset 1px 1px 0px rgba(255, 255, 255, 0.1);
    transition: all 0.1s ease;
}

.retro-button:hover {
    transform: translate(1px, 1px);
    box-shadow: 
        1px 1px 0px rgba(0, 0, 0, 0.5),
        inset -1px -1px 0px rgba(0, 0, 0, 0.3),
        inset 1px 1px 0px rgba(255, 255, 255, 0.1);
}

.retro-button:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}

/* Scrollbar styling for retro feel */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #1f2937;
    border: 1px solid #059669;
}

::-webkit-scrollbar-thumb {
    background: #059669;
    border: 1px solid #065f46;
}

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

/* CRT-like effect for the main display */
.game-world {
    background: 
        linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
        linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 2px, 3px 100%;
}

/* Glow effect for text */
.text-glow {
    text-shadow: 
        0 0 5px currentColor,
        0 0 10px currentColor,
        0 0 15px currentColor;
}

/* Retro grid pattern for inventory */
.inventory-grid {
    background-image: 
        linear-gradient(rgba(34, 139, 34, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 139, 34, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Animation for loading states */
@keyframes pixel-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.pixel-loading {
    animation: pixel-pulse 1s infinite;
}

/* Retro border styles */
.retro-border {
    border-style: solid;
    border-image: 
        linear-gradient(45deg, #059669 25%, transparent 25%), 
        linear-gradient(-45deg, #059669 25%, transparent 25%);
    border-image-slice: 1;
}

/* Monospace font for that authentic retro feel */
.font-retro {
    font-family: 'Press Start 2P', 'Courier New', monospace;
    letter-spacing: 0.1em;
}