html {
    min-height: 100%;
    background-color: #02022b; 
}

body {
    margin: 0;
    padding: 10px;
    box-sizing: border-box;
    font-family: 'Audiowide', cursive;

    background: linear-gradient(to bottom, #02022b, #24043e, #3d064d);
    background-attachment: fixed;

    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* Allow vertical scrolling, prevent horizontal sideways wobbling */
    min-height: 100vh;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    
    gap: 15px;
}

h1 {
    font-size: clamp(2.5rem, 10vw, 6rem);
    margin: 0;
    color: #ff0000;
    text-align: center;
    /* Neon glow effect */
    text-shadow: 
        0 0 5px #fff, 
        0 0 10px #fff, 
        0 0 20px #00d9ff, 
        0 0 30px #00d9ff, 
        0 0 40px #00d9ff, 
        0 0 55px #00d9ff, 
        0 0 75px #00d9ff;
}

p {
    
    font-size: clamp(14px, 4vw, 22px);
    max-width: 700px;
    width: 100%;
    text-align: center;
}

#gameCanvas {
    max-width: 100%;
    height: auto;
    aspect-ratio: 700 / 500;

    border: 3px solid #00ffff; /* Cyan border */
    background-color: #000;
    background-image: url(images/arkadeHate.jpg);
    background-size: cover;
    box-shadow: 0 0 20px #00ffff, inset 0 0 15px #00ffff;

    touch-action: none; 
}

#touch-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 700px;
    box-sizing: border-box;
    padding: 10px 20px;
    user-select: none;
    -webkit-user-select: none;
}

/* Joystick Styling */
#joystick-zone {
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#joystick-base {
    width: 110px;
    height: 110px;
    background: rgba(0, 255, 255, 0.15);
    border: 2px solid #00ffff;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
    touch-action: none;
}

#joystick-stick {
    width: 50px;
    height: 50px;
    background: #00ffff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 15px #00ffff;
    pointer-events: none; /* Let touches pass through to the base */
}

/* Fire Button Styling */
#fire-button {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    border: 3px solid #ff0055;
    background: rgba(255, 0, 85, 0.3);
    color: #fff;
    font-family: 'Audiowide', cursive;
    font-size: 1.1rem;
    box-shadow: 0 0 15px rgba(255, 0, 85, 0.6);
    cursor: pointer;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    outline: none;
}

#fire-button:active {
    background: rgba(255, 0, 85, 0.8);
    transform: scale(0.95);
}

#game-ui {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
    width: 100%;
    max-width: 500px;
}

#submit-section {
    display: flex;
    flex-wrap: wrap; /* Lets the button drop below the input if the screen is too narrow */
    justify-content: center;
    gap: 10px;
    width: 100%;
}

/* Container to place buttons side-by-side */
#action-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap; /* Wraps cleanly on extremely narrow screens */
}

/* Give all FOUR buttons the exact same neon style */
#reset-btn, #submit-score-btn, #flip-controls-btn, #mute-btn, #mode-button {
    font-family: 'Audiowide', cursive;
    padding: 10px 20px;
    font-size: 1rem;
    color: #fff;
    background: #24043e;
    border: 2px solid #00ffff;
    box-shadow: 0 0 10px #00ffff;
    cursor: pointer;
    touch-action: manipulation;
}

#reset-btn:active, #submit-score-btn:active, #flip-controls-btn:active, #mute-btn:active, #mode-button:active {
    background: #3d064d;
    transform: scale(0.98);
}

/* The magic flip rule for the touch controls */
#touch-controls.flipped {
    flex-direction: row-reverse;
}

#player-name-input {
    font-family: 'Share Tech Mono', cursive;
    font-size: 16px;
    padding: 8px 12px;
    font-size: 1rem;
    background: #000;
    color: #17e8ec;
    border: 2px solid #ff0055;
    outline: none;
    text-align: center;
}

#leaderboard-display {
    width: 100%;
    max-width: 360px; /* Gives the board a consistent arcade width */
    margin: 15px auto;
    text-align: center;
}

#leaderboard-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
    font-family: 'Share Tech Mono', monospace;
    font-size: 16px;
    color: #17e8ec;
}

#leaderboard-list li {
    display: flex;
    justify-content: space-between; /* Pushes name to left, time to right */
    align-items: baseline;
    padding: 6px 0;
    width: 100%;
    /* Subtle dotted line separator between rows */
    border-bottom: 1px dotted rgba(23, 232, 236, 0.3);
}

#leaderboard-list li:last-child {
    border-bottom: none;
}

.leaderboard-player {
    display: flex;
    gap: 8px; /* Space between rank number ("1.") and name */
    text-align: left;
}

.leaderboard-rank {
    color: #ff0055;
    font-weight: bold;
    min-width: 22px; /* Keeps numbers aligned even when hitting double digits like 10. */
}

.leaderboard-time {
    color: #fff;
    font-weight: bold;
    text-align: right;
    margin-left: 20px; /* Guarantees they NEVER touch, even with long names */
}