body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #222;
    color: white;
    text-align: center;
    margin: 0;
    padding: 10px;
    overflow-x: hidden; /* Mencegah scroll menyamping */
}
h1 {
    margin-top: 0;
    margin-bottom: 5px;
    color: #4CAF50;
}
#scoreboard {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    background: #333;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 10px;
    border: 2px solid #555;
}
canvas {
    background-color: #4CAF50; /* Warna rumput lapangan */
    border: 4px solid white;
    border-radius: 10px;
    max-width: 100%;
    box-shadow: 0 0 15px rgba(255,255,255,0.2);
    /* Membuat tampilan sedikit seperti lapangan asli */
    background-image: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 50px,
        rgba(255,255,255,0.1) 50px,
        rgba(255,255,255,0.1) 100px
    );
}
.controls {
    display: flex;
    justify-content: center;
    gap: 20px;
    max-width: 800px;
    margin: 20px auto;
    flex-wrap: wrap; /* Supaya rapi di HP */
}
.dpad {
    display: grid;
    grid-template-columns: 60px 60px 60px;
    grid-template-rows: 60px 60px 60px;
    gap: 5px;
}
.btn-up { grid-column: 2; grid-row: 1; }
.btn-left { grid-column: 1; grid-row: 2; }
.btn-right { grid-column: 3; grid-row: 2; }
.btn-down { grid-column: 2; grid-row: 3; }

.actions {
    display: grid;
    grid-template-columns: 80px 80px;
    grid-template-rows: 60px 60px;
    gap: 15px;
    align-content: center;
}

.btn {
    border-radius: 15px;
    border: none;
    background: #eee;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    box-shadow: 0 4px #999;
    transition: 0.1s;
}

.btn:active {
    background: #ccc;
    box-shadow: 0 0 #999;
    transform: translateY(4px);
}

.btn-action-pass { background: #2196F3; color: white; box-shadow: 0 4px #0b7dda; }
.btn-action-pass:active { background: #0b7dda; box-shadow: 0 0 #0b7dda; transform: translateY(4px); }

.btn-action-shoot { background: #f44336; color: white; box-shadow: 0 4px #da190b; }
.btn-action-shoot:active { background: #da190b; box-shadow: 0 0 #da190b; transform: translateY(4px); }

.btn-action-tackle { 
    background: #FF9800; 
    color: white; 
    grid-column: span 2; 
    box-shadow: 0 4px #e68a00;
}
.btn-action-tackle:active { background: #e68a00; box-shadow: 0 0 #e68a00; transform: translateY(4px); }

/* Petunjuk */
.instructions {
    font-size: 14px;
    color: #aaa;
    margin-top: 20px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}