/* style.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    overflow: hidden; /* Prevent scrollbars */
    font-family: sans-serif;
}

#bg {
    position: fixed;
    top: 0;
    left: 0;
    outline: none; /* Remove focus border */
    display: block; /* Remove extra space below canvas */
}

#info-panel {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: rgba(0, 0, 0, 0.75); /* Slightly more opaque */
    color: white;
    padding: 15px;
    border-radius: 8px;
    max-width: 350px; /* Slightly wider */
    z-index: 10; /* Ensure it's above the canvas */
    border: 1px solid #555; /* Add subtle border */
}

#info-panel h2 {
    margin-bottom: 10px;
    color: #00ffff; /* Cyan color for main title */
    text-align: center;
}

#info-panel p {
    margin-bottom: 8px;
    line-height: 1.4;
}

#info-panel hr {
    border: none;
    border-top: 1px solid #555;
    margin: 12px 0;
}

#zone-info {
    min-height: 300px; /* Ensure space for content */
}

#zone-info h3 {
    color: #ffffff; /* Yellow for zone titles */
    margin-bottom: 8px;
    border-bottom: 1px dashed #ffcc00; /* Add underline to title */
    padding-bottom: 4px;
}

#zone-info ul {
    list-style: none; /* Remove default bullets */
    padding-left: 5px;
}

#zone-info li {
    margin-bottom: 5px;
    position: relative;
    padding-left: 15px; /* Space for custom bullet */
}

#zone-info li::before {
    content: '✓'; /* Use a checkmark or other symbol */
    position: absolute;
    left: 0;
    color: #00ffaa; /* Teal color for bullet */
    font-weight: bold;
}

#controls-info {
    margin-top: 10px;
    font-size: 0.9em;
    color: #ccc;
}