/* ==========================================
   FULL-WIDTH PIXEL-PERFECT DRIVEL HABITAT
   (for 4× scaled 1868×1040 / 1904×540 PNG)
========================================== */

/* Just in case, never allow horizontal scroll */
html, body {
    overflow-x: hidden;
}

/* Habitat wrapper */
#drivel-zone {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Controls */
#drivel-controls {
    width: 100%;
    padding: 10px 0;
    background: #294257;
    border-top: 2px solid #579C9A;
    border-bottom: 2px solid #579C9A;
    display: flex;
    justify-content: center;
    gap: 12px;
}

#drivel-controls button {
    padding: 8px 14px;
    background: #191B1A;
    color: #EDF6D6;
    border: 2px solid #579C9A;
    font-family: monospace;
    text-transform: uppercase;
}

/* ==========================================
   HABITAT BACKGROUND
   Uses a real <img id="habitat-bg"> that scales
========================================== */
#drivel-habitat {
    width: 100%;
    max-width: 100%;
    position: relative;
    overflow: hidden;
}

/* The pixel art background itself */
#habitat-bg {
    display: block;
    width: 100%;
    height: auto;
}

/* ==========================================
   T0B1 sprite (scaled relative to habitat)
   Size & bottom are set in JS now.
========================================== */
.drivel-sprite {
    position: absolute;
    pointer-events: none;
    transition: transform 0.1s;
}