/* ================================================
   SCOREBOARD / HIGH SCORES - SNES RETRO STYLE
   Matches the chunky borders and flat colors from modals-retro.css
   ================================================ */

/* ================================================
   INITIALS PROMPT (High Score Entry)
   POSITIONED AS CENTERED OVERLAY (like game over)
   ================================================ */
#initialsPrompt {
    display: none;
    position: absolute; /* Will be positioned by JavaScript */
    padding: 30px 40px;
    background: #3a4466;
    border: none;
    border-radius: 0;
    max-width: 500px;
    text-align: center;
    z-index: 100;
    
    /* SNES-style chunky border */
    box-shadow: 
        0 0 0 4px #6a7a9a,
        0 0 0 8px #4a5a7a,
        0 0 0 12px #2a3a5a,
        0 12px 0 0 #1a2a4a,
        0 16px 0 0 #0a1a3a;
}

#initialsPrompt h3 {
    color: #ffd700;
    margin-bottom: 20px;
    padding: 12px;
    background: #2a3a5a;
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(14px, 2.5vw, 18px);
    text-transform: lowercase;
    font-weight: normal;
    
    /* Heading border */
    box-shadow: 
        0 0 0 2px #4a5a7a,
        0 4px 0 0 #1a2a4a;
}

/* ================================================
   INITIALS INPUT FIELD (pixel-art style)
   ================================================ */
#initialsInput {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(20px, 3vw, 24px);
    padding: 12px;
    width: clamp(90px, 15vw, 110px);
    text-align: center;
    text-transform: uppercase;
    border: none;
    border-radius: 0;
    margin: 0 10px;
    background: #f0f0f0;
    color: #000000;
    
    /* Inset pixel border effect */
    box-shadow: 
        inset 4px 4px 0 #a0a0a0,
        inset -4px -4px 0 #ffffff;
}

#initialsInput:focus {
    outline: none;
    background: #ffffff;
    box-shadow: 
        inset 4px 4px 0 #00d4ff,
        inset -4px -4px 0 #66e0ff;
}

/* ================================================
   SUBMIT BUTTON (Gold/Yellow SNES style)
   ================================================ */
#submitInitials {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(16px, 2.5vw, 18px);
    padding: 10px 20px;
    background: #ffc107;
    color: #000000;
    border: none;
    border-radius: 0;
    cursor: pointer;
    font-weight: normal;
    text-transform: lowercase;
    
    /* Yellow/gold button SNES-style border */
    box-shadow: 
        0 6px 0 #996c00,
        0 -4px 0 #ffd847,
        -4px 0 0 #cc9a00,
        4px 0 0 #cc9a00,
        -4px -4px 0 #ffd020,
        4px -4px 0 #ffd020,
        -4px 6px 0 #664500,
        4px 6px 0 #664500;
}

#submitInitials:hover {
    background: #ffca28;
    box-shadow: 
        0 6px 0 #a67c00,
        0 -4px 0 #ffe057,
        -4px 0 0 #d9aa00,
        4px 0 0 #d9aa00,
        -4px -4px 0 #ffd830,
        4px -4px 0 #ffd830,
        -4px 6px 0 #735000,
        4px 6px 0 #735000;
}

#submitInitials:active {
    transform: translateY(4px);
    box-shadow: 
        0 2px 0 #996c00,
        0 -4px 0 #ffd847,
        -4px 0 0 #cc9a00,
        4px 0 0 #cc9a00;
}

/* ================================================
   SCOREBOARD MODAL
   ================================================ */
#scoreboardModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    padding: 20px 10px;
}

#scoreboardModal .modal-content {
    background: #3a4466; /* SNES blue-gray */
    padding: 24px;
    border-radius: 0; /* No rounded corners! */
    max-width: 900px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    margin: auto;
    position: relative;
    
    /* CHUNKY SNES-STYLE BORDER */
    border: none;
    box-shadow: 
        /* Outer border - light */
        0 0 0 4px #6a7a9a,
        /* Middle border - medium */
        0 0 0 8px #4a5a7a,
        /* Inner border - dark */
        0 0 0 12px #2a3a5a,
        /* Bottom shadow for depth */
        0 12px 0 0 #1a2a4a,
        0 16px 0 0 #0a1a3a;
}

/* ================================================
   SCOREBOARD HEADING
   ================================================ */
#scoreboard {
    margin: 0;
    text-align: center;
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    min-height: auto;
}

#scoreboard h3 {
    color: #ffd700; /* Gold for heading */
    margin-bottom: 20px;
    text-align: center;
    font-size: clamp(20px, 3vw, 28px);
    padding: 12px;
    background: #2a3a5a;
    text-transform: lowercase;
    font-weight: normal;
    
    /* Heading border */
    box-shadow: 
        0 0 0 2px #4a5a7a,
        0 4px 0 0 #1a2a4a;
}

/* ================================================
   SCORE LIST LAYOUT
   ================================================ */
#scoreList {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    padding-bottom: 10px;
}

.scoreColumn {
    background: #2a3a5a;
    padding: 16px;
    border-radius: 0;
    flex: 1;
    min-width: 250px;
    max-width: 450px;
    
    /* Column borders */
    box-shadow: 
        0 0 0 2px #4a5a7a,
        0 4px 0 0 #1a2a4a;
}

.columnTitle {
    font-family: 'Press Start 2P', monospace;
    font-weight: normal;
    color: #ffd700;
    text-align: center;
    margin-bottom: 12px;
    padding: 8px;
    background: #1a2a4a;
    font-size: clamp(12px, 2vw, 14px);
    text-transform: lowercase;
    
    /* Title bar effect */
    box-shadow: 
        0 0 0 2px #2a3a5a;
}

/* ================================================
   SCORE ENTRIES
   ================================================ */
.scoreEntry {
    font-family: 'Press Start 2P', monospace;
    padding: 10px;
    margin-bottom: 8px;
    background: #4a5a7a;
    border-radius: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: clamp(12px, 2vw, 16px);
    
    /* Entry borders */
    box-shadow: 
        0 0 0 2px #6a7a9a,
        inset 0 0 0 1px #3a4a6a;
}

.scoreEntry.newScore {
    background: #2ecc71;
    box-shadow: 
        0 0 0 2px #4edd91,
        inset 0 0 0 1px #1a7a3a;
    animation: none; /* Remove smooth animation */
}

.scoreEntry.newScore .scoreInitials,
.scoreEntry.newScore .scoreRank,
.scoreEntry.newScore .scoreValue {
    color: #000000;
}

.scoreRank {
    font-weight: normal;
    color: #aaaaaa;
    min-width: 35px;
}

.scoreInitials {
    font-weight: normal;
    color: #ffffff;
    font-size: clamp(14px, 2.5vw, 18px);
    min-width: 50px;
}

.scoreValue {
    font-weight: normal;
    color: #ffd700;
}

/* ================================================
   CLOSE BUTTON (Red SNES style)
   ================================================ */
#closeScoreboardModal {
    width: 100%;
    margin-top: 20px;
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(14px, 2vw, 16px);
    padding: 16px;
    background: #2ecc71;
    color: #ffffff;
    border: none;
    border-radius: 0;
    cursor: pointer;
    font-weight: normal;
    text-transform: lowercase;
    
    /* Green button SNES-style border */
    box-shadow: 
        0 6px 0 #1a7a3a,
        0 -4px 0 #4edd91,
        -4px 0 0 #25a555,
        4px 0 0 #25a555,
        -4px -4px 0 #3ed771,
        4px -4px 0 #3ed771,
        -4px 6px 0 #0f5a2a,
        4px 6px 0 #0f5a2a;
}

#closeScoreboardModal:hover {
    background: #27ae60;
    box-shadow: 
        0 6px 0 #156a30,
        0 -4px 0 #3ecd71,
        -4px 0 0 #1f9545,
        4px 0 0 #1f9545,
        -4px -4px 0 #2ebd61,
        4px -4px 0 #2ebd61,
        -4px 6px 0 #0a4a20,
        4px 6px 0 #0a4a20;
}

#closeScoreboardModal:active {
    transform: translateY(4px);
    box-shadow: 
        0 2px 0 #1a7a3a,
        0 -4px 0 #4edd91,
        -4px 0 0 #25a555,
        4px 0 0 #25a555;
}

/* ================================================
   CREDITS BUTTON (Purple SNES style)
   ================================================ */
#creditsBtn {
    margin-top: 15px;
    padding: 12px 25px;
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    font-weight: normal;
    color: #ffffff;
    background: #6c5ce7;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: none;
    text-transform: lowercase;
    letter-spacing: 0;
    
    /* Purple button SNES-style border */
    box-shadow: 
        0 6px 0 #3a2c87,
        0 -4px 0 #8c7cf7,
        -4px 0 0 #5444c7,
        4px 0 0 #5444c7,
        -4px -4px 0 #7c6cf7,
        4px -4px 0 #7c6cf7,
        -4px 6px 0 #2a1c77,
        4px 6px 0 #2a1c77;
}

#creditsBtn:hover {
    background: #5f50d7;
    box-shadow: 
        0 6px 0 #2f2077,
        0 -4px 0 #7f6fe7,
        -4px 0 0 #4738b7,
        4px 0 0 #4738b7,
        -4px -4px 0 #6f5fe7,
        4px -4px 0 #6f5fe7,
        -4px 6px 0 #1f1067,
        4px 6px 0 #1f1067;
}

#creditsBtn:active {
    transform: translateY(4px);
    box-shadow: 
        0 2px 0 #3a2c87,
        0 -4px 0 #8c7cf7,
        -4px 0 0 #5444c7,
        4px 0 0 #5444c7;
}

/* ================================================
   MOBILE RESPONSIVE ADJUSTMENTS
   ================================================ */
@media (max-width: 768px) {
    #scoreboardModal .modal-content {
        padding: 20px 15px;
        width: 95%;
        box-shadow: 
            0 0 0 3px #6a7a9a,
            0 0 0 6px #4a5a7a,
            0 0 0 9px #2a3a5a,
            0 9px 0 0 #1a2a4a;
    }
    
    .scoreColumn {
        min-width: 200px;
    }
    
    #closeScoreboardModal {
        font-size: 10px;
        padding: 14px;
    }
    
    #creditsBtn {
        font-size: 8px;
        padding: 10px 20px;
    }
}

@media (max-width: 480px) {
    .scoreColumn {
        min-width: 180px;
    }
}

/* ================================================
   REMOVE SMOOTH TRANSITIONS
   ================================================ */
#initialsPrompt,
#scoreboardModal,
.scoreEntry,
#submitInitials,
#closeScoreboardModal,
#creditsBtn {
    transition: none !important;
    animation: none !important;
}

/* ================================================
   DESIGN NOTES
   ================================================ */
/*
   Color Palette (SNES Blue-Gray Theme):
   - Background: #3a4466 (main window)
   - Dark: #2a3a5a (inner elements)
   - Medium: #4a5a7a (borders)
   - Light: #6a7a9a (outer borders)
   - Accent: #ffd700 (gold for important text)
   - Success: #2ecc71 (green for new scores/close)
   - Warning: #ffc107 (yellow/gold for submit)
   - Info: #6c5ce7 (purple for credits)
   
   Border Style:
   - 3-5 nested borders using box-shadow
   - Light to dark gradient (outside to inside)
   - Bottom shadow for depth
   - No rounded corners (sharp pixel edges)
   - No smooth transitions or animations
   
   Typography:
   - Font: Press Start 2P (pixel font)
   - All lowercase for retro authenticity
   - Normal font-weight (no bold in pixel fonts)
   - Zero letter-spacing (built into font)
*/