@import url('/assets/css/arcade-game.css');

/* DOOM specific retro styling */
#DOOM {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

#DOOM > .dosbox-container {
    width: 100% !important;
    max-width: 800px !important;
    height: auto !important;
    aspect-ratio: 8 / 5 !important;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 35px rgba(255, 30, 30, 0.3), inset 0 0 20px rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(255, 60, 60, 0.4);
}

#DOOM canvas.dosbox-canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    display: block;
}

#DOOM > .dosbox-container > .dosbox-overlay {
    background: url("./DOOM.png") center center / cover no-repeat #0a0714;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 2.5rem;
    transition: opacity 0.4s ease;
}

#DOOM > .dosbox-container > .dosbox-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 7, 20, 0.3) 0%, rgba(10, 7, 20, 0.85) 100%);
    pointer-events: none;
}

#DOOM > .dosbox-container > .dosbox-overlay > .dosbox-start {
    position: relative !important;
    bottom: auto !important;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.85rem !important;
    letter-spacing: 0.15em;
    color: #ff2a4b !important;
    text-decoration: none !important;
    background: rgba(18, 11, 34, 0.92);
    border: 2px solid #ff2a4b;
    border-radius: 8px;
    padding: 12px 28px;
    box-shadow: 0 0 25px rgba(255, 42, 75, 0.5), inset 0 0 15px rgba(255, 42, 75, 0.2);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 10;
    text-transform: uppercase;
    animation: doom-pulse 1.8s infinite alternate;
}

#DOOM > .dosbox-container > .dosbox-overlay > .dosbox-start:hover {
    background: #ff2a4b;
    color: #0a0714 !important;
    box-shadow: 0 0 40px rgba(255, 42, 75, 0.9);
    transform: scale(1.04);
}

@keyframes doom-pulse {
    0% { box-shadow: 0 0 15px rgba(255, 42, 75, 0.4); }
    100% { box-shadow: 0 0 30px rgba(255, 42, 75, 0.8), 0 0 50px rgba(255, 100, 0, 0.4); }
}

#DOOM .dosbox-loader {
    background: rgba(10, 7, 20, 0.95) !important;
}

#DOOM .dosbox-loader-message {
    color: #00e5ff !important;
    font-family: 'Fira Code', monospace !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.1em;
}

#DOOM .dosbox-powered {
    display: none !important;
}