/* ========================================
   POKÉ-PRESKRI - GAMEBOY COLOR STYLE CSS
   ======================================== */

:root {
    /* Pokemon GameBoy Color Palette */
    --bg-main: #E0F8D0;
    --text-primary: #000000;
    --dialogue-bg: #FFFFFF;
    --dialogue-border: #000000;
    --accent-blue: #3B4CCA;
    --accent-red: #FF6B6B;
    --accent-green: #51CF66;
    --shadow: rgba(0, 0, 0, 0.25);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #1a1a1a;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: 'Courier New', monospace;
    overflow: hidden;
}

/* ========================================
   GAME CONTAINER
   ======================================== */

#game-container {
    position: relative;
    background-color: #000;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
    border-radius: 8px;
    overflow: hidden;
}

/* ========================================
   CANVAS - GAMEBOY COLOR SCALING
   ======================================== */

#game-canvas {
    /* Native 640x576 resolution (160x144 GameBoy Color × 4) */
    width: 640px;
    height: 576px;

    /* Smooth rendering for modern displays (better for investor presentations) */
    image-rendering: auto;
    image-rendering: -webkit-optimize-contrast;

    display: block;
    background-color: var(--bg-main);
    border-radius: 4px;
}

/* ========================================
   CRT EFFECT (Toggle with F4)
   Enabled by default for authentic retro feel
   ======================================== */

/* Scanlines overlay - horizontal lines every 4px (thicker for GBC style) */
#game-container.crt-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;

    /* Horizontal scanlines - thicker dark lines every 4 pixels (GameBoy Color style) */
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.2) 0px,
        rgba(0, 0, 0, 0.2) 2px,
        transparent 2px,
        transparent 4px
    );

    /* Slight screen curvature effect */
    border-radius: 4px;
}

/* Vignette and screen glow overlay */
#game-container.crt-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 11;

    /* Vignette effect - darkening at edges */
    background: radial-gradient(
        ellipse at center,
        transparent 50%,
        rgba(0, 0, 0, 0.2) 80%,
        rgba(0, 0, 0, 0.4) 100%
    );

    border-radius: 4px;
}

/* Optional: Add slight blur/glow to simulate CRT phosphor glow */
#game-container.crt-effect #game-canvas {
    filter: contrast(1.05) brightness(1.02);
}

/* ========================================
   DEBUG PANEL
   ======================================== */

.debug-panel {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #00ff00;
    padding: 8px;
    font-size: 10px;
    font-family: 'Courier New', monospace;
    border: 1px solid #00ff00;
    z-index: 20;
    min-width: 150px;
}

.debug-panel.hidden {
    display: none;
}

.debug-item {
    margin-bottom: 4px;
}

.debug-item span {
    color: #ffff00;
    font-weight: bold;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
    #game-canvas {
        /* Scale down for mobile (160x144 × 2) */
        width: 320px;
        height: 288px;
    }
}

@media (max-width: 400px) {
    #game-canvas {
        /* Scale down further for small screens (160x144 × 1.5) */
        width: 240px;
        height: 216px;
    }
}

/* ========================================
   LOADING SCREEN
   ======================================== */

.loading-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.loading-screen.hidden {
    display: none;
}

.loading-text {
    color: #fff;
    font-size: 16px;
    margin-bottom: 20px;
    font-family: 'Courier New', monospace;
}

.loading-bar {
    width: 200px;
    height: 20px;
    border: 2px solid #fff;
    background-color: #000;
    position: relative;
}

.loading-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: var(--accent-blue);
    transition: width 0.3s ease;
}