#roadsWidget {
    position: relative;
    display: inline-block;
}

#roadsButton {
    background:#222;
    color:white;
    padding:6px 12px;
    cursor:pointer;
    border-radius:6px;
    border:1px solid #666;
}

#roadsPanel {
    display:none; /* Start hidden */
    position:absolute;
    top:100%;
    left:0;
    width:800px;      /* Wider */
    max-height:400px;  /* Taller */
    overflow-y:auto;
    background:#111;
    padding:10px;
    border:1px solid #555;
    border-radius:8px;
    z-index:5000;
}

.road {
    display: grid;

    /* IMPORTANT FIX */
    grid-auto-flow: column;
    grid-auto-columns: 12px;

    grid-auto-rows: 12px;
    gap: 3px;

    margin-bottom: 12px;
    margin-right: 30px;
}


.road-cell {
    width:12px;
    height:12px;
    border-radius:50%;
}

.dot-red   { background:#d40000; }
.dot-black { background:#000000; }
.dot-green { background:#00a800; }



/* ===============================
   EXTRA ROADS ONLY (SAFE ADDON)
   =============================== */

#bigEyeRoad,
#smallRoad,
#cockroachRoad {
    margin-bottom: 14px;
}

/* ensure derived roads never affect main ones */
#bigEyeRoad .road-cell,
#smallRoad .road-cell,
#cockroachRoad .road-cell {
    border-radius: 50%;
}


#beadRoad {
    display: grid;
    grid-template-columns: repeat(20, 12px); /* wrap after 20 columns */
    grid-auto-rows: 12px;
    gap: 3px;
    margin-bottom: 12px;
    margin-right: 30px;

    /* ensure it overrides the default .road settings */
    grid-auto-flow: row;
}

/* ===============================
   COCKROACH ROAD (DIAGONAL LINES)
   =============================== */

#cockroachRoad .road-cell {
    background: transparent;     /* remove dot fill */
    border-radius: 0;            /* no circle */
    position: relative;
}

/* diagonal slash */
#cockroachRoad .road-cell::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    transform: translate(-50%, -50%) rotate(45deg);
    background: currentColor;
}

/* colour mapping */
#cockroachRoad .dot-red {
    color: #d40000;
}

#cockroachRoad .dot-black {
    color: #000000;
}