@import url('https://fonts.googleapis.com/css2?family=BBH+Sans+Bogle&display=swap');

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

body {
    margin: 0; 
    padding: 0; 
    display: flex; 
    justify-content: center; 
    align-items: center;
    min-height: 100vh;
    width: 100vw;
    background: #000; 
    font-family: "BBH Sans Bogle", sans-serif;
    overflow: hidden;
}

#gameContainer { 
    position: relative; 
    justify-content: center; 
    align-items: center;
    width: 100%;
    height: 100%;
}

#gameCanvas {
    border: 2px solid #333; 
    background: #1a1a2e;
    max-width: 100vw; 
    max-height: 100vh; 
    image-rendering: crisp-edges; 
    image-rendering: pixelated;
    display: block;
    margin: 0 auto;
}

#ui {
    position: absolute; 
    top: 20px; 
    left: 50%; 
    transform: translateX(-50%);
    color: #fff; 
    font-size: 20px; 
    text-align: center; 
    pointer-events: none; 
    z-index: 10;
}

#chainIndicator {
    position: absolute; 
    top: 70px; 
    left: 50%; 
    transform: translateX(-50%);
    color: #f39c12; 
    font-size: 32px; 
    text-align: center;
    pointer-events: none; 
    display: none; 
    z-index: 5;
}

#gameOver {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    color: white; 
    font-size: 32px; 
    text-align: center; 
    display: none; 
    pointer-events: auto;
}

#gameOver > div:not(:last-child) {
    pointer-events: none;
}

#gameOver > div:last-child {
    pointer-events: auto;
}

#gameModeSelector {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
    z-index: 10; 
    align-items: center;
}

#gameModeSelector h1 {
    color: #fff; 
    font-size: 900%; 
    margin-bottom: 20px; 
}

.mode-buttons {
    display: flex; 
    gap: 20px;
}

.mode-btn {
    background: rgba(255, 255, 255, 0.2); 
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px; 
    color: #fff; 
    font-size: 20px; 
    padding: 15px 30px; 
    cursor: pointer; 
    font-family: "BBH Sans Bogle", sans-serif;
    transition: all 0.3s;
}

.mode-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.05);
}

.mode-btn.active {
    background: rgba(52, 152, 219, 0.5);
    border-color: rgba(52, 152, 219, 0.8);
}

#mobileControls {
    position: absolute; 
    bottom: 30px; 
    width: 100%; 
    display: none;
    justify-content: space-between; 
    align-items: flex-end; 
    padding: 0 30px; 
    box-sizing: border-box;
}

.control-btn {
    background: rgba(255, 255, 255, 0.2); 
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%; 
    color: #fff; 
    font-size: 24px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    user-select: none; 
    -webkit-user-select: none; 
    touch-action: none; 
    cursor: pointer;
}

.control-btn:active { 
    background: rgba(255, 255, 255, 0.4); 
}

#leftBtn, #rightBtn { 
    width: 70px; 
    height: 70px; 
}

#flapBtn { 
    width: 90px; 
    height: 90px; 
    font-size: 20px; 
}

.direction-controls { 
    display: flex; 
    gap: 20px; 
}

@media (max-width: 900px) {
    #mobileControls { 
        display: flex; 
    }
    #gameModeSelector { 
        display: none; 
    }
}