@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* Dark background simulating a bowling lane texture */
body {
    font-family: 'Inter', sans-serif;
    background-color: #000000; /* Very dark background */
    /* Subtle lane texture via gradient */
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.03) 0,
        rgba(255, 255, 255, 0.03) 1px,
        transparent 1px,
        transparent 50px
    );
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.login-card {
    /* Dark, slightly transparent card for neon contrast */
    background-color: rgba(0, 0, 0, 0.9);
    /* Neon glow effect */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5), 0 0 40px rgba(255, 255, 255, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #ffffff; /* Neon border color */
}

.login-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.8), 0 0 60px rgba(255, 255, 255, 0.4);
}

/* Input field custom styling for better dark mode look */
input.bowling-input {
    background-color: #000000;
    color: white;
    border-color: #FFFFFF; /* White border */
}

/* Focus ring color change: Enhanced with Electric Cyan Neon */
.bowling-input:focus {
    outline: none;
    border-color: #00FFD1; /* Electric Cyan */
    box-shadow: 0 0 0 2px #00FFD1, 0 0 8px #00FFD1;
}

/* Logo responsive styling */
.logo-static {
    position: fixed;
    top: 5px;
    left: 5px;
    z-index: 1000;
}

.logo-static img,
.logo-img {
    width: 240px;
    height: 82px;
    object-fit: contain;
    display: block;
}