html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Prevent scrollbars */
    background-color: #1a1a1a;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f0f0f0;
    font-family: 'Courier New', Courier, monospace;
}

#game-wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#game-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* This will be scaled by JS */
}

#ui-header {
    width: 404px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

#score {
    font-size: 1.5rem;
    min-width: 80px;
    text-align: left;
}

#controls {
    display: flex;
    gap: 0.5rem;
}

.btn {
    padding: 6px 12px;
    font-size: 0.9rem;
    cursor: pointer;
    background-color: #333;
    color: #ccc;
    border: 2px solid #555;
    border-radius: 5px;
    transition: background-color 0.2s, border-color 0.2s;
    user-select: none;
}

.btn.active, .btn:hover {
    background-color: #4CAF50;
    border-color: #4CAF50;
    color: #fff;
}

#border-toggle-btn {
    background-color: #2a3a4a;
    border-color: #4a7a9a;
}

#border-toggle-btn.active, #border-toggle-btn:hover {
    background-color: #4CAF50;
    border-color: #4CAF50;
}

#fullscreen-btn {
    background-color: #3a2a4a;
    border-color: #7a4a9a;
    position: absolute;
    top: -40px; /* Position it above the header */
    right: 0;
}

#fullscreen-btn.active, #fullscreen-btn:hover {
    background-color: #4CAF50;
    border-color: #4CAF50;
}

#game-board-wrapper {
    position: relative;
    width: 404px;
    height: 404px;
}

#super-snake-timer-container {
    position: absolute;
    top: -12px;
    left: 0;
    width: 100%;
    height: 6px;
    display: flex;
    gap: 1px;
}

.timer-dash {
    width: 1px;
    height: 6px;
}

canvas {
    background-color: #000;
    display: block;
    border: 2px solid #333;
    box-sizing: border-box;
    touch-action: none; /* Critical for swipe controls */
}

canvas.borders-on {
    border-color: #fff;
}

canvas.blurred {
    filter: blur(3px);
}

.message-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.8) 100%);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ff0;
    text-align: center;
    pointer-events: none;
    padding: 2rem;
    box-sizing: border-box;
}

.message-overlay.visible {
    display: flex;
}

.message-overlay h2 {
    margin: 0;
    color: #f00;
    text-shadow: 2px 2px 4px #000;
}

.message-overlay p {
    text-shadow: 2px 2px 4px #000;
}

#restart-hint {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

#restart-hint.visible {
    opacity: 1;
}

#ui-footer-container {
    width: 404px;
    position: relative;
}

#ui-footer {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    font-size: 1.2rem;
    position: relative;
    z-index: 1;
}

#high-score {
    color: #ffd700;
}

#last-score {
    color: #aaa;
}



/* Touch Controls */
#touch-controls {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150%; /* Extend below the footer */
    display: none;
    z-index: 2;
}

.touch-zone {
    position: absolute;
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.1);
    transition: background-color 0.3s, opacity 1s;
    opacity: 1;
    border-radius: 10px;
}

#touch-left { left: 0; }
#touch-right { right: 0; }

.touch-arrow {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.3s;
}

.touch-zone:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.touch-zone.fade-out {
    opacity: 0.2;
}

/* Only show touch controls on mobile */
@media (hover: none) and (pointer: coarse) {
    #touch-controls.mobile-active {
        display: block; /* Use block instead of flex */
    }
}